// ============= GARANTÍA (RISK REVERSAL) =============
const GuaranteeSection = () =>
<Section bg="var(--cream-2)" label="Garantia">
    <Container size="md">
      <div style={{
      display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 44, alignItems: 'center',
      padding: 'clamp(28px, 4vw, 52px)',
      borderRadius: 24,
      background: 'var(--surface)',
      border: '2.5px solid var(--green)',
      boxShadow: '0 24px 50px -20px color-mix(in oklab, var(--green) 35%, transparent)'
    }} className="gar-grid">
        <div style={{ position: 'relative' }}>
          <Sticker color="var(--green)" rotate={-8} size={160} style={{ color: '#fff', padding: 14 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.12em', fontStyle: 'normal' }}>GARANTÍA</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 52, lineHeight: .9, fontStyle: 'italic' }}>7</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.1em', fontStyle: 'normal' }}>DÍAS</div>
          </Sticker>
        </div>

        <div>
          <Pill color="var(--green)" filled style={{ marginBottom: 18 }}>🛡 RIESGO CERO PARA TI</Pill>
          <H size="lg" style={{ marginBottom: 18 }}>
            Pruébalo 7 días. <i style={{ color: 'var(--green)' }}>Si no te enamoras, te devuelvo cada peso.</i>
          </H>
          <div style={{ fontSize: 16.5, color: 'var(--ink-2)', lineHeight: 1.65, marginBottom: 14 }}>
            Entra al pack. Descárgalo todo. Prueba una actividad con tu bebé hoy mismo. Si en 7 días no sientes que esto cambió tu forma de acompañar su desarrollo, me escribes un <em>"no me gustó"</em> y te devuelvo el 100%. Sin preguntas, sin trámites.
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--orange)', fontSize: 18 }}>
            El único riesgo real es no hacer nada.
          </div>
        </div>
      </div>
    </Container>
    <style>{`@media(max-width:700px){.gar-grid{grid-template-columns:1fr !important; text-align:center; justify-items:center}}`}</style>
  </Section>;


