// PersonalFit Landing — root app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "B",
  "ctaText": "COMEÇAR MEUS 7 DIAS GRÁTIS",
  "density": "comfortable",
  "showUrgency": true,
  "accent": "#FF4D2E"
}/*EDITMODE-END*/;

const CTA_OPTIONS = {
  'COMEÇAR MEUS 7 DIAS GRÁTIS': 'COMEÇAR MEUS 7 DIAS GRÁTIS',
  'QUERO CAPTAR MAIS ALUNOS AGORA': 'QUERO CAPTAR MAIS ALUNOS AGORA',
  'ATIVAR MINHA CONTA GRÁTIS': 'ATIVAR MINHA CONTA GRÁTIS',
  'QUERO TRANSFORMAR MINHA CARREIRA': 'QUERO TRANSFORMAR MINHA CARREIRA',
};

const ACCENT_OPTIONS = [
  '#FF4D2E', // coral-orange (default)
  '#FF7A1A', // pure orange
  '#E63A1F', // deep red-orange
  '#111111', // black mode
];

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

  // Apply accent + density to root
  React.useEffect(() => {
    document.documentElement.style.setProperty('--orange', t.accent || '#FF4D2E');
    document.documentElement.style.setProperty('--accent', t.accent || '#FF4D2E');
    // derive shadow color
    document.documentElement.setAttribute('data-density', t.density);
  }, [t.accent, t.density]);

  const handleCta = React.useCallback(() => {
    // Visual feedback only — in production, would navigate / open checkout
    document.getElementById('oferta')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }, []);

  return (
    <>
      <Nav ctaText={t.ctaText} onCta={handleCta} />
      <main>
        <Hero headlineKey={t.headline} ctaText={t.ctaText} onCta={handleCta} />
        <Marquee />
        <ProblemSection />
        <SolutionSection />
        <BenefitsSection />
        <TestimonialSection />
        <Calculator ctaText={t.ctaText} onCta={handleCta} />
        <OfferSection ctaText={t.ctaText} onCta={handleCta} />
        {t.showUrgency && <UrgencyBlock />}
        <ObjectionsSection />
        <GuaranteeSection />
        <FAQSection />
        <FinalCTA ctaText={t.ctaText} onCta={handleCta} />
        <PSSection ctaText={t.ctaText} onCta={handleCta} />
      </main>
      <Footer />
      <StickyCTA ctaText="Quero meus 7 dias" onCta={handleCta} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Conteúdo" />
        <TweakRadio
          label="Headline"
          value={t.headline}
          onChange={(v) => setTweak('headline', v)}
          options={[
            { value: 'B', label: 'Bruno' },
            { value: 'A', label: '7 dias' },
            { value: 'C', label: 'Dor' },
          ]}
        />
        <TweakSelect
          label="CTA principal"
          value={t.ctaText}
          onChange={(v) => setTweak('ctaText', v)}
          options={Object.keys(CTA_OPTIONS).map(k => ({ value: k, label: k }))}
        />
        <TweakToggle
          label="Bloco de urgência"
          value={t.showUrgency}
          onChange={(v) => setTweak('showUrgency', v)}
        />

        <TweakSection label="Aparência" />
        <TweakColor
          label="Cor de marca"
          value={t.accent}
          onChange={(v) => setTweak('accent', v)}
          options={ACCENT_OPTIONS}
        />
        <TweakRadio
          label="Densidade"
          value={t.density}
          onChange={(v) => setTweak('density', v)}
          options={[
            { value: 'comfortable', label: 'Espaçoso' },
            { value: 'dense', label: 'Denso' },
          ]}
        />
      </TweaksPanel>
    </>
  );
}

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