// CoursePrimitives.jsx — reusable UI and funnel behavior.
const {
  config: courseConfig,
  proofMetrics: courseProofMetrics,
  techLogos: courseTechLogos,
} = window.CourseFunnelData;

function trackCourseEvent(eventName, properties = {}) {
  const payload = {
    event: eventName,
    page: 'curso',
    ...properties,
  };

  if (Array.isArray(window.dataLayer)) {
    window.dataLayer.push(payload);
  }

  window.dispatchEvent(new CustomEvent('course:funnel-event', { detail: payload }));
}

function getCourseCheckoutUrl() {
  return courseConfig.checkoutPath;
}

function CourseButton({
  href,
  checkout = false,
  source,
  variant = 'primary',
  className = '',
  children,
}) {
  const resolvedHref = checkout ? getCourseCheckoutUrl() : href;
  const isExternal = /^https?:/i.test(resolvedHref || '');
  const classes = `course-button course-button--${variant} ${className}`.trim();

  return (
    <a
      href={resolvedHref}
      className={classes}
      target={isExternal ? '_blank' : undefined}
      rel={isExternal ? 'noreferrer' : undefined}
      data-checkout-ready={checkout ? 'true' : undefined}
      onClick={() => {
        trackCourseEvent(checkout ? 'course_checkout_click' : 'course_cta_click', {
          source,
          destination: checkout ? 'checkout_page' : resolvedHref,
        });
      }}
    >
      <span>{children}</span>
      <span className="course-button__arrow" aria-hidden="true">↗</span>
    </a>
  );
}

function CourseSectionHeader({ number, eyebrow, title, description, align = 'left' }) {
  return (
    <header className={`course-section-header course-section-header--${align}`}>
      <div className="course-kicker">
        <span>{number}</span>
        <span aria-hidden="true">/</span>
        <span>{eyebrow}</span>
      </div>
      <h2>{title}</h2>
      {description ? <p>{description}</p> : null}
    </header>
  );
}

function CourseNav() {
  return (
    <nav className="course-nav" aria-label="Navegación del curso">
      <div className="course-wrap course-nav__inner">
        <a href="/curso" className="course-nav__brand" aria-label="Curso de Anthony Stepvoy">
          <img src="assets/anthonys-logo.ico" alt="" />
          <span>A.STEPVOY</span>
        </a>

        <div className="course-nav__links">
          <a href="#caso-real">Caso real</a>
          <a href="#programa">Programa</a>
          <a href="#faq">Preguntas</a>
        </div>

        <CourseButton
          href="#oferta"
          source="navigation"
          variant="nav"
          className="course-nav__cta"
        >
          Ver acceso fundador
        </CourseButton>
      </div>
    </nav>
  );
}

function CourseHeroVisual() {
  return (
    <div className="course-hero-visual">
      <div className="course-hero-stage">
        <div className="course-hero-aura" aria-hidden="true" />

        <img
          src="assets/cargito-feliz.webp"
          alt="Cargito, la mascota de Cargo"
          className="course-hero-cargo"
        />
        <img
          src="assets/anthony-pfp.png"
          alt="Anthony Stepvoy"
          className="course-hero-anthony"
        />
      </div>

      <div className="course-hero-metrics" aria-label="Resultados reales">
        {courseProofMetrics.map((metric) => (
          <div className="course-hero-metric" key={metric.label}>
            <strong>{metric.value}</strong>
            <span>{metric.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function CourseTechMarquee() {
  return (
    <div className="course-tech-marquee" aria-label="Tecnologías utilizadas en el curso">
      <div className="course-tech-track">
        {[0, 1].map((groupIndex) => (
          <div
            className="course-tech-group"
            key={groupIndex}
            aria-hidden={groupIndex === 1 ? 'true' : undefined}
          >
            {courseTechLogos.map((item) => (
              <div className="course-tech-item" key={`${groupIndex}-${item.name}`}>
                <img src={item.src} alt="" aria-hidden="true" />
                <span>{item.name}</span>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

function CourseFaqItem({ item, index }) {
  return (
    <details
      className="course-faq-item"
      onToggle={(event) => {
        if (event.currentTarget.open) {
          trackCourseEvent('course_faq_open', {
            question: item.question,
            index: index + 1,
          });
        }
      }}
    >
      <summary>
        <span className="course-faq-index">{String(index + 1).padStart(2, '0')}</span>
        <span>{item.question}</span>
        <span className="course-faq-toggle" aria-hidden="true">+</span>
      </summary>
      <div className="course-faq-answer">
        <p>{item.answer}</p>
      </div>
    </details>
  );
}

function CourseStickyCta() {
  const buttonLabel = courseConfig.checkoutUrl ? 'Comprar — US$49' : 'Reservar — US$49';

  return (
    <aside className="course-sticky-cta" aria-label="Acceso fundador">
      <div>
        <strong>{courseConfig.price}</strong>
        <span>Curso completo · acceso de por vida</span>
      </div>
      <CourseButton checkout source="mobile_sticky" variant="primary">
        {buttonLabel}
      </CourseButton>
    </aside>
  );
}

function CourseFooter() {
  return (
    <footer className="course-footer">
      <div className="course-wrap course-footer__inner">
        <div>
          <strong>Anthony Stepvoy</strong>
          <span>Construyo productos y comparto el proceso.</span>
        </div>
        <div className="course-footer__links">
          <a href="/">Portfolio</a>
          <a href={`mailto:${courseConfig.contactEmail}`}>Contacto</a>
          <a href="/curso">Curso</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  trackCourseEvent,
  CourseButton,
  CourseSectionHeader,
  CourseNav,
  CourseHeroVisual,
  CourseTechMarquee,
  CourseFaqItem,
  CourseStickyCta,
  CourseFooter,
});