// SECTIONS: Bio · Programa 3 días · Bonos · FAQ · CTA · Footer

function SectionLabel({ num, label }) {
  return (
    <div className="mono" style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '0.22em', marginBottom: 28 }}>
      <span style={{ color: 'var(--magenta)' }}>{num}</span>
      <span style={{ flex: 0, color: 'var(--magenta)' }}>—</span>
      <span>{label}</span>
      <span style={{ flex: 1, height: 1, background: 'var(--line)' }}></span>
    </div>
  );
}

// =============== BIO ===============
function BioSection() {
  return (
    <section id="bio" style={{ padding: '120px 0 100px', position: 'relative' }}>
      <div className="container">
        <SectionLabel num="01" label="QUIÉN TE ENSEÑA" />

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.9fr) minmax(0,1.1fr)', gap: 60, alignItems: 'start' }} className="bio-grid">

          {/* Portrait card */}
          <div style={{ position: 'sticky', top: 30 }}>
            <div style={{
              position: 'relative',
              aspectRatio: '4/5',
              borderRadius: 18,
              overflow: 'hidden',
              border: '1px solid var(--line)',
              background: `
                repeating-linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0 2px, transparent 2px 18px),
                linear-gradient(180deg, rgba(236, 72, 153, 0.18), rgba(168, 85, 247, 0.12) 60%, rgba(8, 4, 15, 0.7))
              `,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              padding: 22,
            }}>
              <span className="corner tl"></span>
              <span className="corner tr"></span>
              <span className="corner bl"></span>
              <span className="corner br"></span>

              <div className="mono" style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--ink-dim)', letterSpacing: '0.2em' }}>
                <span>FILE :: DJB.001</span>
                <span style={{ color: 'var(--magenta)' }}>● ARCHIVO</span>
              </div>

              <div style={{ display: 'grid', placeItems: 'center', padding: '20px 0' }}>
                <image-slot
                  id="dante-bio-portrait"
                  shape="circle"
                  placeholder=""
                  style={{ width: '78%', aspectRatio: '1', position: 'relative' }}
                >
                  <DantePortraitIllustration />
                </image-slot>
              </div>

              <div className="mono" style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.18em', display: 'grid', gap: 6 }}>
                <Row label="EDAD AL EMPEZAR" value="26 AÑOS" />
                <Row label="ACTIVOS INICIALES" value="$0.00" />
                <Row label="EDUCACIÓN FORMAL" value="NULL" />
                <Row label="FE" value="∞" />
              </div>
            </div>

            <div style={{ marginTop: 16, padding: 14, border: '1px solid var(--line)', borderRadius: 10, background: 'rgba(15, 8, 32, 0.5)' }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.18em' }}>// HOY</div>
              <div style={{ fontSize: 15, marginTop: 4, lineHeight: 1.5 }}>Empresario de múltiples proyectos. Apasionado por aprender y emprender.</div>
            </div>
          </div>

          {/* Story */}
          <div>
            <h2 style={{
              fontSize: 'clamp(40px, 5.6vw, 72px)',
              fontWeight: 700,
              letterSpacing: '-0.03em',
              lineHeight: 1,
            }}>
              No te voy a vender un método.<br/>
              <span className="grad-text" style={{ fontStyle: 'italic' }}>Te voy a contar lo que funcionó.</span>
            </h2>

            <div style={{ marginTop: 36, display: 'grid', gap: 22, fontSize: 17, lineHeight: 1.7, color: 'var(--ink-dim)' }}>
              <p>Mi vida ha sido una gran universidad. A mis 26 años, después de <span style={{ color: 'var(--ink)' }}>5 años encerrado</span>, no tenía nada: ni educación escolar, ni casa, ni auto, ni ahorros.</p>
              <p>Lo único que me sostenía era la esperanza de vivir que Dios sembró en mí. Tenía un único objetivo: experimentar Su grandeza en mis días, porque yo pensaba que adentro me iba a morir.</p>
              <p>En el camino de conocer a Dios <span style={{ color: 'var(--ink)' }}>me encontré a mí mismo</span>. Descubrí talentos y capacidades que nunca había puesto en acción.</p>
              <p style={{ color: 'var(--ink)', fontSize: 19 }}>Pasé de ser un hombre miserable, encerrado y sin futuro, a ser un empresario apasionado por aprender y emprender — con múltiples proyectos en marcha.</p>
            </div>

            <div style={{
              marginTop: 40, padding: 28,
              border: '1px solid var(--line-strong)',
              borderRadius: 16,
              background: 'linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(168, 85, 247, 0.04))',
              position: 'relative',
            }}>
              <span className="corner tl"></span>
              <span className="corner tr"></span>
              <span className="corner bl"></span>
              <span className="corner br"></span>
              <div className="mono" style={{ fontSize: 11, color: 'var(--magenta)', letterSpacing: '0.2em', marginBottom: 12 }}>// LO QUE QUIERO QUE TE LLEVES</div>
              <p style={{ fontSize: 20, lineHeight: 1.45, margin: 0, textWrap: 'pretty' }}>Si yo empecé sin nada, tú no necesitas estar listo. Solo necesitas empezar <span className="grad-text" style={{ fontWeight: 600, fontStyle: 'italic' }}>imperfecto</span>.</p>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .bio-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
            .bio-grid > div:first-child { position: relative !important; top: 0 !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function DantePortraitIllustration() {
  return (
    <div style={{
      position: 'absolute', inset: 0, borderRadius: '50%', overflow: 'hidden',
      background: `
        radial-gradient(ellipse at 30% 20%, var(--glow-1), transparent 60%),
        radial-gradient(ellipse at 70% 80%, var(--glow-2), transparent 60%),
        linear-gradient(180deg, var(--bg-elev), var(--bg))
      `,
    }}>
      <svg viewBox="0 0 400 400" style={{ width: '100%', height: '100%', display: 'block' }} xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="goldGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="var(--magenta)" />
            <stop offset="100%" stopColor="var(--violet)" />
          </linearGradient>
          <linearGradient id="screenGlow" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--magenta)" stopOpacity="0.9" />
            <stop offset="100%" stopColor="var(--violet)" stopOpacity="0.4" />
          </linearGradient>
          <radialGradient id="ambient" cx="0.5" cy="0.3" r="0.6">
            <stop offset="0%" stopColor="var(--magenta)" stopOpacity="0.25" />
            <stop offset="100%" stopColor="transparent" />
          </radialGradient>
        </defs>

        {/* ambient glow */}
        <circle cx="200" cy="120" r="180" fill="url(#ambient)" />

        {/* desk surface */}
        <ellipse cx="200" cy="340" rx="180" ry="14" fill="var(--bg)" opacity="0.6" />
        <rect x="40" y="335" width="320" height="2" fill="var(--line-strong)" opacity="0.3" />

        {/* MacBook base */}
        <path d="M 90 330 L 310 330 L 320 340 L 80 340 Z" fill="var(--ink-mute)" opacity="0.35" />
        <rect x="92" y="328" width="216" height="4" rx="1" fill="var(--ink)" opacity="0.15" />

        {/* MacBook screen */}
        <path d="M 100 328 L 100 200 Q 100 195 105 195 L 295 195 Q 300 195 300 200 L 300 328 Z" fill="#0a0510" stroke="var(--ink-mute)" strokeWidth="1.5" opacity="0.95" />
        <rect x="108" y="203" width="184" height="118" rx="2" fill="url(#screenGlow)" opacity="0.18" />

        {/* Claude UI mock on screen */}
        <g opacity="0.95">
          {/* sidebar */}
          <rect x="108" y="203" width="38" height="118" fill="#000" opacity="0.5" />
          <circle cx="118" cy="214" r="3" fill="var(--magenta)" />
          <rect x="125" y="212" width="14" height="4" rx="1" fill="var(--ink)" opacity="0.5" />
          <rect x="113" y="225" width="26" height="3" rx="1" fill="var(--ink)" opacity="0.25" />
          <rect x="113" y="232" width="22" height="3" rx="1" fill="var(--ink)" opacity="0.25" />
          <rect x="113" y="239" width="28" height="3" rx="1" fill="var(--ink)" opacity="0.25" />

          {/* main area - chat bubbles */}
          <rect x="152" y="210" width="134" height="8" rx="2" fill="var(--ink)" opacity="0.18" />
          <rect x="152" y="222" width="100" height="6" rx="2" fill="var(--ink)" opacity="0.12" />

          {/* user bubble */}
          <rect x="200" y="240" width="84" height="22" rx="6" fill="url(#goldGrad)" opacity="0.7" />
          <rect x="206" y="247" width="50" height="3" rx="1" fill="#000" opacity="0.5" />
          <rect x="206" y="253" width="40" height="3" rx="1" fill="#000" opacity="0.5" />

          {/* claude bubble */}
          <rect x="155" y="270" width="120" height="36" rx="6" fill="var(--ink)" opacity="0.1" />
          <rect x="161" y="277" width="100" height="3" rx="1" fill="var(--ink)" opacity="0.5" />
          <rect x="161" y="283" width="88" height="3" rx="1" fill="var(--ink)" opacity="0.4" />
          <rect x="161" y="289" width="94" height="3" rx="1" fill="var(--ink)" opacity="0.4" />
          <rect x="161" y="295" width="60" height="3" rx="1" fill="var(--ink)" opacity="0.3" />

          {/* input bar */}
          <rect x="152" y="312" width="134" height="8" rx="3" fill="var(--ink)" opacity="0.08" stroke="var(--magenta)" strokeWidth="0.5" strokeOpacity="0.4" />
        </g>

        {/* screen reflection */}
        <rect x="108" y="203" width="184" height="60" rx="2" fill="white" opacity="0.04" />

        {/* Person silhouette (back/3-quarter view) */}
        <g>
          {/* shoulders/torso */}
          <path d="M 110 400 Q 110 320 200 305 Q 290 320 290 400 Z" fill="#000" opacity="0.85" />
          <path d="M 110 400 Q 110 320 200 305 Q 290 320 290 400 Z" fill="none" stroke="var(--magenta)" strokeWidth="0.5" opacity="0.4" />

          {/* head */}
          <ellipse cx="200" cy="265" rx="42" ry="48" fill="#000" />
          <ellipse cx="200" cy="265" rx="42" ry="48" fill="none" stroke="var(--magenta)" strokeWidth="0.5" opacity="0.5" />

          {/* rim light on head from screen */}
          <path d="M 162 260 Q 165 235 200 222 Q 235 235 238 260 Z" fill="url(#goldGrad)" opacity="0.15" />
          <path d="M 168 285 Q 165 270 175 250" stroke="var(--magenta)" strokeWidth="1" fill="none" opacity="0.4" />
          <path d="M 232 285 Q 235 270 225 250" stroke="var(--violet)" strokeWidth="1" fill="none" opacity="0.4" />

          {/* subtle hair texture */}
          <path d="M 165 235 Q 200 215 235 235" stroke="var(--ink)" strokeWidth="0.5" fill="none" opacity="0.2" />

          {/* arms/hands on keyboard area */}
          <path d="M 130 360 Q 150 340 175 335" stroke="#000" strokeWidth="14" strokeLinecap="round" opacity="0.9" />
          <path d="M 270 360 Q 250 340 225 335" stroke="#000" strokeWidth="14" strokeLinecap="round" opacity="0.9" />
        </g>

        {/* Floating UI accents */}
        <g opacity="0.6">
          <circle cx="60" cy="80" r="1.5" fill="var(--magenta)" />
          <circle cx="340" cy="110" r="1.5" fill="var(--violet)" />
          <circle cx="50" cy="180" r="1" fill="var(--magenta)" />
          <circle cx="350" cy="60" r="2" fill="var(--magenta)" opacity="0.5" />
        </g>

        {/* corner brackets inside the circle */}
        <g stroke="var(--magenta)" strokeWidth="1.2" fill="none" opacity="0.7">
          <path d="M 30 30 L 30 42 M 30 30 L 42 30" />
          <path d="M 370 30 L 370 42 M 370 30 L 358 30" />
        </g>

        {/* tiny label */}
        <text x="200" y="62" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="var(--ink-dim)" letterSpacing="2" opacity="0.7">DJB · WORKING</text>
        <circle cx="156" cy="59" r="2" fill="var(--magenta)">
          <animate attributeName="opacity" values="1;0.3;1" dur="1.8s" repeatCount="indefinite" />
        </circle>
      </svg>
    </div>
  );
}

function Row({ label, value }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '4px 0', borderTop: '1px solid var(--line)' }}>
      <span>{label}</span>
      <span style={{ color: 'var(--ink)' }}>{value}</span>
    </div>
  );
}

