const DS = window.SemanaDeLaEraInteligente_64c555;
const A = '../../assets/';

const SESSIONS = [
  { number: '01', date: 'Lunes 26 de octubre', title: 'La oportunidad más segura del 2026', bullets: ['Por qué este modelo funciona sin renunciar a tu empleo ni exponerte en redes.', 'Vas a entender por qué funciona y por qué no necesitas saber de tecnología.'], tags: ['El modelo', 'Comisiones en dólares', 'Desde cero'] },
  { number: '02', date: 'Martes 27 de octubre', title: 'Tu sistema de ventas con Inteligencia Artificial', bullets: ['Cómo la IA hace en minutos lo que antes tomaba semanas: definir a tu cliente ideal, crear tu producto y dejar un sistema que vende por ti.', 'Todo sin salir en cámaras.'], tags: ['IA aplicada', 'Tu primer activo digital', 'Sin cámaras'] },
  { number: '03', date: 'Miércoles 28 de octubre', title: 'La estrategia con la que generé $2,500 USD en un mes', bullets: ['Te la explico paso a paso.', 'Para que puedas aplicarla aunque solo tengas una hora libre al día.'], tags: ['Estrategia real', '1 hora al día', 'Paso a paso'] },
  { number: '04', date: 'Jueves 29 de octubre', title: 'Cómo construir tu patrimonio digital', flag: 'Imperdible', bullets: ['La estrategia con la que generé en una semana lo que antes ganaba en un año de empleo.', 'Cómo dar tu primer paso esa misma noche.'], tags: ['La estrategia completa', 'Plan de acción', 'Sorpresa final'] },
];
const STUDENTS = ['diploma-1.jpg', 'diploma-2.jpg', 'diploma-3.jpg'].map((f, i) => ({
  photo: A + 'students/' + f, alt: 'Alumna sosteniendo su placa de facturación (' + (i + 1) + ' de 3)',
  name: '[NOMBRE]', city: '[CIUDAD]', amount: '$[MONTO] USD', before: '[a qué se dedicaba]',
}));

function Hero({ onCta }) {
  const { LiveBadge, Button, ProofLine, SpeakerCutout, GoldWords } = DS;
  return (
    <section className="hero" id="hero" aria-labelledby="hero-title">
      <div className="sei-container hero__inner">
        <LiveBadge />
        <h1 className="sei-h1" id="hero-title">Cientos de mujeres en Ecuador ya generan <GoldWords>ingresos por internet</GoldWords> vendiendo productos digitales con <GoldWords>Inteligencia Artificial</GoldWords></h1>
        <p className="sei-lead hero__sub">Sin dejar tu trabajo, sin salir en cámaras y sin experiencia previa. Te muestro cómo lo hacen en 4 clases en vivo, gratis.</p>
        <div className="hero__cta">
          <Button onClick={onCta}>Quiero asistir a las 4 clases</Button>
          <p className="sei-micro">Registro gratuito · te toma 20 segundos</p>
          <ProofLine style={{ marginTop: 6 }} />
        </div>
        <SpeakerCutout className="hero__speaker" src={A + 'evelyn/evelyn-cutout.webp'} alt="Evelyn Cofre, mentora de la Semana de la Era Inteligente" />
      </div>
    </section>
  );
}

function Agenda({ onCta }) {
  const { SectionHeading, AgendaList, Button } = DS;
  return (
    <section className="band band--top sei-section" id="agenda">
      <div className="sei-container">
        <SectionHeading eyebrow="Agenda en vivo · YouTube" title="Esto es lo que vas a aprender, clase por clase" />
        <AgendaList className="agenda-wrap" sessions={SESSIONS} />
        <div className="sei-cta-row"><Button onClick={onCta}>Reservar mi lugar gratis</Button></div>
      </div>
    </section>
  );
}

function Mentora({ onCta }) {
  const { MentorBlock, PullQuote, Button } = DS;
  return (
    <section className="band sei-section" id="mentora">
      <div className="sei-container">
        <MentorBlock className="mentor-wrap" photo={A + 'evelyn/retrato-3.jpg'} photoAlt="Retrato de Evelyn Cofre sonriendo, con blazer blanco">
          <p><strong>Mi nombre es Evelyn. Hace 4 años yo estaba exactamente donde tú estás.</strong> Trabajaba como auxiliar administrativa, frustrada, cansada y buscando una salida sin renunciar a la “estabilidad” de mi empleo.</p>
          <p>No sabía nada de tecnología. No tenía seguidores. Y no quería salir en cámaras. Aprendí a vender productos digitales por internet, al principio sin que nadie se enterara, en mis ratos libres.</p>
          <p>Hoy vivo 100% de internet y he facturado más de $400,000 USD. Compré mi terreno, viajo con mi familia y pude regalarles un crucero y ver en sus ojos pura felicidad.</p>
          <p>No te cuento esto para impresionarte. Te lo cuento porque durante 4 noches te voy a mostrar el mismo camino que yo recorrí. <strong>¿Me acompañas?</strong></p>
          <PullQuote cite="Evelyn Cofre">“No necesitas más títulos ni más horas de trabajo. Necesitas un modelo diferente.”</PullQuote>
        </MentorBlock>
        <div className="sei-cta-row"><Button onClick={onCta}>Sí, Eve, te acompaño</Button></div>
      </div>
    </section>
  );
}

function Resultados({ onCta }) {
  const { SectionHeading, StudentGrid, CommunityPhoto, Button } = DS;
  return (
    <section className="band sei-section" id="resultados">
      <div className="sei-container">
        <SectionHeading eyebrow="No solo yo" eyebrowTone="gold" title="Ellas empezaron igual que tú" lead="Mujeres que hace poco no sabían nada de esto y hoy tienen su propio negocio por internet. Estas son algunas de ellas, con su placa de facturación en la mano." />
        <StudentGrid className="proof-grid" students={STUDENTS} />
        <CommunityPhoto className="proof-community" src={A + 'community/comunidad-1.jpg'} caption="Parte de la comunidad de Patrimonio Digital en [CIUDAD], [MES] de 2026." disclaimer="Son resultados reales de alumnas de Evelyn, compartidos con su permiso. Cada persona obtiene resultados distintos según su esfuerzo, su tiempo y lo que aplique." />
        <div className="sei-cta-row"><Button onClick={onCta}>Quiero estar en las 4 clases</Button></div>
      </div>
    </section>
  );
}

function Detalles({ onCta }) {
  const { DetailsPanel, SerifAccent, Button } = DS;
  return (
    <section className="band sei-section" id="detalles">
      <div className="sei-container">
        <DetailsPanel title={<>Detalles de la Semana de la <SerifAccent>Era Inteligente</SerifAccent></>}>
          <Button onClick={onCta}>Quiero mi lugar gratis</Button>
        </DetailsPanel>
      </div>
    </section>
  );
}

function Registro() {
  const { RegistrationForm } = DS;
  return (
    <section className="registro sei-section" id="registro">
      <div className="sei-container">
        <header className="registro__head">
          <h2 className="sei-h2">Cientos de mujeres ya decidieron cambiar su historia. La próxima puedes ser tú.</h2>
          <p className="sei-lead">Reserva tu lugar gratis en la Semana de la Era Inteligente. Solo toma 20 segundos.</p>
        </header>
        {/* REEMPLAZAR POR EL EMBED DE GHL */}
        <RegistrationForm card idPrefix="reg" />
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Agenda, Mentora, Resultados, Detalles, Registro });