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

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

/* ---------- NAV ---------- */
function Nav({ lang, setLang, t }) {
  const [menuOpen, setMenuOpen] = useAS(false);
  const items = [
  ["#product", t.nav.product],
  ["#features", t.nav.features],
  ["#edge", t.nav.edge],
  ["#lab", t.nav.lab],
  ["#demo", t.nav.demo],
  ["#specs", t.nav.specs],
  ["#cases", t.nav.cases],
  ["#reseller", t.nav.reseller],
  ["#faq", t.nav.faq]];

  // Close drawer when the user navigates to an anchor
  const onItemClick = () => setMenuOpen(false);

  // Lock body scroll while drawer is open (mobile only — desktop dropdown
  // is compact enough that page scroll can stay live).
  useAE(() => {
    if (menuOpen && window.innerWidth < 640) {
      document.body.style.overflow = "hidden";
      return () => { document.body.style.overflow = ""; };
    }
  }, [menuOpen]);

  return (
    <header className={`nav ${menuOpen ? "nav--open" : ""}`}>
      <div className="wrap nav__inner">
        <a href="#top" className="nav__logo" onClick={onItemClick}>
          <img src="assets/site_logo.png" alt="Bizlution" className="nav__biz-logo" />
          <svg className="nav__sa-icon" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M20 3 L35 8.5 V20 C35 30 20 37 20 37 C20 37 5 30 5 20 V8.5 Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
            <path d="M13.5 20 L18 24.5 L27 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          <span className="nav__sub">SecuAgent</span>
        </a>

        <div className="nav__actions">
          <button
            className="nav__burger"
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            aria-expanded={menuOpen}
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>

      {/* Backdrop dimmer */}
      <div
        className={`nav__drawer-backdrop ${menuOpen ? "is-open" : ""}`}
        onClick={() => setMenuOpen(false)}
        aria-hidden="true"
      ></div>

      {/* Compact dropdown popover, top-right anchored */}
      <div className={`nav__drawer ${menuOpen ? "is-open" : ""}`}>
        <div className="nav__drawer-inner">
          {items.map(([h, l]) =>
            <a href={h} key={h} onClick={onItemClick}>{l}</a>
          )}
          <div className="nav__drawer-foot">
            <LangToggle lang={lang} setLang={(l) => { setLang(l); setMenuOpen(false); }} />
            <a href="#contact" className="nav__cta nav__cta--drawer" onClick={onItemClick}>
              {t.nav.contact}
            </a>
          </div>
        </div>
      </div>
    </header>);

}

/* ---------- LANGUAGE TOGGLE (sliding pill, segmented) ---------- */
function LangToggle({ lang, setLang, large }) {
  return (
    <button
      className={`lang-toggle ${large ? "lang-toggle--lg" : ""}`}
      data-on={lang}
      onClick={() => setLang(lang === "zh" ? "en" : "zh")}
      aria-label={lang === "zh" ? "Switch to English" : "切換為繁體中文"}
      type="button"
    >
      <span className="lang-toggle__bg" aria-hidden="true"></span>
      <span className="lang-toggle__opt" data-v="zh">ZH</span>
      <span className="lang-toggle__opt" data-v="en">EN</span>
    </button>);

}

/* ---------- 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.card_title}</h4>
            {t.hero.card_rows.map(([l, r], i) =>
              <div className="hv-row" key={i}>
                <span className="hv-row__l">{l}</span>
                <span className="hv-row__r"><span className="tok">{r}</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 排版 · Layout" />
      <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(() => {
    const bl = (navigator.language || navigator.userLanguage || "").toLowerCase();
    return bl.startsWith("zh") ? "zh" : "en";
  });
  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 />);