function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Brand" />
      <TweakColor
        label="Colore primario"
        value={t.primaryColor}
        options={['#0e3a6b', '#06b6c9', '#1d4ed8', '#9333ea', '#ea580c']}
        onChange={(v) => setTweak('primaryColor', v)}
      />
      <TweakColor
        label="Accento"
        value={t.accentColor}
        options={['#06b6c9', '#f5d300', '#10b981', '#f97316', '#ec4899']}
        onChange={(v) => setTweak('accentColor', v)}
      />

      <TweakSection label="Layout" />
      <TweakRadio
        label="Hero"
        value={t.heroLayout}
        options={['split', 'centered']}
        onChange={(v) => setTweak('heroLayout', v)}
      />
      <TweakRadio
        label="Densità"
        value={t.density}
        options={['compact', 'regular']}
        onChange={(v) => setTweak('density', v)}
      />

      <TweakSection label="Tema" />
      <TweakToggle
        label="Modalità scura"
        value={t.dark}
        onChange={(v) => setTweak('dark', v)}
      />

      <TweakSection label="Copy" />
      <TweakText
        label="Etichetta CTA"
        value={t.ctaLabel}
        onChange={(v) => setTweak('ctaLabel', v)}
      />
    </TweaksPanel>
  );
}
window.TweaksUI = TweaksUI;