/* ============================================================
   unClick — Tweaks panel
   Mounts the React panel (tweaks-panel.jsx) and bridges every
   control to CSS custom properties / body attributes so the
   vanilla page reacts live.
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "split",
  "accent": ["#F37022", "#FFA640"],
  "tone": "#F8F6F1",
  "headline": "serif",
  "motion": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement.style;
  // hero direction
  document.body.setAttribute("data-hero", t.hero);
  // accent (pair: [warm, light])
  const acc = Array.isArray(t.accent) ? t.accent : [t.accent, t.accent];
  root.setProperty("--color-accent-warm", acc[0]);
  root.setProperty("--color-accent-light", acc[1] || acc[0]);
  // section tone
  root.setProperty("--color-bg-warm", t.tone);
  // headline font
  root.setProperty("--font-display", t.headline === "sans"
    ? "'DM Sans', -apple-system, sans-serif"
    : "'DM Serif Display', Georgia, serif");
  // headline font is sans -> drop the italic styling (sans italic looks off): keep but lighter
  document.body.classList.toggle("headline-sans", t.headline === "sans");
  // motion
  document.body.classList.toggle("no-motion", !t.motion);
}

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

  React.useEffect(() => { applyTweaks(t); }, [t]);
  // when hero switches, re-kick the phone animation on the now-visible phone
  React.useEffect(() => {
    const id = setTimeout(() => { if (window.unclick) window.unclick.remountVisible(); }, 60);
    return () => clearTimeout(id);
  }, [t.hero]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero direction" />
      <TweakRadio
        label="Layout"
        value={t.hero}
        options={["split", "editorial", "cinematic"]}
        onChange={(v) => setTweak("hero", v)}
      />

      <TweakSection label="Color" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={[
          ["#F37022", "#FFA640"],
          ["#E2502E", "#FF7A3D"],
          ["#D98324", "#F0A93B"],
          ["#C7413C", "#FF7A6B"]
        ]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakColor
        label="Warm tone"
        value={t.tone}
        options={["#F8F6F1", "#F4EEE3", "#F2F3F5", "#F6F1EC"]}
        onChange={(v) => setTweak("tone", v)}
      />

      <TweakSection label="Type & motion" />
      <TweakRadio
        label="Headlines"
        value={t.headline}
        options={["serif", "sans"]}
        onChange={(v) => setTweak("headline", v)}
      />
      <TweakToggle
        label="Cinematic motion"
        value={t.motion}
        onChange={(v) => setTweak("motion", v)}
      />
    </TweaksPanel>
  );
}

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