import { localeCatalog, localeMessages } from './site-locales.mjs';

const root = document.documentElement;
let activeMessages = localeMessages.en;

const HERO_MOBILE_MAX = 768;
const HERO_TABLET_MAX = 1023;
const HERO_DESKTOP_MIN = 1024;
const MOCKUP_SCREEN_MARGIN_RIGHT = 50;
const MOCKUP_SCREEN_MARGIN_RIGHT_TABLET = 15;
const MOCKUP_ARTBOARD_RATIO = 1.18;
/* Tablet MacBook X tune @ 1001px, scale 1.2 */
const HERO_TABLET_MOCKUP_X_CORRECTION = -9;

const HERO_MOBILE_MOCKUP_TUNE_SCALE = 0.99;
/* Mobile MacBook X tune @ 490px, right-anchored full-bleed stage */
const HERO_MOBILE_MOCKUP_X_CORRECTION = -32;

const HERO_ARTBOARD = { width: 6111, height: 3239 };

/* Figma @ 6111×3239 — menubar anchor 130 top / 150 right; scale 0.94 (desktop) / 0.82 (mobile) */
const HERO_MENUBAR_BASE = {
  figmaTop: 130,
  figmaRight: 150,
  scale: 0.94,
  mobileScale: 0.82,
  iconScale: 1.28,
};

/* Visual correction vs computed base (tune @ 1920 → 5.25%, 3.8%, scale ×1.55) */
const HERO_MENUBAR_CORRECTION = {
  top: 5.25 / ((HERO_MENUBAR_BASE.figmaTop / HERO_ARTBOARD.height) * 100),
  right: 3.8 / ((HERO_MENUBAR_BASE.figmaRight / HERO_ARTBOARD.width) * 100),
  scale: 1.55,
};

function getMenubarComputed() {
  const topPx = HERO_MENUBAR_BASE.figmaTop * HERO_MENUBAR_CORRECTION.top;
  const rightPx = HERO_MENUBAR_BASE.figmaRight * HERO_MENUBAR_CORRECTION.right;
  const scale = HERO_MENUBAR_BASE.scale * HERO_MENUBAR_CORRECTION.scale;
  const mobileScale = HERO_MENUBAR_BASE.mobileScale * HERO_MENUBAR_CORRECTION.scale;
  return {
    topPx,
    rightPx,
    anchorTop: `${artboardPxToTopPercent(topPx).toFixed(2)}%`,
    marginRight: `${artboardPxToRightPercent(rightPx).toFixed(2)}%`,
    scale: Math.round(scale * 1000) / 1000,
    mobileScale: Math.round(mobileScale * 1000) / 1000,
  };
}

const HERO_FIGMA_SCREEN = { paddingTop: 125, paddingRight: 141 };

const HERO_FIGMA_PANEL = { gapBelowMenubar: 20, insetBeyondPaddingRight: 30 };

const HERO_PANEL_WIDTH_ON_SCREEN = 0.191;

function getMenubarRenderedHeightPx() {
  const emPx = 0.52 * (HERO_ARTBOARD.width / 100);
  return emPx * HERO_MENUBAR_BASE.iconScale * getMenubarComputed().scale;
}

function getPanelBasePx() {
  const menubar = getMenubarComputed();
  const menubarHeight = (menubar.topPx - HERO_FIGMA_SCREEN.paddingTop) + getMenubarRenderedHeightPx();
  return {
    topPx: HERO_FIGMA_SCREEN.paddingTop + menubarHeight + HERO_FIGMA_PANEL.gapBelowMenubar,
    rightPx: HERO_FIGMA_SCREEN.paddingRight + HERO_FIGMA_PANEL.insetBeyondPaddingRight,
  };
}

/* SVG inner-screen geometry (panel width still % of inner screen) */
const HERO_SCREEN_GEOMETRY = {
  top: 124.92 / 3239,
  width: (5970.48 - 140.89) / 6111,
  height: (3239 - 124.92) / 3239,
  rightInset: (6111 - 5970.48) / 6111,
};

