/* ============================================================
   NemakiWare — app shell, nav, lang toggle, hero switcher, footer
   ============================================================ */

const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brandAccent": "#076bb8",
  "headingFont": "Space Grotesk"
}/*EDITMODE-END*/;

const THEMES = {
  "#076bb8": { "--teal-700":"oklch(0.44 0.135 252)","--teal-600":"oklch(0.52 0.155 252)","--teal-500":"oklch(0.60 0.165 252)","--teal-400":"oklch(0.70 0.135 252)","--teal-200":"oklch(0.89 0.06 252)","--teal-100":"oklch(0.955 0.03 252)","--accent-bright":"oklch(0.72 0.15 254)" },
  "#1c7d86": { "--teal-700":"oklch(0.45 0.075 205)","--teal-600":"oklch(0.55 0.085 200)","--teal-500":"oklch(0.64 0.095 195)","--teal-400":"oklch(0.74 0.085 192)","--teal-200":"oklch(0.90 0.045 195)","--teal-100":"oklch(0.95 0.025 195)","--accent-bright":"oklch(0.70 0.12 198)" },
  "#2f6fd6": { "--teal-700":"oklch(0.46 0.115 250)","--teal-600":"oklch(0.54 0.13 250)","--teal-500":"oklch(0.62 0.14 250)","--teal-400":"oklch(0.72 0.12 250)","--teal-200":"oklch(0.90 0.05 250)","--teal-100":"oklch(0.955 0.028 250)","--accent-bright":"oklch(0.71 0.15 252)" },
  "#6a59d8": { "--teal-700":"oklch(0.46 0.13 285)","--teal-600":"oklch(0.54 0.15 285)","--teal-500":"oklch(0.62 0.16 285)","--teal-400":"oklch(0.72 0.13 285)","--teal-200":"oklch(0.90 0.055 285)","--teal-100":"oklch(0.955 0.03 285)","--accent-bright":"oklch(0.72 0.16 288)" },
};

function applyTheme(hex) {
  const t = THEMES[hex] || THEMES["#076bb8"];
  const root = document.documentElement;
  root.style.setProperty("--accent-strong", hex);
  Object.entries(t).forEach(([k, v]) => root.style.setProperty(k, v));
}

