/* =========================================
   1. SHINE EFFECT LOGIC (Cool Hover) – UPDATED with more elements
   ========================================= */
document.addEventListener("mousemove", (e) => {
    // Added .feature-block, .contact-item, .tag to match first page
    const cards = document.querySelectorAll(".step, .service-card, .stat-card, .btn, .auth-container, .feature-block, .contact-item, .tag");
    
    cards.forEach((card) => {
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        // CSS variables set kar rahe hain taaki shine mouse ke saath chale
        card.style.setProperty("--x", `${x}px`);
        card.style.setProperty("--y", `${y}px`);
    });
});

/* =========================================
   2. AUTH MODAL & TABS LOGIC
   ========================================= */

// Modal Open Function (mode = 'login' or 'signup')
function openAuth(mode) {
    const modal = document.getElementById("authModal");
    modal.style.display = "flex"; // Modal show karein
    switchAuthMode(mode); // Sahi tab select karein
    
    // Body scroll band karein
    document.body.style.overflow = "hidden";
}

// Modal Close Function
function closeAuth() {
    document.getElementById("authModal").style.display = "none";
    document.body.style.overflow = "auto"; // Scroll wapis chalu
}

// Click Outside to Close
window.onclick = function(event) {
    let modal = document.getElementById("authModal");
    if (event.target == modal) {
        closeAuth();
    }
}

// Switch between Login and Signup Tabs inside Modal
function switchAuthMode(mode) {
    // Elements fetch karein
    const loginForm = document.getElementById("loginForm");
    const signupForm = document.getElementById("signupForm");
    const tabLogin = document.getElementById("tabLogin");
    const tabSignup = document.getElementById("tabSignup");
    const authTitle = document.getElementById("authTitle");
    const authDesc = document.getElementById("authDesc");

    if (mode === 'login') {
        // Login Mode Show
        loginForm.style.display = "block";
        signupForm.style.display = "none";
        
        tabLogin.classList.add("active");
        tabSignup.classList.remove("active");
        
        authTitle.innerText = "Welcome Back";
        authDesc.innerText = "Manage your subscriptions, view your daily content calendar, and track your growth analytics.";
    } else {
        // Signup Mode Show
        loginForm.style.display = "none";
        signupForm.style.display = "block";
        
        tabLogin.classList.remove("active");
        tabSignup.classList.add("active");
        
        authTitle.innerText = "Join Us Today";
        authDesc.innerText = "Start your 7-day journey. Create an account to setup your dashboard and ad preferences.";
    }
}

/* =========================================
   3. HEADER SCROLL EFFECT
   ========================================= */
window.addEventListener("scroll", function() {
    const header = document.getElementById("main-header");
    if (window.scrollY > 50) {
        header.classList.add("scrolled");
    } else {
        header.classList.remove("scrolled");
    }
});

/* =========================================
   4. PAGE LOADING ANIMATION
   ========================================= */
document.addEventListener("DOMContentLoaded", function() {
    // Scroll lock karein jab tak load ho raha hai
    document.body.classList.add("loading-locked");

    // Overlay animation ke baad hatayein
    setTimeout(() => {
        document.body.classList.remove("loading-locked");
        const overlay = document.getElementById("pageReveal");
        if(overlay) {
            overlay.style.display = 'none'; // DOM se hata dein
        }
    }, 3500); // Animation duration ke hisaab se time
});