function artboardPxToTopPercent(px) {
  return (px / HERO_ARTBOARD.height) * 100;
}

function artboardPxToRightPercent(px) {
  return (px / HERO_ARTBOARD.width) * 100;
}

const HERO_PANEL_BASE = { popoverScale: 0.91, mobilePopoverScale: 1.01 };

/* Visual correction vs computed base (tune @ 1920 → 8.5%, 3.7%, scale 0.85) */
const HERO_PANEL_CORRECTION = (() => {
  const base = getPanelBasePx();
  return {
    top: 8.5 / artboardPxToTopPercent(base.topPx),
    right: 3.7 / artboardPxToRightPercent(base.rightPx),
    scale: 0.85 / HERO_PANEL_BASE.popoverScale,
  };
})();

/* Tablet-only correction (tune @ 1020 → top 9.5%, scale 1.35) */
const HERO_PANEL_TABLET_CORRECTION = (() => {
  const base = getPanelBasePx();
  return {
    top: 9.5 / artboardPxToTopPercent(base.topPx),
    scale: 1.35,
  };
})();

function getPanelComputed() {
  const base = getPanelBasePx();
  const topPx = base.topPx * HERO_PANEL_CORRECTION.top;
  const rightPx = base.rightPx * HERO_PANEL_CORRECTION.right;
  const scale = Math.round(HERO_PANEL_BASE.popoverScale * HERO_PANEL_CORRECTION.scale * 1000) / 1000;
  const mobileScale = Math.round(HERO_PANEL_BASE.mobilePopoverScale * HERO_PANEL_CORRECTION.scale * 1000) / 1000;
  return {
    topPx,
    rightPx,
    panelTop: `${artboardPxToTopPercent(topPx).toFixed(2)}%`,
    panelMarginRight: `${artboardPxToRightPercent(rightPx).toFixed(2)}%`,
    panelWidth: `${(HERO_PANEL_WIDTH_ON_SCREEN * HERO_SCREEN_GEOMETRY.width * 100).toFixed(2)}%`,
    scale,
    mobileScale,
  };
}

/* Mobile-only correction (tune @ 490 → top/right/scale; @ 444 → width 20%) */
const HERO_PANEL_MOBILE_CORRECTION = (() => {
  const panel = getPanelComputed();
  return {
    top: 9.15 / parseFloat(panel.panelTop),
    right: 6 / parseFloat(panel.panelMarginRight),
    width: 20 / parseFloat(panel.panelWidth),
    scale: 1.39 / panel.mobileScale,
  };
})();

function getMobilePanelComputed() {
  const base = getPanelBasePx();
  const panel = getPanelComputed();
  const topPx = base.topPx * HERO_PANEL_MOBILE_CORRECTION.top;
  return {
    panelTop: `${artboardPxToTopPercent(topPx).toFixed(2)}%`,
    panelMarginRight: `${(parseFloat(panel.panelMarginRight) * HERO_PANEL_MOBILE_CORRECTION.right).toFixed(2)}%`,
    panelWidth: `${(parseFloat(panel.panelWidth) * HERO_PANEL_MOBILE_CORRECTION.width).toFixed(2)}%`,
    scale: Math.round(panel.mobileScale * HERO_PANEL_MOBILE_CORRECTION.scale * 1000) / 1000,
  };
}

function getTabletPanelComputed() {
  const base = getPanelBasePx();
  const panel = getPanelComputed();
  const topPx = base.topPx * HERO_PANEL_TABLET_CORRECTION.top;
  return {
    panelTop: `${artboardPxToTopPercent(topPx).toFixed(2)}%`,
    panelMarginRight: panel.panelMarginRight,
    panelWidth: panel.panelWidth,
    scale: HERO_PANEL_TABLET_CORRECTION.scale,
  };
}

