// Navigation + brand
const LANGUAGES = [
  { id: "en", label: "English", shortLabel: "EN", htmlLang: "en" },
  { id: "zh-Hant", label: "中文", shortLabel: "中", htmlLang: "zh-Hant" },
];

const DEFAULT_LANGUAGE = "en";

function getLanguage(languageId) {
  return LANGUAGES.find(language => language.id === languageId) || LANGUAGES[0];
}

function localizedLabel(labels, languageId) {
  if (typeof labels === "string") return labels;
  return labels[languageId] || labels[DEFAULT_LANGUAGE] || Object.values(labels)[0];
}

const NAV_PAGES = [
  { id: "home",      label: { en: "Home", "zh-Hant": "首頁" } },
  { id: "why",       label: { en: "Why ModelPort", "zh-Hant": "為何選擇 ModelPort" } },
  { id: "fit",       label: { en: "Fit Check", "zh-Hant": "適配檢查" } },
  { id: "catalog",   label: { en: "Model Catalog", "zh-Hant": "模型目錄" } },
  { id: "pricing",   label: { en: "Pricing Advantage", "zh-Hant": "價格優勢" } },
  { id: "overseas",  label: { en: "Overseas Versions", "zh-Hant": "海外版本" } },
  { id: "dashboard", label: { en: "Dashboard", "zh-Hant": "儀表板" } },
  { id: "pilot",     label: { en: "Pilot", "zh-Hant": "試點" } },
];

const NAV_LINK_PAGES = NAV_PAGES.filter(p => !["fit", "pilot"].includes(p.id));

function Brand() {
  return (
    <div className="brand">
      <span className="brand-mark" aria-hidden="true"></span>
      <span>ModelPort</span>
    </div>
  );
}

function LanguagePicker({ language, onChange, className = "" }) {
  return (
    <div className={"lang-switch" + (className ? " " + className : "")} role="group" aria-label="Select language">
      {LANGUAGES.map(option => (
        <button
          key={option.id}
          type="button"
          className={language === option.id ? "active" : ""}
          aria-pressed={language === option.id}
          title={option.label}
          onClick={() => onChange(option.id)}>
          {option.shortLabel}
        </button>
      ))}
    </div>
  );
}

function Nav({ page, go, language = DEFAULT_LANGUAGE, onLanguageChange = () => {} }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const t = (labels) => localizedLabel(labels, language);

  const navigate = (id) => {
    setMenuOpen(false);
    go(id);
  };

  return (
    <nav className={"nav" + (menuOpen ? " menu-open" : "")} data-screen-label="nav">
      <div className="nav-inner">
        <button className="row center gap-12"
          onClick={() => navigate("home")}
          style={{ background: "transparent", border: "none", cursor: "pointer", padding: 0 }}>
          <Brand />
        </button>
        <div className="nav-links">
          {NAV_LINK_PAGES.map(p => (
            <button
              key={p.id}
              className={"nav-link" + (page === p.id ? " active" : "")}
              onClick={() => navigate(p.id)}>
              {t(p.label)}
            </button>
          ))}
        </div>
        <LanguagePicker language={language} onChange={onLanguageChange} />
        <button
          className="mobile-menu-btn"
          type="button"
          aria-label={menuOpen ? "Close navigation menu" : "Open navigation menu"}
          aria-expanded={menuOpen}
          aria-controls="mobile-nav-menu"
          onClick={() => setMenuOpen(open => !open)}>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </button>
        <div className="nav-cta">
          <button className="btn btn-ghost btn-sm" onClick={() => navigate("pilot")}>
            {t({ en: "Request Pilot", "zh-Hant": "申請試點" })}
          </button>
          <button className="btn btn-sm btn-arrow" onClick={() => navigate("fit")}>
            {t({ en: "Run Fit Check", "zh-Hant": "開始適配檢查" })}
          </button>
        </div>
      </div>
      <div
        id="mobile-nav-menu"
        className="mobile-nav-menu"
        aria-hidden={!menuOpen}>
        <div className="mobile-nav-inner">
          <div className="mobile-nav-links">
            {NAV_LINK_PAGES.map(p => (
              <button
                key={p.id}
                className={"mobile-nav-link" + (page === p.id ? " active" : "")}
                onClick={() => navigate(p.id)}>
                {t(p.label)}
              </button>
            ))}
          </div>
          <div className="mobile-nav-actions">
            <button className="btn btn-ghost btn-sm" onClick={() => navigate("pilot")}>
              {t({ en: "Request Pilot", "zh-Hant": "申請試點" })}
            </button>
            <button className="btn btn-sm btn-arrow" onClick={() => navigate("fit")}>
              {t({ en: "Run Fit Check", "zh-Hant": "開始適配檢查" })}
            </button>
          </div>
        </div>
      </div>
    </nav>
  );
}

function Footer({ go, language }) {
  const t = (labels) => localizedLabel(labels, language);

  return (
    <footer className="footer">
      <div className="wrap">
        <div className="row between" style={{ alignItems: "flex-end", gap: 32, flexWrap: "wrap" }}>
          <div className="col gap-12" style={{ maxWidth: 380 }}>
            <Brand />
            <div className="muted" style={{ fontSize: 13 }}>
              {t({
                en: "China & Asia AI models with better procurement terms, overseas enterprise versions and Hong Kong delivery support.",
                "zh-Hant": "中國及亞洲 AI 模型，提供更佳採購條款、海外企業版本與香港交付支援。",
              })}
            </div>
            <div className="mono-sm">
              {t({
                en: "Enterprise procurement · private delivery · governed model capacity",
                "zh-Hant": "企業採購 · 私有交付 · 受管模型容量",
              })}
            </div>
          </div>
          <div className="col gap-8 mono-sm">
            <div>Hong Kong · Singapore · Tokyo</div>
            <div>hello@modelport.example</div>
            <div>© 2026 ModelPort Ltd.</div>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav,
  Footer,
  Brand,
  LanguagePicker,
  LANGUAGES,
  DEFAULT_LANGUAGE,
  getLanguage,
  localizedLabel,
  NAV_PAGES,
  NAV_LINK_PAGES,
});