/* ── Custom styles for Metropolitan Home & Repair ── */

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

/* Gold gradient text utility */
.text-gold-gradient {
    background: linear-gradient(135deg, #D4AD42 0%, #C8A24E 50%, #B8892E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0A1628;
}
::-webkit-scrollbar-thumb {
    background: #1D3558;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #C8A24E;
}

/* Selection color */
::selection {
    background: rgba(200, 162, 78, 0.3);
    color: #F5F0E6;
}

/* ── Scroll reveal animations (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .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; }
    .reveal-delay-5 { transition-delay: 0.5s; }
}

/* ── Navbar glass effect ── */
.navbar-scrolled {
    background: rgba(5, 13, 24, 0.92) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(200, 162, 78, 0.1) !important;
}

/* ── Mobile menu transitions ── */
.mobile-menu-open {
    opacity: 1 !important;
    pointer-events: all !important;
}

/* ── Card hover glow ── */
.service-card:hover {
    box-shadow: 0 0 40px rgba(200, 162, 78, 0.08), 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ── Input autofill styling for dark theme ── */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #0A1628 inset !important;
    -webkit-text-fill-color: #F5F0E6 !important;
}

/* ── Floating card animations ── */
@keyframes float-slow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
@keyframes float-medium {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}
@keyframes float-fast {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: no-preference) {
    .float-slow { animation: float-slow 6s ease-in-out infinite; }
    .float-medium { animation: float-medium 4.5s ease-in-out infinite; }
    .float-fast { animation: float-fast 3.5s ease-in-out infinite; }
}

/* ── Gold shimmer on buttons ── */
.btn-gold {
    position: relative;
    overflow: hidden;
}
.btn-gold::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s ease;
}
.btn-gold:hover::after {
    left: 100%;
}
</style>
<sm-file path="script.js">
(function () {
    'use strict';

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

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

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

    // ── Mobile menu ──
    const menuBtn = document.getElementById('menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    const menuIconOpen = document.getElementById('menu-icon-open');
    const menuIconClose = document.getElementById('menu-icon-close');
    let menuOpen = false;

    function toggleMenu() {
        menuOpen = !menuOpen;
        if (menuOpen) {
            mobileMenu.classList.remove('opacity-0', 'pointer-events-none');
            mobileMenu.classList.add('mobile-menu-open');
            menuIconOpen.classList.add('hidden');
            menuIconClose.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        } else {
            mobileMenu.classList.add('opacity-0', 'pointer-events-none');
            mobileMenu.classList.remove('mobile-menu-open');
            menuIconOpen.classList.remove('hidden');
            menuIconClose.classList.add('hidden');
            document.body.style.overflow = '';
        }
    }

    menuBtn.addEventListener('click', toggleMenu);

    // Close mobile menu on link click
    document.querySelectorAll('.mobile-link').forEach(function (link) {
        link.addEventListener('click', function () {
            if (menuOpen) toggleMenu();
        });
    });

    // ── Back to top button ──
    const backToTop = document.getElementById('back-to-top');

    function handleBackToTop() {
        if (window.pageYOffset > 600) {
            backToTop.classList.remove('opacity-0', 'pointer-events-none');
            backToTop.classList.add('opacity-100');
        } else {
            backToTop.classList.add('opacity-0', 'pointer-events-none');
            backToTop.classList.remove('opacity-100');
        }
    }

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

    // ── Scroll reveal (progressive enhancement) ──
    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');
                }
            });
        }

        // Use IntersectionObserver for better performance
        if ('IntersectionObserver' in window) {
            const observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('revealed');
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            });

            revealElements.forEach(function (el) {
                observer.observe(el);
            });
        } else {
            window.addEventListener('scroll', revealOnScroll, { passive: true });
            revealOnScroll();
        }
    }

    // ── Contact form ──
    const form = document.getElementById('contact-form');
    const formSuccess = document.getElementById('form-success');

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

            // Simulate form submission
            var submitBtn = form.querySelector('button[type="submit"]');
            var originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg> Sending...';
            submitBtn.disabled = true;

            setTimeout(function () {
                form.style.display = 'none';
                formSuccess.classList.remove('hidden');
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }, 1200);
        });
    }

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

            var target = document.querySelector(targetId);
            if (target) {
                e.preventDefault();
                var offsetTop = target.getBoundingClientRect().top + window.pageYOffset - 80;
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });

    // ── Counter animation for hero stats ──
    function animateCounter(element, target, suffix) {
        suffix = suffix || '';
        var duration = 2000;
        var start = 0;
        var startTime = null;

        function step(timestamp) {
            if (!startTime) startTime = timestamp;
            var progress = Math.min((timestamp - startTime) / duration, 1);
            // Ease out cubic
            var eased = 1 - Math.pow(1 - progress, 3);
            var current = Math.floor(eased * target);
            element.textContent = current.toLocaleString() + suffix;
            if (progress < 1) {
                requestAnimationFrame(step);
            } else {
                element.textContent = target.toLocaleString() + suffix;
            }
        }

        requestAnimationFrame(step);
    }

    // Animate stat cards when they come into view
    if (!prefersReducedMotion && 'IntersectionObserver' in window) {
        var statCards = document.querySelectorAll('[data-stat-target]');
        var statsAnimated = false;

        var statsObserver = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting && !statsAnimated) {
                    statsAnimated = true;
                    statCards.forEach(function (card) {
                        var target = parseInt(card.getAttribute('data-stat-target'), 10);
                        var suffix = card.getAttribute('data-stat-suffix') || '';
                        var el = card.querySelector('.stat-number');
                        if (el && target) {
                            animateCounter(el, target, suffix);
                        }
                    });
                }
            });
        }, { threshold: 0.5 });

        var heroStats = document.querySelector('.hero-stats');
        if (heroStats) {
            statsObserver.observe(heroStats);
        }
    }
})();