function Tweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakColor label="Accent" value={tweaks.accent} onChange={v => setTweak('accent', v)}
        options={["#996962","#64513D","#a07a5d","#7d5040","#b88a82"]} />
      <TweakColor label="Background" value={tweaks.bg} onChange={v => setTweak('bg', v)}
        options={["#F4F2EC","#EAE8E2","#D8D4CA"]} />

      <TweakSection label="Hero" />
      <TweakRadio label="Copy" value={tweaks.heroVariant} onChange={v => setTweak('heroVariant', v)}
        options={["Revelar","Ritual","Esencia"]} />
      <TweakToggle label="Marquee" value={tweaks.showMarquee} onChange={v => setTweak('showMarquee', v)} />

      <TweakSection label="Type" />
      <TweakSelect label="Display serif" value={tweaks.serif} onChange={v => setTweak('serif', v)}
        options={["Cormorant Garamond","Playfair Display","Tenor Sans","DM Serif Display"]} />

      <TweakSection label="Layout" />
      <TweakRadio label="Density" value={tweaks.density} onChange={v => setTweak('density', v)}
        options={["Tight","Normal","Airy"]} />
    </TweaksPanel>
  );
}

window.Tweaks = Tweaks;