/* Custom styles for New Creation Hair Salon */

/* Smooth scroll offset for fixed nav */
section[id] {
    scroll-margin-top: 80px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #d4af37;
}

/* Selection color */
::selection {
    background: rgba(212, 175, 55, 0.3);
    color: #f2e6d9;
}

/* Focus styles */
*:focus-visible {
    outline: 2px solid #d4af37;
    outline-offset: 2px;
}

/* Prevent layout shift on images */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure all text has sufficient contrast */
.text-sand { color: #e8d5c4; }
.text-sand-muted { color: #c4b09a; }
.text-white { color: #ffffff; }
.text-gold-light { color: #d4af37; }
.text-terracotta { color: #c4663a; }
.text-terracotta-dark { color: #a8522e; }
</style>

<sm-file path="script.js">
// New Creation Hair Salon - Interactive Script

document.addEventListener('DOMContentLoaded', function() {
    
    // Mobile menu toggle
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const mobileLinks = document.querySelectorAll('.mobile-link');
    let menuOpen = false;
    
    if (menuBtn && mobileMenu) {
        menuBtn.addEventListener('click', function() {
            menuOpen = !menuOpen;
            mobileMenu.classList.toggle('active', menuOpen);
            this.setAttribute('aria-expanded', menuOpen);
            
            // Change icon based on state
            const svg = this.querySelector('svg');
            if (menuOpen) {
                svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/>';
                svg.setAttribute('aria-label', 'Close menu');
            } else {
                svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/>';
                svg.setAttribute('aria-label', 'Open menu');
            }
        });
        
        // Close menu when clicking a link
        mobileLinks.forEach(function(link) {
            link.addEventListener('click', function() {
                menuOpen = false;
                mobileMenu.classList.remove('active');
                menuBtn.setAttribute('aria-expanded', 'false');
                const svg = menuBtn.querySelector('svg');
                svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/>';
                svg.setAttribute('aria-label', 'Open menu');
            });
        });
        
        // Close menu on escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && menuOpen) {
                menuOpen = false;
                mobileMenu.classList.remove('active');
                menuBtn.setAttribute('aria-expanded', 'false');
                const svg = menuBtn.querySelector('svg');
                svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/>';
                svg.setAttribute('aria-label', 'Open menu');
                menuBtn.focus();
            }
        });
    }
    
    // Scroll reveal animations (progressive enhancement)
    if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
        const revealElements = document.querySelectorAll('.reveal');
        
        const revealObserver = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    revealObserver.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        });
        
        revealElements.forEach(function(el) {
            revealObserver.observe(el);
        });
    }
    
    // Contact form handling
    const contactForm = document.getElementById('contactForm');
    const successMessage = document.getElementById('successMessage');
    
    if (contactForm && successMessage) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Simulate form submission
            const submitBtn = contactForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.textContent;
            submitBtn.textContent = 'Sending...';
            submitBtn.disabled = true;
            
            setTimeout(function() {
                contactForm.reset();
                successMessage.classList.remove('hidden');
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
                
                // Hide success message after 5 seconds
                setTimeout(function() {
                    successMessage.classList.add('hidden');
                }, 5000);
            }, 1000);
        });
    }
    
    // Navbar background on scroll
    const nav = document.querySelector('nav');
    let lastScroll = 0;
    
    window.addEventListener('scroll', function() {
        const currentScroll = window.pageYOffset;
        
        if (currentScroll > 100) {
            nav.classList.add('shadow-lg');
            nav.style.boxShadow = '0 4px 30px rgba(0,0,0,0.5)';
        } else {
            nav.style.boxShadow = 'none';
        }
        
        lastScroll = currentScroll;
    }, { passive: true });
    
    // 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();
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    
});