// CourseSections.jsx — conversion-focused sections for /curso.
const {
  config: funnelConfig,
  problems: funnelProblems,
  buildFlow: funnelBuildFlow,
  results: funnelResults,
  fit: funnelFit,
  includes: funnelIncludes,
  socialProof: funnelSocialProof,
  faq: funnelFaq,
} = window.CourseFunnelData;

function CourseHeroSection({ checkoutCancelled = false }) {
  return (
    <>
      {checkoutCancelled ? (
        <div className="course-cancelled" role="status">
          <div className="course-wrap">
            El pago no se completó. No se realizó ningún cargo; podés intentarlo nuevamente cuando quieras.
          </div>
        </div>
      ) : null}

      <section className="course-hero">
        <div className="course-wrap course-hero__grid">
          <div className="course-hero__copy">
            <div className="course-kicker course-kicker--pill">
              <span className="course-live-dot" aria-hidden="true" />
              Preventa · precio fundador
            </div>

            <h1>
              Convertí tu idea en una app real.
              <span> Con IA.</span>
            </h1>

            <p className="course-hero__lede">
              Empezá creando una primera versión funcional desde el primer día. Después seguí un
              camino guiado para agregar backend, usuarios, pagos, publicación, branding y marketing
              únicamente cuando tu app lo necesite.
            </p>

            <div className="course-hero__actions">
              <CourseButton href="/curso/checkout" source="hero" variant="primary">
                Quiero crear mi app — {funnelConfig.price}
              </CourseButton>
            </div>

            <ul className="course-trust-list" aria-label="Condiciones del acceso">
              <li>Pago único</li>
              <li>Acceso de por vida</li>
              <li>Curso completo al lanzamiento</li>
              <li>4 llamadas privadas 1:1</li>
              <li>Actualizaciones incluidas</li>
            </ul>

            <p className="course-hero__proof-note">
              Basado en el proceso que usé para crear Cargo, publicarla en ambas tiendas y llevarla a
              más de 2.000 usuarios.
            </p>
          </div>

          <CourseHeroVisual />
        </div>
      </section>
    </>
  );
}

