/* app.jsx — composition, theme, scroll-spy, tweaks */

const ACCENTS = {
  lime:   [132, 0.185], blue: [248, 0.13], amber: [70, 0.155],
  violet: [300, 0.15],  cyan: [205, 0.12], coral: [28, 0.16],
};
const MONOS = {
  "IBM Plex Mono": '"IBM Plex Mono", monospace',
  "JetBrains Mono": '"JetBrains Mono", monospace',
  "Space Mono": '"Space Mono", monospace',
  "Fira Code": '"Fira Code", monospace',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "lime",
  "theme": "dark",
  "mono": "IBM Plex Mono",
  "typing": true,
  "grid": true,
  "autoscroll": true
}/*EDITMODE-END*/;

function MobileMenu({ open, onClose, active }) {
  return (
    <div className={"msheet" + (open ? " open" : "")}>
      <div className="top">
        <span className="brand">haggai<span style={{ color: "var(--acc-text)" }}>.dev</span></span>
        <button className="x" onClick={onClose} aria-label="Close"><Icon name="x" /></button>
      </div>
      {window.NAV.map(([id, lbl]) => (
        <a key={id} className="link" href={"#" + id} onClick={onClose} style={{ color: active === id ? "var(--acc-text)" : undefined }}>
          {lbl}
        </a>
      ))}
    </div>
  );
}

function AccentSwatches({ value, onChange }) {
  return (
    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", padding: "2px 0 4px" }}>
      {Object.entries(ACCENTS).map(([k, [h, c]]) => (
        <button key={k} onClick={() => onChange(k)} title={k}
          style={{
            width: 30, height: 30, borderRadius: 8, cursor: "pointer",
            background: `oklch(0.82 ${c} ${h})`,
            border: value === k ? "2px solid var(--fg)" : "2px solid transparent",
            outline: value === k ? "none" : "1px solid var(--line2)",
          }} />
      ))}
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = React.useState("home");
  const [menu, setMenu] = React.useState(false);
  const [top, setTop] = React.useState(false);
  useReveal();

  // apply theme + accent + font to the document
  React.useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-theme", t.theme);
    const [h, c] = ACCENTS[t.accent] || ACCENTS.lime;
    r.style.setProperty("--acc-h", h);
    r.style.setProperty("--acc-c", c);
    r.style.setProperty("--mono", MONOS[t.mono] || MONOS["IBM Plex Mono"]);
  }, [t.theme, t.accent, t.mono]);

  // scroll-spy + back-to-top
  React.useEffect(() => {
    const ids = window.NAV.map(n => n[0]);
    const io = new IntersectionObserver((ents) => {
      ents.forEach(e => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: "-45% 0px -50% 0px" });
    ids.forEach(id => { const el = document.getElementById(id); if (el) io.observe(el); });
    const onScroll = () => setTop(window.scrollY > 600);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => { io.disconnect(); window.removeEventListener("scroll", onScroll); };
  }, []);

  const toggleTheme = () => setTweak("theme", t.theme === "dark" ? "light" : "dark");

  return (
    <React.Fragment>
      <Titlebar active={active} theme={t.theme} onTheme={toggleTheme} onMenu={() => setMenu(true)} />
      <MobileMenu open={menu} onClose={() => setMenu(false)} active={active} />
      <main>
        <Hero typing={t.typing} grid={t.grid} roles={window.ROLES} />
        <Ventures />
        <Features />
        <Portfolio />
        <Skills />
        <Testimonials auto={t.autoscroll} />
        <Clients />
        <Contact />
      </main>
      <Footer />

      <button className={"totop" + (top ? " show" : "")} onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} aria-label="Back to top">
        <Icon name="arrowUp" />
      </button>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakRow label="Signal color">
          <AccentSwatches value={t.accent} onChange={(v) => setTweak("accent", v)} />
        </TweakRow>
        <TweakSection label="Theme & type" />
        <TweakRadio label="Mode" value={t.theme} options={["dark", "light"]} onChange={(v) => setTweak("theme", v)} />
        <TweakSelect label="Mono typeface" value={t.mono} options={Object.keys(MONOS)} onChange={(v) => setTweak("mono", v)} />
        <TweakSection label="Motion" />
        <TweakToggle label="Headline typing" value={t.typing} onChange={(v) => setTweak("typing", v)} />
        <TweakToggle label="Dotted hero grid" value={t.grid} onChange={(v) => setTweak("grid", v)} />
        <TweakToggle label="Auto-scroll reviews" value={t.autoscroll} onChange={(v) => setTweak("autoscroll", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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