document.addEventListener('DOMContentLoaded', () => {

    // --- Hero Carousel Logic ---
    const heroTrack = document.querySelector('.hero-track');
    const heroSlides = document.querySelectorAll('.hero-slide');
    const preventBtn = document.querySelector('.slider-arrow.prev');
    const nextBtn = document.querySelector('.slider-arrow.next');
    const dots = document.querySelectorAll('.dot');

    let currentSlide = 0;
    const totalSlides = heroSlides.length;
    let autoplayInterval;

    function updateCarousel() {
        heroTrack.style.transform = `translateX(-${currentSlide * 100}%)`;
        dots.forEach((dot, index) => {
            dot.classList.toggle('active', index === currentSlide);
        });
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % totalSlides;
        updateCarousel();
    }

    function prevSlide() {
        currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
        updateCarousel();
    }

    // Controls
    if(nextBtn) nextBtn.addEventListener('click', () => {
        nextSlide();
        resetAutoplay();
    });

    if(preventBtn) preventBtn.addEventListener('click', () => {
        prevSlide();
        resetAutoplay();
    });

    dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            currentSlide = index;
            updateCarousel();
            resetAutoplay();
        });
    });

    // Autoplay
    function startAutoplay() {
        autoplayInterval = setInterval(nextSlide, 6000);
    }

    function resetAutoplay() {
        clearInterval(autoplayInterval);
        startAutoplay();
    }

    // Hover pause
    const heroSlider = document.querySelector('.hero-slider');
    if (heroSlider) {
        heroSlider.addEventListener('mouseenter', () => clearInterval(autoplayInterval));
        heroSlider.addEventListener('mouseleave', startAutoplay);
        startAutoplay();
    }


    // --- Header Scroll Effect ---
    const header = document.querySelector('.site-header');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    });


    // --- Filter Tabs Logic (Client-side simulation) ---
    const tabBtns = document.querySelectorAll('.tab-btn');
    const productGrid = document.querySelector('.product-grid-container');
    const productItems = document.querySelectorAll('.product-item');

    tabBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            // Active State
            tabBtns.forEach(b => {
                b.classList.remove('active');
                b.setAttribute('aria-selected', 'false');
            });
            btn.classList.add('active');
            btn.setAttribute('aria-selected', 'true');

            // Filter Logic
            const filter = btn.dataset.filter;

            // Animation: Fade out
            productGrid.style.opacity = '0';
            productGrid.style.transform = 'translateY(10px)';
            productGrid.style.transition = 'all 0.2s';

            setTimeout(() => {
                productItems.forEach(item => {
                    if (filter === 'all' || item.dataset.category === filter) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });

                // Fade in
                productGrid.style.opacity = '1';
                productGrid.style.transform = 'translateY(0)';
            }, 200);
        });
    });

    // --- Mobile Menu Toggle ---
    const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
    // In a real implementation, we would toggle a drawer here.
    // For this prototype, we'll just log it or alert.
    if(mobileMenuBtn) {
        mobileMenuBtn.addEventListener('click', () => {
             alert('모바일 메뉴 드로어 열림 (구현 예정)');
        });
    }
});
