/* Lichtwerk — Tweaks island.
   Mounts a small React app that drives CSS variables + a couple of copy strings
   on the main (vanilla) document. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "serif": "Scandium",
  "taglineFont": "Baskerville",
  "accent": "#6f9fbf",
  "grain": 0.06,
  "tagline": "Concept.Creation.Film."
}/*EDITMODE-END*/;

const SERIFS = {
  "Scandium": "'Scandium', Georgia, serif",
  "Cormorant Garamond": "'Cormorant Garamond', Georgia, serif",
  "EB Garamond": "'EB Garamond', Georgia, serif",
  "Playfair Display": "'Playfair Display', Georgia, serif"
};

const TAGLINE_FONTS = {
  "Baskerville": "'Baskerville Custom', Baskerville, Georgia, serif",
  "Libre Caslon Display": "'Libre Caslon Display', Georgia, serif",
  "Libre Caslon Text": "'Libre Caslon Text', Georgia, serif",
  "Cormorant Garamond": "'Cormorant Garamond', Georgia, serif",
  "Scandium": "'Scandium', Georgia, serif"
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--font-serif', SERIFS[t.serif] || SERIFS["Cormorant Garamond"]);
    root.style.setProperty('--font-tagline', TAGLINE_FONTS[t.taglineFont] || TAGLINE_FONTS["Libre Caslon Display"]);
    root.style.setProperty('--glow', t.accent);
    root.style.setProperty('--grain-opacity', String(t.grain));
  }, [t.serif, t.taglineFont, t.accent, t.grain]);

  React.useEffect(() => {
    document.querySelectorAll('.hero__tagline, .footer__tag').forEach((el) => {
      el.textContent = t.tagline;
    });
  }, [t.tagline]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Typography" />
      <TweakSelect label="Serif face" value={t.serif}
        options={Object.keys(SERIFS)}
        onChange={(v) => setTweak('serif', v)} />
      <TweakSelect label="Tagline face" value={t.taglineFont}
        options={Object.keys(TAGLINE_FONTS)}
        onChange={(v) => setTweak('taglineFont', v)} />

      <TweakSection label="Atmosphere" />
      <TweakColor label="Light-leak accent" value={t.accent}
        options={['#6f9fbf', '#5ec8c8', '#8aa2d4', '#c9d4dc']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakSlider label="Film grain" value={t.grain} min={0} max={0.16} step={0.01}
        onChange={(v) => setTweak('grain', v)} />

      <TweakSection label="Copy" />
      <TweakText label="Tagline" value={t.tagline}
        onChange={(v) => setTweak('tagline', v)} />
    </TweaksPanel>
  );
}

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