(() => {
  'use strict';

  const root = document.documentElement;
  const page = document.body;
  const languageButtons = [...document.querySelectorAll('[data-fs7301-language]')];

  function preferredLanguage() {
    const query = new URLSearchParams(location.search).get('lang');
    if (query === 'en' || query === 'zh') return query;
    const stored = localStorage.getItem('dbc-site-language');
    if (stored === 'en' || stored === 'zh') return stored;
    if (root.dataset.lang === 'en') return 'en';
    return 'zh';
  }

  function setLanguage(language, persist = true, announce = true) {
    const lang = language === 'en' ? 'en' : 'zh';
    root.dataset.lang = lang;
    root.lang = lang === 'en' ? 'en' : 'zh-CN';
    page.dataset.language = lang;

    document.querySelectorAll('[data-zh][data-en]').forEach((node) => {
      const value = node.dataset[lang];
      if (typeof value === 'string') node.textContent = value;
    });
    document.querySelectorAll('[data-html-zh][data-html-en]').forEach((node) => {
      const value = node.dataset[`html${lang === 'zh' ? 'Zh' : 'En'}`];
      if (typeof value === 'string') node.innerHTML = value;
    });
    document.querySelectorAll('[data-alt-zh][data-alt-en]').forEach((node) => {
      node.alt = node.dataset[`alt${lang === 'zh' ? 'Zh' : 'En'}`];
    });
    document.querySelectorAll('[data-label-zh][data-label-en]').forEach((node) => {
      node.setAttribute('aria-label', node.dataset[`label${lang === 'zh' ? 'Zh' : 'En'}`]);
    });

    const title = page.dataset[`title${lang === 'zh' ? 'Zh' : 'En'}`];
    const description = page.dataset[`description${lang === 'zh' ? 'Zh' : 'En'}`];
    if (title) document.title = title;
    const meta = document.querySelector('meta[name="description"]');
    if (meta && description) meta.content = description;

    languageButtons.forEach((button) => {
      const active = button.dataset.fs7301Language === lang;
      button.setAttribute('aria-pressed', String(active));
      button.classList.toggle('is-active', active);
    });
    if (persist) localStorage.setItem('dbc-site-language', lang);
    if (announce) document.dispatchEvent(new CustomEvent('dbc:languagechange', { detail: { language: lang } }));
  }

  languageButtons.forEach((button) => {
    button.addEventListener('click', () => setLanguage(button.dataset.fs7301Language));
  });

  document.addEventListener('dbc:languagechange', (event) => {
    setLanguage(event.detail?.language === 'en' ? 'en' : 'zh', false, false);
  });

  const menuButton = document.querySelector('[data-fs7301-menu-button]');
  const menu = document.querySelector('[data-fs7301-menu]');
  if (menuButton && menu) {
    menuButton.addEventListener('click', () => {
      const open = menuButton.getAttribute('aria-expanded') !== 'true';
      menuButton.setAttribute('aria-expanded', String(open));
      menu.dataset.open = String(open);
    });
    menu.addEventListener('click', (event) => {
      if (event.target.closest('a')) {
        menuButton.setAttribute('aria-expanded', 'false');
        menu.dataset.open = 'false';
      }
    });
  }

  const revealObserver = 'IntersectionObserver' in window
    ? new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          entry.target.classList.add('is-visible');
          revealObserver.unobserve(entry.target);
        });
      }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 })
    : null;

  document.querySelectorAll('[data-fs7301-reveal]').forEach((element) => {
    if (revealObserver && !matchMedia('(prefers-reduced-motion: reduce)').matches) {
      revealObserver.observe(element);
    } else {
      element.classList.add('is-visible');
    }
  });

  setLanguage(preferredLanguage(), false, false);
})();