// ============= CHECKOUT / OFERTA =============
const CheckoutSection = ({ showCountdown }) =>
<Section id="checkout" label="Oferta">
    <Container size="lg">
      <div style={{ textAlign: 'center', marginBottom: 36 }}>
        <Pill color="var(--orange)" filled style={{ marginBottom: 20 }}>⚡ OFERTA DE LANZAMIENTO</Pill>
        <H size="xxl" style={{ marginBottom: 16 }}>
          Empieza hoy por <i style={{ color: 'var(--orange)' }}>$7,99 USD</i>
        </H>
        <Lede style={{ margin: '16px auto 0', textAlign: 'center' }}>
          Pago único. Acceso inmediato. Garantía de 7 días.<br />
          <strong style={{ color: 'var(--ink)' }}>El precio sube a $47 en cuanto termine el timer.</strong>
        </Lede>
      </div>

      {showCountdown &&
    <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 32 }}>
          <div style={{
        display: 'inline-flex', flexDirection: 'column', alignItems: 'center',
        padding: '22px 40px', borderRadius: 20,
        background: 'var(--ink)', color: '#fff'
      }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--yellow)', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
              <IconFlame size={14} stroke="var(--yellow)" sw={2.5} /> Esta oferta termina en
            </div>
            <Countdown dark />
          </div>
        </div>
    }

      <div style={{
      position: 'relative',
      borderRadius: 28,
      padding: 'clamp(28px, 4vw, 56px)',
      background: 'linear-gradient(155deg, var(--surface), color-mix(in oklab, var(--yellow) 10%, white))',
      border: '2.5px solid var(--orange)',
      boxShadow: '0 40px 80px -30px rgba(255,107,53,.35), 0 0 0 1px rgba(255,255,255,.5) inset'
    }}>
        <div style={{ position: 'absolute', top: -16, left: '50%', transform: 'translateX(-50%)' }}>
          <Pill color="var(--pink)" filled>✨ MÁS ELEGIDO POR MAMÁS</Pill>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 44, alignItems: 'start', marginTop: 20 }} className="offer-grid">
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(26px, 2.8vw, 34px)', lineHeight: 1.1, marginBottom: 20 }}>
              Pack Completo<br />
              <i style={{ color: 'var(--orange)' }}>Despierta su Potencial</i>
            </div>
            <div style={{ fontSize: 13, fontFamily: 'var(--font-mono)', letterSpacing: '.14em', color: 'var(--ink-dim)', marginBottom: 14 }}>ESTO ES TODO LO QUE RECIBES:</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
              <Check>Programa 0-6 años (5 módulos por edad)</Check>
              <Check>Sistema de evaluación del desarrollo</Check>
              <Check>Rutina diaria paso a paso</Check>
              <Check><strong>BONO:</strong> Rutina de 10 min diarios ($27)</Check>
              <Check><strong>BONO:</strong> Señales de alerta del desarrollo ($47)</Check>
              <Check><strong>BONO:</strong> 365 actividades sin pantallas ($37)</Check>
              <Check><strong>BONO:</strong> +80 actividades imprimibles ($39)</Check>
              <Check>Acceso inmediato + de por vida</Check>
              <Check>Actualizaciones futuras gratis</Check>
            </ul>
          </div>

          <div style={{
          padding: 28, borderRadius: 20,
          background: 'var(--ink)', color: '#fff',
          textAlign: 'center',
          position: 'relative', overflow: 'hidden'
        }}>
            <div aria-hidden style={{ position: 'absolute', top: -40, right: -40, width: 160, height: 160, borderRadius: '50%', background: 'color-mix(in oklab, var(--orange) 50%, transparent)', filter: 'blur(30px)' }} />
            <div style={{ position: 'relative' }}>
              <div style={{ fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '.16em', color: 'rgba(255,255,255,.6)', textTransform: 'uppercase', marginBottom: 6 }}>Valor real</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, textDecoration: 'line-through', textDecorationColor: 'var(--orange)', textDecorationThickness: 2.5, opacity: .7, marginBottom: 14 }}>$297 USD</div>
              <div style={{ fontSize: 13, color: 'var(--yellow)', marginBottom: 2, fontFamily: 'var(--font-mono)', letterSpacing: '.1em' }}>HOY, POR ÚNICA VEZ</div>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 4 }}>
                <span style={{ fontSize: 24, color: 'var(--yellow)' }}>$</span>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(88px, 11vw, 140px)', lineHeight: 1, color: 'var(--yellow)', fontStyle: 'italic' }}>7,99</span>
                <span style={{ fontSize: 16, opacity: .8 }}>USD</span>
              </div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,.75)', marginBottom: 22 }}>Pago único · sin mensualidades</div>

              <CTA size="lg" pulse fullWidth sub="🔒 acceso inmediato">
                SÍ, LO QUIERO YA
              </CTA>

              <div style={{ display: 'flex', justifyContent: 'center', gap: 14, marginTop: 18, flexWrap: 'wrap', fontSize: 11, color: 'rgba(255,255,255,.65)', fontFamily: 'var(--font-mono)', letterSpacing: '.06em' }}>
                <span>VISA</span><span>MC</span><span>PAYPAL</span><span>PIX</span>
              </div>
              <div style={{ marginTop: 14, fontSize: 12, color: 'rgba(255,255,255,.5)', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 6 }}>
                <IconLock size={12} /> Compra 100% protegida
              </div>
            </div>
          </div>
        </div>

        {/* Trust row */}
        <div style={{ display: 'flex', gap: 24, justifyContent: 'center', marginTop: 32, flexWrap: 'wrap', fontSize: 13, color: 'var(--ink-2)' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><IconShield size={14} stroke="var(--green)" sw={2.2} /> Garantía 7 días</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><IconCheck size={14} stroke="var(--green)" sw={2.2} /> Acceso de por vida</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><IconLock size={14} stroke="var(--green)" sw={2.2} /> Pago seguro</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><IconClock size={14} stroke="var(--green)" sw={2.2} /> Acceso en 30 seg</span>
        </div>
      </div>
    </Container>
    <style>{`@media(max-width:800px){.offer-grid{grid-template-columns:1fr !important}}`}</style>
  </Section>;


// ============= FAQ =============
const faqs = [
{ q: '¿Desde qué edad puedo usar este pack?', a: 'Desde el embarazo (para prepararte) y hasta los 6 años. El pack está dividido en 5 ventanas de edad. Si tu bebé ya tiene 2 años, empiezas ahí y sigues creciendo con él. Nada se desperdicia.' },
{ q: '¿Necesito comprar materiales o juguetes caros?', a: 'No. Más del 90% de las actividades se hacen con cosas que YA tienes en casa: toallas, cucharas, cajas, espejos, tu voz. Esa es justamente la promesa. Las 200 actividades imprimibles solo requieren una impresora común.' },
{ q: '¿Cuánto tiempo al día necesito?', a: 'De 10 a 15 minutos, una o dos veces al día. No es un programa intensivo ni una jornada escolar: es un hábito pequeño, sostenible, que cabe en tu realidad de mamá ocupada. El bono "Rutina de 10 min" es exactamente para eso.' },
{ q: '¿Y si mi bebé ya tiene señales de retraso?', a: 'El pack incluye el bono "Señales de alerta" para que sepas reconocerlas. No sustituye a un pediatra, pero muchas mamás lo usan como complemento ideal a la terapia. Si detectas algo, acudes a un especialista; si no, estimulas para prevenir.' },
{ q: '¿Cómo recibo el material?', a: 'Inmediatamente después del pago recibes un correo con tus accesos. Abres desde tu celu, tablet o compu. Descargas los PDFs cuantas veces quieras. Acceso de por vida.' },
{ q: '¿Y si no me gusta / no me sirve?', a: 'Tienes 7 días de garantía total. Escribes al correo de soporte y te devolvemos el 100% sin preguntas. Literalmente no hay riesgo para ti.' },
{ q: '¿Es una suscripción? ¿Me van a cobrar después?', a: 'NO. Pago único de $7,99 USD. Una sola vez. Se acabó. No hay mensualidades, no hay trampa, no hay cobros ocultos.' }];


const FAQItem = ({ q, a, open, onToggle }) =>
<div style={{
  borderBottom: '1.5px solid var(--line)',
  padding: '20px 0'
}}>
    <button onClick={onToggle} style={{
    width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, textAlign: 'left', padding: 0
  }}>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(18px, 1.8vw, 22px)', lineHeight: 1.25, letterSpacing: '-.005em', color: 'var(--ink)' }}>{q}</span>
      <span style={{
      width: 32, height: 32, borderRadius: '50%',
      border: open ? 'none' : '1.5px solid var(--line)',
      background: open ? 'var(--orange)' : 'transparent', color: open ? '#fff' : 'var(--ink-dim)',
      display: 'grid', placeItems: 'center', flexShrink: 0,
      transition: 'transform .3s, background .3s',
      transform: open ? 'rotate(180deg)' : 'none'
    }}>
        <IconChevron size={16} sw={2.5} />
      </span>
    </button>
    <div style={{
    overflow: 'hidden',
    maxHeight: open ? 400 : 0,
    transition: 'max-height .35s ease, margin-top .3s',
    marginTop: open ? 12 : 0
  }}>
      <div style={{ color: 'var(--ink-dim)', fontSize: 15.5, lineHeight: 1.65, maxWidth: '68ch' }}>{a}</div>
    </div>
  </div>;


const FAQSection = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <Section bg="var(--cream-2)" label="FAQ">
      <Container size="md">
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <Eyebrow>Preguntas frecuentes</Eyebrow>
          <H size="xl">Todo lo que me preguntan <br /><i style={{ color: 'var(--pink)' }}>antes de decidir</i></H>
        </div>
        <div>
          {faqs.map((f, i) =>
          <FAQItem key={i} {...f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          )}
        </div>

        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <CTA size="lg" pulse>
            Ya tengo claridad , Lo quiero
          </CTA>
        </div>
      </Container>
    </Section>);

};

// ============= PS FINAL (CLÁSICO TSL) =============
const PSFinal = () =>
<Section label="PS">
    <Container size="md">
      <div style={{
      padding: 'clamp(28px, 4vw, 48px)',
      borderRadius: 22,
      background: 'var(--surface)',
      border: '2px dashed var(--orange)'
    }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3.4vw, 40px)', color: 'var(--orange)', fontStyle: 'italic', marginBottom: 18, lineHeight: 1 }}>P.D.</div>
        <div className="tsl-body" style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--ink-2)' }}>
          <p>
            Si llegaste hasta aquí y todavía estás dudando, te lo voy a decir como se lo digo a mis clientas en consulta:
          </p>
          <p>
            <strong>El "algún día lo compraré"</strong> es el ladrón silencioso del desarrollo de tu bebé. Mientras tú esperas la quincena, la promoción perfecta, el momento ideal… <span className="highlight-yellow">su cerebro está creando (o no creando) conexiones que no vuelven</span>.
          </p>
          <p>
            <strong>7,99 dólares</strong> es menos que un juguete que va a terminar olvidado bajo la cama en 2 semanas. Menos que la pizza del viernes. Menos que un par de cafés.
          </p>
          <p>
            Y a cambio tienes la tranquilidad de saber que <strong>estás haciendo lo correcto, en el momento correcto, con el plan correcto</strong>. Con 7 días de garantía. Sin riesgo.
          </p>
          <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, color: 'var(--ink)', textAlign: 'center', marginTop: 36 }}>
            Tu bebé no puede decidir por sí mismo.<br />
            <span style={{ color: 'var(--orange)' }}>Tú sí.</span>
          </p>
        </div>

        <div style={{ textAlign: 'center', marginTop: 36 }}>
          <CTA size="xl" pulse sub="$7,99 USD · acceso inmediato · 7 días de garantía">
            OBTENERLO AHORA
          </CTA>
        </div>
      </div>
    </Container>
  </Section>;


