// tweaks-app.jsx — Tweaks panel for the MoV landing page.
// Applies values to the plain-HTML page via body data-attributes + CTA text.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split",
  "topMedia": "photo",
  "ctaText": "Reserve a sua já",
  "accent": "petrol",
  "corners": "rounded"
}/*EDITMODE-END*/;

const CTA_OPTIONS = [
  "Reserve a sua já",
  "Alugar no WhatsApp",
  "Quero minha poltrona",
  "Falar com especialista",
  "Garantir minha poltrona",
  "Pedir agora pelo WhatsApp",
];

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

  React.useEffect(() => {
    const b = document.body;
    b.dataset.hero = t.heroLayout;
    b.dataset.media = t.topMedia;
    b.dataset.accent = t.accent;
    b.dataset.corners = t.corners;
    // play the hero video only when it's the chosen top media
    const hv = document.getElementById('hero-video');
    if (hv) { if (t.topMedia === 'video') hv.play().catch(() => {}); else hv.pause(); }
  }, [t.heroLayout, t.topMedia, t.accent, t.corners]);

  React.useEffect(() => {
    document.querySelectorAll('.cta-t').forEach((el) => { el.textContent = t.ctaText; });
  }, [t.ctaText]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Topo (hero)" />
      <TweakRadio label="Layout do topo" value={t.heroLayout}
        options={[
          { value: 'split', label: 'Dividido' },
          { value: 'overlay', label: 'Sobre' },
          { value: 'fullbleed', label: 'Vídeo' },
        ]}
        onChange={(v) => setTweak('heroLayout', v)} />
      <TweakRadio label="Mídia do topo" value={t.topMedia}
        options={[
          { value: 'video', label: 'Vídeo' },
          { value: 'photo', label: 'Foto' },
        ]}
        onChange={(v) => setTweak('topMedia', v)} />

      <TweakSection label="Chamada (CTA)" />
      <TweakSelect label="Texto do botão" value={t.ctaText}
        options={CTA_OPTIONS}
        onChange={(v) => setTweak('ctaText', v)} />

      <TweakSection label="Identidade" />
      <TweakColor label="Cor de destaque" value={t.accent === 'tan' ? '#8F6F58' : '#2E4E58'}
        options={['#2E4E58', '#8F6F58']}
        onChange={(v) => setTweak('accent', v === '#8F6F58' ? 'tan' : 'petrol')} />
      <TweakRadio label="Cantos" value={t.corners}
        options={[
          { value: 'rounded', label: 'Arredondado' },
          { value: 'square', label: 'Reto' },
        ]}
        onChange={(v) => setTweak('corners', v)} />
    </TweaksPanel>
  );
}

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