function getHudDefaultsFromGeometry() {
  const menubar = getMenubarComputed();
  const panel = getPanelComputed();
  const tabletPanel = getTabletPanelComputed();
  const mobilePanel = getMobilePanelComputed();
  return {
    '--hud-anchor-top': menubar.anchorTop,
    '--hud-margin-right': menubar.marginRight,
    '--menubar-scale': String(menubar.scale),
    '--mobile-hud-anchor-top': menubar.anchorTop,
    '--mobile-hud-margin-right': menubar.marginRight,
    '--mobile-menubar-scale': String(menubar.mobileScale),
    '--hud-panel-top': panel.panelTop,
    '--hud-panel-margin-right': panel.panelMarginRight,
    '--hud-panel-width': panel.panelWidth,
    '--popover-scale': String(panel.scale),
    '--tablet-hud-panel-top': tabletPanel.panelTop,
    '--tablet-hud-panel-margin-right': tabletPanel.panelMarginRight,
    '--tablet-hud-panel-width': tabletPanel.panelWidth,
    '--tablet-popover-scale': String(tabletPanel.scale),
    '--mobile-hud-panel-top': mobilePanel.panelTop,
    '--mobile-hud-panel-margin-right': mobilePanel.panelMarginRight,
    '--mobile-hud-panel-width': mobilePanel.panelWidth,
    '--mobile-popover-scale': String(mobilePanel.scale),
  };
}

const HERO_DESKTOP_ANCHOR = {
  width: 1920,
  fluidMax: 1.22,
  tabletTuneWidth: 1022,
  tabletFluidMax: 1.18,
  mockupY: 10,
  mockupScale: 1.15,
  tabletMockupScale: 1.2,
};

const HERO_LAYOUT_VARS = ['--mockup-x', '--mockup-y', '--tablet-mockup-x', '--tablet-mockup-stage-height'];

function readRootPx(name, fallback) {
  const raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
  if (!raw) return fallback;
  if (raw.endsWith('rem')) {
    const rootFont = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
    const rem = Number.parseFloat(raw);
    return Number.isFinite(rem) && Number.isFinite(rootFont) ? rem * rootFont : fallback;
  }
  const value = Number.parseFloat(raw);
  return Number.isFinite(value) ? value : fallback;
}

function computeTabletStageHeight(width) {
  const headerPx = readRootPx('--header-height', 64);
  const tuneWidth = HERO_DESKTOP_ANCHOR.tabletTuneWidth;
  const baseWidth = getMockupBaseWidth(width, tuneWidth);
  const artboardHeight = baseWidth * (3239 / 6111);
  const scale = getMockupEffectiveScale(width, { tablet: true });
  const scaledHeight = artboardHeight * scale;
  const mockupY = readRootNumber('--tablet-mockup-y', 13);
  const mockupBottom = headerPx + mockupY + scaledHeight;
  const panelTop = readRootPercent('--tablet-hud-panel-top', 9.5);
  const panelScale = readRootNumber('--tablet-popover-scale', 1.35);
  const panelApproxHeight = scaledHeight * 0.36 * panelScale;
  const panelBottom = headerPx + mockupY + scaledHeight * panelTop + panelApproxHeight;

  return Math.ceil(Math.max(mockupBottom, panelBottom) + 12);
}

function getHeroFluidFactor(width, tuneWidth = HERO_DESKTOP_ANCHOR.width, fluidMax = HERO_DESKTOP_ANCHOR.fluidMax) {
  return Math.min(Math.max(1, tuneWidth / width), fluidMax);
}

function getMockupBaseWidth(width, tuneWidth = HERO_DESKTOP_ANCHOR.width) {
  const layoutWidth = width >= tuneWidth ? tuneWidth : width;
  return layoutWidth * MOCKUP_ARTBOARD_RATIO;
}

function readRootNumber(name, fallback) {
  const raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
  const value = Number.parseFloat(raw);
  return Number.isFinite(value) ? value : fallback;
}

function readRootPercent(name, fallbackPercent) {
  const raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
  if (!raw) return fallbackPercent / 100;
  if (raw.endsWith('%')) {
    const value = Number.parseFloat(raw);
    return Number.isFinite(value) ? value / 100 : fallbackPercent / 100;
  }
  const value = Number.parseFloat(raw);
  return Number.isFinite(value) ? value / 100 : fallbackPercent / 100;
}

