/* ============================================================
   PROJETO EU — Tweaks (bridge para o site vanilla)
   ============================================================ */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "Tipografia gigante",
  "headline": "Aquilo que você não muda, você escolhe.",
  "accent": ["#E10600", "#9E0B0F"],
  "grain": true,
  "duotone": true
}/*EDITMODE-END*/;

const HERO_MAP = { "Quote cinematográfico": "1", "Editorial assimétrico": "2", "Tipografia gigante": "3" };
const HEADLINE_MAP = {
  "Você não foi criado para viver no automático.": "a",
  "Aquilo que você não muda, você escolhe.": "b",
  "Tudo começa com Deus, mas a ação é sua.": "c"
};

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

  useEffect(() => {
    const b = document.body;
    b.setAttribute('data-hero', HERO_MAP[t.hero] || '1');
    b.setAttribute('data-grain', t.grain ? 'on' : 'off');
    b.setAttribute('data-duotone', t.duotone ? 'on' : 'off');
    if (window.applyHeadline) window.applyHeadline(HEADLINE_MAP[t.headline] || 'a');
    const acc = Array.isArray(t.accent) ? t.accent : [t.accent, '#9E0B0F'];
    document.documentElement.style.setProperty('--red', acc[0]);
    document.documentElement.style.setProperty('--red-deep', acc[1] || acc[0]);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakRadio label="Layout do hero" value={t.hero}
        options={["Quote cinematográfico", "Editorial assimétrico", "Tipografia gigante"]}
        onChange={(v) => setTweak('hero', v)} />
      <TweakSelect label="Frase principal" value={t.headline}
        options={[
          "Você não foi criado para viver no automático.",
          "Aquilo que você não muda, você escolhe.",
          "Tudo começa com Deus, mas a ação é sua."
        ]}
        onChange={(v) => setTweak('headline', v)} />

      <TweakSection label="Cor de acento" />
      <TweakColor label="Vermelho" value={t.accent}
        options={[
          ["#E10600", "#9E0B0F"],
          ["#FF2A1A", "#B00710"],
          ["#C50016", "#7A0410"],
          ["#D7263D", "#8A1020"]
        ]}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Acabamento" />
      <TweakToggle label="Grão / textura nos fundos" value={t.grain}
        onChange={(v) => setTweak('grain', v)} />
      <TweakToggle label="Duotone preto/vermelho nas fotos" value={t.duotone}
        onChange={(v) => setTweak('duotone', v)} />
    </TweaksPanel>
  );
}

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