/* Custom styles for Salon Sonder */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Navbar scroll state */
#navbar.scrolled {
    background: rgba(255, 255, 255, 0.97);
    backdrop-blur-lg;
    box-shadow: 0 1px 20px rgba(74, 25, 66, 0.08);
}

#navbar.scrolled .font-serif {
    color: #4A1942;
}

/* Hero section - ensure content is visible immediately */
#top {
    background-color: #4A1942;
}

#top h1,
#top p,
#top .inline-flex,
#top .font-serif,
#top .text-plum-200,
#top .text-plum-300 {
    opacity: 1;
    animation: none;
}

/* Service cards */
.service-card {
    transform: translateY(0);
    transition: transform 0.4s ease, background-color 0.5s ease, box-shadow 0.4s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(74, 25, 66, 0.2);
}

/* Review cards */
.review-card {
    transform: translateY(0);
    transition: transform 0.4s ease, background-color 0.3s ease;
}

.review-card:hover {
    transform: translateY(-4px);
}

/* Gallery images */
.columns-2,
.columns-3 {
    column-gap: 1rem;
}

/* Mobile menu transitions */
#mobileMenu {
    animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll reveal animations (progressive enhancement) */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }
}

/* Ensure reduced motion doesn't break the site */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #F5EEF7;
}

::-webkit-scrollbar-thumb {
    background: #D4B4D6;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #BE8FC2;
}

/* Focus visible styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #D4A053;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Mobile menu link hover */
.mobile-link {
    display: block;
    padding: 0.5rem 0;
    border-bottom: 1px solid #E9D8EB;
}

.mobile-link:last-child {
    border-bottom: none;
}

/* Input autofill styling */
input:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #F5EEF7 inset !important;
    box-shadow: 0 0 0 30px #F5EEF7 inset !important;
}
</style>

<sm-file path="script.js">
(function () {
    'use strict';

    // --- Navbar scroll effect ---
    const navbar = document.getElementById('navbar');
    let lastScroll = 0;

    function handleNavbarScroll() {
        const currentScroll = window.pageYOffset;
        if (currentScroll > 60) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
        lastScroll = currentScroll;
    }

    window.addEventListener('scroll', handleNavbarScroll, { passive: true });

    // --- Mobile menu ---
    const menuToggle = document.getElementById('menuToggle');
    const mobileMenu = document.getElementById('mobileMenu');
    const menuIconOpen = document.getElementById('menuIconOpen');
    const menuIconClose = document.getElementById('menuIconClose');
    const mobileLinks = document.querySelectorAll('.mobile-link');

    function toggleMenu() {
        const isOpen = !mobileMenu.classList.contains('hidden');
        mobileMenu.classList.toggle('hidden');
        menuIconOpen.classList.toggle('hidden');
        menuIconClose.classList.toggle('hidden');
        menuToggle.setAttribute('aria-expanded', !isOpen);
    }

    menuToggle.addEventListener('click', toggleMenu);

    mobileLinks.forEach(function (link) {
        link.addEventListener('click', function () {
            mobileMenu.classList.add('hidden');
            menuIconOpen.classList.remove('hidden');
            menuIconClose.classList.add('hidden');
        });
    });

    // Close mobile menu on escape
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && !mobileMenu.classList.contains('hidden')) {
            toggleMenu();
        }
    });

    // --- Scroll reveal (progressive enhancement) ---
    // Only enable if user hasn't requested reduced motion
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    if (!prefersReducedMotion) {
        const revealElements = document.querySelectorAll('.reveal');

        function revealOnScroll() {
            const windowHeight = window.innerHeight;
            revealElements.forEach(function (el) {
                const elementTop = el.getBoundingClientRect().top;
                if (elementTop < windowHeight - 80) {
                    el.classList.add('revealed');
                }
            });
        }

        // Add reveal class via JS to ensure graceful degradation
        document.querySelectorAll(
            '#services .service-card, #about .space-y-4 > div, #about .space-y-6 > div, #gallery .rounded-2xl, #reviews .review-card'
        ).forEach(function (el, i) {
            el.classList.add('reveal');
            el.style.transitionDelay = (i % 3) * 0.1 + 's';
        });

        window.addEventListener('scroll', revealOnScroll, { passive: true });
        // Check on load in case elements are already in view
        revealOnScroll();
    } else {
        // If reduced motion is preferred, ensure everything is visible
        document.querySelectorAll('.reveal').forEach(function (el) {
            el.classList.add('revealed');
        });
    }

    // --- Contact form ---
    const contactForm = document.getElementById('contactForm');
    const formSuccess = document.getElementById('formSuccess');

    if (contactForm) {
        contactForm.addEventListener('submit', function (e) {
            e.preventDefault();

            // Simple validation
            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();

            if (!name || !email) {
                return;
            }

            // Show success message
            contactForm.style.display = 'none';
            formSuccess.classList.remove('hidden');
            formSuccess.style.animation = 'fadeIn 0.5s ease forwards';
        });
    }

    // Add fadeIn keyframe dynamically
    const style = document.createElement('style');
    style.textContent = '@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }';
    document.head.appendChild(style);

    // --- Smooth scroll for anchor links ---
    document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
        anchor.addEventListener('click', function (e) {
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;

            const target = document.querySelector(targetId);
            if (target) {
                e.preventDefault();
                const navHeight = navbar.offsetHeight;
                const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight - 20;

                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });
})();