/* adsc. — Tweaks island. Mounts only the panel; drives the vanilla page
   via CSS custom properties, body classes, and the hero headline. */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2540DB",
  "headline": "too-right",
  "paper": "cream",
  "theme": "light",
  "motion": true
}/*EDITMODE-END*/;

const HEADLINES = {
  "met-them":   'The future of humanity is being built by people you\'ve never heard of. <span class="serif-it">We\'ve already met them.</span>',
  "first-check":'First check to the <span class="serif-it">outliers.</span>',
  "too-right":  'Too young, too early, <span class="serif-it">too right.</span>',
  "seasoned":   'Young enough to find them. <span class="serif-it">Seasoned</span> enough to back them.'
};

const PAPERS = {
  "cream": { p: "#F1ECE1", p2: "#E9E3D5", card: "#F8F5EE" },
  "stone": { p: "#EBE9E3", p2: "#E0DDD5", card: "#F5F3EE" },
  "bone":  { p: "#F6F3EC", p2: "#EDE9DF", card: "#FBF9F4" }
};

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

  useEffect(() => {
    const root = document.documentElement;
    // accent
    root.style.setProperty("--blue", t.accent);
    // paper tone
    const pp = PAPERS[t.paper] || PAPERS.cream;
    root.style.setProperty("--paper", pp.p);
    root.style.setProperty("--paper-2", pp.p2);
    root.style.setProperty("--card", pp.card);
    // headline
    const h1 = document.querySelector(".hero h1");
    if (h1 && HEADLINES[t.headline]) h1.innerHTML = HEADLINES[t.headline];
    // hero theme
    document.body.classList.toggle("theme-dark", t.theme === "dark");
    // motion
    document.body.classList.toggle("no-motion", !t.motion);
  }, [t.accent, t.paper, t.headline, t.theme, t.motion]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={["#2540DB", "#5B3DE0", "#0E8F7E", "#D8442E"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSelect
        label="Paper tone"
        value={t.paper}
        options={["cream", "stone", "bone"]}
        onChange={(v) => setTweak("paper", v)}
      />
      <TweakSection label="Hero" />
      <TweakRadio
        label="Theme"
        value={t.theme}
        options={["light", "dark"]}
        onChange={(v) => setTweak("theme", v)}
      />
      <TweakSelect
        label="Headline"
        value={t.headline}
        options={["met-them", "first-check", "too-right", "seasoned"]}
        onChange={(v) => setTweak("headline", v)}
      />
      <TweakSection label="Motion" />
      <TweakToggle
        label="Entrance animation"
        value={t.motion}
        onChange={(v) => setTweak("motion", v)}
      />
    </TweaksPanel>
  );
}

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