// ============================================
// Tweaks panel — variations
// ============================================
function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Accent">
        <TweakColor label="Brand accent"
          value={t.accent}
          options={['#00A0E0', '#29B6F0', '#0070C0', '#003D5C']}
          onChange={v => setTweak('accent', v)}/>
      </TweakSection>

      <TweakSection title="Atmosphere">
        <TweakRadio label="Backdrop"
          value={t.backdrop}
          options={[
            { value: 'subtle', label: 'Subtle' },
            { value: 'cinematic', label: 'Cinematic' },
          ]}
          onChange={v => setTweak('backdrop', v)}/>
        <TweakToggle label="Film grain noise" value={t.noise} onChange={v => setTweak('noise', v)}/>
        <TweakToggle label="Custom cursor" value={t.cursor} onChange={v => setTweak('cursor', v)}/>
      </TweakSection>

      <TweakSection title="Type">
        <TweakRadio label="Headline font"
          value={t.headFont}
          options={[
            { value: 'cormorant', label: 'Cormorant' },
            { value: 'playfair', label: 'Playfair' },
          ]}
          onChange={v => setTweak('headFont', v)}/>
      </TweakSection>

      <TweakSection title="Hero">
        <TweakRadio label="Style"
          value={t.hero}
          options={[
            { value: 'editorial', label: 'Editorial' },
            { value: 'minimal', label: 'Minimal' },
          ]}
          onChange={v => setTweak('hero', v)}/>
      </TweakSection>
    </TweaksPanel>
  );
}

window.Tweaks = Tweaks;