function CourseProblemSection() {
  return (
    <section className="course-section course-problem">
      <div className="course-wrap">
        <CourseSectionHeader
          number="02"
          eyebrow="UN MÉTODO PROGRESIVO"
          title="No necesitás entender todo para empezar."
          description="Primero construís algo visible y funcional. Después cada herramienta aparece para resolver una necesidad concreta de tu app."
        />

        <div className="course-problem-grid">
          {funnelProblems.map((problem) => (
            <article className="course-problem-card" key={problem.number}>
              <span className="course-card-number">{problem.number}</span>
              <h3>{problem.title}</h3>
              <p>{problem.body}</p>
            </article>
          ))}
        </div>

        <div className="course-build-flow" aria-label="Proceso de construcción">
          {funnelBuildFlow.map((step, index) => (
            <React.Fragment key={step}>
              <div className="course-flow-step">
                <span>{String(index + 1).padStart(2, '0')}</span>
                <strong>{step}</strong>
              </div>
              {index < funnelBuildFlow.length - 1 ? (
                <span className="course-flow-arrow" aria-hidden="true">→</span>
              ) : null}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function CourseProofSection() {
  return (
    <section className="course-section course-proof" id="caso-real">
      <div className="course-wrap">
        <CourseSectionHeader
          number="03"
          eyebrow="CASO REAL"
          title="No construí una demo para venderte un curso."
          description="Construí Cargo desde cero, la publiqué y tuve que resolver los problemas que aparecen cuando una app sale de tu computadora y llega a usuarios reales."
        />

        <div className="course-proof-grid">
          <article className="course-case-card">
            <div className="course-case-card__top">
              <span className="course-label">PRODUCTO EN PRODUCCIÓN</span>
              <span className="course-case-card__year">2024—HOY</span>
            </div>

            <img
              src="assets/cargo-logo-horizontal.svg"
              alt="Cargo"
              className="course-cargo-logo"
            />

            <h3>La app que se convirtió en el caso central del curso.</h3>
            <p>
              Cargo combina aplicación móvil, backend, autenticación, mapas, navegación, datos,
              publicación, métricas y operación real. En el curso vas a ver el razonamiento detrás de
              esas decisiones, incluidos los errores.
            </p>

            <div className="course-case-stats">
              <div>
                <strong>+2.000</strong>
                <span>usuarios</span>
              </div>
              <div>
                <strong>2 tiendas</strong>
                <span>iOS y Android</span>
              </div>
              <div>
                <strong>1 producto</strong>
                <span>funcionando de verdad</span>
              </div>
            </div>

            <a
              href="https://www.cargoapp.lat/es"
              target="_blank"
              rel="noreferrer"
              className="course-text-link"
              onClick={() => trackCourseEvent('course_proof_click', { destination: 'cargo' })}
            >
              Conocer Cargo <span aria-hidden="true">↗</span>
            </a>
          </article>

          <article className="course-dashboard-card">
            <div className="course-case-card__top">
              <span className="course-label">DATOS REALES</span>
              <span className="course-case-card__year">REVENUECAT</span>
            </div>

            <div className="course-dashboard-crop">
              <img
                src="assets/revenuecat-overview.png"
                alt="RevenueCat mostrando ingresos, nuevos clientes y clientes activos de Cargo"
              />
            </div>

            <div className="course-dashboard-metrics">
              <div>
                <span>Ingresos</span>
                <strong>Producto validado</strong>
              </div>
              <div>
                <span>Nuevos clientes</span>
                <strong>2.083</strong>
              </div>
              <div>
                <span>Clientes activos</span>
                <strong>2.096</strong>
              </div>
            </div>

            <p>
              La prueba no es una promesa de resultados para vos. Es evidencia de que el proceso se
              aplicó a un producto real, con usuarios y datos reales.
            </p>
          </article>
        </div>

        <div className="course-authority-strip">
          <div className="course-authority-copy">
            <img src="assets/anthony-pfp.png" alt="" aria-hidden="true" />
            <div>
              <strong>Soy Anthony Stepvoy.</strong>
              <p>
                Construyo productos digitales y comparto públicamente lo que aprendo. Este curso es el
                sistema que me habría gustado tener cuando empecé a desarrollar con IA.
              </p>
            </div>
          </div>

          <div className="course-social-proof">
            {funnelSocialProof.map((social) => (
              <a
                href={social.href}
                target="_blank"
                rel="noreferrer"
                key={social.name}
                onClick={() =>
                  trackCourseEvent('course_social_click', { destination: social.name.toLowerCase() })
                }
              >
                <span>{social.name}</span>
                <strong>{social.value}</strong>
                <small>{social.label}</small>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CourseResultsSection() {
  return (
    <section className="course-section course-results">
      <div className="course-wrap">
        <CourseSectionHeader
          number="04"
          eyebrow="TRANSFORMACIÓN"
          title="Vas a avanzar viendo resultados, no acumulando teoría."
          description="Cada etapa parte de algo que ya funciona y agrega únicamente la profundidad que tu producto necesita."
        />

        <div className="course-results-grid">
          {funnelResults.map((result) => (
            <article className="course-result-card" key={result.number}>
              <div className="course-result-card__top">
                <span>{result.number}</span>
                <small>{result.tag}</small>
              </div>
              <div className="course-result-card__icon" aria-hidden="true">
                <i className={`ph ${result.icon}`} />
              </div>
              <h3>{result.title}</h3>
              <p>{result.body}</p>
            </article>
          ))}
        </div>

        <div className="course-outcome-note">
          <span>EL OBJETIVO</span>
          <p>
            Que primero veas tu idea funcionando y después puedas convertirla en un producto publicado,
            sin depender ciegamente de la IA ni agregar complejidad porque sí.
          </p>
        </div>
      </div>
    </section>
  );
}

function CourseCurriculumSection() {
  return (
    <section className="course-section course-curriculum" id="programa">
      <div className="course-wrap course-curriculum-layout">
        <aside className="course-curriculum-intro">
          <CourseSectionHeader
            number="06"
            eyebrow="EL MÉTODO"
            title="Cinco etapas. Primero funciona, después crece."
            description="Seguís un recorrido principal desde tu idea hasta los primeros usuarios. Los contenidos avanzados quedan disponibles como módulos opcionales."
          />

          <div className="course-curriculum-complete">
            <span className="course-label course-label--gold">RECORRIDO + BIBLIOTECA</span>
            <strong>Todo está disponible, pero no todo es obligatorio.</strong>
            <p>Avanzás por la ruta esencial y abrís los módulos especializados cuando tu proyecto los necesita.</p>
          </div>

        </aside>

        <CourseCurriculumCarousel />
      </div>
    </section>
  );
}

function CourseStackSection() {
  return (
    <section className="course-stack">
      <div className="course-wrap course-stack__heading">
        <div>
          <span>BIBLIOTECA / HERRAMIENTAS / IA</span>
          <h2>Tecnologías disponibles cuando tu app las necesite.</h2>
        </div>
        <p>
          No tenés que dominar todas para completar el curso. Aprendés a elegirlas y conectarlas
          únicamente cuando aportan algo a tu producto.
        </p>
      </div>
      <CourseTechMarquee />
    </section>
  );
}

function CourseFitSection() {
  return (
    <section className="course-section course-fit">
      <div className="course-wrap">
        <CourseSectionHeader
          number="07"
          eyebrow="PARA QUIÉN"
          title="Quiero que sepas si este curso encaja antes de comprar."
        />

        <div className="course-fit-grid">
          <article className="course-fit-card course-fit-card--yes">
            <span>ES PARA VOS SI...</span>
            <ul>
              {funnelFit.good.map((item) => (
                <li key={item}>
                  <span aria-hidden="true">✓</span>
                  <p>{item}</p>
                </li>
              ))}
            </ul>
          </article>

          <article className="course-fit-card course-fit-card--no">
            <span>NO ES PARA VOS SI...</span>
            <ul>
              {funnelFit.bad.map((item) => (
                <li key={item}>
                  <span aria-hidden="true">×</span>
                  <p>{item}</p>
                </li>
              ))}
            </ul>
          </article>
        </div>
      </div>
    </section>
  );
}

function CourseOfferSection() {
  const hasCheckout = Boolean(funnelConfig.checkoutUrl);
  const checkoutLabel = hasCheckout
    ? `Entrar al curso — ${funnelConfig.price}`
    : `Reservar acceso fundador — ${funnelConfig.price}`;

  return (
    <section className="course-section course-offer" id="oferta">
      <div className="course-wrap">
        <CourseSectionHeader
          number="08"
          eyebrow="ACCESO FUNDADOR"
          title="El curso completo y acompañamiento personal."
          description="Recibís todos los módulos juntos en el lanzamiento, acceso de por vida y cuatro llamadas privadas 1:1 durante el primer mes."
          align="center"
        />

        <div className="course-offer-card">
          <div className="course-offer-card__summary">
            <span className="course-label course-label--gold">PRIMERA EDICIÓN</span>
            <h3>Acceso anticipado</h3>
            <p className="course-offer-card__intro">
              Para personas que quieren construir una app propia y aprender el proceso mientras lo
              aplican.
            </p>

            <div className="course-founder-bonus">
              <span>BONUS PRIMEROS COMPRADORES</span>
              <strong>4 llamadas privadas 1:1</strong>
              <p>
                Una por semana durante el primer mes, personalizada para tu proyecto. Luego del
                lanzamiento: {funnelConfig.callsMonthlyPrice}.
              </p>
            </div>

            <div className="course-price">
              <strong>{funnelConfig.price}</strong>
              <div>
                <span>precio fundador · pago único</span>
                <del>Precio de lanzamiento {funnelConfig.futurePrice}</del>
              </div>
            </div>

            <CourseButton checkout source="offer" variant="primary">
              {checkoutLabel}
            </CourseButton>

            <p className="course-checkout-note">
              {hasCheckout
                ? 'Pago procesado de forma segura por Hotmart. Acceso de por vida.'
                : 'La reserva se confirma por email. El pago se habilitará mediante Hotmart.'}
            </p>
          </div>

          <div className="course-offer-card__includes">
            <span className="course-offer-card__includes-title">ESTO ES LO QUE RECIBÍS</span>
            <div className="course-includes-grid">
              {funnelIncludes.map((item) => (
                <article key={item.title}>
                  <span aria-hidden="true">✓</span>
                  <div>
                    <h4>{item.title}</h4>
                    <p>{item.body}</p>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </div>

        <div className="course-after-purchase">
          <div>
            <span>01</span>
            <strong>Reservás tu lugar</strong>
            <p>{hasCheckout ? 'Completás el pago seguro en Hotmart.' : 'Me escribís para confirmar tu interés.'}</p>
          </div>
          <div>
            <span>02</span>
            <strong>Recibís la confirmación</strong>
            <p>Te llega el detalle de acceso y el siguiente paso por email.</p>
          </div>
          <div>
            <span>03</span>
            <strong>Recibís el curso completo</strong>
            <p>Todo se habilita en el lanzamiento y coordinamos tus cuatro llamadas privadas 1:1.</p>
          </div>
        </div>

        <div className="course-transparency">
          <strong>Transparencia de preventa</strong>
          <p>{funnelConfig.releaseNote}</p>
        </div>
      </div>
    </section>
  );
}

function CourseFaqSection() {
  return (
    <section className="course-section course-faq" id="faq">
      <div className="course-wrap">
        <CourseSectionHeader
          number="09"
          eyebrow="PREGUNTAS"
          title="Lo importante antes de entrar."
          description="Sin promesas mágicas y sin esconder que construir un producto requiere trabajo."
        />

        <div className="course-faq-list">
          {funnelFaq.map((item, index) => (
            <CourseFaqItem key={item.question} item={item} index={index} />
          ))}
        </div>
      </div>
    </section>
  );
}

function CourseFinalCtaSection() {
  const checkoutLabel = funnelConfig.checkoutUrl
    ? `Entrar ahora — ${funnelConfig.price}`
    : `Reservar mi lugar — ${funnelConfig.price}`;

  return (
    <section className="course-final-cta">
      <div className="course-wrap course-final-cta__inner">
        <div>
          <span className="course-label course-label--gold">TU IDEA NO NECESITA SEGUIR EN NOTAS</span>
          <h2>Ahora podés convertirla en una app.</h2>
          <p>
            Aprendé el proceso real para diseñar, construir y publicar usando IA como copiloto, con
            cuatro llamadas privadas 1:1 para acompañar tu proyecto.
          </p>
        </div>
        <div className="course-final-cta__action">
          <div className="course-final-cta__bonus">
            <span>BONUS FUNDADORES</span>
            <strong>1 mes de acompañamiento 1:1 incluido</strong>
          </div>
          <CourseButton checkout source="final_cta" variant="final">
            {checkoutLabel}
          </CourseButton>
          <span>Curso completo · acceso de por vida · 4 llamadas privadas 1:1</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  CourseHeroSection,
  CourseProblemSection,
  CourseProofSection,
  CourseResultsSection,
  CourseCurriculumSection,
  CourseStackSection,
  CourseFitSection,
  CourseOfferSection,
  CourseFaqSection,
  CourseFinalCtaSection,
});