function getMockupEffectiveScale(width, { tablet = false } = {}) {
  const tuneWidth = tablet ? HERO_DESKTOP_ANCHOR.tabletTuneWidth : HERO_DESKTOP_ANCHOR.width;
  const fluidMax = tablet ? HERO_DESKTOP_ANCHOR.tabletFluidMax : HERO_DESKTOP_ANCHOR.fluidMax;
  const scale = tablet
    ? readRootNumber('--tablet-mockup-scale', HERO_DESKTOP_ANCHOR.tabletMockupScale)
    : readRootNumber('--mockup-scale', HERO_DESKTOP_ANCHOR.mockupScale);
  if (width >= tuneWidth) return scale;
  return scale * getHeroFluidFactor(width, tuneWidth, fluidMax);
}

function computeMockupX(width, { tablet = false } = {}) {
  const tuneWidth = tablet ? HERO_DESKTOP_ANCHOR.tabletTuneWidth : HERO_DESKTOP_ANCHOR.width;
  const scaledWidth = getMockupBaseWidth(width, tuneWidth) * getMockupEffectiveScale(width, { tablet });
  const marginRight = tablet ? MOCKUP_SCREEN_MARGIN_RIGHT_TABLET : MOCKUP_SCREEN_MARGIN_RIGHT;
  const baseX = (width / 2) - marginRight - (scaledWidth / 2);
  return tablet ? baseX + HERO_TABLET_MOCKUP_X_CORRECTION : baseX;
}

function getMobileStageWidth(viewportWidth) {
  return viewportWidth;
}

function computeMobileMockupOffsetX(viewportWidth) {
  const stageWidth = getMobileStageWidth(viewportWidth);
  const scale = readRootNumber('--mobile-mockup-scale', HERO_MOBILE_MOCKUP_TUNE_SCALE);
  const widthPct = readRootNumber('--mobile-mockup-width', 251) / 100;
  const scaledWidth = stageWidth * widthPct * scale;
  const scaleNudge = (HERO_MOBILE_MOCKUP_TUNE_SCALE - scale) * scaledWidth * 0.5;
  return Math.round((HERO_MOBILE_MOCKUP_X_CORRECTION + scaleNudge) * 100) / 100;
}

function applyHudGeometryDefaults() {
  const defaults = getHudDefaultsFromGeometry();
  const root = document.documentElement;
  Object.entries(defaults).forEach(([name, value]) => {
    if (!root.style.getPropertyValue(name)) {
      root.style.setProperty(name, value);
    }
  });
}

function clearHeroDesktopLayout() {
  HERO_LAYOUT_VARS.forEach((name) => document.documentElement.style.removeProperty(name));
}

function applyHeroDesktopLayout() {
  const width = window.innerWidth;
  const root = document.documentElement;
  const isTablet = width > HERO_MOBILE_MAX && width <= HERO_TABLET_MAX;
  const marginRight = isTablet ? MOCKUP_SCREEN_MARGIN_RIGHT_TABLET : MOCKUP_SCREEN_MARGIN_RIGHT;
  root.style.setProperty('--mockup-screen-margin-right', `${marginRight}px`);

  if (width <= HERO_MOBILE_MAX) {
    clearHeroDesktopLayout();
    root.style.setProperty('--mobile-mockup-offset-x', `${computeMobileMockupOffsetX(width)}px`);
    return;
  }

  root.style.removeProperty('--mobile-mockup-offset-x');

  const mockupX = Math.round(computeMockupX(width, { tablet: isTablet }) * 100) / 100;

  if (width <= HERO_TABLET_MAX) {
    root.style.setProperty('--tablet-mockup-x', `${mockupX}px`);
    root.style.setProperty('--tablet-mockup-y', `${readRootNumber('--tablet-mockup-y', 13)}px`);
    root.style.setProperty('--tablet-mockup-stage-height', `${computeTabletStageHeight(width)}px`);
    root.style.removeProperty('--mockup-x');
    root.style.removeProperty('--mockup-y');
    return;
  }

  root.style.setProperty('--mockup-x', `${mockupX}px`);
  root.style.setProperty('--mockup-y', `${HERO_DESKTOP_ANCHOR.mockupY}px`);
  root.style.removeProperty('--tablet-mockup-x');
  root.style.removeProperty('--tablet-mockup-y');
  root.style.removeProperty('--tablet-mockup-stage-height');
}

