// Tweaks: color, font, hero variant, theme
function BPTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks · BetterPipe" defaultOpen={true}>
      <TweakSection title="Theme">
        <TweakRadio
          value={tweaks.theme}
          options={[{ value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }]}
          onChange={(v) => setTweak('theme', v)}
        />
      </TweakSection>

      <TweakSection title="Signal accent">
        <TweakRadio
          value={tweaks.accent}
          options={[
            { value: 'lime', label: 'Lime' },
            { value: 'amber', label: 'Amber' },
            { value: 'cyan', label: 'Cyan' },
            { value: 'orange', label: 'Orange' },
          ]}
          onChange={(v) => setTweak('accent', v)}
        />
      </TweakSection>

      <TweakSection title="Display font">
        <TweakRadio
          value={tweaks.displayFont}
          options={[
            { value: 'geist', label: 'Geist' },
            { value: 'serif', label: 'Serif' },
            { value: 'grotesk', label: 'Grotesk' },
          ]}
          onChange={(v) => setTweak('displayFont', v)}
        />
      </TweakSection>

      <TweakSection title="Hero copy">
        <TweakSelect
          value={tweaks.heroVariant}
          options={[
            { value: 'A', label: 'A · Grow beyond your network' },
            { value: 'B', label: 'B · From your website to a campaign' },
            { value: 'C', label: 'C · More clients like your best clients' },
            { value: 'D', label: 'D · A pipeline that fills itself' },
          ]}
          onChange={(v) => setTweak('heroVariant', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

window.BPTweaks = BPTweaks;