/* Tweaks da landing Copa BCMED — alterna layout, simula fase, fontes, cores, CTA */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "layout": "Torcida",
  "titleFont": "Oswald",
  "blueTone": "Azul Copa",
  "stage": "Automático (data real)",
  "ctaText": "Garantir meu Gol de Clínica",
  "whatsapp": "https://api.whatsapp.com/send?phone=5511999134744&text=Ol%C3%A1,%20vim%20do%20hotsite%20da%20COPA%20BCMED%20e%20gostaria%20de%20garantir%20meu%20cashback"
}/*EDITMODE-END*/;

const FONT_MAP = {
  "Oswald": '"Oswald", system-ui, sans-serif',
  "Anton": '"Anton", system-ui, sans-serif',
  "Archivo": '"Archivo", system-ui, sans-serif'
};
const BLUE_MAP = {
  "Azul Copa":   { deep:"#00179a", base:"#0027ca", bright:"#1f49ec" },
  "Azul Noite":  { deep:"#020c3d", base:"#0a2b8f", bright:"#1a44d8" },
  "Azul Vivo":   { deep:"#0a1fb5", base:"#1736e6", bright:"#2f5cff" }
};
const STAGE_OPTIONS = [
  "Automático (data real)",
  "Antes de Marrocos — 10%",
  "Antes de Haiti — 8%",
  "Antes de Escócia — 7%",
  "Dezesseis-avos — 6%",
  "Oitavas — 5%",
  "Quartas — 4,5%",
  "Semifinal — 4%",
  "Final — 3,5%"
];

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

  React.useEffect(()=>{
    const root = document.documentElement;
    // Layout (as 2 variações da página inteira)
    document.body.classList.remove('layout-torcida','layout-placar');
    document.body.classList.add(t.layout === 'Placar' ? 'layout-placar' : 'layout-torcida');
    // Fonte do título
    root.style.setProperty('--font-display', FONT_MAP[t.titleFont] || FONT_MAP['Oswald']);
    // Tom do azul
    const b = BLUE_MAP[t.blueTone] || BLUE_MAP['Azul Copa'];
    root.style.setProperty('--blue-deep', b.deep);
    root.style.setProperty('--blue', b.base);
    root.style.setProperty('--blue-bright', b.bright);
    // Fase simulada
    if(window.Copa){
      const idx = STAGE_OPTIONS.indexOf(t.stage);
      window.Copa.setStageOverride(idx <= 0 ? null : idx - 1);
      window.Copa.setCtaText(t.ctaText || 'Garantir meu Gol de Clínica');
      window.Copa.setWhatsApp(t.whatsapp || '#');
    }
  }, [t]);

  return (
    <TweaksPanel title="Tweaks · Copa BCMED">
      <TweakSection label="Layout da página" />
      <TweakRadio label="Versão" value={t.layout} options={["Torcida","Placar"]}
        onChange={(v)=>setTweak('layout', v)} />

      <TweakSection label="Relógio da Copa" />
      <TweakSelect label="Fase atual" value={t.stage} options={STAGE_OPTIONS}
        onChange={(v)=>setTweak('stage', v)} />

      <TweakSection label="Marca" />
      <TweakRadio label="Fonte do título" value={t.titleFont} options={["Oswald","Anton","Archivo"]}
        onChange={(v)=>setTweak('titleFont', v)} />
      <TweakRadio label="Tom do azul" value={t.blueTone} options={["Azul Copa","Azul Noite","Azul Vivo"]}
        onChange={(v)=>setTweak('blueTone', v)} />

      <TweakSection label="Conversão" />
      <TweakText label="Texto do botão" value={t.ctaText}
        onChange={(v)=>setTweak('ctaText', v)} />
      <TweakText label="Link do WhatsApp" value={t.whatsapp}
        onChange={(v)=>setTweak('whatsapp', v)} />
    </TweaksPanel>
  );
}

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