// Course / Program detail page — used for Premium + Fast-Track + others.

const { useState: useState_CD } = React;

function CourseInfoRow({ icon, label, value }) {
  return (
    <div className="course-info-row flex items-center justify-between gap-4 py-3 border-b border-sa-border last:border-b-0">
      <span className="course-info-row__label inline-flex items-center gap-3 text-sa-slate-2 font-medium">
        <Icon name={icon} size={20} color="var(--sa-purple)" />
        <span style={{ font: '600 14px/1.3 var(--sa-font-sans)' }}>{label}</span>
      </span>
      <span className="course-info-row__value font-bold text-sa-ink text-right text-sm">{value}</span>
    </div>
  );
}

function StarRow({ value, size = 18 }) {
  return (
    <span className="star-row inline-flex items-center gap-1" aria-label={`${value.toFixed(1)} out of 5 stars`}>
      {[0,1,2,3,4].map(i => (
        <span key={i} className="star-row__star" aria-hidden="true" style={{ fontSize: size }}>
          ★
        </span>
      ))}
      <span className="ml-1 text-sm font-bold text-sa-slate-2">({value.toFixed(1)})</span>
    </span>
  );
}

function ResearchTestimonialCard({ testimonial }) {
  return (
    <article className="research-testimonial-card card-hover">
      <div className="research-testimonial-card__top">
        <img className="research-testimonial-card__avatar" src={testimonial.img} alt={testimonial.name} />
        <div className="research-testimonial-card__identity">
          <h4>{testimonial.name}</h4>
          <p>{testimonial.school}</p>
          <p>
            <span>Publication: </span>
            <a href={testimonial.publication.href} target="_blank" rel="noopener noreferrer">
              {testimonial.publication.label}
            </a>
          </p>
          {testimonial.admission ? (
            <p>
              <span>Admission: </span>
              <a href={testimonial.admission.href} target="_blank" rel="noopener noreferrer">
                {testimonial.admission.label}
              </a>
            </p>
          ) : null}
        </div>
        <StarRow value={testimonial.rating} size={20} />
      </div>
      <p className="research-testimonial-card__quote">{testimonial.body}</p>
    </article>
  );
}

