/* ===== Tweaks: variations for DonnyCNguyen.com ===== */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakColor } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#5E7C63",
  "heroLayout": "split",
  "displayFont": "Archivo"
}/*EDITMODE-END*/;

// darken a hex toward black by amount (0..1)
function darken(hex, amt) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16);
  const d = (c) => Math.max(0, Math.round(c * (1 - amt)));
  const to = (c) => c.toString(16).padStart(2, '0');
  return '#' + to(d(r)) + to(d(g)) + to(d(b));
}

const FONT_STACK = {
  "Archivo": "'Archivo', system-ui, sans-serif",
  "Space Grotesk": "'Space Grotesk', system-ui, sans-serif",
  "Oswald": "'Oswald', system-ui, sans-serif"
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--accent-deep', darken(t.accent, 0.34));
    root.style.setProperty('--font-display', FONT_STACK[t.displayFont] || FONT_STACK.Archivo);
    root.setAttribute('data-hero', t.heroLayout);
  }, [t.accent, t.displayFont, t.heroLayout]);

  return (
    <TweaksPanel>
      <TweakSection label="Accent" />
      <TweakColor label="Accent color" value={t.accent}
        options={['#5E7C63', '#3C5A45', '#6F7378']}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Hero" />
      <TweakRadio label="Layout" value={t.heroLayout}
        options={['split', 'fullbleed', 'type']}
        onChange={(v) => setTweak('heroLayout', v)} />

      <TweakSection label="Typography" />
      <TweakSelect label="Display typeface" value={t.displayFont}
        options={['Archivo', 'Space Grotesk', 'Oswald']}
        onChange={(v) => setTweak('displayFont', v)} />
    </TweaksPanel>
  );
}

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