// =============== PROGRAMA 3 DÍAS ===============
const DIAS = [
  {
    num: '01',
    titulo: 'CLARIDAD',
    sub: 'Encuentra el proyecto que sí vas a lanzar',
    desc: 'Vamos a barrer las 8 ideas que tienes en la cabeza y dejar la que importa. Sin esto, todo lo demás es ruido.',
    puntos: [
      'Cómo distinguir entre una idea y un proyecto real',
      'El filtro que uso para decidir qué arrancar primero',
      'Por qué tu mejor proyecto no es el más original',
    ],
  },
  {
    num: '02',
    titulo: 'VALIDACIÓN',
    sub: 'Tu primer cliente antes de tu primer producto',
    desc: 'Vender no es manipular. Es servir antes de tener todo perfecto. Te muestro cómo conseguir tu primer SÍ esta misma semana.',
    puntos: [
      'La conversación que reemplaza 100 horas de planificación',
      'Cómo cobrar antes de tener el producto terminado',
      'El error que mata el 90% de los proyectos nuevos',
    ],
  },
  {
    num: '03',
    titulo: 'LANZAMIENTO',
    sub: 'Empieza imperfecto. Mejora en el camino.',
    desc: 'El día 3 ya no es teoría. Salimos del entrenamiento con tu proyecto vivo y un plan para los siguientes 90 días.',
    puntos: [
      'Tu lanzamiento mínimo viable en 1 hora',
      'Cómo aguantar las primeras semanas sin resultados',
      'El sistema para no dejarlo a medias (otra vez)',
    ],
  },
  {
    num: '04',
    titulo: 'ESCALA',
    sub: 'Guía paso a paso para duplicar tu facturación',
    desc: 'Ya lanzaste. Ahora viene la parte que casi nadie te enseña: cómo pasar del primer ingreso al doble sin trabajar el doble. Plan táctico, no teoría.',
    puntos: [
      'El audit de 20 minutos para detectar tu cuello de botella real',
      'Las 3 palancas que multiplican ingresos (precio, recurrencia, recompra)',
      'Cómo subir precios sin perder clientes (y cómo decirlo)',
      'Tu plan de duplicación de facturación en los próximos 90 días',
    ],
  },
];

