/* tweaks-app.jsx — live controls for coreyshay.com */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "paper": ["#F8F6F1", "#F1ECE1"],
  "teal":  ["#123E3B", "#1F5B57", "#2E7C77", "#3E7E8C", "#A9CBC6", "#CFE0DC"],
  "serif": "\"Playfair Display\", Georgia, serif",
  "wash":  1,
  "imgs":  "torn"
}/*EDITMODE-END*/;

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

  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--paper',   t.paper[0]);
    r.setProperty('--paper-2', t.paper[1]);
    const [n900,n700,n500,nblue,n200,n100] = t.teal;
    r.setProperty('--t-900', n900);
    r.setProperty('--t-700', n700);
    r.setProperty('--t-500', n500);
    r.setProperty('--t-blue', nblue);
    r.setProperty('--t-200', n200);
    r.setProperty('--t-100', n100);
    r.setProperty('--serif', t.serif);
    r.setProperty('--wash-op', String(t.wash));
  }, [t.paper, t.teal, t.serif, t.wash]);

  useEffect(() => {
    document.body.classList.remove('imgs-torn','imgs-rounded','imgs-rect');
    document.body.classList.add('imgs-' + t.imgs);
  }, [t.imgs]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Paper" />
      <TweakColor label="Background warmth" value={t.paper}
        options={[
          ["#F8F6F1", "#F1ECE1"],
          ["#F6F6F4", "#ECECE8"],
          ["#F3EEE2", "#EAE2D2"],
          ["#FBF9F4", "#F4F0E8"]
        ]}
        onChange={(v) => setTweak('paper', v)} />

      <TweakSection label="Accent wash" />
      <TweakColor label="Teal hue" value={t.teal}
        options={[
          ["#123E3B", "#1F5B57", "#2E7C77", "#3E7E8C", "#A9CBC6", "#CFE0DC"],
          ["#103A45", "#1C5663", "#2C7585", "#3E8AA0", "#A7C8D2", "#CDDFE6"],
          ["#14352E", "#1F5547", "#2F7561", "#3C8A78", "#AECCC0", "#D2E2D9"]
        ]}
        onChange={(v) => setTweak('teal', v)} />
      <TweakSlider label="Wash amount" value={t.wash} min={0} max={1.6} step={0.1}
        onChange={(v) => setTweak('wash', v)} />

      <TweakSection label="Type & Image" />
      <TweakRadio label="Headline" value={t.serif}
        options={[
          { label: "Playfair", value: "\"Playfair Display\", Georgia, serif" },
          { label: "Cormorant", value: "\"Cormorant Garamond\", Georgia, serif" }
        ]}
        onChange={(v) => setTweak('serif', v)} />
      <TweakRadio label="Photo edges" value={t.imgs}
        options={["torn", "rounded", "rect"]}
        onChange={(v) => setTweak('imgs', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<TweaksApp />);