// app.jsx — Composición de la landing CobraNow + variantes de hero + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "dividido",
  "theme": "claro",
  "green": "#2E9E44",
  "font": "Sistema (SF)"
}/*EDITMODE-END*/;

const FONT_STACKS = {
  'Sistema (SF)': '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif',
  'Outfit': '"Outfit", -apple-system, sans-serif',
  'Sora': '"Sora", -apple-system, sans-serif',
};

// ── Tarjetas flotantes (ancladas al lado DERECHO del teléfono, nunca tapan el texto) ──
function FloatCards() {
  return (
    <React.Fragment>
      <div className="cn-float cn-float-anim" style={{ top: '8%', right: -70, width: 188 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 26, height: 26, borderRadius: 999, background: 'color-mix(in oklab, var(--green) 14%, transparent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M3 8.5l3.2 3L13 4.5" stroke="var(--green)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </span>
          <span className="t">Promesa guardada</span>
        </div>
        <div className="s" style={{ marginTop: 5 }}>Viernes 12 jun · te avisamos</div>
      </div>
      <div className="cn-float cn-float-anim2" style={{ bottom: '12%', right: -80, width: 178 }}>
        <div className="s" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>Cobrado en junio</div>
        <div className="t" style={{ fontSize: 24, letterSpacing: 0, color: 'var(--green-ink)', marginTop: 2 }}>$8,200</div>
        <div className="s" style={{ marginTop: 2 }}>7 cobros cerrados 🐍</div>
      </div>
    </React.Fragment>
  );
}

function PhoneWithCards({ scale = 0.66 }) {
  return (
    <div className="cn-hero-phone-stage" style={{ position: 'relative' }}>
      <PhoneDemo scale={scale} />
      <FloatCards />
    </div>
  );
}

// ── Hero: contenido de texto compartido ──
function HeroCopy({ center }) {
  return (
    <div className="cn-hero-copy" style={{
      display: 'flex', flexDirection: 'column', gap: 22,
      alignItems: center ? 'center' : 'flex-start',
      textAlign: center ? 'center' : 'left',
    }}>
      <span className="cn-eyebrow cn-hero-item">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2z" stroke="currentColor" strokeWidth="2"/></svg>
        Bot de WhatsApp · tu libreta de ventas y cobros
      </span>
      <h1 className="cn-h1 cn-hero-item">¿Vendes por WhatsApp?<br /><span className="accent">Yo llevo la cuenta.</span></h1>
      <p className="cn-sub cn-hero-item" style={{ maxWidth: 540 }}>
        Reenvíame cualquier venta y yo me encargo: te recuerdo lo que te deben
        y te armo el recibo de lo que ya pagaron.
      </p>
      <div className="cn-hero-ctas cn-hero-item">
        <a className="cn-btn cn-btn-primary cn-btn-lg" href="#cta">Quiero acceso anticipado</a>
        <a className="cn-btn cn-btn-ghost" href="CobraNow Bot.html">Ver el demo →</a>
      </div>
      <span className="cn-hero-note cn-hero-item">Acceso anticipado · Sé de los primeros en probarlo · Vive en tu WhatsApp de siempre</span>
    </div>
  );
}

// ── Variantes de hero ──
function HeroCentrado() {
  return (
    <header className="cn-hero" id="top">
      <div className="cn-hero-glow"></div>
      <div className="cn-wrap" style={{ position: 'relative', padding: '96px 32px 0', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 64 }}>
        <HeroCopy center />
        <div style={{ position: 'relative' }}>
          <PhoneWithCards scale={0.72} />
          <div style={{ position: 'absolute', left: '50%', bottom: 0, transform: 'translateX(-50%)', width: '160%', height: 200, background: 'linear-gradient(transparent, var(--bg))', pointerEvents: 'none' }}></div>
        </div>
      </div>
    </header>
  );
}

function HeroDividido() {
  return (
    <header className="cn-hero" id="top">
      <div className="cn-hero-glow"></div>
      <div className="cn-wrap" style={{
        position: 'relative', padding: '110px 32px 90px',
        display: 'grid', gridTemplateColumns: '1.3fr 0.85fr', gap: 48, alignItems: 'center',
      }}>
        <HeroCopy />
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <PhoneWithCards scale={0.68} />
        </div>
      </div>
    </header>
  );
}

function HeroInmersivo() {
  return (
    <header className="cn-hero cn-hero-dark" id="top">
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 65% 60% at 50% 105%, color-mix(in oklab, var(--green) 28%, transparent), transparent 70%)' }}></div>
      <div className="cn-wrap" style={{ position: 'relative', padding: '90px 32px 0', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28, textAlign: 'center' }}>
        <img src="assets/cobranow-logo.png" alt="CobraNow" style={{ height: 130, width: 'auto' }} />
        <h1 className="cn-h1" style={{ maxWidth: 760 }}>Tus ventas viven en WhatsApp.<br /><span className="accent">Tu cobrador también.</span></h1>
        <p className="cn-sub" style={{ maxWidth: 540 }}>
          Reenvía la venta y el bot te dice quién, cuánto y cuándo. Nunca se le olvida.
        </p>
        <div className="cn-hero-ctas" style={{ marginTop: 6 }}>
          <a className="cn-btn cn-btn-primary cn-btn-lg" href="#cta">Quiero acceso anticipado</a>
          <a className="cn-btn cn-btn-ghost" href="CobraNow Bot.html" style={{ color: '#cfe8d4' }}>Ver el demo →</a>
        </div>
        <div style={{ position: 'relative', marginTop: 36 }}>
          <PhoneDemo scale={0.7} />
          <div style={{ position: 'absolute', left: '50%', bottom: 0, transform: 'translateX(-50%)', width: '200%', height: 180, background: 'linear-gradient(transparent, #080c09)', pointerEvents: 'none' }}></div>
        </div>
      </div>
    </header>
  );
}

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

  React.useEffect(() => {
    document.body.dataset.theme = t.theme === 'oscuro' ? 'dark' : 'light';
    document.body.style.setProperty('--green', t.green);
    document.body.style.setProperty('--font', FONT_STACKS[t.font] || FONT_STACKS['Sistema (SF)']);
  }, [t.theme, t.green, t.font]);

  React.useEffect(() => {
    document.body.classList.add('cn-motion-ready');
    let ticking = false;
    const updateProgress = () => {
      const max = Math.max(document.documentElement.scrollHeight - window.innerHeight, 1);
      document.body.style.setProperty('--scroll-progress', String(window.scrollY / max));
      ticking = false;
    };
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(updateProgress);
    };

    updateProgress();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  const Hero = { centrado: HeroCentrado, dividido: HeroDividido, inmersivo: HeroInmersivo }[t.heroVariant] || HeroDividido;

  return (
    <div>
      <div className="cn-scroll-progress" aria-hidden="true"></div>
      <Nav />
      <Hero />
      <HowItWorks />
      <Features />
      <WhyNotAI />
      <Audiences />
      <NotStrip />
      <FinalCTA />
      <Footer />
      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Variante" value={t.heroVariant}
          options={['centrado', 'dividido', 'inmersivo']}
          onChange={(v) => setTweak('heroVariant', v)} />
        <TweakSection label="Tema" />
        <TweakRadio label="Modo" value={t.theme}
          options={['claro', 'oscuro']}
          onChange={(v) => setTweak('theme', v)} />
        <TweakColor label="Verde de marca" value={t.green}
          options={['#2E9E44', '#25D366', '#1F8A5B', '#34C759']}
          onChange={(v) => setTweak('green', v)} />
        <TweakSection label="Tipografía" />
        <TweakRadio label="Familia" value={t.font}
          options={['Sistema (SF)', 'Outfit', 'Sora']}
          onChange={(v) => setTweak('font', v)} />
      </TweaksPanel>
    </div>
  );
}

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