function ProgramaSection() {
  return (
    <section id="programa" style={{ padding: '40px 0 100px', position: 'relative' }}>
      <div className="container">
        <SectionLabel num="02" label="LO QUE APRENDERÁS · 4 DÍAS" />

        <div style={{ maxWidth: 820, marginBottom: 60 }}>
          <h2 style={{ fontSize: 'clamp(40px, 6vw, 80px)', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 0.95 }}>
            Un mapa simple<br/>
            <span className="grad-text" style={{ fontStyle: 'italic' }}>para empezar de verdad.</span>
          </h2>
          <p style={{ marginTop: 22, fontSize: 18, color: 'var(--ink-dim)', lineHeight: 1.5, maxWidth: 640 }}>
            Cuatro sesiones en vivo. Cada día construyes un pedazo de tu proyecto. Sales con algo real, no con apuntes.
          </p>
        </div>

        <div style={{ display: 'grid', gap: 18 }}>
          {DIAS.map((d, i) => <DiaCard key={i} {...d} />)}
        </div>
      </div>
    </section>
  );
}

function DiaCard({ num, titulo, sub, desc, puntos }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div
      onClick={() => setOpen(o => !o)}
      style={{
        position: 'relative',
        border: '1px solid var(--line)',
        borderRadius: 18,
        background: open ? 'linear-gradient(180deg, rgba(236, 72, 153, 0.06), rgba(15, 8, 32, 0.7))' : 'rgba(15, 8, 32, 0.5)',
        backdropFilter: 'blur(10px)',
        cursor: 'pointer',
        transition: 'all 0.3s ease',
        borderColor: open ? 'var(--line-strong)' : 'var(--line)',
      }}
    >
      <span className="corner tl"></span>
      <span className="corner tr"></span>
      <span className="corner bl"></span>
      <span className="corner br"></span>

      <div style={{ padding: '28px 32px', display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 28, alignItems: 'center' }} className="dia-head">
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 64, fontWeight: 600, lineHeight: 1,
          background: 'linear-gradient(180deg, #f5f3ff 0%, #ec4899 130%)',
          WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
          fontVariantNumeric: 'tabular-nums',
        }}>{num}</div>
        <div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--magenta)', letterSpacing: '0.22em' }}>DÍA {num} · {titulo}</div>
          <div style={{ fontSize: 26, fontWeight: 600, marginTop: 8, letterSpacing: '-0.02em' }}>{sub}</div>
        </div>
        <div style={{
          width: 44, height: 44, borderRadius: '50%',
          border: '1px solid var(--line-strong)',
          display: 'grid', placeItems: 'center',
          fontSize: 22, fontWeight: 300,
          color: 'var(--magenta)',
          transition: 'transform 0.3s ease',
          transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
        }}>+</div>
      </div>

      <div style={{
        maxHeight: open ? 600 : 0,
        overflow: 'hidden',
        transition: 'max-height 0.4s ease',
      }}>
        <div style={{ padding: '0 32px 32px', borderTop: '1px solid var(--line)' }}>
          <p style={{ marginTop: 22, fontSize: 17, color: 'var(--ink-dim)', lineHeight: 1.6, maxWidth: 720 }}>{desc}</p>
          <div style={{ marginTop: 22, display: 'grid', gap: 12 }}>
            {puntos.map((p, i) => (
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'baseline' }}>
                <span className="mono" style={{ color: 'var(--magenta)', fontSize: 12 }}>0{i+1}</span>
                <span style={{ fontSize: 16, color: 'var(--ink)' }}>{p}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 640px) {
          .dia-head { grid-template-columns: auto 1fr !important; gap: 18px !important; padding: 22px !important; }
          .dia-head > div:nth-child(3) { grid-column: 1 / -1; justify-self: end; }
          .dia-head > div:first-child { font-size: 44px !important; }
          .dia-head > div:nth-child(2) > div:nth-child(2) { font-size: 21px !important; }
        }
      `}</style>
    </div>
  );
}

// =============== BONOS ===============
const BONOS = [
  { tag: 'BONO 01', titulo: 'Plantilla "Proyecto en 1 página"', desc: 'El documento que uso para empezar cualquier idea sin perderme en planes de 40 hojas.', valor: '$47' },
  { tag: 'BONO 02', titulo: 'Sesión de Q&A en vivo', desc: 'Al final del día 3 me quedo contigo lo que haga falta para resolver lo que te detiene.', valor: 'Sin precio' },
  { tag: 'BONO 03', titulo: 'Comunidad privada · 30 días', desc: 'Acceso al grupo donde compartimos avances, dudas y nos rendimos cuentas mutuamente.', valor: '$97' },
];

function BonosSection() {
  return (
    <section style={{ padding: '40px 0 100px', position: 'relative' }}>
      <div className="container">
        <SectionLabel num="03" label="LO QUE TE LLEVAS POR ASISTIR" />

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 60, alignItems: 'end', marginBottom: 50 }} className="bonos-head">
          <h2 style={{ fontSize: 'clamp(38px, 5.6vw, 72px)', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 0.95 }}>
            Bonos por<br/>
            <span className="grad-text" style={{ fontStyle: 'italic' }}>quedarte hasta el final.</span>
          </h2>
          <p style={{ fontSize: 17, color: 'var(--ink-dim)', lineHeight: 1.6, maxWidth: 480 }}>
            No son rellenos. Son las herramientas exactas que uso yo para no perder el impulso después del entrenamiento.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }} className="bonos-grid">
          {BONOS.map((b, i) => <BonoCard key={i} {...b} />)}
        </div>

        <style>{`
          @media (max-width: 880px) {
            .bonos-head { grid-template-columns: 1fr !important; gap: 24px !important; }
            .bonos-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function BonoCard({ tag, titulo, desc, valor }) {
  return (
    <div style={{
      position: 'relative',
      padding: 26,
      border: '1px solid var(--line)',
      borderRadius: 16,
      background: 'rgba(15, 8, 32, 0.5)',
      backdropFilter: 'blur(8px)',
      display: 'flex', flexDirection: 'column', gap: 16,
      minHeight: 280,
    }}>
      <span className="corner tl"></span>
      <span className="corner tr"></span>
      <span className="corner bl"></span>
      <span className="corner br"></span>

      <div className="mono" style={{ fontSize: 11, color: 'var(--magenta)', letterSpacing: '0.22em' }}>{tag}</div>
      <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em', lineHeight: 1.15 }}>{titulo}</div>
      <div style={{ fontSize: 15, color: 'var(--ink-dim)', lineHeight: 1.55, flex: 1 }}>{desc}</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: 14, borderTop: '1px solid var(--line)' }}>
        <span className="mono" style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.2em' }}>VALOR</span>
        <span style={{ fontSize: 18, fontWeight: 600 }} className="grad-text">{valor}</span>
      </div>
    </div>
  );
}

