// CursoPage.jsx — route composition for the course funnel.
const { useEffect: useCourseEffect } = React;

function useCourseRoute(routeName) {
  useCourseEffect(() => {
    const previousLang = document.documentElement.lang;
    document.documentElement.lang = 'es';
    document.body.classList.add('course-route');
    window.scrollTo({ top: 0, behavior: 'auto' });
    trackCourseEvent('course_page_view', { route: routeName });

    let robotsMeta = null;
    if (routeName === 'thank_you' || routeName === 'checkout') {
      robotsMeta = document.createElement('meta');
      robotsMeta.name = 'robots';
      robotsMeta.content = 'noindex,nofollow';
      document.head.appendChild(robotsMeta);
    }

    return () => {
      document.documentElement.lang = previousLang || 'en';
      document.body.classList.remove('course-route');
      robotsMeta?.remove();
    };
  }, [routeName]);
}

function CursoPage() {
  useCourseRoute('sales');

  const searchParams = new URLSearchParams(window.location.search);
  const checkoutCancelled = searchParams.get('checkout') === 'cancelado';

  return (
    <div className="course-page">
      <CourseNav />
      <main>
        <CourseHeroSection checkoutCancelled={checkoutCancelled} />
        <CourseFirstWinSection />
        <CourseProblemSection />
        <CourseProofSection />
        <CourseResultsSection />
        <CourseLearningPathsSection />
        <CourseCurriculumSection />
        <CourseStackSection />
        <CourseFitSection />
        <CourseOfferSection />
        <CourseFaqSection />
        <CourseFinalCtaSection />
      </main>
      <CourseFooter />
      <CourseStickyCta />
    </div>
  );
}

function CourseThankYouPage() {
  useCourseRoute('thank_you');
  const buyer = getStoredCourseBuyer();
  const firstName = buyer?.name?.split(/\s+/)[0];

  return (
    <div className="course-page">
      <main className="course-thank-you">
        <div className="course-wrap">
          <section className="course-thank-you__card">
            <div className="course-thank-you__portrait">
              <div className="course-thank-you__portrait-aura" aria-hidden="true" />
              <img src="assets/anthony-pfp.png" alt="Anthony Stepvoy" />
              <div className="course-thank-you__mark" aria-hidden="true">
                <i className="ph ph-check" />
              </div>
            </div>

            <div className="course-kicker course-thank-you__kicker">
              COMPRA CONFIRMADA / MIEMBRO FUNDADOR
            </div>

            <h1>
              ¡Bienvenido{firstName ? `, ${firstName}` : ''}!<br />
              Ya sos miembro fundador.
            </h1>
            <p>
              Tu pago quedó confirmado y tu lugar está reservado. Yo me encargo de acompañarte para
              que esa idea empiece a convertirse en un producto real.
            </p>

            <div className="course-thank-you__steps">
              <div>
                <i className="ph ph-envelope-simple" aria-hidden="true" />
                <span>01 / AHORA</span>
                <strong>Revisá tu email</strong>
                <p>Ahí vas a encontrar la confirmación y los próximos pasos.</p>
              </div>
              <div>
                <i className="ph ph-video-camera" aria-hidden="true" />
                <span>02 / ACOMPAÑAMIENTO</span>
                <strong>Coordinamos tus 4 llamadas 1:1</strong>
                <p>Una sesión privada por semana, enfocada en tu app.</p>
              </div>
              <div>
                <i className="ph ph-rocket-launch" aria-hidden="true" />
                <span>03 / LANZAMIENTO</span>
                <strong>Recibís el curso completo</strong>
                <p>Todos los módulos juntos y acceso de por vida.</p>
              </div>
            </div>

            <div className="course-thank-you__note">
              <i className="ph ph-chat-circle-dots" aria-hidden="true" />
              <p>
                ¿No ves el email o necesitás ayuda? Escribime directamente y te respondo yo.
              </p>
            </div>

            <div className="course-thank-you__actions">
              <CourseButton
                href={`mailto:${window.CourseFunnelData.config.contactEmail}`}
                source="thank_you_support"
                variant="primary"
              >
                Escribirle a Anthony
              </CourseButton>
              <CourseButton href="/curso" source="thank_you" variant="secondary">
                Volver al curso
              </CourseButton>
            </div>
          </section>
        </div>
      </main>
    </div>
  );
}

Object.assign(window, { CursoPage, CourseThankYouPage });