applyHudGeometryDefaults();
applyHeroDesktopLayout();

window.addEventListener('resize', applyHeroDesktopLayout);
window.visualViewport?.addEventListener('resize', applyHeroDesktopLayout);

const themeMedia = window.matchMedia('(prefers-color-scheme: dark)');
const themeToggle = document.querySelector('#theme-toggle');
const themeNames = { system: 'System', light: 'Light', dark: 'Dark' };

function applyThemePreference(preference, persist = true) {
  const resolvedTheme = preference === 'system'
    ? (themeMedia.matches ? 'dark' : 'light')
    : preference;

  root.dataset.theme = resolvedTheme;
  root.dataset.themePreference = preference;
  themeToggle.dataset.themeValue = preference;
  themeToggle.title = `${themeNames[preference]} theme`;
  updateThemeToggleLabel();

  if (persist) {
    try {
      localStorage.setItem('codexbar-theme', preference);
    } catch (_) {}
  }
}

function updateThemeToggleLabel() {
  const nextTheme = root.dataset.theme === 'dark' ? 'light' : 'dark';
  const label = message(nextTheme === 'dark' ? 'theme.toDark' : 'theme.toLight');
  themeToggle.setAttribute('aria-label', label);
  themeToggle.title = label;
}

themeToggle.addEventListener('click', () => {
  const nextPreference = root.dataset.theme === 'dark' ? 'light' : 'dark';
  applyThemePreference(nextPreference);
});

themeMedia.addEventListener('change', () => {
  if (root.dataset.themePreference === 'system') applyThemePreference('system', false);
});

applyThemePreference(root.dataset.themePreference || 'system', false);

const languageShortNames = {
  en: 'EN',
  'zh-CN': '简',
  'zh-TW': '繁',
  'ja-JP': 'JA',
  es: 'ES',
  'pt-BR': 'PT',
  ko: 'KO',
  de: 'DE',
  fr: 'FR',
  ar: 'AR',
  it: 'IT',
  vi: 'VI',
  nl: 'NL',
  tr: 'TR',
  uk: 'UK',
  id: 'ID',
  pl: 'PL',
  fa: 'FA',
  th: 'TH',
  ca: 'CA',
  sv: 'SV',
};
const languages = localeCatalog.map((language) => ({
  ...language,
  id: language.code,
  short: languageShortNames[language.code] || language.code.slice(0, 2).toUpperCase(),
  label: language.name,
}));
const supportedLanguages = new Set(languages.map((language) => language.id));
const rtlLanguages = new Set(localeCatalog.filter((language) => language.direction === 'rtl').map((language) => language.code));
const localeAliases = {
  'zh-cn': 'zh-CN',
  'zh-hans': 'zh-CN',
  'zh-hant': 'zh-TW',
  'zh-hk': 'zh-TW',
  'zh-tw': 'zh-TW',
  ja: 'ja-JP',
  pt: 'pt-BR',
  'pt-br': 'pt-BR',
};
const languageStorageKey = 'codexbar-language';
const languagePicker = document.querySelector('#language-picker');
const languageTrigger = document.querySelector('#language-picker-trigger');
const languageMenu = document.querySelector('#language-picker-menu');
const languageList = document.querySelector('#language-picker-list');
const languageShort = document.querySelector('[data-lang-short]');

