/* global React, ReactDOM */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "Desentupimento sem furada e sem visita paga.",
  "highlight": "Orçamento grátis.",
  "subline": "Você recebe o valor pelo WhatsApp antes do técnico sair. Só paga se aprovar. Atendimento 24h em Goiânia.",
  "ctaLabel": "Receber orçamento grátis",
  "brandName": "Delta Desentupidora",
  "brandTagline": "Plantão 24h · Goiânia",
  "accentColor": "warm",
  "heroStyle": "dark"
}/*EDITMODE-END*/;

const COPY_PRESETS = {
  urgent: {
    headline: "Entupiu agora? Resolvemos em até",
    highlight: "30 minutos.",
    subline: "Plantão 24h em Goiânia. Pia, ralo, vaso, esgoto. Equipe a caminho sem você nem desligar o WhatsApp.",
    ctaLabel: "SOS · Chamar agora",
  },
  trust: {
    headline: "A desentupidora mais bem avaliada de Goiânia.",
    highlight: "4.9★ no Google.",
    subline: "Mais de 8.000 atendimentos, 90 dias de garantia escrita e orçamento honesto antes da visita. Sem letras miúdas.",
    ctaLabel: "Falar com a Delta",
  },
  price: {
    headline: "Desentupimento sem furada e sem visita paga.",
    highlight: "Orçamento grátis.",
    subline: "Você recebe o valor pelo WhatsApp antes do técnico sair. Só paga se aprovar. Atendimento 24h em Goiânia.",
    ctaLabel: "Receber orçamento grátis",
  },
};

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

  // Aplicar tema de cor via variáveis CSS
  useEffect(() => {
    const root = document.documentElement;
    const palettes = {
      warm:  { orange: 'oklch(0.72 0.18 45)',  orangeDeep: 'oklch(0.62 0.20 38)' }, // laranja default
      red:   { orange: 'oklch(0.65 0.22 25)',  orangeDeep: 'oklch(0.55 0.22 25)' }, // vermelho urgência
      green: { orange: 'oklch(0.65 0.16 145)', orangeDeep: 'oklch(0.55 0.17 145)' },// verde (combina c/ wpp)
      yellow:{ orange: 'oklch(0.80 0.16 85)',  orangeDeep: 'oklch(0.68 0.17 75)' }, // amarelo
    };
    const p = palettes[t.accentColor] || palettes.warm;
    root.style.setProperty('--c-orange', p.orange);
    root.style.setProperty('--c-orange-deep', p.orangeDeep);
  }, [t.accentColor]);

  const applyPreset = (key) => {
    const preset = COPY_PRESETS[key];
    setTweak({
      headline: preset.headline,
      highlight: preset.highlight,
      subline: preset.subline,
      ctaLabel: preset.ctaLabel,
    });
  };

  return (
    <>
      <UrgencyBar />
      <Header brandName={t.brandName} brandTagline={t.brandTagline} />
      <Hero
        headline={t.headline}
        highlight={t.highlight}
        sub={t.subline}
        ctaPrimary={t.ctaLabel}
      />
      <ProofStrip />
      <Services />
      <WhyUs />
      <Process />
      <Coverage />
      <Testimonials />
      <Guarantee />
      <FAQ />
      <FinalCTA />
      <Footer />
      <FloatingWpp />
      <ExitIntentPopup />

      <TweaksPanel title="Tweaks da LP">
        <TweakSection label="Presets de copy (A/B)">
          <div style={{display: 'grid', gridTemplateColumns: '1fr', gap: 6, padding: '4px 0 8px'}}>
            <TweakButton label="⚡ Ângulo: Urgência" onClick={() => applyPreset('urgent')} />
            <TweakButton label="⭐ Ângulo: Confiança" onClick={() => applyPreset('trust')} />
            <TweakButton label="💰 Ângulo: Preço/orçamento" onClick={() => applyPreset('price')} />
          </div>
        </TweakSection>

        <TweakSection label="Estilo">
          <TweakRadio
            label="Cor do CTA"
            value={t.accentColor}
            onChange={v => setTweak('accentColor', v)}
            options={[
              { value: 'warm',   label: 'Laranja' },
              { value: 'red',    label: 'Vermelho' },
              { value: 'green',  label: 'Verde' },
              { value: 'yellow', label: 'Amarelo' },
            ]}
          />
        </TweakSection>

        <TweakSection label="Copy editável">
          <TweakText label="Headline" value={t.headline} onChange={v => setTweak('headline', v)} />
          <TweakText label="Destaque" value={t.highlight} onChange={v => setTweak('highlight', v)} />
          <TweakText label="Subtítulo" value={t.subline} onChange={v => setTweak('subline', v)} />
          <TweakText label="CTA principal" value={t.ctaLabel} onChange={v => setTweak('ctaLabel', v)} />
        </TweakSection>

        <TweakSection label="Marca">
          <TweakText label="Nome" value={t.brandName} onChange={v => setTweak('brandName', v)} />
          <TweakText label="Tagline" value={t.brandTagline} onChange={v => setTweak('brandTagline', v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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