// =============== FAQ ===============
const FAQS = [
  { q: '¿Cuánto cuesta el webinar?', a: 'Nada. Es 100% gratuito. Reservas tu lugar con tu correo y te enviamos el enlace antes de cada sesión.' },
  { q: '¿Necesito tener una idea de negocio ya?', a: 'No. El día 1 es justamente para encontrar la idea correcta y dejar de saltar entre 10 al mismo tiempo. Si vienes en blanco, mejor.' },
  { q: '¿Es para mí si nunca he emprendido?', a: 'Está hecho exactamente para ti. Si ya tienes un negocio andando, también vas a sacar valor, pero el corazón está en quien aún no se anima a empezar.' },
  { q: '¿Las sesiones quedan grabadas?', a: 'Sí, pero solo por 48 horas después del día 3. La idea es que estés en vivo: el momento se aprovecha en tiempo real, con preguntas y aplicación.' },
  { q: '¿Cuánto dura cada sesión?', a: 'Aproximadamente 75 minutos: 50 de contenido, 25 de preguntas y aplicación en vivo.' },
  { q: '¿Me vas a vender algo al final?', a: 'Voy a ofrecer un programa más profundo para quienes quieran seguir trabajando conmigo. Es completamente opcional. El valor del webinar está completo aunque no compres nada.' },
];

function FaqSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: '40px 0 100px', position: 'relative' }}>
      <div className="container">
        <SectionLabel num="04" label="PREGUNTAS FRECUENTES" />

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.55fr) minmax(0,1fr)', gap: 60, alignItems: 'start' }} className="faq-grid">
          <div style={{ position: 'sticky', top: 30 }}>
            <h2 style={{ fontSize: 'clamp(40px, 5.6vw, 72px)', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 0.95 }}>
              Lo que la<br/>
              <span className="grad-text" style={{ fontStyle: 'italic' }}>gente pregunta.</span>
            </h2>
            <p style={{ marginTop: 22, fontSize: 16, color: 'var(--ink-dim)', lineHeight: 1.6 }}>
              ¿No está aquí? Escríbeme antes del 15 de junio.
            </p>
            <div style={{ marginTop: 20, padding: 16, border: '1px solid var(--line)', borderRadius: 12, background: 'rgba(15, 8, 32, 0.5)' }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.18em' }}>// CONTACTO</div>
              <div style={{ fontSize: 15, marginTop: 6 }}>hola@danteimperfecto.com</div>
            </div>
          </div>

          <div style={{ display: 'grid', gap: 10 }}>
            {FAQS.map((f, i) => (
              <FaqItem key={i} {...f} idx={i} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            ))}
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .faq-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
            .faq-grid > div:first-child { position: relative !important; top: 0 !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function FaqItem({ q, a, idx, open, onToggle }) {
  return (
    <div
      onClick={onToggle}
      style={{
        border: '1px solid',
        borderColor: open ? 'var(--line-strong)' : 'var(--line)',
        borderRadius: 14,
        padding: '20px 24px',
        background: open ? 'rgba(236, 72, 153, 0.04)' : 'rgba(15, 8, 32, 0.4)',
        cursor: 'pointer',
        transition: 'all 0.25s ease',
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <span className="mono" style={{ fontSize: 11, color: 'var(--magenta)', letterSpacing: '0.18em' }}>0{idx+1}</span>
          <span style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.01em' }}>{q}</span>
        </div>
        <span style={{
          fontSize: 22, fontWeight: 300, color: 'var(--magenta)',
          transition: 'transform 0.3s ease',
          transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
          flexShrink: 0,
        }}>+</span>
      </div>
      <div style={{
        maxHeight: open ? 200 : 0,
        overflow: 'hidden',
        transition: 'max-height 0.35s ease',
      }}>
        <p style={{ margin: '16px 0 0 0', paddingLeft: 36, fontSize: 16, color: 'var(--ink-dim)', lineHeight: 1.6 }}>{a}</p>
      </div>
    </div>
  );
}

// =============== CTA FINAL ===============
function CtaFinal() {
  return (
    <section id="registro" style={{ padding: '80px 0 120px', position: 'relative' }}>
      <div className="container">
        <div style={{
          position: 'relative',
          padding: '70px 50px',
          borderRadius: 24,
          border: '1px solid var(--line-strong)',
          background: `
            radial-gradient(ellipse 60% 80% at 100% 0%, rgba(236, 72, 153, 0.18), transparent 70%),
            radial-gradient(ellipse 60% 80% at 0% 100%, rgba(168, 85, 247, 0.18), transparent 70%),
            rgba(15, 8, 32, 0.8)
          `,
          backdropFilter: 'blur(20px)',
          overflow: 'hidden',
          textAlign: 'center',
        }}>
          <span className="corner tl"></span>
          <span className="corner tr"></span>
          <span className="corner bl"></span>
          <span className="corner br"></span>

          <div className="mono" style={{ fontSize: 11, color: 'var(--magenta)', letterSpacing: '0.22em' }}>// ÚLTIMO PASO</div>

          <h2 style={{ fontSize: 'clamp(44px, 7vw, 96px)', fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 0.95, marginTop: 22, textWrap: 'pretty' }}>
            Tu próxima vida<br/>
            <span className="grad-text" style={{ fontStyle: 'italic' }}>empieza imperfecta.</span>
          </h2>

          <p style={{ fontSize: 19, color: 'var(--ink-dim)', maxWidth: 560, margin: '24px auto 0', lineHeight: 1.5 }}>
            3 días en vivo, gratis, contigo. El 15 de junio a las 8:00 PM (MX).
          </p>

          <div style={{ marginTop: 36, display: 'flex', justifyContent: 'center' }}>
            <Countdown />
          </div>

          <form
            onSubmit={(e) => { e.preventDefault(); alert('¡Listo! Te llega un correo de confirmación.'); }}
            style={{
              marginTop: 40, display: 'flex', gap: 10, maxWidth: 520, margin: '40px auto 0',
              flexWrap: 'wrap', justifyContent: 'center',
            }}
          >
            <input
              type="email" required placeholder="tu@correo.com"
              style={{
                flex: '1 1 240px',
                padding: '18px 22px',
                background: 'rgba(8, 4, 15, 0.6)',
                border: '1px solid var(--line-strong)',
                borderRadius: 999,
                color: 'var(--ink)',
                fontFamily: 'Space Grotesk, sans-serif',
                fontSize: 16,
                outline: 'none',
              }}
              onFocus={(e) => e.target.style.borderColor = 'var(--magenta)'}
              onBlur={(e) => e.target.style.borderColor = 'var(--line-strong)'}
            />
            <button type="submit" className="btn-primary" style={{ padding: '18px 28px' }}>
              Apartar mi lugar →
            </button>
          </form>

          <div className="mono" style={{ marginTop: 22, fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '0.18em' }}>
            100% GRATUITO · SIN COMPROMISO · CUPO LIMITADO
          </div>
        </div>
      </div>
    </section>
  );
}

// =============== FOOTER ===============
function Footer() {
  return (
    <footer style={{ padding: '40px 0 60px', borderTop: '1px solid var(--line)', marginTop: 40 }}>
      <div className="container" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: 20, alignItems: 'center' }}>
        <div className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '0.18em' }}>
          © 2026 DANTE J. BÁEZ · EMPRENDE IMPERFECTO
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '0.18em', display: 'flex', gap: 20 }}>
          <span>PRIVACIDAD</span>
          <span>TÉRMINOS</span>
          <span style={{ color: 'var(--magenta)' }}>● SYSTEM v1.0</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { BioSection, ProgramaSection, BonosSection, FaqSection, CtaFinal, Footer });
