// app.jsx — main shell:
// • Header with brand + nav + theme toggle pill
// • Assembles all 9 sections of the homepage
// • Hosts the Tweaks panel (hero copy + showcase layout)
// • Sets [data-theme] on the root which flips CSS variables
//
// Tweaks defaults are wrapped in EDITMODE markers so the host
// can persist changes to disk via __edit_mode_set_keys.

/* eslint-disable react/prop-types */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "heroCopy": "workflow"
}/*EDITMODE-END*/;

// ─────────── header / nav ───────────
function Header({ theme, setTheme }) {
  const themes = [
    { id: "light", label: "Light" },
    { id: "dark",  label: "Dark" },
  ];
  // animate the thumb under the active button
  const pillRef = React.useRef(null);
  const [thumb, setThumb] = React.useState({ left: 3, width: 92 });
  React.useEffect(() => {
    if (!pillRef.current) return;
    const active = pillRef.current.querySelector("button.active");
    if (active) {
      const pr = pillRef.current.getBoundingClientRect();
      const ar = active.getBoundingClientRect();
      setThumb({ left: ar.left - pr.left, width: ar.width });
    }
  }, [theme]);

  return (
    <header className="site-header">
      <div className="container-wide site-header-inner">
        <a className="brand" href="#top">
          Prexi<span className="brand-dot" />
        </a>
        <nav className="nav">
          {window.NAV_LINKS.map((l) => (
            <a key={l.label} href={l.href}>{l.label}</a>
          ))}
        </nav>
        <div className="row gap-3" style={{ alignItems: "center" }}>
          <div className="theme-pill" ref={pillRef}>
            <span className="thumb" style={{ left: thumb.left, width: thumb.width }} />
            {themes.map((t) => (
              <button
                key={t.id}
                className={theme === t.id ? "active" : ""}
                onClick={() => setTheme(t.id)}
                aria-pressed={theme === t.id}
              >
                <ThemeIcon kind={t.id} /> {t.label}
              </button>
            ))}
          </div>
          <a className="btn btn-primary btn-sm" href="book-a-call.html">
            Talk to founder
          </a>
        </div>
      </div>
    </header>
  );
}

function ThemeIcon({ kind }) {
  if (kind === "light") return (
    <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
      <circle cx="6" cy="6" r="2.5" /><path d="M6 1V2.5M6 9.5V11M1 6H2.5M9.5 6H11M2.4 2.4L3.5 3.5M8.5 8.5L9.6 9.6M9.6 2.4L8.5 3.5M3.5 8.5L2.4 9.6" />
    </svg>
  );
  return (
    <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M10 7.4A4.4 4.4 0 014.6 2C2.6 2.5 1 4.4 1 6.7c0 2.6 2.1 4.7 4.7 4.7 2.3 0 4.2-1.6 4.7-3.6z" />
    </svg>
  );
}

// ─────────── scroll-reveal helper ───────────
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -80px 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ─────────── tweaks panel content ───────────
function PrexiTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakRadio
        label="Mode"
        value={t.theme}
        options={[
          { value: "light", label: "Light" },
          { value: "dark",  label: "Dark" },
        ]}
        onChange={(v) => setTweak("theme", v)}
      />
      <TweakSection label="Hero" />
      <TweakSelect
        label="Copy variant"
        value={t.heroCopy}
        options={[
          { value: "workflow", label: "Scale your Meta campaigns" },
          { value: "fatigue",  label: "Beat ad fatigue" },
          { value: "grind",    label: "Without the production grind" },
        ]}
        onChange={(v) => setTweak("heroCopy", v)}
      />
    </TweaksPanel>
  );
}

// ─────────── App ───────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // sync [data-theme] on html element when theme changes; persist for
  // cross-page consistency with the supporting pages (localStorage).
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
    try { localStorage.setItem("prexi-theme", t.theme); } catch (e) {}
  }, [t.theme]);

  // on first mount, adopt any theme chosen on another page
  React.useEffect(() => {
    try {
      const saved = localStorage.getItem("prexi-theme");
      if (saved && saved !== t.theme) setTweak("theme", saved);
    } catch (e) {}
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // scroll reveal once per mount (re-runs are fine; observer keeps state)
  useReveal();

  const heroCopy = window.HERO_COPY_VARIANTS[t.heroCopy] || window.HERO_COPY_VARIANTS.workflow;

  return (
    <>
      <Header theme={t.theme} setTheme={(v) => setTweak("theme", v)} />
      <main>
        <Hero copy={heroCopy} />
        <LogoStrip />
        <CreativePipeline />
        <HowItWorks />
        <Differentiators />
        <Trust />
        <FinalCTA />
      </main>
      <Footer />
      <PrexiTweaks t={t} setTweak={setTweak} />
    </>
  );
}

Object.assign(window, { App });