// ハンバーガーメニューの開閉機能
document.addEventListener('DOMContentLoaded', function() {
    const hamburgerBtn = document.querySelector('.hamburger-btn');
    const headerNav = document.querySelector('.header-nav');
    const menuOverlay = document.querySelector('.menu-overlay');

    // ハンバーガーボタンクリック時
    hamburgerBtn.addEventListener('click', function() {
        toggleMenu();
    });

    // オーバーレイクリック時（メニューを閉じる）
    menuOverlay.addEventListener('click', function() {
        closeMenu();
    });

    // メニューの開閉を切り替える関数
    function toggleMenu() {
        hamburgerBtn.classList.toggle('active');
        headerNav.classList.toggle('active');
        menuOverlay.classList.toggle('active');
        
        // aria-labelの更新
        if (hamburgerBtn.classList.contains('active')) {
            hamburgerBtn.setAttribute('aria-label', 'メニューを閉じる');
        } else {
            hamburgerBtn.setAttribute('aria-label', 'メニューを開く');
        }
    }

    // 遅延読み込み（IntersectionObserver）
    const lazyImages = document.querySelectorAll('img.lazy[data-src]');
    if (lazyImages.length) {
        const lazyIo = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (!entry.isIntersecting) return;
                const img = entry.target;
                const realSrc = img.getAttribute('data-src');
                if (realSrc) {
                    img.src = realSrc;
                    img.addEventListener('load', () => {
                        img.classList.add('is-loaded');
                        img.removeAttribute('data-src');
                        img.classList.remove('lazy');
                    }, { once: true });
                }
                observer.unobserve(img);
            });
        }, { root: null, rootMargin: '100px 0px', threshold: 0 });

        lazyImages.forEach(img => lazyIo.observe(img));
    }

    // メニューを閉じる関数
    function closeMenu() {
        hamburgerBtn.classList.remove('active');
        headerNav.classList.remove('active');
        menuOverlay.classList.remove('active');
        hamburgerBtn.setAttribute('aria-label', 'メニューを開く');
    }

    // ESCキーでメニューを閉じる
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && headerNav.classList.contains('active')) {
            closeMenu();
        }
    });

    // アンカーリンクのスムーススクロール
    document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
        anchor.addEventListener('click', function(e) {
            const targetId = this.getAttribute('href');
            if (targetId === '#') {
                // ページトップ
                e.preventDefault();
                window.scrollTo({ top: 0, behavior: 'smooth' });
                // ハッシュをURLに残さない
                history.replaceState(null, '', window.location.pathname + window.location.search);
                return;
            }
            const targetEl = document.querySelector(targetId);
            if (targetEl) {
                e.preventDefault();
                const rect = targetEl.getBoundingClientRect();
                const offsetTop = window.pageYOffset + rect.top;
                window.scrollTo({ top: offsetTop, behavior: 'smooth' });
                // ハッシュをURLに残さない
                history.replaceState(null, '', window.location.pathname + window.location.search);
            }
        });
    });

    // ページトップボタンの表示制御
    const pagetop = document.querySelector('.pagetop');
    let lastScrollTop = 0;

    function togglePagetop() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        if (scrollTop > 100) {
            // スクロール100px以上で表示
            pagetop.classList.add('show');
        } else {
            // 最上部では非表示
            pagetop.classList.remove('show');
        }
        
        lastScrollTop = scrollTop;
    }

    // スクロールイベントの監視
    window.addEventListener('scroll', togglePagetop);
    
    // 初期状態で非表示にする
    togglePagetop();

    // スクロール連動フェードイン（1回だけ表示）
    const fadeEls = document.querySelectorAll('.fadein');
    if (fadeEls.length) {
        const io = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('is-visible');
                    observer.unobserve(entry.target);
                }
            });
        }, {
            root: null,
            rootMargin: '0px',
            threshold: 0 // 上辺が入ったら反応（表示領域に入った瞬間）
        });

        fadeEls.forEach(el => io.observe(el));
    }

    // タブ切り替え
    const tabBtns = document.querySelectorAll('.tab__btn');
    const tabPanels = document.querySelectorAll('.tab__panel');
    if (tabBtns.length && tabPanels.length) {
        tabBtns.forEach((btn, index) => {
            btn.addEventListener('click', () => {
                // ボタンのactive切り替え
                tabBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');

                // パネルのactive切り替え
                tabPanels.forEach((panel, i) => {
                    if (i === index) {
                        panel.classList.add('active');
                        // タブ表示直後に、開いているFAQの高さを再計算
                        panel.querySelectorAll('.faq__item.open .faq__item__cont').forEach(cont => {
                            cont.style.maxHeight = cont.scrollHeight + 'px';
                        });
                    } else {
                        panel.classList.remove('active');
                    }
                });
            });
        });
    }
    // FAQ アコーディオン
    const faqItems = document.querySelectorAll('.faq__item');
    if (faqItems.length) {
        faqItems.forEach(item => {
            const head = item.querySelector('.faq__item__head');
            const cont = item.querySelector('.faq__item__cont');
            if (!head || !cont) return;

            // 初期状態: .open があれば展開しておく
            const isVisible = cont.offsetParent !== null;
            if (item.classList.contains('open') && isVisible) {
                cont.style.maxHeight = cont.scrollHeight + 'px';
            } else {
                cont.style.maxHeight = '0px';
            }

            head.addEventListener('click', () => {
                const willOpen = !item.classList.contains('open');
                item.classList.toggle('open');
                if (willOpen) {
                    cont.style.maxHeight = cont.scrollHeight + 'px';
                } else {
                    cont.style.maxHeight = '0px';
                }
            });
        });

        // リサイズ時: 開いているものは高さを再計算
        window.addEventListener('resize', () => {
            document.querySelectorAll('.faq__item.open .faq__item__cont').forEach(cont => {
                cont.style.maxHeight = cont.scrollHeight + 'px';
            });
        });

        // ページ完全読込後にも再計算（画像等で高さが変わる場合に対応）
        window.addEventListener('load', () => {
            document.querySelectorAll('.tab__panel.active .faq__item.open .faq__item__cont').forEach(cont => {
                cont.style.maxHeight = cont.scrollHeight + 'px';
            });
        });
    }

    // 画像モーダル
    const modal = document.querySelector('.modal');
    const modalImg = document.querySelector('.modal__image');
    const backdrop = document.querySelector('.modal__backdrop');
    const triggers = document.querySelectorAll('.modal-trigger');

    function openModal(src, alt) {
        modalImg.src = src;
        modalImg.alt = alt || '';
        modal.classList.add('is-open');
        modal.setAttribute('aria-hidden', 'false');
        modal.setAttribute('aria-modal', 'true');
        document.body.style.overflow = 'hidden';
    }

    function closeModal() {
        modal.classList.remove('is-open');
        modal.setAttribute('aria-hidden', 'true');
        modal.setAttribute('aria-modal', 'false');
        document.body.style.overflow = '';
        setTimeout(() => { modalImg.src = ''; }, 250);
    }

    if (triggers.length && modal && modalImg && backdrop) {
        triggers.forEach(img => {
            img.addEventListener('click', () => openModal(img.src, img.alt));
        });
        backdrop.addEventListener('click', closeModal);
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && modal.classList.contains('is-open')) {
                closeModal();
            }
        });
    }

    // ファーストビュー: 画像カルーセル
    const carousel = document.querySelector('.firstview .carousel');
    if (carousel) {
        const track = carousel.querySelector('.carousel-track');
        const slides = Array.from(carousel.querySelectorAll('.carousel-slide'));
        const prevBtn = carousel.querySelector('.carousel-btn.prev');
        const nextBtn = carousel.querySelector('.carousel-btn.next');
        const dotsContainer = carousel.querySelector('.carousel-dots');

        let currentIndex = 0;
        let autoplayTimer = null;
        const AUTOPLAY_MS = 5000;

        // ドット生成
        slides.forEach((_, i) => {
            const dot = document.createElement('button');
            dot.setAttribute('role', 'tab');
            dot.setAttribute('aria-label', `${i + 1}枚目`);
            dot.setAttribute('aria-selected', i === 0 ? 'true' : 'false');
            dot.addEventListener('click', () => goTo(i, true));
            dotsContainer.appendChild(dot);
        });
        const dots = Array.from(dotsContainer.querySelectorAll('button'));

        function updateUI() {
            const offset = -currentIndex * 100;
            track.style.transform = `translateX(${offset}%)`;
            dots.forEach((d, i) => d.setAttribute('aria-selected', i === currentIndex ? 'true' : 'false'));
        }

        function goTo(index, userInitiated = false) {
            if (index < 0) index = slides.length - 1;
            if (index >= slides.length) index = 0;
            currentIndex = index;
            updateUI();
            if (userInitiated) restartAutoplay();
        }

        function next() { goTo(currentIndex + 1); }
        function prev() { goTo(currentIndex - 1); }

        function startAutoplay() {
            stopAutoplay();
            autoplayTimer = setInterval(next, AUTOPLAY_MS);
        }
        function stopAutoplay() {
            if (autoplayTimer) {
                clearInterval(autoplayTimer);
                autoplayTimer = null;
            }
        }
        function restartAutoplay() {
            stopAutoplay();
            startAutoplay();
        }

        nextBtn.addEventListener('click', () => goTo(currentIndex + 1, true));
        prevBtn.addEventListener('click', () => goTo(currentIndex - 1, true));

        // レスポンシブ画像の読み込み完了後に高さが揺れないように
        window.addEventListener('load', updateUI);

        // オートプレイ開始（フォーカス・ホバーで一時停止）
        startAutoplay();
        carousel.addEventListener('mouseenter', stopAutoplay);
        carousel.addEventListener('mouseleave', startAutoplay);
        carousel.addEventListener('focusin', stopAutoplay);
        carousel.addEventListener('focusout', startAutoplay);
    }
});