// ============= STICKY BOTTOM CTA =============
const StickyCTA = ({ showCountdown }) => {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 900);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  if (!visible) return null;
  return (
    <div style={{
      position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 60,
      background: 'var(--ink)',
      color: '#fff',
      padding: '12px var(--pad-x)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16,
      borderTop: '2px solid var(--orange)',
      boxShadow: '0 -8px 30px -10px rgba(0,0,0,.3)',
      flexWrap: 'wrap',
      animation: 'fadeUp .4s ease'
    }}>
      {showCountdown &&
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
          <IconClock size={16} stroke="var(--yellow)" sw={2.5} />
          <span style={{ color: 'rgba(255,255,255,.8)' }}>Termina en</span>
          <div style={{ color: 'var(--yellow)', fontFamily: 'var(--font-mono)', fontWeight: 700 }}>
            <Countdown compact dark />
          </div>
        </div>
      }
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <span style={{ fontSize: 13, textDecoration: 'line-through', opacity: .6 }}>$67</span>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: 'var(--yellow)', lineHeight: 1 }}>$7,99</span>
      </div>
      <CTA size="md">Quiero mi pack</CTA>
    </div>);

};

// ============= FOOTER =============
const Footer = () =>
<footer style={{ padding: '40px var(--pad-x) 100px', borderTop: '1px solid var(--line)', background: 'var(--cream-2)' }}>
    <Container size="lg">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap', fontSize: 13, color: 'var(--ink-dim)' }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: 'linear-gradient(135deg, var(--pink), var(--orange))' }} />
          <span>© 2026 Despierta su Potencial · Todos los derechos reservados</span>
        </div>
        <div style={{ display: 'flex', gap: 20 }}>
          <a href="#" style={{ textDecoration: 'none' }}></a>
          <a href="#" style={{ textDecoration: 'none' }}></a>
          <a href="#" style={{ textDecoration: 'none' }}></a>
        </div>
      </div>
      <div style={{ marginTop: 20, fontSize: 11, color: 'var(--ink-dim)', maxWidth: 700, lineHeight: 1.6 }}>
        Este producto no sustituye la consulta con pediatras o profesionales de la salud infantil. Es material educativo y de acompañamiento para familias. Los resultados pueden variar según el uso y circunstancias individuales.
      </div>
    </Container>
  </footer>;


Object.assign(window, { GuaranteeSection, CheckoutSection, FAQSection, PSFinal, StickyCTA, Footer });