/* ---- top navigation ------------------------------------------- */
function Nav({ t, lang, setLang, variant }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const logoDark = variant === "b" && !scrolled;
  const overDark = variant === "b" && !scrolled;
  const links = [
    ["#features", t.nav.features],
    ["#security", t.nav.security],
    ["#mcp", t.nav.mcp],
    ["#lineage", t.nav.lineage],
    ["#architecture", t.nav.architecture],
  ];
  return (
    <header className={`nav ${scrolled ? "nav--solid" : ""} ${overDark ? "nav--over-dark" : ""}`}>
      <div className="wrap nav-inner">
        <a href="#top" className="nav-logo" aria-label="NemakiWare"><Logo size={44} onDark={logoDark} /></a>
        <nav className={`nav-links ${open ? "open" : ""}`}>
          {links.map(([href, label]) => (
            <a key={href} href={href} onClick={() => setOpen(false)}>{label}</a>
          ))}
        </nav>
        <div className="nav-right">
          <div className="lang-toggle" role="group" aria-label="Language">
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
            <button className={lang === "ja" ? "on" : ""} onClick={() => setLang("ja")}>日本語</button>
          </div>
          <a className="nav-gh" href="https://github.com/aegif/NemakiWare" target="_blank" rel="noopener" aria-label="GitHub"><Icon name="github" size={20} /></a>
          <a className="btn btn--primary nav-cta" href="#contact">{t.nav.cta}</a>
          <button className="nav-burger" aria-label="Menu" onClick={() => setOpen(!open)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
    </header>
  );
}

/* ---- hero variant switcher (design exploration control) ------- */
function HeroSwitcher({ variant, setVariant, lang }) {
  const labels = lang === "ja"
    ? { a: "エディトリアル", b: "没入型", c: "コンソール" }
    : { a: "Editorial", b: "Immersive", c: "Console" };
  return (
    <div className="hero-switch" role="group" aria-label="Hero variant">
      <span className="hero-switch-label mono">{lang === "ja" ? "ヒーロー" : "Hero"}</span>
      {["a", "b", "c"].map((v) => (
        <button key={v} className={variant === v ? "on" : ""} onClick={() => setVariant(v)}>
          <span className="hs-letter">{v.toUpperCase()}</span>
          <span className="hs-name">{labels[v]}</span>
        </button>
      ))}
    </div>
  );
}

/* ---- footer --------------------------------------------------- */
function Footer({ t, lang, setLang }) {
  const f = t.footer;
  const cols = [
    { h: f.product, links: f.links_product, hrefs: ["#features", "#architecture", "#mcp", "#security"] },
    { h: f.community, links: f.links_community, hrefs: ["https://github.com/aegif/NemakiWare", "http://nemakiware.org/", "https://github.com/aegif/NemakiWare/tree/master/docs", "https://github.com/aegif/NemakiWare/releases"] },
    { h: f.company, links: f.links_company, hrefs: ["http://aegif.jp/", "https://nemakiware.com/contact.php", "https://nemakiware.com/privacy.html"] },
  ];
  return (
    <footer className="footer dark">
      <div className="wrap footer-inner">
        <div className="footer-brand">
          <Logo onDark size={54} />
          <p className="footer-tagline">{f.tagline}</p>
          <p className="footer-etym mono">{f.etymology}</p>
        </div>
        <div className="footer-cols">
          {cols.map((c, i) => (
            <div key={i} className="footer-col">
              <div className="footer-col-h mono">{c.h}</div>
              {c.links.map((l, j) => (
                <a key={j} href={c.hrefs[j] || "#"} target={(c.hrefs[j] || "").startsWith("http") ? "_blank" : undefined} rel="noopener">{l}</a>
              ))}
            </div>
          ))}
        </div>
      </div>
      <div className="wrap footer-bottom">
        <span>{f.rights}</span>
        <div className="lang-toggle lang-toggle--dark">
          <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          <button className={lang === "ja" ? "on" : ""} onClick={() => setLang("ja")}>日本語</button>
        </div>
      </div>
    </footer>
  );
}

/* ---- root app ------------------------------------------------- */
function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLangState] = useState(() => localStorage.getItem("nw_lang") || "en");
  const [variant, setVariantState] = useState(() => localStorage.getItem("nw_hero") || "a");

  const setLang = (l) => { setLangState(l); localStorage.setItem("nw_lang", l); };
  const setVariant = (v) => { setVariantState(v); localStorage.setItem("nw_hero", v); };

  useEffect(() => { applyTheme(tw.brandAccent); }, [tw.brandAccent]);
  useEffect(() => {
    document.documentElement.style.setProperty("--display", `"${tw.headingFont}", "Noto Sans JP", sans-serif`);
  }, [tw.headingFont]);
  useEffect(() => { document.documentElement.lang = lang; }, [lang]);

  const t = window.CONTENT[lang];

  return (
    <div data-lang={lang} id="top">
      <Nav t={t} lang={lang} setLang={setLang} variant={variant} />
      <main>
        <Hero variant={variant} t={t} />
        <PainStrip t={t} />
        <FoundationSection t={t} />
        <ShiftSection t={t} />
        <PillarsSection t={t} />
        <PermissionSection t={t} />
        <McpSection t={t} />
        <LineageSection t={t} />
        <CmisSection t={t} />
        <StackSection t={t} />
        <QuickStartSection t={t} />
        <ContactSection t={t} />
      </main>
      <Footer t={t} lang={lang} setLang={setLang} />

      <HeroSwitcher variant={variant} setVariant={setVariant} lang={lang} />

      <TweaksPanel title="Tweaks">
        <TweakSection label={lang === "ja" ? "カラー" : "Color"} />
        <TweakColor label={lang === "ja" ? "アクセント" : "Accent"} value={tw.brandAccent}
          options={["#076bb8", "#1c7d86", "#2f6fd6", "#6a59d8"]}
          onChange={(v) => setTweak("brandAccent", v)} />
        <TweakSection label={lang === "ja" ? "タイポグラフィ" : "Typography"} />
        <TweakSelect label={lang === "ja" ? "見出しフォント" : "Heading font"} value={tw.headingFont}
          options={["Space Grotesk", "Hanken Grotesk", "IBM Plex Sans", "Schibsted Grotesk"]}
          onChange={(v) => setTweak("headingFont", v)} />
      </TweaksPanel>
    </div>
  );
}

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