// App root — nav, hero, mounting, tweaks integration.

const { useState: useAS, useEffect: useAE } = React;

/* ---------- NAV ---------- */
function Nav({ lang, setLang, t }) {
  const [moreOpen, setMoreOpen] = useAS(false);
  const [mobileOpen, setMobileOpen] = useAS(false);

  const primary = [
    ["#product",  t.nav.product],
    ["#demo",     t.nav.demo],
    ["#reseller", t.nav.reseller],
    ["#faq",      t.nav.faq],
  ];
  const more = [
    ["#features", t.nav.features],
    ["#edge",     t.nav.edge],
    ["#lab",      t.nav.lab],
    ["#specs",    t.nav.specs],
    ["#cases",    t.nav.cases],
  ];
  const allItems = [...primary, ...more];

  // Close "更多" dropdown on outside click
  useAE(() => {
    if (!moreOpen) return;
    const close = () => setMoreOpen(false);
    document.addEventListener("click", close, { capture: true, once: true });
  }, [moreOpen]);

  // Lock body scroll when mobile menu is open
  useAE(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [mobileOpen]);

  const closeMobile = () => setMobileOpen(false);

  return (
    <header className="nav">
      <div className="wrap nav__inner">
        <a href="#top" className="nav__logo" onClick={closeMobile}>
          <img src="assets/site_logo.png" alt="Bizlution" />
          <span className="nav__sub">SecuAgent</span>
        </a>

        {/* Desktop links */}
        <nav className="nav__links">
          {primary.map(([h, l]) => <a href={h} key={h}>{l}</a>)}
          <div className="nav__more" onClick={e => e.stopPropagation()}>
            <button
              className="nav__more-btn"
              onClick={() => setMoreOpen(o => !o)}
              aria-expanded={moreOpen}>
              更多 {moreOpen ? "▲" : "▼"}
            </button>
            {moreOpen && (
              <div className="nav__dropdown">
                {more.map(([h, l]) => (
                  <a href={h} key={h} onClick={() => setMoreOpen(false)}>{l}</a>
                ))}
              </div>
            )}
          </div>
        </nav>

        <button
          className="nav__lang"
          onClick={() => setLang(lang === "zh" ? "en" : "zh")}
          aria-label="Toggle language">
          <span className={lang === "zh" ? "on" : ""}>ZH</span>
          /
          <span className={lang === "en" ? "on" : ""}>EN</span>
        </button>
        <a href="#contact" className="nav__cta nav__cta--desk">{t.nav.contact}</a>

        {/* Hamburger — mobile only */}
        <button
          className="nav__hamburger"
          onClick={() => setMobileOpen(o => !o)}
          aria-label="Toggle menu"
          aria-expanded={mobileOpen}>
          {mobileOpen
            ? <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            : <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/></svg>
          }
        </button>
      </div>

      {/* Mobile full-screen menu */}
      {mobileOpen && (
        <div className="nav__mobile">
          <nav className="nav__mobile-links">
            {allItems.map(([h, l]) => (
              <a href={h} key={h} onClick={closeMobile}>{l}</a>
            ))}
          </nav>
          <div className="nav__mobile-footer">
            <button
              className="nav__lang"
              onClick={() => setLang(lang === "zh" ? "en" : "zh")}
              aria-label="Toggle language">
              <span className={lang === "zh" ? "on" : ""}>ZH</span>
              /
              <span className={lang === "en" ? "on" : ""}>EN</span>
            </button>
            <a href="#contact" className="btn btn--primary nav__mobile-cta" onClick={closeMobile}>
              {t.nav.contact}
            </a>
          </div>
        </div>
      )}
    </header>);
}

