// ============= LA SOLUCIÓN / PRESENTACIÓN DEL PRODUCTO =============
const ProductReveal = () =>
<Section label="Producto">
    <Container size="md">
      <div style={{ textAlign: 'center', marginBottom: 48 }}>
        <Pill color="var(--blue)" style={{ marginBottom: 20 }}>✨ Te presento tu nuevo mejor amigo</Pill>
        <H size="xxl" style={{ marginBottom: 20 }}>
          Pack de <i style={{ color: 'var(--orange)' }}>Estimulación Temprana</i><br />
          para bebés y niños <span className="highlight-yellow">0 a 6 años</span>
        </H>
        <Lede style={{ margin: '20px auto 0', textAlign: 'center', fontSize: 'clamp(17px, 1.4vw, 20px)' }}>
          Un sistema guiado que organiza los ejercicios según las <strong style={{ color: 'var(--ink)' }}>etapas reales del desarrollo</strong>, para que sepas exactamente <strong style={{ color: 'var(--ink)' }}>qué estimular y cómo hacerlo</strong>, de forma segura, desde casa y con lo que ya tienes.
        </Lede>
      </div>

      <Pullquote color="var(--pink)">
        Deja de adivinar. Deja de comparar. Deja de sentirte culpable. <strong style={{ color: 'var(--ink)' }}>Empieza a seguir un plan que funciona</strong> — diseñado junto a especialistas del desarrollo infantil.
      </Pullquote>
    </Container>

    {/* Product gallery — real product image */}
    <Container size="lg" style={{ marginTop: 56 }}>
      <div style={{ borderRadius: 24, overflow: 'hidden', boxShadow: '0 30px 60px -20px rgba(10,22,40,.18)' }}>
        <img
          src="uploads/mama-7-fa4cfa7d.webp"
          alt="Pack de Estimulación Temprana — caja, laptop, tablet y móvil con el contenido del programa"
          style={{ width: '100%', display: 'block', objectFit: 'cover' }}
        />
      </div>
      <div style={{ textAlign: 'center', marginTop: 32, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.16em', color: 'var(--ink-dim)' }}>
        💻 ACCESO DESDE CUALQUIER DISPOSITIVO · 📱 DESCARGA EN PDF · ♾ DE POR VIDA
      </div>
    </Container>
  </Section>;


// ============= MÓDULOS / ENTREGABLES =============
const modules = [
{ n: '01', age: '0 – 12 meses', title: 'Despertar sensorial y motor', desc: 'Vínculo, seguimiento visual, primeros gestos, sentarse, gatear. Base del desarrollo cerebral.', color: 'var(--pink)', icon: IconHeart },
{ n: '02', age: '1 – 2 años', title: 'Primeros pasos, primeras palabras', desc: 'Caminar, señalar, imitar, comprensión simple, autonomía temprana.', color: 'var(--orange)', icon: IconSparkle },
{ n: '03', age: '2 – 3 años', title: 'Lenguaje y emociones', desc: 'Frases completas, juego simbólico, gestión de rabietas, rutinas sólidas.', color: 'var(--yellow)', icon: IconBaby },
{ n: '04', age: '3 – 4 años', title: 'Pensamiento lógico y creatividad', desc: 'Clasificar, contar, dibujar, creatividad guiada, autonomía total.', color: 'var(--green)', icon: IconBrain },
{ n: '05', age: '4 – 6 años', title: 'Preescolar y aprendizaje activo', desc: 'Pre-lectura, atención sostenida, socialización avanzada, pensamiento crítico.', color: 'var(--blue)', icon: IconBook }];


const ModulesSection = () =>
<Section bg="var(--cream-2)" label="Modulos" id="modulos">
    <Container size="lg">
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <Eyebrow color="var(--blue)">Qué incluye el pack</Eyebrow>
        <H size="xl">
          5 módulos. <i style={{ color: 'var(--pink)' }}>276+ actividades</i>.<br />
          Toda la primera infancia cubierta.
        </H>
      </div>

      <div style={{ display: 'grid', gap: 16 }}>
        {modules.map((m) => {
        const I = m.icon;
        return (
          <div key={m.n} style={{
            display: 'grid',
            gridTemplateColumns: 'auto 1fr auto',
            gap: 28,
            alignItems: 'center',
            padding: 'clamp(22px, 2.8vw, 32px)',
            borderRadius: 18,
            background: 'var(--surface)',
            border: '1.5px solid var(--line)',
            boxShadow: '0 8px 24px -14px rgba(0,0,0,.1)'
          }} className="module-row">
              <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 42, fontStyle: 'italic', color: m.color, lineHeight: 1, minWidth: 48 }}>{m.n}</div>
                <div style={{ width: 54, height: 54, borderRadius: 14, background: `color-mix(in oklab, ${m.color} 18%, white)`, display: 'grid', placeItems: 'center', color: m.color }}>
                  <I size={26} />
                </div>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: m.color, marginBottom: 6, fontWeight: 600 }}>{m.age}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(20px, 2.2vw, 26px)', lineHeight: 1.15, marginBottom: 6, letterSpacing: '-.015em' }}>{m.title}</div>
                <div style={{ color: 'var(--ink-dim)', fontSize: 15, lineHeight: 1.5 }}>{m.desc}</div>
              </div>
              <div style={{ textAlign: 'right', minWidth: 90 }} className="module-inc">
                <IconCheck size={28} stroke="var(--green)" sw={2.5} />
                <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '.1em', color: 'var(--green)', marginTop: 4, fontWeight: 700 }}>INCLUIDO</div>
              </div>
            </div>);

      })}
      </div>
    </Container>
    <style>{`
      @media(max-width: 720px){
        .module-row{ grid-template-columns: 1fr !important; }
        .module-inc{ text-align: left !important; }
      }
    `}</style>
  </Section>;


