// Main App — WAKEDIAMOND multi-page
const { useState, useEffect } = React;

const App = () => {
  const [lang, setLang] = useState(() => localStorage.getItem("wd-lang") || "de");
  const [page, setPage] = useState(() => {
    const h = (location.hash || "#home").replace("#", "");
    return ["home", "boards", "craft", "community", "contact"].includes(h) ? h : "home";
  });
  const [menuOpen, setMenuOpen] = useState(false);
  const t = window.I18N[lang];

  useEffect(() => { localStorage.setItem("wd-lang", lang); }, [lang]);

  useEffect(() => {
    const onHash = () => {
      const h = (location.hash || "#home").replace("#", "");
      setPage(["home", "boards", "craft", "community", "contact"].includes(h) ? h : "home");
      setMenuOpen(false);
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#ffd600",
    "accent2": "#ffe566",
    "grain": 0.04,
    "showCursor": true,
    "heroVariant": "floating",
    "boardRotate": -8
  }/*EDITMODE-END*/;

  const [tweaks, setTweaks] = window.useTweaks
    ? window.useTweaks(TWEAKS_DEFAULTS)
    : [TWEAKS_DEFAULTS, () => {}];

  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--accent", tweaks.accent);
    r.setProperty("--accent2", tweaks.accent2);
    r.setProperty("--grain", tweaks.grain);
  }, [tweaks]);

  const go = (p) => (e) => { e.preventDefault(); location.hash = p; };

  return (
    <>
      {tweaks.showCursor && <window.Cursor />}

      {/* NAV */}
      <nav className={"nav" + (menuOpen ? " is-open" : "")}>
        <a href="#home" className="nav-brand" onClick={go("home")} aria-label="Wakediamond home">
          <img src="assets/logo-wakediamond.svg" alt="WAKEDIAMOND Surfboards" className="brand-logo" />
        </a>
        <ul className="nav-links">
          <li><a href="#home" onClick={go("home")} className={page === "home" ? "active" : ""}>{t.nav.home}</a></li>
          <li><a href="#boards" onClick={go("boards")} className={page === "boards" ? "active" : ""}>{t.nav.boards}</a></li>
          <li><a href="#craft" onClick={go("craft")} className={page === "craft" ? "active" : ""}>{t.nav.craft}</a></li>
          <li><a href="#community" onClick={go("community")} className={page === "community" ? "active" : ""}>{t.nav.community}</a></li>
          <li><a href="#contact" onClick={go("contact")} className={page === "contact" ? "active" : ""}>{t.nav.contact}</a></li>
        </ul>
        <div className="nav-right">
          <div className="lang-toggle" role="group" aria-label="Language">
            <button className={lang === "de" ? "on" : ""} onClick={() => setLang("de")}>DE</button>
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <a href="#contact" onClick={go("contact")} className="nav-cta">
            <span className="dot" />
            {t.navCta}
          </a>
          <button
            className="nav-burger"
            aria-label="Menu"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((v) => !v)}
          >
            <span /><span /><span />
          </button>
        </div>
      </nav>

      {/* MOBILE MENU DRAWER */}
      <div className={"nav-drawer" + (menuOpen ? " is-open" : "")} onClick={() => setMenuOpen(false)}>
        <div className="nav-drawer-inner" onClick={(e) => e.stopPropagation()}>
          <ul className="nav-drawer-links">
            <li><a href="#home" onClick={go("home")} className={page === "home" ? "active" : ""}>{t.nav.home}</a></li>
            <li><a href="#boards" onClick={go("boards")} className={page === "boards" ? "active" : ""}>{t.nav.boards}</a></li>
            <li><a href="#craft" onClick={go("craft")} className={page === "craft" ? "active" : ""}>{t.nav.craft}</a></li>
            <li><a href="#community" onClick={go("community")} className={page === "community" ? "active" : ""}>{t.nav.community}</a></li>
            <li><a href="#contact" onClick={go("contact")} className={page === "contact" ? "active" : ""}>{t.nav.contact}</a></li>
          </ul>
        </div>
      </div>

      <main key={page}>
        {page === "home" && <window.HomePage t={t} tweaks={tweaks} go={go} />}
        {page === "boards" && <window.BoardsPage t={t} tweaks={tweaks} go={go} />}
        {page === "craft" && <window.CraftPage t={t} tweaks={tweaks} go={go} />}
        {page === "community" && <window.CommunityPage t={t} tweaks={tweaks} go={go} />}
        {page === "contact" && <window.ContactPage t={t} tweaks={tweaks} go={go} />}
      </main>

      <window.Footer t={t} go={go} />

      {/* TWEAKS */}
      {window.TweaksPanel && (
        <window.TweaksPanel>
          <window.TweakSection title="Brand">
            <window.TweakColor label="Accent" value={tweaks.accent} onChange={(v) => setTweaks({ accent: v })} />
            <window.TweakColor label="Accent 2" value={tweaks.accent2} onChange={(v) => setTweaks({ accent2: v })} />
          </window.TweakSection>
          <window.TweakSection title="Hero">
            <window.TweakRadio
              label="Variant"
              value={tweaks.heroVariant}
              options={[
                { label: "Floating board", value: "floating" },
                { label: "Full-bleed photo", value: "fullbleed" },
                { label: "Type-led", value: "typeled" },
              ]}
              onChange={(v) => setTweaks({ heroVariant: v })}
            />
            <window.TweakSlider label="Board angle" value={tweaks.boardRotate} min={-30} max={30} step={1} onChange={(v) => setTweaks({ boardRotate: v })} />
          </window.TweakSection>
          <window.TweakSection title="Atmosphere">
            <window.TweakSlider label="Grain" value={tweaks.grain} min={0} max={0.15} step={0.005} onChange={(v) => setTweaks({ grain: v })} />
            <window.TweakToggle label="Custom cursor" value={tweaks.showCursor} onChange={(v) => setTweaks({ showCursor: v })} />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
};

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