function normalizeLocale(value) {
  if (!value) return null;
  const lower = value.toLowerCase();
  if (localeAliases[lower]) return localeAliases[lower];
  return languages.find((language) => language.id.toLowerCase() === lower || lower.startsWith(`${language.id.toLowerCase()}-`))?.id || null;
}

function selectedLocale() {
  try {
    const queryLocale = normalizeLocale(new URLSearchParams(location.search).get('lang'));
    if (queryLocale) return queryLocale;
    const storedLocale = normalizeLocale(localStorage.getItem(languageStorageKey));
    if (storedLocale) return storedLocale;
  } catch (_) {}

  for (const language of navigator.languages || [navigator.language]) {
    const locale = normalizeLocale(language);
    if (locale) return locale;
  }
  return 'en';
}

let activeLanguage = selectedLocale();
if (!supportedLanguages.has(activeLanguage)) activeLanguage = 'en';

function message(key) {
  return activeMessages[key] || localeMessages.en[key] || key;
}

function applyAttributeMessages(dataAttribute, targetAttribute) {
  document.querySelectorAll(`[${dataAttribute}]`).forEach((element) => {
    element.setAttribute(targetAttribute, message(element.getAttribute(dataAttribute)));
  });
}

function richToken(name) {
  const codeTokens = {
    cask: 'brew install --cask steipete/tap/codexbar',
    codexbar: 'codexbar',
    linuxCommand: 'brew install steipete/tap/codexbar',
    upgrade: 'brew upgrade',
  };
  if (codeTokens[name]) {
    const code = document.createElement('code');
    code.className = 'inline-code';
    code.textContent = codeTokens[name];
    return code;
  }
  if (name === 'releases') {
    const link = document.createElement('a');
    link.className = 'text-link';
    link.href = 'https://github.com/steipete/CodexBar/releases';
    link.textContent = 'GitHub Releases';
    return link;
  }
  if (name === 'issue') {
    const link = document.createElement('a');
    link.className = 'text-link';
    link.href = 'https://github.com/steipete/CodexBar/issues/12';
    link.textContent = 'issue #12';
    return link;
  }
  if (name === 'mobileBreak') {
    return document.createElement('br');
  }
  if (name === 'break') {
    const wrapper = document.createDocumentFragment();
    const space = document.createElement('span');
    space.className = 'inline sm:hidden';
    space.textContent = ' ';
    const br = document.createElement('br');
    br.className = 'hidden sm:block';
    wrapper.append(space, br);
    return wrapper;
  }
  return document.createTextNode(`{${name}}`);
}

function renderRichMessage(element, value) {
  const fragment = document.createDocumentFragment();
  const tokenPattern = /\{([a-zA-Z][a-zA-Z0-9]*)\}/g;
  let cursor = 0;
  let match;

  while ((match = tokenPattern.exec(value)) !== null) {
    fragment.append(document.createTextNode(value.slice(cursor, match.index)));
    fragment.append(richToken(match[1]));
    cursor = match.index + match[0].length;
  }
  fragment.append(document.createTextNode(value.slice(cursor)));
  element.replaceChildren(fragment);
}

function applyLanguageMessages() {
  activeMessages = { ...localeMessages.en, ...(localeMessages[activeLanguage] || {}) };
  root.lang = activeLanguage;
  root.dir = rtlLanguages.has(activeLanguage) ? 'rtl' : 'ltr';
  root.dataset.locale = activeLanguage;
  document.title = message('meta.title');
  document.querySelector('meta[name="description"]')?.setAttribute('content', message('meta.description'));
  document.querySelector('meta[property="og:description"]')?.setAttribute('content', message('meta.ogDescription'));
  document.querySelectorAll('[data-i18n]').forEach((element) => {
    element.textContent = message(element.dataset.i18n);
  });
  document.querySelectorAll('[data-i18n-rich]').forEach((element) => {
    renderRichMessage(element, message(element.dataset.i18nRich));
  });
  applyAttributeMessages('data-i18n-aria-label', 'aria-label');
  applyAttributeMessages('data-i18n-title', 'title');
  applyAttributeMessages('data-i18n-alt', 'alt');
  updateThemeToggleLabel();
}