function CourseHero({ course }) {
  return (
    <section className="course-hero relative overflow-hidden" style={{ background: 'var(--sa-purple)' }}>
      <Checker size={120} color="var(--sa-lime)" className="course-hero__motif absolute" style={{ right: -10, top: 30, opacity: 0.95 }} />
      <PinkFan size={140} color="var(--sa-pink)" className="course-hero__motif absolute" style={{ left: -40, top: 30, opacity: 0.85 }} />

      <div className="container-wide sec-x pt-12 md:pt-16 pb-10 md:pb-12 relative text-center">
        {/* Chips */}
        <Reveal>
          <div className="flex flex-wrap items-center justify-center gap-x-7 gap-y-2 text-white/95 text-sm">
            <span className="inline-flex items-center gap-2"><Icon name="menu_book" size={18} color="var(--sa-yellow)" />{course.sessions}</span>
            <span className="inline-flex items-center gap-2"><Icon name="cases" size={18} color="var(--sa-yellow)" />{course.badge}</span>
            <span className="inline-flex items-center gap-2"><Icon name="signal_cellular_alt" size={18} color="var(--sa-yellow)" />{course.level}</span>
          </div>
        </Reveal>

        <Reveal delay={80}>
          <h1 className="course-hero__title text-white mx-auto mt-5" style={{
            font: '700 clamp(28px, 5vw, 56px)/1.12 var(--sa-font-sans)',
            letterSpacing: '-1.5px'
          }}>
            {course.title}
            <div className="course-hero__subtitle font-bold mt-1" style={{ font: '700 clamp(20px, 2.3vw, 28px)/1.25 var(--sa-font-sans)', color: 'var(--sa-yellow)' }}>
              {course.subtitle}
            </div>
          </h1>
        </Reveal>

        <Reveal delay={140}>
          <p className="course-hero__description mt-5 mx-auto text-white/90" style={{ font: '400 clamp(14px, 1.4vw, 17px)/1.55 var(--sa-font-sans)' }}>
            {course.hero}
          </p>
        </Reveal>

        {/* Image */}
        <Reveal direction="scale" delay={220}>
          <div className="course-hero__image-frame relative mt-10 mx-auto overflow-hidden card-hover"
               style={{ maxWidth: 1100 }}>
            <img src={course.image} alt={course.title} className="w-full h-auto object-cover"
                 style={{ aspectRatio: '16/8', display: 'block' }} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function CourseDetailPage({ courseId }) {
  const normalizedCourseId =
    courseId === 'fast-track-publication-program' ? 'fast-track' :
    courseId === 'premium-publication-program' ? 'premium' :
    courseId;
  const course =
    normalizedCourseId === 'fast-track' ? COURSE_FASTTRACK :
    normalizedCourseId === 'premium'    ? COURSE_PREMIUM :
    COURSE_PREMIUM;

  const tabs = ['Overview', 'Structure', 'Goals', 'Content', 'Reviews'];
  const [tab, setTab] = useState_CD('Overview');

  const sectionIds = {
    Overview: 'course-overview',
    Structure: 'course-structure',
    Goals: 'course-goals',
    Content: 'course-content',
    Reviews: 'course-reviews',
  };

  const onTab = (t) => {
    setTab(t);
    const el = document.getElementById(sectionIds[t]);
    if (el) {
      const header = document.querySelector('header');
      const tabsEl = document.querySelector('.course-detail__tabs');
      const headerHeight = header ? header.getBoundingClientRect().height : 0;
      const tabsHeight = tabsEl ? tabsEl.getBoundingClientRect().height : 0;
      const scrollRoot =
        document.scrollingElement && document.scrollingElement.scrollHeight > document.scrollingElement.clientHeight
          ? document.scrollingElement
          : document.body;
      const top = el.getBoundingClientRect().top + scrollRoot.scrollTop - headerHeight - tabsHeight - 24;
      scrollRoot.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <div data-screen-label="Course Detail" className="page-enter">
      <CourseHero course={course} />

      <section className="bg-white">
        <div className="container-wide sec-x pt-7 md:pt-8 pb-12 md:pb-14">
          <div className="grid lg:grid-cols-[1fr_360px] gap-10 lg:gap-12 items-start">
            {/* Main content */}
            <div className="course-detail__main">
              {/* Tabs */}
              <div className="course-detail__tabs flex flex-wrap gap-x-8 border-b border-sa-border mb-8 sticky top-[80px] bg-white z-10">
                {tabs.map(t => (
                  <button key={t}
                    className={`tab-btn ${tab === t ? 'is-active' : ''}`}
                    onClick={() => onTab(t)}>{t}</button>
                ))}
              </div>

              {/* Overview */}
              <div id="course-overview" className="course-detail__section mb-12">
                <h3 className="font-bold text-sa-ink mb-3" style={{ font: '700 20px/1.3 var(--sa-font-sans)' }}>Overview</h3>
                {course.overview.map((p, i) => (
                  <p key={i} className="mb-3 text-sa-slate-2" style={{ font: '400 15px/1.65 var(--sa-font-sans)' }}>
                    {i === 1
                      ? <>The <strong className="text-sa-ink">{course.title.replace('Program', 'Program')} ({course.sessions})</strong> {p.split(') ')[1] || p}</>
                      : p}
                  </p>
                ))}
              </div>

              {/* Structure */}
              <div id="course-structure" className="course-detail__section mb-12">
                <h3 className="font-bold text-sa-ink mb-3" style={{ font: '700 20px/1.3 var(--sa-font-sans)' }}>Program &amp; Mentoring Structure</h3>
                <ul className="m-0 p-0 list-none flex flex-col gap-2.5">
                  {course.structure.map((s, i) => (
                    <li key={i} className="flex items-start gap-2 text-sa-slate-2" style={{ font: '400 15px/1.6 var(--sa-font-sans)' }}>
                      <span className="text-sa-purple mt-1.5">•</span>
                      <span>{s}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Goals */}
              <div id="course-goals" className="course-detail__section mb-12">
                <h3 className="font-bold text-sa-ink mb-3" style={{ font: '700 20px/1.3 var(--sa-font-sans)' }}>Goals</h3>
                <ul className="m-0 p-0 list-none flex flex-col gap-2.5">
                  {course.goals.map((g, i) => (
                    <li key={i} className="flex items-start gap-2 text-sa-slate-2" style={{ font: '400 15px/1.6 var(--sa-font-sans)' }}>
                      <span className="text-sa-purple mt-1.5">•</span>
                      <span>{g}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Content list */}
              <div id="course-content" className="course-detail__section mb-12">
                <h3 className="font-bold text-sa-ink mb-4" style={{ font: '700 20px/1.3 var(--sa-font-sans)' }}>Content</h3>
                <div className="flex flex-col gap-2.5">
                  {course.content.map((c, i) => (
                    <Reveal key={c.num} direction="up" delay={i * 30}>
                      <div className="flex gap-4 p-4 rounded-md transition-colors hover:bg-sa-cream"
                           style={{ background: 'rgba(255,249,235,0.55)' }}>
                        <span className="inline-flex items-center justify-center rounded-full flex-shrink-0 font-bold"
                              style={{ width: 28, height: 28, background: 'var(--sa-yellow)', color: 'var(--sa-ink)', fontSize: 13 }}>
                          {c.num}
                        </span>
                        <div className="flex-1">
                          <h4 className="font-bold text-sa-ink m-0" style={{ font: '700 15px/1.3 var(--sa-font-sans)' }}>{c.title}</h4>
                          <p className="m-0 mt-1 text-sa-slate-2" style={{ font: '400 14px/1.55 var(--sa-font-sans)' }}>{c.body}</p>
                        </div>
                      </div>
                    </Reveal>
                  ))}
                </div>
              </div>

              {/* Reviews */}
              <div id="course-reviews" className="course-detail__section">
                <h3 className="font-bold text-sa-ink mb-4" style={{ font: '700 20px/1.3 var(--sa-font-sans)' }}>Success Stories from Our Students</h3>
                <div className="research-testimonials-list">
                  {(course.testimonials || []).map((t, i) => (
                    <Reveal key={i} direction="up">
                      <ResearchTestimonialCard testimonial={t} />
                    </Reveal>
                  ))}
                </div>
              </div>
            </div>

            {/* Sidebar — sticky info card */}
            <aside className="course-detail__sidebar rounded-sa-md p-6 border border-sa-border bg-white"
                   style={{ position: 'sticky', top: 100, background: 'var(--sa-lavender-50)' }}>
              <CourseInfoRow icon="event_repeat"        label="Format"     value={course.format} />
              <CourseInfoRow icon="account_circle"      label="Mentor"     value={course.mentor} />
              <CourseInfoRow icon="schedule"            label="Duration"   value={course.duration} />
              <CourseInfoRow icon="forum"               label="Sessions"   value={course.sessionsBlurb} />
              <CourseInfoRow icon="signal_cellular_alt" label="Skill Level" value={course.level} />
              <CourseInfoRow icon="card_giftcard"       label="Best for"    value={course.bestFor} />
              <CourseInfoRow icon="verified"            label="Outcome"     value={course.outcome} />
              <CourseInfoRow icon="security"            label="Authorship"  value={course.authorship} />

              <div className="mt-5">
                <Btn variant="purple" fullWidth href={DISCOVERY_CALL_HREF}>Register your Interest</Btn>
              </div>
              <p className="mt-3 text-center text-xs text-sa-slate-3">
                Or book a free 1:1 discovery call to discuss
              </p>
            </aside>
          </div>
        </div>
      </section>

      <CTABand
        badge="Contact Us"
        title={<>Still Have <span className="text-sa-purple">Questions?</span></>}
        body="We're here to support your learning journey - feel free to reach out anytime."
        primaryLabel="Get in Touch"
        primaryHref="/contact"
        secondaryLabel="Book free 1:1 discovery call"
        secondaryHref={DISCOVERY_CALL_HREF}
      />
    </div>
  );
}

Object.assign(window, { CourseDetailPage });