// ============= BONOS =============
const bonuses = [
{
  title: 'Rutina de 10 minutos diarios',
  desc: 'Para mamás con poco tiempo. Actividades rápidas de alto impacto que caben en cualquier día real.',
  value: '$27',
  color: 'var(--orange)',
  icon: IconClock,
  img: 'uploads/mama-8.webp'
},
{
  title: 'Señales de alerta del desarrollo',
  desc: 'Lista clara con los indicadores que NINGÚN pediatra te explica bien. Detecta temprano, actúa a tiempo.',
  value: '$47',
  color: 'var(--pink)',
  icon: IconShield,
  flag: '⚡ MÁS VALORADO',
  img: 'uploads/mama-10.webp'
},
{
  title: '365 actividades sin pantallas',
  desc: 'Una actividad para cada día del año. Sin tablets, sin TV. Solo lo que ya tienes en casa.',
  value: '$37',
  color: 'var(--green)',
  icon: IconSparkle,
  img: 'uploads/mama-9.webp'
},
{
  title: '+80 actividades imprimibles',
  desc: 'Fichas listas para imprimir. Lenguaje, lógica, motricidad fina. Pre-escritura y pre-lectura.',
  value: '$39',
  color: 'var(--blue)',
  icon: IconBook,
  img: 'uploads/mama-11.webp'
}];


