/* Mindburn Labs — Top nav, hero, tweaks panel */

function TopNav({ section, setSection, theme, setTheme }) {
  const links = [
    ["foundations", "01 Foundations"],
    ["components", "02 Components"],
    ["patterns", "03 Patterns"],
    ["brand", "04 Brand"],
    ["deck", "05 Deck"],
    ["surfaces", "06 Surfaces"],
  ];
  return (
    <nav className="ds-nav">
      <div className="ds-nav__inner">
        <div className="ds-nav__brand">
          <MindburnMark size={26} />
          <span className="ds-nav__title">Mindburn Labs</span>
          <span className="ds-nav__meta">Design system · v1.0</span>
        </div>
        <div className="ds-nav__links">
          {links.map(([k, t]) => (
            <a key={k} href={"#" + k} className="ds-nav__link" data-active={String(section === k)} onClick={(e) => { setSection(k); }}>{t}</a>
          ))}
        </div>
        <div className="ds-nav__tools">
          <div className="theme-dock" role="group" aria-label="Theme">
            <button data-on={String(theme === "light")} onClick={() => setTheme("light")} aria-label="Light"><Icon name="sun" /></button>
            <button data-on={String(theme === "dark")} onClick={() => setTheme("dark")} aria-label="Dark"><Icon name="moon" /></button>
          </div>
          <Button variant="primary" size="sm" iconRight="arrow-up-right">mindburn.dev</Button>
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  const today = "APR 18 · 2026";
  return (
    <section className="ds-hero surface-grid">
      <div className="ds-hero__inner">
        <div>
          <Eyebrow>Mindburn Labs · Design System v1.0</Eyebrow>
          <h1 className="ds-hero__title" style={{ marginTop: 16 }}>
            A system for<br /><em>the boundary</em>.
          </h1>
          <p className="ds-hero__lead">Tokens, components, patterns, brand and deck templates — everything needed to build Mindburn Labs surfaces. Light and dark. Platform, web, docs, decks, email.</p>
          <div style={{ display: "flex", gap: 10, marginTop: 24 }}>
            <Button variant="primary" iconRight="arrow-right">Jump to components</Button>
            <Button variant="ghost" iconRight="copy">Copy tokens.css</Button>
          </div>
        </div>
        <div className="ds-hero__meta">
          <div><span className="k">ISSUED</span><span className="v">{today}</span></div>
          <div><span className="k">VERSION</span><span className="v">1.0.0</span></div>
          <div><span className="k">THEMES</span><span className="v">Light · Dark</span></div>
          <div><span className="k">STATUS</span><span className="v" style={{ color: "var(--ok)" }}>STABLE</span></div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="ds-foot">
      <div className="ds-foot__inner">
        <div>
          <Lockup size={32} />
          <div style={{ marginTop: 10, maxWidth: "52ch" }}>Design system issued by Mindburn Labs. Tokens-first. Theme-agnostic. Built to travel from the platform to the pitch deck without losing its voice.</div>
        </div>
        <div style={{ display: "flex", gap: 18 }}>
          <div><div className="t-label">CONTACT</div><div style={{ marginTop: 4 }}>founders@mindburn.dev</div></div>
          <div><div className="t-label">ISSUED</div><div style={{ marginTop: 4 }}>APR 2026</div></div>
          <div><div className="t-label">SIGNED</div><div style={{ marginTop: 4 }}>sha256 · 3f2a…e18b</div></div>
        </div>
      </div>
    </footer>
  );
}

function Tweaks({ open, tweaks, setTweaks, onClose }) {
  if (!open) return null;
  const { theme, radius, density, accent } = tweaks;
  const Seg = ({ k, val, options }) => (
    <div className="tweaks__seg">
      {options.map((o) => (
        <button key={o} data-on={String(val === o)} onClick={() => setTweaks({ ...tweaks, [k]: o })}>{o}</button>
      ))}
    </div>
  );
  return (
    <div className="tweaks">
      <div className="tweaks__head">
        <div className="tweaks__title">Tweaks</div>
        <button onClick={onClose} style={{ color: "var(--ink-3)" }}><Icon name="close" /></button>
      </div>
      <div className="tweaks__row"><span className="label">Theme</span><Seg k="theme" val={theme} options={["light", "dark"]} /></div>
      <div className="tweaks__row"><span className="label">Radius</span><Seg k="radius" val={radius} options={["sharp", "default", "soft"]} /></div>
      <div className="tweaks__row"><span className="label">Density</span><Seg k="density" val={density} options={["default", "compact"]} /></div>
      <div className="tweaks__row"><span className="label">Accent hue</span>
        <input type="range" min="0" max="360" value={accent} onChange={(e) => setTweaks({ ...tweaks, accent: +e.target.value })} style={{ width: 120 }} />
      </div>
    </div>
  );
}

Object.assign(window, { TopNav, Hero, Footer, Tweaks });