// tweaks-app.jsx — mounts the Tweaks panel and applies choices to the live site.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "type": "elegant",
  "accent": "#C4366F",
  "corners": "soft"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.dataset.type = t.type;
    root.dataset.corners = t.corners;
    root.style.setProperty('--accent', t.accent);
  }, [t.type, t.corners, t.accent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Type voice" />
      <TweakRadio
        label="Personality"
        value={t.type}
        options={[
          { value: 'elegant', label: 'Elegant' },
          { value: 'friendly', label: 'Friendly' },
        ]}
        onChange={(v) => setTweak('type', v)}
      />
      <p style={{margin:'6px 2px 0', fontSize:12, lineHeight:1.5, color:'#838996'}}>
        {t.type === 'elegant'
          ? 'Newsreader + Hanken Grotesk — editorial & sophisticated.'
          : 'DM Serif Display + DM Sans — warm & approachable.'}
      </p>

      <TweakSection label="Accent color" />
      <TweakColor
        label="Lead color"
        value={t.accent}
        options={['#C4366F', '#BC5981']}
        onChange={(v) => setTweak('accent', v)}
      />

      <TweakSection label="Shape" />
      <TweakRadio
        label="Corners"
        value={t.corners}
        options={[
          { value: 'soft', label: 'Soft' },
          { value: 'sharp', label: 'Sharp' },
        ]}
        onChange={(v) => setTweak('corners', v)}
      />
    </TweaksPanel>
  );
}

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