const BonusesSection = () =>
<Section label="Bonos">
    <Container size="lg">
      <div style={{ textAlign: 'center', marginBottom: 56, position: 'relative' }}>
        <Sticker color="var(--yellow)" rotate={-8} size={100} style={{ position: 'absolute', top: -20, right: 'calc(50% - 280px)', display: 'none' }} className="bonus-sticker">
          <div style={{ fontSize: 9, fontFamily: 'var(--font-mono)', fontStyle: 'normal' }}>VALOR</div>
          <div style={{ fontSize: 22, fontWeight: 700 }}>$150</div>
          <div style={{ fontSize: 9, fontFamily: 'var(--font-mono)', fontStyle: 'normal' }}>GRATIS</div>
        </Sticker>
        <Pill color="var(--orange)" filled style={{ marginBottom: 20 }}>🎁 BONOS SI ENTRAS HOY</Pill>
        <H size="xl">
          + 4 regalos por <span style={{ textDecoration: 'line-through', textDecorationColor: 'var(--orange)', textDecorationThickness: 3, color: 'var(--ink-dim)', fontStyle: 'italic' }}>$150 USD</span> <span style={{ color: 'var(--green)' }}>GRATIS</span>
        </H>
        <Lede style={{ margin: '18px auto 0', textAlign: 'center' }}>
          Incluidos solo en esta oferta de lanzamiento. Cuando se acabe el timer, estos bonos desaparecen.
        </Lede>
        <style>{`@media(min-width:1100px){.bonus-sticker{display:grid !important;}}`}</style>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }} className="bonus-grid">
        {bonuses.map((b, i) => {
        const I = b.icon;
        return (
          <div key={i} style={{
            position: 'relative',
            padding: 30,
            borderRadius: 20,
            background: 'var(--surface)',
            border: `2px solid color-mix(in oklab, ${b.color} 30%, var(--line))`,
            boxShadow: `0 16px 32px -16px color-mix(in oklab, ${b.color} 30%, transparent)`,
            display: 'flex', flexDirection: 'column', gap: 14
          }}>
              <div style={{ position: 'absolute', top: -12, left: 20, display: 'flex', gap: 8 }}>
                <Pill color={b.color} filled>BONO 0{i + 1}</Pill>
                {b.flag && <Pill color="var(--ink)" filled>{b.flag}</Pill>}
              </div>

              {/* Bonus product mockup */}
              <div style={{ marginTop: 8, marginBottom: 4, borderRadius: 14, overflow: 'hidden', border: `1.5px solid color-mix(in oklab, ${b.color} 25%, var(--line))` }}>
                <ImgSlot
                src={b.img || undefined}
                label={`MOCKUP BONO 0${i + 1}`}
                sub={`PDF/portada del bono · 4/3 · ${b.value} valor`}
                ratio="4/3"
                tint={b.color}
                radius={12} />
              </div>

              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
                <div style={{
                width: 56, height: 56, borderRadius: 14,
                background: `color-mix(in oklab, ${b.color} 18%, white)`,
                display: 'grid', placeItems: 'center', color: b.color
              }}>
                  <I size={26} />
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--ink-dim)', letterSpacing: '.14em' }}>VALOR</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, textDecoration: 'line-through', textDecorationColor: b.color, textDecorationThickness: 2, color: 'var(--ink-dim)' }}>{b.value}</div>
                  <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--green)', letterSpacing: '.1em', fontWeight: 700 }}>GRATIS HOY</div>
                </div>
              </div>

              <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(20px, 2vw, 24px)', lineHeight: 1.2, letterSpacing: '-.01em' }}>{b.title}</div>
              <div style={{ color: 'var(--ink-dim)', fontSize: 14.5, lineHeight: 1.55 }}>{b.desc}</div>
            </div>);

      })}
      </div>

      {/* total value stack */}
      <div style={{ marginTop: 48, display: 'flex', justifyContent: 'center' }}>
        <div style={{
        padding: 24,
        borderRadius: 18,
        background: 'var(--ink)', color: '#fff',
        display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap',
        boxShadow: '0 20px 40px -12px rgba(0,0,0,.2)'
      }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', color: 'var(--yellow)' }}>VALOR TOTAL REAL</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, textDecoration: 'line-through', textDecorationColor: 'var(--orange)', textDecorationThickness: 3, opacity: .7 }}>$297 USD</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 22 }}>→</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ color: 'var(--yellow)' }}>$</span>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 56, color: 'var(--yellow)', lineHeight: 1 }}>7,99</span>
            <span style={{ fontSize: 13, opacity: .8 }}>USD</span>
          </div>
        </div>
      </div>
    </Container>
    <style>{`@media(max-width: 760px){.bonus-grid{grid-template-columns: 1fr !important}}`}</style>
  </Section>;


// ============= POR QUÉ TAN BARATO? (Trivialización) =============
const WhyCheap = () =>
<Section bg="var(--cream-2)" label="Trivializacion">
    <Container size="md">
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <Eyebrow color="var(--orange)">Pregunta justa</Eyebrow>
        <H size="xl">Si vale $297, <i style={{ color: 'var(--orange)' }}>¿por qué me lo dejas en $7,99?</i></H>
      </div>
      <div className="tsl-body" style={{ fontSize: 17, lineHeight: 1.75, color: 'var(--ink-2)', maxWidth: 600, margin: '0 auto' }}>
        <p>
          Te lo explico con honestidad. Este pack lleva años de trabajo, testeo con familias reales y validación con especialistas. <strong>No te lo estoy regalando por bueno</strong>.
        </p>
        <p>
          Pero sé que entre <em>"pagar $97 y desarrollar el cerebro de mi bebé"</em> y <em>"leer la página y seguir igual"</em>, miles de mamás se paralizan por el precio.
        </p>
        <p>
          Y yo no puedo cargar en mi conciencia que una mamá no actúe por $80. Por eso, durante esta oferta de lanzamiento lo dejo a <strong style={{ color: 'var(--orange)' }}>$7,99 USD — menos que un juguete desechable</strong>, menos que dos cafés, menos que una pizza.
        </p>

        <Pullquote color="var(--green)">
          A cambio te pido una cosa: <strong>que lo uses</strong>. Que no se quede en tu carpeta de "lo leeré después". Tu bebé no puede esperar ese "después".
        </Pullquote>
      </div>
    </Container>
  </Section>;


// ============= TESTIMONIALS =============
const testimonials = [
{
  name: 'Laura M.', city: 'Medellín · Hijo 10m',
  rating: 5,
  text: 'Llevaba 3 meses comprando juguetes "Montessori" carísimos que mi bebé ni miraba. Empecé con la rutina de 10 min y en 3 semanas empezó a balbucear "ma-ma" mirándome a los ojos. Lloré de felicidad. Por 17 dólares.',
  highlight: 'En 3 semanas empezó a balbucear',
  color: 'var(--pink)'
},
{
  name: 'Valentina R.', city: 'CDMX · Hija 16m',
  rating: 5,
  text: 'Como mamá primeriza vivía en pánico. Esta guía me quitó la culpa. Todo está por edad, las actividades son simplísimas. Mi esposo también las hace conmigo. Es la primera cosa educativa que compro que SÍ uso.',
  highlight: 'Me quitó la culpa',
  color: 'var(--blue)'
},
{
  name: 'Daniela T.', city: 'Buenos Aires · Gemelos 2a',
  rating: 5,
  text: 'Con gemelos el tiempo es oro. Sé exactamente qué hacer cada día sin pensarlo. Mis hijos hablan más y mejor que los primos de la misma edad. El módulo de señales de alerta me salvó de ir a 3 neurólogos.',
  highlight: 'Sé exactamente qué hacer',
  color: 'var(--orange)'
},
{
  name: 'Andrea G.', city: 'Lima · Hija 3a',
  rating: 5,
  text: 'La uso desde los 18 meses. A los 3 años mi hija empezó a leer palabras. Pero lo mejor es el vínculo: 10 min al día de conexión real, sin pantallas, sin prisa. Vale mil veces más de lo que cobran.',
  highlight: 'Vínculo real, sin pantallas',
  color: 'var(--green)'
}];


const TestimonialsSection = () =>
<Section label="Testimonios">
    <Container size="lg">
      <div style={{ textAlign: 'center', marginBottom: 48 }}>
        <Eyebrow color="var(--pink)">No me creas a mí</Eyebrow>
        <H size="xl">Créele a las <i style={{ color: 'var(--pink)' }}>+2.847 mamás</i><br />que ya lo están usando</H>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }} className="tst-grid">
        {testimonials.map((t, i) =>
      <div key={i} style={{
        padding: 26,
        borderRadius: 18,
        background: 'var(--surface)',
        border: `1.5px solid var(--line)`,
        borderTop: `4px solid ${t.color}`,
        display: 'flex', flexDirection: 'column', gap: 12
      }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <Stars />
              <IconQuote size={22} stroke="none" fill={t.color} sw={0} style={{ opacity: .55 }} />
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, color: t.color, fontStyle: 'italic', lineHeight: 1.3 }}>"{t.highlight}"</div>
            <div style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)' }}>{t.text}</div>
            <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 44, height: 44, borderRadius: '50%', overflow: 'hidden', flexShrink: 0, border: `2px solid ${t.color}` }}>
                <ImgSlot label={`MAMÁ 0${i + 1}`} sub="" ratio="1/1" radius={999} tint={t.color} />
              </div>
              <div style={{ flex: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13 }}>
                <strong>{t.name}</strong>
                <span style={{ color: 'var(--ink-dim)', fontSize: 12 }}>{t.city}</span>
              </div>
            </div>
          </div>
      )}
      </div>

      {/* WhatsApp screenshots */}
      <div style={{ marginTop: 48 }}>
        <div style={{ textAlign: 'center', marginBottom: 22, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--ink-dim)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10 }}>
          <IconWhatsapp size={14} stroke="var(--green)" fill="var(--green)" /> Mensajes reales que recibo todos los días
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="wa-grid">
          {[
        { t: 'Camila no voy a mentir 😭 pensé que iba a ser otro pdf más, pero el bebé hoy aplaudió por primera vez y casi me da algo', time: '14:22' },
        { t: 'El módulo 3 es oro puro. Mi hija pasó de decir 5 palabras a 20 en dos semanas. Gracias infinitas ❤️', time: '09:07' },
        { t: 'Compré y en media hora ya estaba haciendo la primera actividad. Me arrepiento de no haberlo comprado antes', time: '21:48' }].
        map((w, i) =>
        <div key={i} style={{
          padding: 16, borderRadius: 14, background: '#DCF8C6', color: '#102818',
          position: 'relative', fontSize: 14, lineHeight: 1.5,
          border: '1px solid #B6E28A'
        }}>
              {w.t}
              <div style={{ marginTop: 10, textAlign: 'right', fontSize: 11, opacity: .7, fontFamily: 'var(--font-mono)' }}>{w.time} <span style={{ color: '#2B7FFF' }}>✓✓</span></div>
            </div>
        )}
        </div>
      </div>
    </Container>
    <style>{`
      .play-btn { cursor:pointer; transition: transform .2s; }
      .play-btn:hover{ transform: scale(1.06); }
      @media(max-width: 760px){ .tst-grid, .wa-grid { grid-template-columns: 1fr !important; } }
    `}</style>
  </Section>;


Object.assign(window, { ProductReveal, ModulesSection, BonusesSection, WhyCheap, TestimonialsSection });