/* ---------- HERO ---------- */
function Hero({ t, scrollToDemo }) {
  return (
    <section className="hero" id="top">
      <div className="hero__grid"></div>
      <div className="wrap hero__inner">
        <div className="hero__copy">
          <div className="hero__pill">
            <span className="dot"></span>
            <span>{t.hero.tag_status}</span>
          </div>
          <div className="eyebrow" style={{ marginBottom: 24 }}>
            {t.hero.eyebrow}
          </div>
          <h1 className="hero__h" style={{ fontSize: "64px" }}>
            {t.hero.title_a}
            <br />
            <span className="accent">{t.hero.title_b}</span>
          </h1>
          <p className="hero__sub">{t.hero.subtitle}</p>
          <div className="hero__ctas">
            <button className="btn btn--primary" onClick={scrollToDemo}>
              {t.hero.cta_primary}
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M13 5l7 7-7 7" />
              </svg>
            </button>
            <a href="#product" className="btn btn--ghost-dark">
              {t.hero.cta_secondary}
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" />
              </svg>
            </a>
          </div>
          <div className="hero__stats">
            <div>
              <div className="hero__stat-n">{t.hero.stat_a_n}</div>
              <div className="hero__stat-l">{t.hero.stat_a_l}</div>
            </div>
            <div>
              <div className="hero__stat-n">{t.hero.stat_b_n}</div>
              <div className="hero__stat-l">{t.hero.stat_b_l}</div>
            </div>
            <div>
              <div className="hero__stat-n">{t.hero.stat_c_n}</div>
              <div className="hero__stat-l">{t.hero.stat_c_l}</div>
            </div>
            <div>
              <div className="hero__stat-n">{t.hero.stat_d_n}</div>
              <div className="hero__stat-l">{t.hero.stat_d_l}</div>
            </div>
          </div>
        </div>

        {/* RIGHT: gateway device card */}
        <div className="hero__visual">
          <div className="hv-card">
            <div className="hv-card__head">
              <span>SecuAgent · GW-100</span>
              <span className="live">ONLINE</span>
            </div>
            <h4>{t.hero.eyebrow === "BIZLUTION × SECUAGENT" ? "Interception, just now" : "Just intercepted"}</h4>
            <div className="hv-row">
              <span className="hv-row__l">ASML-2026-X1</span>
              <span className="hv-row__r"><span className="tok">[核心資產代號_1]</span></span>
            </div>
            <div className="hv-row">
              <span className="hv-row__l">南科三廠 A1 區</span>
              <span className="hv-row__r"><span className="tok">[廠區_1]</span></span>
            </div>
            <div className="hv-row">
              <span className="hv-row__l">0.42 MPa</span>
              <span className="hv-row__r"><span className="tok">[製程參數_1]</span></span>
            </div>
            <div className="hv-row">
              <span className="hv-row__l">Pressure drop, O-ring leak</span>
              <span className="hv-row__r"><span className="tok">[維修問題_1]</span></span>
            </div>
          </div>

          <div className="hv-card">
            <div className="hv-card__head">
              <span>PIPELINE</span>
              <span style={{ color: "var(--sa-accent)" }}>14 ms</span>
            </div>
            <div className="hv-pipe">
              <span>EMPLOYEE</span>
              <span className="arrow">→</span>
              <span className="gw">DETECT</span>
              <span className="arrow">→</span>
              <span className="gw">TOKENIZE</span>
              <span className="arrow">→</span>
              <span>LLM</span>
            </div>
            <div className="hv-pipe" style={{ borderTop: "1px dashed var(--sa-night-bd)", paddingTop: 10 }}>
              <span>EMPLOYEE</span>
              <span className="arrow">←</span>
              <span className="gw">RESTORE</span>
              <span className="arrow">←</span>
              <span className="gw">ROUTE</span>
              <span className="arrow">←</span>
              <span>LLM</span>
            </div>
          </div>

          <div className="hv-card" style={{ padding: "14px 18px" }}>
            <div className="hv-card__head" style={{ marginBottom: 0 }}>
              <span>TOKEN SPEND TODAY</span>
              <span style={{ color: "var(--ok)" }}>− 42% vs. raw</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- TWEAKS PANEL ---------- */
function SecuTweaks({ tweaks, setTweak, lang, setLang }) {
  return (
    <TweaksPanel title="Tweaks · SecuAgent">
      <TweakSection label="主題色 · Accent" />
      <TweakRadio
        label="Color"
        value={tweaks.accent}
        options={[
        { value: "orange", label: "Orange" },
        { value: "blue", label: "Blue" },
        { value: "green", label: "Green" }]
        }
        onChange={(v) => setTweak("accent", v)} />
      

      <TweakSection label="模式 · Mode" />
      <TweakRadio
        label="Mode"
        value={tweaks.mode}
        options={[
        { value: "dark", label: "Dark" },
        { value: "light", label: "Light" }]
        }
        onChange={(v) => setTweak("mode", v)} />
      

      <TweakSection label="字體 · Font" />
      <TweakRadio
        label="Family"
        value={tweaks.font}
        options={[
        { value: "sans", label: "Barlow" },
        { value: "mono", label: "Mono" }]
        }
        onChange={(v) => setTweak("font", v)} />
      

      <TweakSection label="Hero 排版" />
      <TweakRadio
        label="Layout"
        value={tweaks.hero}
        options={[
        { value: "split", label: "Split" },
        { value: "centered", label: "Center" },
        { value: "cinematic", label: "Cinema" }]
        }
        onChange={(v) => setTweak("hero", v)} />
      

      <TweakSection label="語言 · Language" />
      <TweakRadio
        label="Language"
        value={lang}
        options={[
        { value: "zh", label: "ZH" },
        { value: "en", label: "EN" }]
        }
        onChange={(v) => setLang(v)} />
      
    </TweaksPanel>);

}

/* ---------- APP ROOT ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "orange",
  "mode": "dark",
  "font": "sans",
  "hero": "split"
} /*EDITMODE-END*/;

function App() {
  const [lang, setLang] = useAS("zh");
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply data-* attrs to <html>
  useAE(() => {
    const html = document.documentElement;
    html.setAttribute("data-accent", tweaks.accent);
    html.setAttribute("data-mode", tweaks.mode);
    html.setAttribute("data-font", tweaks.font);
    html.setAttribute("data-hero", tweaks.hero);
    html.setAttribute("lang", lang === "zh" ? "zh-TW" : "en");
  }, [tweaks, lang]);

  const t = I18N[lang];

  const scrollToDemo = () => {
    document.getElementById("demo")?.scrollIntoView({ behavior: "smooth", block: "start" });
    // Trigger the canned scenario shortly after the scroll begins so the user
    // sees the flow rather than landing on an empty chat.
    setTimeout(() => {
      window.dispatchEvent(new CustomEvent("secuagent:play"));
    }, 600);
  };

  return (
    <>
      <Nav lang={lang} setLang={setLang} t={t} />
      <Hero t={t} scrollToDemo={scrollToDemo} />
      <PainSection t={t.pain} />
      <ArchSection t={t.arch} />
      <FeaturesSection t={t.features} />
      <EdgeSection t={t.edge} />
      <LabSection t={t.lab} />
      <DemoSection t={t.demo} lang={lang} />
      <SpecsSection t={t.specs} />
      <CasesSection t={t.cases} />
      <CustomersSection t={t.customers} />
      <ResellerSection t={t.reseller} />
      <FAQSection t={t.faq} />
      <ContactSection t={t.contact} />
      <FooterSection t={t.footer} />
      <SecuTweaks tweaks={tweaks} setTweak={setTweak} lang={lang} setLang={setLang} />
    </>);

}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);