function renderLanguageMenu() {
  languageList.replaceChildren();
  languages.forEach((language) => {
    const option = document.createElement('button');
    option.type = 'button';
    option.className = 'language-option button-press';
    option.role = 'option';
    option.dataset.lang = language.id;
    option.setAttribute('aria-selected', String(language.id === activeLanguage));
    option.tabIndex = language.id === activeLanguage ? 0 : -1;
    option.innerHTML = `
      <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
        <path d="M4.5 9.25 7.5 12.25 13.5 6.25" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <span>${language.label}</span>
    `;
    option.addEventListener('click', () => selectLanguage(language.id));
    languageList.append(option);
  });
}

function updateLanguageUi() {
  const current = languages.find((language) => language.id === activeLanguage) || languages[0];
  languageShort.textContent = current.short;
  root.dataset.language = current.id;
  applyLanguageMessages();
  languageList.querySelectorAll('[role="option"]').forEach((option) => {
    const selected = option.dataset.lang === activeLanguage;
    option.setAttribute('aria-selected', String(selected));
    option.tabIndex = selected ? 0 : -1;
  });
}

function setLanguageMenuOpen(open, { focusOption = false, restoreFocus = false } = {}) {
  languageMenu.hidden = !open;
  languageTrigger.setAttribute('aria-expanded', String(open));
  if (open && focusOption) {
    languageList.querySelector('[aria-selected="true"]')?.focus();
  } else if (!open && restoreFocus) {
    languageTrigger.focus();
  }
}

function selectLanguage(languageId) {
  activeLanguage = languageId;
  try {
    localStorage.setItem(languageStorageKey, languageId);
    const url = new URL(location.href);
    url.searchParams.set('lang', languageId);
    history.replaceState(null, '', url);
  } catch (_) {}
  updateLanguageUi();
  setLanguageMenuOpen(false, { restoreFocus: true });
}

renderLanguageMenu();
updateLanguageUi();

languageTrigger.addEventListener('click', () => {
  setLanguageMenuOpen(languageMenu.hidden, { focusOption: languageMenu.hidden });
});

languageTrigger.addEventListener('keydown', (event) => {
  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
  event.preventDefault();
  setLanguageMenuOpen(true, { focusOption: true });
});

languageList.addEventListener('keydown', (event) => {
  const options = [...languageList.querySelectorAll('[role="option"]')];
  const currentIndex = Math.max(0, options.indexOf(document.activeElement));
  let nextIndex;
  if (event.key === 'ArrowDown') nextIndex = (currentIndex + 1) % options.length;
  if (event.key === 'ArrowUp') nextIndex = (currentIndex - 1 + options.length) % options.length;
  if (event.key === 'Home') nextIndex = 0;
  if (event.key === 'End') nextIndex = options.length - 1;
  if (nextIndex === undefined) return;
  event.preventDefault();
  options[nextIndex]?.focus();
});

document.addEventListener('click', (event) => {
  if (!languagePicker.contains(event.target)) setLanguageMenuOpen(false);
});

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape' && !languageMenu.hidden) {
    event.preventDefault();
    setLanguageMenuOpen(false, { restoreFocus: true });
  }
});

const providerSection = document.querySelector('[data-provider-section]');
const providerCards = providerSection.querySelectorAll('.provider-card:not([hidden])');
providerCards.forEach((card, index) => {
  card.classList.add('provider-reveal');
  card.style.setProperty('--reveal-delay', `${80 + Math.min(index, 12) * 24}ms`);
});

const revealSection = (section) => section.classList.add('is-revealed');

if ('IntersectionObserver' in window) {
  const revealObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;
      revealSection(entry.target);
      observer.unobserve(entry.target);
    });
  }, { threshold: 0.01, rootMargin: '0px 0px -8% 0px' });

  [providerSection, ...document.querySelectorAll('[data-scroll-section]')].forEach((section) => {
    revealObserver.observe(section);
  });
} else {
  revealSection(providerSection);
  document.querySelectorAll('[data-scroll-section]').forEach(revealSection);
}

