/* App entry */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "lime",
  "depth": "deep"
} /*EDITMODE-END*/;

const PALETTES = {
  lime: { lime: 'oklch(0.88 0.20 130)', limeSoft: 'oklch(0.94 0.10 130)', deep: 'oklch(0.22 0.05 145)', mid: 'oklch(0.55 0.14 145)' },
  acid: { lime: 'oklch(0.92 0.22 125)', limeSoft: 'oklch(0.95 0.12 125)', deep: 'oklch(0.18 0.05 140)', mid: 'oklch(0.52 0.14 140)' },
  fresh: { lime: 'oklch(0.84 0.16 150)', limeSoft: 'oklch(0.92 0.08 150)', deep: 'oklch(0.20 0.04 155)', mid: 'oklch(0.50 0.12 155)' },
  emerald: { lime: 'oklch(0.82 0.15 160)', limeSoft: 'oklch(0.92 0.07 160)', deep: 'oklch(0.20 0.04 165)', mid: 'oklch(0.48 0.12 165)' }
};

const DEPTHS = {
  deep: { bg: '#0E1410', bgDeep: '#070A08', surface: '#15201A', surface2: '#1B2820', line: '#243228' },
  pitch: { bg: '#080B09', bgDeep: '#000', surface: '#10171250', surface2: '#181F1B', line: '#1C2620' },
  forest: { bg: '#10180F', bgsDeep: '#080D08', surface: '#1A241C', surface2: '#202D22', line: '#283825' }
};

function applyTweaks(t) {
  const p = PALETTES[t.palette] || PALETTES.lime;
  const d = DEPTHS[t.depth] || DEPTHS.deep;
  const r = document.documentElement.style;
  r.setProperty('--lime', p.lime);
  r.setProperty('--lime-soft', p.limeSoft);
  r.setProperty('--green-deep', p.deep);
  r.setProperty('--green-mid', p.mid);
  r.setProperty('--bg', d.bg);
  r.setProperty('--bg-deep', d.bgDeep);
  r.setProperty('--surface', d.surface);
  r.setProperty('--surface-2', d.surface2);
  r.setProperty('--line', d.line);
}

function Topbar() {
  React.useEffect(() => {
    const bar = document.createElement('div');
    bar.id = 'topbar-fixed';
    bar.style.cssText = 'position:fixed;top:0;left:0;right:0;z-index:9999;background:linear-gradient(90deg,#051a08 0%,#0a2e10 100%);color:#e8f5e9;font-family:Barlow,sans-serif;font-size:13px;font-weight:500;letter-spacing:0.03em;text-align:center;padding:10px 16px;border-bottom:1px solid rgba(100,200,100,0.2);';
    bar.innerHTML = '🔔 Garanta sua vaga por <strong style="color:oklch(0.88 0.20 130);font-weight:800">R$77,00</strong> durante 24 horas na pré-venda';
    document.body.appendChild(bar);
    return () => { const el = document.getElementById('topbar-fixed'); if (el) el.remove(); };
  }, []);
  return null;
}

function StickyBottomBtn() {
  React.useEffect(() => {
    const btn = document.createElement('a');
    btn.id = 'sticky-bottom-btn';
    btn.href = '#inscricao';
    btn.style.cssText = 'position:fixed;bottom:0;left:0;right:0;z-index:9998;background:#FFD200;color:#0d2e10;font-family:Barlow,sans-serif;font-size:15px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;text-align:center;text-decoration:none;padding:16px 24px;display:block;box-shadow:0 -2px 16px rgba(0,0,0,0.3);';
    btn.textContent = 'GARANTA SUA VAGA POR R$77,00 →';
    document.body.appendChild(btn);
    return () => { const el = document.getElementById('sticky-bottom-btn'); if (el) el.remove(); };
  }, []);
  return null;
}

function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#top" className="brand">
          <span className="brand-mark mono">
</span>
          Copa no Shape
        </a>
        <div className="nav-links">
          <span className="nav-section-label">página de vendas</span>
          <a href="#metodologia">Metodologia</a>
          <a href="#autores">Mentores</a>
          <a href="#resultados">Resultados</a>
          <a href="#faq">Dúvidas</a>
          <a href="#inscricao" className="btn btn-primary">Quero entrar</a>
        </div>
      </div>
    </nav>);
}

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

  React.useEffect(() => {applyTweaks(tweaks);}, [tweaks]);

  React.useEffect(() => {
    const targets = document.querySelectorAll(
      '.section-head, .pain-card, .num-row, .stat, .mentor-grid, .carousel-card, .pricing-card, .faq-item, .final, .phone-showcase, .manifesto, .stats-row, .proof-card, .duo-grid, .duo-bio, .whatis-grid, .testi-stage, .hv3-stat, .hv3-foot, .hv3-lotes, .hv3-cta-row, .hv3-trust, .hv3-date, .lotes-row, .tcard, .num-card2, .price-includes'
    );
    targets.forEach((el, i) => {
      el.classList.add('scroll-anim');
      if (el.classList.contains('pain-card') || el.classList.contains('stat') || el.classList.contains('proof-card') || el.classList.contains('duo-bio') || el.classList.contains('tcard') || el.classList.contains('num-card2')) {
        el.style.transitionDelay = (i % 5) * 0.08 + 's';
      }
    });
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('scroll-anim-in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
    targets.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <Topbar />
      <StickyBottomBtn />
      <div style={{paddingTop: 44}}>
      <AuroraBackground opacity={0.5} />
      <Hero />
      <Pain />
      <Manifesto />
      <WhatIs />
      <Receive />
      <Mentors />
      <Testimonials />
      <Pricing />
      <FAQ />
      <Final />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Paleta de verdes">
          <TweakRadio
            label="Verde"
            value={tweaks.palette}
            onChange={(v) => setTweak('palette', v)}
            options={[
            { value: 'lime', label: 'Lime' },
            { value: 'acid', label: 'Ácido' },
            { value: 'fresh', label: 'Fresh' },
            { value: 'emerald', label: 'Esmeralda' }]
            } />
          
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            {Object.entries(PALETTES).map(([k, p]) =>
            <button key={k} onClick={() => setTweak('palette', k)} style={{
              flex: 1, height: 28, borderRadius: 6,
              background: p.lime,
              border: tweaks.palette === k ? '2px solid #fff' : '2px solid transparent',
              cursor: 'pointer'
            }}></button>
            )}
          </div>
        </TweakSection>

        <TweakSection title="Profundidade do fundo">
          <TweakRadio
            label="Tom"
            value={tweaks.depth}
            onChange={(v) => setTweak('depth', v)}
            options={[
            { value: 'deep', label: 'Deep' },
            { value: 'pitch', label: 'Pitch' },
            { value: 'forest', label: 'Forest' }]
            } />
          
        </TweakSection>
      </TweaksPanel>
    </div>
    </React.Fragment>);

}

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