/* global React, ReactDOM */
// ── Main app + Tweaks ──────────────────────────────────────────────────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "B",
  "theme": "verde",
  "density": "regular",
  "showPhone": true
}/*EDITMODE-END*/;

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

  // apply theme + density to document root
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme || 'verde');
    document.documentElement.setAttribute('data-density', tweaks.density || 'regular');
    document.documentElement.classList.toggle('hide-phone', !tweaks.showPhone);
  }, [tweaks.theme, tweaks.density, tweaks.showPhone]);

  return (
    <>
      <Nav headlineKey={tweaks.headline}/>
      <main>
        <Hero headlineKey={tweaks.headline}/>
        <StatsStrip/>
        <PainSection/>
        <SolutionSection/>
        <ShowcaseSection/>
        <BenefitsSection/>
        <SocialProofSection/>
        <PricingSection/>
        <ObjectionsSection/>
        <GuaranteeSection/>
        <UrgencySection/>
        <FaqSection/>
        <FinalCta/>
      </main>
      <Footer/>

      <TweaksPanel title="Tweaks" noDeckControls>
        <TweakSection label="Hero headline">
          <TweakRadio
            label="Variação"
            value={tweaks.headline}
            options={[
              { value: 'A', label: 'A · dor' },
              { value: 'B', label: 'B · preço' },
              { value: 'C', label: 'C · provoca' }
            ]}
            onChange={(v) => setTweak('headline', v)}
          />
          <div style={{fontFamily:'var(--font-mono)', fontSize: 11, color:'var(--muted, #888)', padding:'4px 0 8px', lineHeight: 1.5}}>
            {tweaks.headline === 'A' && 'Ângulo dor — sistema ruim'}
            {tweaks.headline === 'B' && 'Resultado + preço — recomendada Meta Ads frio'}
            {tweaks.headline === 'C' && 'Curiosidade / provocação'}
          </div>
        </TweakSection>

        <TweakSection label="Paleta">
          <TweakColor
            label="Tema"
            value={tweaks.theme}
            options={[
              ['#1F5C42','#E5C766','#F5F1E8'],  /* verde */
              ['#2B5BB0','#E8A75A','#F4F1EC'],  /* azul */
              ['#B85427','#3A8076','#F5EFE8'],  /* laranja */
              ['#262722','#E5B056','#F0EDE6']   /* grafite */
            ]}
            onChange={(v) => {
              const map = ['verde','azul','laranja','grafite'];
              const idx = ['#1F5C42','#2B5BB0','#B85427','#262722'].indexOf(v[0]);
              setTweak('theme', map[idx] || 'verde');
            }}
          />
        </TweakSection>

        <TweakSection label="Layout">
          <TweakRadio
            label="Densidade"
            value={tweaks.density}
            options={[
              { value: 'regular', label: 'Arejado' },
              { value: 'compact', label: 'Compacto' }
            ]}
            onChange={(v) => setTweak('density', v)}
          />
          <TweakToggle
            label="Mostrar mockup do app"
            value={tweaks.showPhone}
            onChange={(v) => setTweak('showPhone', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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