document.querySelectorAll('.mac-widget-gallery-wrap').forEach((wrap) => {
  const gallery = wrap.querySelector('.mac-widget-gallery');
  if (!gallery) return;

  const syncScrollFade = () => {
    const overflows = gallery.scrollHeight > gallery.clientHeight + 1;
    const atBottom = gallery.scrollTop + gallery.clientHeight >= gallery.scrollHeight - 2;
    wrap.classList.toggle('has-scroll-fade', overflows && !atBottom);
  };

  gallery.addEventListener('scroll', syncScrollFade, { passive: true });
  window.addEventListener('resize', syncScrollFade);
  if ('ResizeObserver' in window) {
    new ResizeObserver(syncScrollFade).observe(gallery);
  }
  syncScrollFade();
});

const mockupStage = document.querySelector('#mockup-stage');
const menubarItems = mockupStage.querySelectorAll('.system-menubar > *');
const heroRootStyles = getComputedStyle(document.documentElement);
const readHeroMs = (name) => Number.parseFloat(heroRootStyles.getPropertyValue(name)) || 0;
const menubarStartDelay = readHeroMs('--hero-menubar-start');
const menubarWaveGap = readHeroMs('--hero-menubar-wave');
const reducedHeroMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const lastMenubarItemDelay = Math.max(0, menubarItems.length - 1) * menubarWaveGap;
const markStartDelay = menubarStartDelay + lastMenubarItemDelay + readHeroMs('--hero-mark-after-menubar');
const popoverStartDelay = markStartDelay + readHeroMs('--hero-popover-after-mark');

menubarItems.forEach((item, index) => {
  item.style.setProperty('--menubar-enter-delay', `${reducedHeroMotion ? 0 : index * menubarWaveGap}ms`);
});

const animatePopoverDetails = () => {
  mockupStage.querySelectorAll('.usage-meter').forEach((meter, index) => {
    meter.style.setProperty('--meter-delay', `${reducedHeroMotion ? 0 : 70 + index * 70}ms`);
  });
  mockupStage.querySelectorAll('.usage-chart i').forEach((bar, index) => {
    bar.style.setProperty('--bar-delay', `${reducedHeroMotion ? 0 : 120 + index * 6}ms`);
  });
  mockupStage.classList.add('is-animated');
};

if (reducedHeroMotion) {
  mockupStage.classList.add('is-menubar-entered', 'is-mark-animated');
  animatePopoverDetails();
} else {
  window.setTimeout(() => mockupStage.classList.add('is-menubar-entered'), menubarStartDelay);
  window.setTimeout(() => mockupStage.classList.add('is-mark-animated'), markStartDelay);
  window.setTimeout(animatePopoverDetails, popoverStartDelay);
}

const brewCopyButton = document.querySelector('#brew-copy');
const brewCopyLabel = brewCopyButton?.querySelector('[data-brew-label]');
const brewCopyIcon = brewCopyButton?.querySelector('[data-brew-icon]');
const brewCopyStatus = brewCopyButton?.querySelector('[data-brew-status]');
let brewCopyResetTimer;

async function copyBrewCommand() {
  const command = brewCopyLabel?.textContent?.trim();
  if (!command || !navigator.clipboard?.writeText) return;

  try {
    await navigator.clipboard.writeText(command);
  } catch (_) {
    return;
  }

  window.clearTimeout(brewCopyResetTimer);
  brewCopyIcon.dataset.copied = 'true';
  brewCopyStatus.textContent = message('clipboard.copied');
  brewCopyButton.setAttribute('aria-label', message('clipboard.copied'));
  brewCopyResetTimer = window.setTimeout(() => {
    delete brewCopyIcon.dataset.copied;
    brewCopyStatus.textContent = '';
    brewCopyButton.setAttribute('aria-label', message('clipboard.copyBrew'));
  }, 1500);
}

brewCopyButton?.addEventListener('click', copyBrewCommand);