// Services page — hero, featured programs, admissions courses grid, proofreading row, CTAs.

function courseDetailPath(courseId) {
  return courseId === 'fast-track'
    ? '/services/fast-track-publication-program'
    : '/services/premium-publication-program';
}

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

      <div className="container-wide sec-x py-16 md:py-24 relative text-center">
        <Reveal>
          <h1 className="services-hero__title text-white mx-auto" style={{
            font: '700 clamp(36px, 7vw, 72px)/1.1 var(--sa-font-sans)',
            letterSpacing: 0, maxWidth: 980, margin: '0 auto'
          }}>
            <span className="services-hero__title-line"><span style={{ color: 'var(--sa-yellow)' }}>Explore</span> Our Mentorship</span>
            {' '}
            <span className="services-hero__title-line">Empower Your <span style={{ color: 'var(--sa-yellow)' }}>Growth</span></span>
          </h1>
        </Reveal>
        <Reveal delay={120}>
          <p className="services-hero__subtitle mt-6 mx-auto text-white/90" style={{ font: '400 clamp(15px, 1.5vw, 18px)/1.55 var(--sa-font-sans)' }}>
            Browse expertly curated programs across multiple categories — designed to fit your goals, pace, and passion.
          </p>
        </Reveal>
        <Reveal delay={200}>
          <div className="mt-7"><Btn href={DISCOVERY_CALL_HREF} size="lg">Book free 1:1 discovery call</Btn></div>
        </Reveal>
      </div>
    </section>
  );
}

function FeaturedSection() {
  return (
    <section style={{ background: 'var(--sa-lavender-50)' }}>
      <div className="container-wide sec-x py-12 md:py-16">
        <Reveal><Badge variant="white">Research Paper Publication Program</Badge></Reveal>
        <div className="mt-8 flex flex-col gap-10 lg:gap-12">
          {[COURSE_PREMIUM, COURSE_FASTTRACK].map((c, i) => (
            <Reveal key={c.id} direction={i % 2 === 0 ? 'left' : 'right'} delay={i * 100}>
              <ProgramSummaryCard
                image={c.image}
                title={c.title}
                body={
                  c.id === 'premium'
                    ? 'Build a Publishable Research Paper From Scratch. Develop your research idea, write a structured paper, and prepare it for submission to a high school journal.'
                    : 'Get your draft-research paper ready for journal submission. Refine, submit, and revise the paper. Prepare your draft paper for submission to a high school journal.'
                }
                sessions={c.sessions}
                level={c.level}
                audience="High-school student"
                mode="1:1 Online Mentoring"
                onView={() => {
                  window.history.pushState(null, '', courseDetailPath(c.id));
                  window.dispatchEvent(new PopStateEvent('popstate'));
                  window.dispatchEvent(new Event('app:navigation'));
                }}
              />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function AdmissionsSection() {
  return (
    <section className="bg-white">
      <div className="container-wide sec-x py-12 md:py-16">
        <Reveal><Badge>College Admissions & Career Guidance</Badge></Reveal>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
          {SERVICES_ADMISSIONS.map((s, i) => (
            <Reveal key={s.title} direction="up" delay={i * 80}>
              <CourseCard {...s} ctaHref={DISCOVERY_CALL_HREF} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProofreadingSection() {
  return (
    <section className="bg-white">
      <div className="container-wide sec-x pb-12 md:pb-16">
        <Reveal><Badge>Proofreading & Academic Review</Badge></Reveal>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
          {SERVICES_PROOFREADING.map((s, i) => (
            <Reveal key={s.title} direction="up" delay={i * 80}>
              <ProofreadingCard {...s} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicesPage() {
  return (
    <div data-screen-label="Services" className="page-enter">
      <ServicesHero />
      <FeaturedSection />
      <AdmissionsSection />
      <ProofreadingSection />
      <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, { ServicesPage });