// sections2.jsx — author, transform, schedule, testimonials, offer, faq, ps

const Author = () => (
  <section className="section" id="autor">
    <div className="container">
      <div className="author">
        <Reveal>
          <div className="author__media">
            <img src="assets/leonardo-palestra.jpg" alt="Leonardo Arias en escenario" loading="lazy" decoding="async" />
          </div>
        </Reveal>
        <div>
          <Eyebrow>Quién está detrás</Eyebrow>
          <h2 className="h-1" style={{marginTop:18}}>Leonardo Arias.</h2>
          <p className="lead" style={{marginTop:24}}>
            Brasileño, especialista en ventas digitales y creador de productos
            que generaron <span className="accent">+US$3.000.000 en ventas online</span>.
            Durante los últimos 6 años trabajó en lanzamiento y escalado de
            productos en distintos nichos — de espiritualidad a inteligencia
            artificial — ayudando a emprendedores a facturar desde cero hasta
            múltiples cinco cifras mensuales.
          </p>
          <p className="muted" style={{marginTop:18, fontSize:15, lineHeight:1.6}}>
            Su enfoque no es enseñar teoría — es crear sistemas que funcionen
            para personas comunes, sin experiencia, que quieren resultados reales.
          </p>

          <div className="author__stats">
            <div className="stat">
              <div className="stat__num"><span>+US$</span>3M</div>
              <div className="stat__label">en ventas generadas</div>
            </div>
            <div className="stat">
              <div className="stat__num"><span>+</span>2.500</div>
              <div className="stat__label">alumnos transformados</div>
            </div>
            <div className="stat">
              <div className="stat__num"><span>+</span>500</div>
              <div className="stat__label">productos lanzados</div>
            </div>
            <div className="stat">
              <div className="stat__num"><span>06</span></div>
              <div className="stat__label">años perfeccionando</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const BEFORE = [
  'Frustrado, sin perspectivas de crecimiento',
  'Múltiples cursos comprados sin aplicar',
  'La IA parece imposible de entender',
  'Sin claridad sobre qué crear o cómo vender',
  'Trabajando duro solo para sobrevivir',
  'Dependiendo de un salario que no alcanza',
  'Viendo pasar los años sin cambios reales',
];
const AFTER = [
  'Producto digital creado y listo para vender',
  'Dominio práctico de IA aplicada a negocios',
  'Método claro y replicable en tus manos',
  'Nueva fuente de ingresos funcionando',
  'Confianza para construir tu futuro digital',
  'Libertad financiera, de tiempo y geográfica',
  'Orgullo por algo creado con tus propias manos',
];

const Transform = () => (
  <section className="section">
    <div className="container">
      <div className="section-head">
        <Eyebrow center>Tu transformación</Eyebrow>
        <h2 className="h-1">48 horas que cambian la trayectoria.</h2>
      </div>

      <div className="compare">
        <div className="compare__col">
          <div className="compare__head">
            <span className="compare__label">ANTES — HOY</span>
            <span className="mono dim">Tu realidad actual</span>
          </div>
          <h3 className="compare__title">Donde estás ahora.</h3>
          <ul className="compare__list">
            {BEFORE.map((b,i) => (
              <li key={i}><span className="icon-x">×</span><span>{b}</span></li>
            ))}
          </ul>
        </div>
        <div className="compare__col compare__col--after">
          <div className="compare__head">
            <span className="compare__label" style={{color:'var(--accent)'}}>DESPUÉS — 48H</span>
            <span className="mono accent">Tu nueva realidad</span>
          </div>
          <h3 className="compare__title">Donde sales del workshop.</h3>
          <ul className="compare__list">
            {AFTER.map((a,i) => (
              <li key={i}><span className="icon-v">✓</span><span>{a}</span></li>
            ))}
          </ul>
        </div>
      </div>

      <div style={{textAlign:'center', marginTop:48}}>
        <p className="h-2" style={{maxWidth:'18ch', margin:'0 auto 28px'}}>
          La pregunta no es <em style={{fontStyle:'italic', color:'var(--fg-2)', fontWeight:400}}>si funcionará</em>.<br/>
          La pregunta es <span className="accent">cuándo empiezas</span>.
        </p>
        <a href="#oferta" className="btn btn--primary btn--lg">
          Quiero mi transformación ahora <span className="btn-arrow">→</span>
        </a>
      </div>
    </div>
  </section>
);

const DAY1_PHASE1 = [
  'Identifica tu nicho usando IA',
  'Crea tu oferta magnética con agentes entrenados',
  'Valida tu propuesta de valor en tiempo real',
  'Define tu cliente ideal con precisión',
];
const DAY1_PHASE2 = [
  'Genera el contenido del producto con agentes IA',
  'Estructura tu producto paso a paso',
  'Crea materiales visuales con IA',
  'Optimiza todo para máxima conversión',
];
const DAY2_PHASE3 = [
  'Construye una página de venta que convierte',
  'Configura el checkout optimizado',
  'Implementa el sistema de entrega automatizado',
  'Prepara order bumps y upsells',
];
const DAY2_PHASE4 = [
  'Crea anuncios que generan ventas',
  'Diseña creativos visuales con IA',
  'Configura campañas en Instagram',
  'Lanzas oficialmente tu producto',
];

const Schedule = () => (
  <section className="section">
    <div className="container">
      <div className="section-head">
        <Eyebrow center>Cronograma</Eyebrow>
        <h2 className="h-1">Qué sucede exactamente en cada día.</h2>
      </div>

      <div className="schedule">
        <div className="day">
          <div className="day__head">
            <div>
              <div className="day__label">DÍA 01 · SÁBADO 02 MAY</div>
              <div className="day__title">Creación en vivo</div>
            </div>
            <span className="day__badge">Crear</span>
          </div>
          <div className="day__phases">
            <div className="day__phase-title">Fase 1 — Oferta irresistible</div>
            <ul className="day__items">
              {DAY1_PHASE1.map((it,i) => (
                <li key={i}><span className="num">0{i+1}</span><span>{it}</span></li>
              ))}
            </ul>
            <div className="day__phase-title">Fase 2 — Producto con IA</div>
            <ul className="day__items">
              {DAY1_PHASE2.map((it,i) => (
                <li key={i}><span className="num">0{i+1}</span><span>{it}</span></li>
              ))}
            </ul>
          </div>
        </div>

        <div className="day">
          <div className="day__head">
            <div>
              <div className="day__label">DÍA 02 · DOMINGO 03 MAY</div>
              <div className="day__title">Lanzamiento en vivo</div>
            </div>
            <span className="day__badge">Vender</span>
          </div>
          <div className="day__phases">
            <div className="day__phase-title">Fase 3 — Embudo de venta</div>
            <ul className="day__items">
              {DAY2_PHASE3.map((it,i) => (
                <li key={i}><span className="num">0{i+1}</span><span>{it}</span></li>
              ))}
            </ul>
            <div className="day__phase-title">Fase 4 — Tráfico con IA</div>
            <ul className="day__items">
              {DAY2_PHASE4.map((it,i) => (
                <li key={i}><span className="num">0{i+1}</span><span>{it}</span></li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      <p className="muted" style={{textAlign:'center', marginTop:32, fontSize:14}}>
        Al final del domingo: producto creado, embudo funcionando, primeras
        estrategias de tráfico implementadas.
      </p>
    </div>
  </section>
);

const TESTS = [
  { name: 'María C.', role: 'Empleada · Bogotá', initials: 'MC',
    quote: 'Llegué sin saber nada de IA. En 48h tenía mi ebook publicado y vendí 11 unidades en la primera semana.' },
  { name: 'Daniel R.', role: 'Freelancer · Lima', initials: 'DR',
    quote: 'Probé otros métodos y siempre quedaba a medias. Lo distinto fue que aquí construí el producto durante la clase.' },
  { name: 'Camila V.', role: 'Madre · Buenos Aires', initials: 'CV',
    quote: 'Pensé que no iba a poder por no ser técnica. Los agentes hicieron lo difícil — yo solo seguí el guion paso a paso.' },
];

const Testimonials = () => (
  <section className="section">
    <div className="container">
      <div className="section-head">
        <Eyebrow center>Resultados reales</Eyebrow>
        <h2 className="h-1">Lo que dicen quienes ya vivieron la experiencia.</h2>
        <p className="muted" style={{textAlign:'center'}}>
          No son casos excepcionales — son resultados normales cuando sigues
          el método correcto.
        </p>
      </div>

      <div className="testimonials">
        {TESTS.map((t,i) => (
          <Reveal key={i}>
            <article className="testimonial">
              <p className="testimonial__quote">{t.quote}</p>
              <div className="testimonial__person">
                <div className="testimonial__avatar">{t.initials}</div>
                <div>
                  <div className="testimonial__name">{t.name}</div>
                  <div className="testimonial__role">{t.role}</div>
                </div>
              </div>
            </article>
          </Reveal>
        ))}
      </div>

      <div style={{textAlign:'center', marginTop:48}}>
        <p className="muted" style={{marginBottom:20}}>
          Más de 500 alumnos ya transformaron sus vidas con este método.
        </p>
        <a href="#oferta" className="btn btn--ghost btn--lg">
          Quiero ser el próximo caso <span className="btn-arrow">→</span>
        </a>
      </div>
    </div>
  </section>
);

const INCLUDES = [
  { title: 'Workshop en vivo', desc: '16h de contenido intensivo · método O.P.E.T. paso a paso · acompañamiento en tiempo real',
    label: 'WORKSHOP', orig: 'US$497', image: 'assets/deliverable-workshop.jpg' },
  { title: 'Pack completo de agentes IA', desc: 'Agentes pre-configurados para validar, crear, escribir y vender — listos para copiar',
    label: 'AGENTES', orig: 'US$397', image: 'assets/deliverable-agentes.jpg' },
  { title: 'Soporte premium', desc: '7 días post-evento por WhatsApp · respuestas en tiempo real · grupo cerrado de alumnos',
    label: 'SOPORTE', orig: 'US$397', image: 'assets/deliverable-soporte.jpg' },
  { title: 'Workbook práctico', desc: 'Cuaderno con ejercicios y tareas para aplicar todo lo aprendido — no es más contenido, es ejecución',
    label: 'WORKBOOK', orig: 'US$97', bono: true, image: 'assets/deliverable-workbook.jpg' },
  { title: '10 productos validados', desc: 'Lista de productos validados — eliges uno y lo modelas en vivo durante el workshop',
    label: 'PRODUCTOS', orig: 'US$197', bono: true, image: 'assets/deliverable-productos.jpg' },
  { title: 'Certificado de participación', desc: 'Certificado oficial al finalizar los dos días del workshop',
    label: 'CERTIFICADO', orig: 'incalculable', bono: true, image: 'assets/deliverable-certificado.jpg' },
];

const Offer = () => (
  <section className="section offer" id="oferta">
    <div className="container">
      <div className="section-head">
        <Eyebrow center>Tu inversión</Eyebrow>
        <h2 className="h-1">Esto es exactamente lo que recibes.</h2>
        <p className="lead" style={{textAlign:'center'}}>
          Un stack completo para crear, lanzar y escalar tu primer producto
          digital — por menos del costo de una hamburguesa.
        </p>
      </div>

      <div className="offer-grid">
        <div className="includes">
          {INCLUDES.map((i, idx) => (
            <React.Fragment key={idx}>
              {idx === 3 && (
                <div className="includes__divider" role="separator">
                  <span className="includes__divider-line" aria-hidden="true"></span>
                  <span className="includes__divider-text">+ 3 BONOS INCLUIDOS</span>
                  <span className="includes__divider-line" aria-hidden="true"></span>
                </div>
              )}
              <div className={`include${i.bono ? ' include--bono' : ''}`}>
                {i.bono && <span className="include__badge">BONO</span>}
                {i.image
                  ? <img src={i.image} alt={i.title} className="include__media include__media--img" loading="lazy" />
                  : <Placeholder label={i.label} className="include__media" />}
                <div>
                  <h3 className="include__title">{i.title}</h3>
                  <p className="include__desc">{i.desc}</p>
                </div>
                <div className="include__price">
                  {i.bono ? <span className="include__price-bono">+ {i.orig}</span> : <s>{i.orig}</s>}
                </div>
              </div>
            </React.Fragment>
          ))}
        </div>

        <aside className="pricecard">
          <div className="pricecard__lote">
            <div className="pricecard__lote-head">
              <span className="pricecard__lote-pill">
                <span className="pricecard__lote-dot" aria-hidden="true"></span>
                LOTE 1 · 99% OCUPADO
              </span>
              <span className="pricecard__lote-meta">Cierra · 02 may</span>
            </div>
            <div className="pricecard__lote-bar" aria-hidden="true">
              <span className="pricecard__lote-fill"></span>
            </div>
            <div className="pricecard__lote-sub">Quedan pocas plazas a este precio.</div>
          </div>

          <div className="pricecard__total">
            VALOR TOTAL <s>US$1.585</s>
          </div>

          <div className="pricedrops">
            <div className="pricedrops__row struck">No pagas US$1.585</div>
            <div className="pricedrops__row struck">Ni la mitad — US$792</div>
            <div className="pricedrops__row struck">Ni la mitad de la mitad — US$396</div>
            <div className="pricedrops__row struck">Ni US$198…</div>
          </div>

          <div>
            <div className="mono accent" style={{marginBottom:8, letterSpacing:'0.14em'}}>UN SOLO PAGO DE</div>
            <div className="pricecard__price">
              <span className="currency">US$</span>
              <span className="num">5</span>
            </div>
            <div className="pricecard__sub">🍔 Menos que una hamburguesa.</div>
          </div>

          <a href="https://pay.hotmart.com/E104422440A?checkoutMode=10" target="_blank" rel="noopener" className="btn btn--primary btn--xl" style={{width:'100%'}}>
            QUIERO PARTICIPAR DEL WORKSHOP <span className="btn-arrow">→</span>
          </a>

          <div className="pricecard__divider"></div>

          <ul className="pricecard__list">
            <li>Acceso al workshop en vivo (16h)</li>
            <li>Pack completo de agentes IA</li>
            <li>Soporte 7 días por WhatsApp</li>
            <li>Workbook + 10 productos validados</li>
            <li>Certificado de participación</li>
          </ul>

          <div className="pricecard__meta">
            <span>02—03 MAY</span>
            <span>ZOOM · ES</span>
          </div>
        </aside>
      </div>

      <div className="guarantee">
        <div className="guarantee__seal">
          <div style={{textAlign:'center'}}>
            <div className="guarantee__seal-num">30</div>
            <div className="guarantee__seal-label">DÍAS · GARANTÍA</div>
          </div>
        </div>
        <div>
          <Eyebrow>Garantía incondicional</Eyebrow>
          <h3 className="h-2" style={{marginTop:14, marginBottom:14}}>El riesgo es mío, no tuyo.</h3>
          <p className="lead">
            Participa del workshop completo. Aplica todo lo que enseño. Si en
            30 días no sientes que valió cada centavo — me escribes y te
            devuelvo tu dinero. Sin preguntas. Sin complicaciones.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const FAQS = [
  { q: 'No sé nada de inteligencia artificial.',
    a: 'Perfecto. El workshop está diseñado para principiantes absolutos. Los agentes IA ya están entrenados — tú solo sigues instrucciones simples. Si sabes usar WhatsApp, puedes usar IA.' },
  { q: '¿Y si creo algo y nadie lo compra?',
    a: 'Imposible. Empezamos creando una oferta validada, no un producto aleatorio. Aprendes a identificar qué quiere el mercado ANTES de crear — así eliminas el riesgo.' },
  { q: 'No tengo tiempo para otro curso.',
    a: 'Esto no es un curso de meses. Son 48 horas intensivas. Un fin de semana que puede cambiar el resto de tu vida. ¿No vale la pena invertir 2 días?' },
  { q: '¿Funciona para empleados sin experiencia?',
    a: 'Especialmente para ellos. El 70% de los alumnos exitosos eran empleados cuando empezaron. Tienes disciplina y responsabilidad — solo te faltaba el método correcto.' },
  { q: 'A ese precio… ¿no será muy básico?',
    a: 'No. Es el mejor contenido sin secretos. El objetivo no es ganar dinero con este workshop — es demostrar que el método funciona. El precio real son los resultados que generes después.' },
  { q: '¿En qué idioma es?',
    a: 'Completamente en español. Leonardo es brasileño pero habla español fluido. Todo el contenido, ejemplos y casos están adaptados al mercado latinoamericano.' },
  { q: '¿Necesito invertir en herramientas caras?',
    a: 'No. Las herramientas de IA que usamos tienen versiones gratuitas o muy baratas. Tu inversión total además del workshop no supera los US$20/mes.' },
  { q: '¿Y si no logro aplicar lo enseñado?',
    a: 'Tienes 7 días de soporte por WhatsApp. No te dejo solo. Si tienes dudas, las resolvemos juntos.' },
];

const Faq = () => (
  <section className="section" id="faq">
    <div className="container" style={{maxWidth:880}}>
      <div className="section-head">
        <Eyebrow center>Tus principales dudas</Eyebrow>
        <h2 className="h-1">Antes de inscribirte.</h2>
      </div>
      <div className="faq">
        {FAQS.map((f,i) => <FaqItem key={i} q={f.q} a={f.a} />)}
      </div>
    </div>
  </section>
);

const Ps = () => (
  <section className="section ps">
    <div className="container">
      <Eyebrow center>P.S. — una reflexión final</Eyebrow>
      <h2 className="h-1" style={{margin:'24px auto 0', maxWidth:'18ch'}}>
        Si llegaste hasta aquí es porque <em style={{color:'var(--accent)', fontStyle:'italic', fontWeight:500}}>sientes que mereces más</em>.
      </h2>

      <div className="ps__body">
        <p>Tienes razón.</p>
        <p>
          <strong>Mereces despertar cada día emocionado por lo que haces.</strong>{' '}
          Mereces tener el control de tu tiempo y tus ingresos. Mereces sentir
          orgullo por algo que creaste con tus propias manos.
        </p>
        <p>
          La pregunta no es <em>si funcionará</em>. La pregunta es:{' '}
          <strong>¿cuánto tiempo más vas a esperar?</strong>
        </p>
        <p className="muted" style={{fontSize:15}}>
          ¿Otro año viendo pasar las oportunidades? ¿Cinco años más en el mismo lugar?
        </p>
        <p>Solo te falta dar el primer paso. Nos vemos del otro lado.</p>
      </div>

      <a href="#oferta" className="btn btn--primary btn--xl">
        Sí — doy el primer paso hoy <span className="btn-arrow">→</span>
      </a>

      <div className="ps__sig">— Leonardo Arias</div>
      <div className="mono dim" style={{marginTop:8}}>Creador del método O.P.E.T.</div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="container">
      © 2026 LEONARDO ARIAS · TODOS LOS DERECHOS RESERVADOS
    </div>
  </footer>
);

const StickyCta = () => {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 800);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={`sticky-cta ${visible ? 'sticky-cta--visible' : ''}`}>
      <span className="sticky-cta__text">
        02—03 MAY · <span className="sticky-cta__price">US$5</span>
      </span>
      <a href="#oferta" className="btn btn--primary">
        Reservar mi plaza <span className="btn-arrow">→</span>
      </a>
    </div>
  );
};

Object.assign(window, {
  Author, Transform, Schedule, Testimonials, Offer, Faq, Ps, Footer, StickyCta
});