// Home page — hero, university admits, services, about, value, how-it-works, faq, CTA.

const { useState: useState_H, useEffect: useEffect_H } = React;

// ── HERO ────────────────────────────────────────────────────────────
function HomeHero() {
  return (
    <section className="home-hero bg-white">
      <div className="container-wide sec-x home-hero__wrap grid gap-10 lg:gap-12 items-start"
           style={{ gridTemplateColumns: 'minmax(0,1fr)' }}>
        <div className="home-hero__grid grid lg:grid-cols-[1.05fr_1fr] gap-10 lg:gap-12 items-start">
          {/* Left */}
          <div className="home-hero__copy flex flex-col gap-6 relative">
            <Reveal direction="up"><Badge size="lg">Learn from Top Experts</Badge></Reveal>
            <Reveal direction="up" delay={80}>
              <h1 className="h-display h-display--lg">
                <span className="hi-yellow">Elevate</span>{' '}
                Your Future With{' '}
                <Sparkle size={36} color="var(--sa-pink)" className="inline-block align-middle sa-pulse-soft" style={{ verticalAlign: '-6px', margin: '0 4px' }} />
                {' '}Practical{' '}
                <span className="text-sa-purple">Skills</span>
              </h1>
            </Reveal>
            <Reveal direction="up" delay={160}>
              <p className="body-lg max-w-[560px]">
                Structured one-on-one guidance supporting you across admissions, career, and research that fits your schedule, goals, and passion.
              </p>
            </Reveal>
            <Reveal direction="up" delay={220}>
              <Btn href={DISCOVERY_CALL_HREF} size="lg">Book free 1:1 discovery call</Btn>
            </Reveal>

            {/* Floating stat cards (animate in) */}
            <Reveal direction="up" delay={300} className="home-hero__stats">
              <StatChartCard percent={100} label="Satisfaction Rate" />
              <UsersCard />
            </Reveal>
          </div>

          {/* Right — collage */}
          <Reveal direction="right" delay={150}>
            <HeroCollage />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function HeroCollage() {
  return (
    <div className="hero-collage relative w-full">
      {/* The Figma hero already includes the halftone background and colored outlines */}
      <img src={PHOTO.heroCutout} alt="Graduates celebrating their academic achievements"
           className="w-full h-full object-contain"
           style={{ display: 'block' }} />
      {/* Top-right pinwheel float */}
      <Pinwheel size={56} color="var(--sa-yellow-mid)"
        className="absolute sa-float" style={{ right: -10, top: -16, '--sa-rot': '0deg' }} />
    </div>
  );
}

// ── PARTNERS BAND ──────────────────────────────────────────────────
function PartnersBand() {
  return (
    <section className="partners-band bg-white">
      <div className="container-wide sec-x partners-band__wrap text-center">
        <Reveal>
          <h2 className="h-section">
            Admits From <span className="text-sa-purple">Top Global Universities</span>
          </h2>
        </Reveal>
        <Reveal delay={100}>
          <div className="partners-band__logos">
            {UNIVERSITIES.map((u, i) => (
              <img
                key={u.name}
                src={u.logo}
                alt={`${u.name} admit logo`}
                className="partners-band__logo"
                style={{ '--logo-width': `${u.width}px` }}
              />
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── SERVICES BAND (yellow callout) ────────────────────────────────
function ServicesBand() {
  const [hover, setHover] = useState_H(1);
  const cats = [
    { id: 0, icon: 'school',     motif: 'sparkle',  title: 'College Admissions & Career Guidance', accent: '#FEC649', href: '/services' },
    { id: 1, icon: 'menu_book',  motif: 'pinwheel', title: 'Research Paper Publication Program',  accent: '#A181F9', href: '/services' },
    { id: 2, icon: 'rate_review',motif: 'burst',    title: 'Proofreading & Academic Review',      accent: '#FEC649', href: '/services' },
  ];
  return (
    <section className="services-band bg-white">
      <div className="container-wide sec-x services-band__outer">
        <div className="home-yellow-panel services-band__panel relative overflow-hidden rounded-sa-lg">
          <div className="yellow-panel-glow yellow-panel-glow--top" aria-hidden="true" />
          <div className="yellow-panel-glow yellow-panel-glow--bottom" aria-hidden="true" />
          <Sparkle size={42} color="var(--sa-pink)" className="absolute sa-pulse-soft" style={{ right: 80, bottom: 60 }} />
          <Pinwheel size={36} color="var(--sa-lime)" className="absolute" style={{ right: 200, bottom: 80, opacity: 0.85 }} />

          <div className="services-band__intro relative max-w-[920px]">
            <Reveal direction="up">
              <span className="yellow-panel-badge">
                <span className="yellow-panel-badge__dot" aria-hidden="true" />
                Our Services
              </span>
            </Reveal>
            <Reveal direction="up" delay={80}>
              <h2 className="h-section yellow-panel-title services-band__title">
                <span className="yellow-panel-title-accent">Personalised</span> Support For Every <span className="text-sa-purple">Academic Goal</span>
              </h2>
            </Reveal>
          </div>

          <div className="services-band__grid">
            {cats.map((c, i) => (
              <Reveal key={c.id} direction="up" delay={120 + i * 80}>
                <CategoryCard
                  icon={c.icon} motif={c.motif} title={c.title} accent={c.accent} href={c.href}
                  active={hover === c.id}
                  onHover={() => setHover(c.id)}
                  onLeave={() => setHover(1)}
                />
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── ABOUT BAND ────────────────────────────────────────────────────
function AboutBand() {
  return (
    <section className="about-band bg-white relative">
      <div className="container-wide sec-x about-band__wrap">
        <div className="about-band__grid grid gap-10 md:gap-14 items-center">
          {/* Left tilted photo */}
          <Reveal direction="left" className="about-band__photo about-band__photo--left hidden md:block">
            <div className="relative">
              <div className="rounded-sa-md overflow-hidden bg-sa-pink-soft shadow-sa-card"
                   style={{ width: 200, height: 240, transform: 'rotate(-9deg)' }}>
                <img src={PHOTO.founderOxford} alt="Founders at Oxford" className="w-full h-full object-cover" />
              </div>
              <Sparkle size={40} color="var(--sa-lime)" className="absolute sa-pulse-soft" style={{ bottom: -40, left: -8 }} />
            </div>
          </Reveal>

          {/* Center text */}
          <div className="text-center">
            <Reveal><Badge>About Us</Badge></Reveal>
            <Reveal delay={80}>
              <h2 className="h-section about-band__title mt-5">
                <span className="about-band__title-line"><span className="text-sa-purple">Gateway</span> To Academic</span>
                <span className="about-band__title-line">And Professional <span className="text-sa-purple">Growth</span></span>
              </h2>
            </Reveal>
            <Reveal delay={150}>
              <p className="body-lg mt-6 max-w-[760px] mx-auto">
                Scholarly Affairs is built from firsthand experience of studying, applying, researching, and growing across global academic spaces. We understand that every student's journey is deeply personal — our support is structured, 1:1, and focused on helping students make stronger academic decisions with confidence.
              </p>
            </Reveal>
          </div>

          {/* Right tilted photo */}
          <Reveal direction="right" className="about-band__photo about-band__photo--right hidden md:block">
            <div className="relative">
              <div className="rounded-sa-md overflow-hidden bg-sa-lime shadow-sa-card ml-auto"
                   style={{ width: 200, height: 240, transform: 'rotate(9deg)' }}>
                <img src={PHOTO.founderHarvard} alt="Founders at Harvard" className="w-full h-full object-cover" />
              </div>
              <Checker size={40} color="var(--sa-pink)" className="absolute" style={{ top: -30, right: 10 }} />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ── VALUE BAND ─────────────────────────────────────────────────────
function ValueBand() {
  const values = [
    { icon: 'collections_bookmark', title: 'Tailored Guidance', body: "Personalised support shaped around each student's strengths, goals, and journey." },
    { icon: 'thumb_up_off_alt',     title: 'Strategic Clarity', body: 'Complex academic and career decisions made simple, clear, and actionable.' },
    { icon: 'extension',            title: 'Flexibility',       body: "Guidance that fits each student's schedule, timeline, and priorities." },
    { icon: 'rocket_launch',        title: 'Growth',            body: 'Stronger applications, sharper research skills, and greater academic confidence.' },
  ];
  return (
    <section className="value-band bg-white">
      <div className="container-wide sec-x value-band__grid">
        <Reveal direction="left" className="value-band__image">
          <img src={PHOTO.valueBooks} alt="Scholarly Affairs mentors with books" className="w-full h-full object-cover" />
        </Reveal>

        <div className="value-band__intro">
          <Reveal><Badge>Our Value</Badge></Reveal>
          <Reveal delay={80}>
            <h2 className="h-section mt-5">
              <span className="text-sa-purple">What</span> We <span className="text-sa-purple">Stand</span> For
            </h2>
          </Reveal>
        </div>

        <div className="value-band__cards">
          {values.map((v, i) => (
            <Reveal key={v.title} direction="up" delay={i * 80}>
              <ValueCard {...v} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── HOW IT WORKS BAND ────────────────────────────────────────────
function HowItWorksBand() {
  const steps = [
    { icon: 'search',        title: 'Share Your Goals',   body: 'Book a free 1:1 discovery call. Tell us where you are in your journey and what support you need.', num: '01' },
    { icon: 'menu_book',     title: 'Build Your Roadmap', body: 'Get a personalised plan and recommendations based on your goals, profile, and timeline.', num: '02' },
    { icon: 'article',       title: 'Expert Guidance',    body: 'Start your program. Work one-on-one on applications, research, or academic writing.', num: '03' },
    { icon: 'rocket_launch', title: 'Advance Career',     body: 'Build lifelong skills, submit stronger work, and continue your journey with confidence.', num: '04' },
  ];
  return (
    <section className="how-band bg-white">
      <div className="container-wide sec-x how-band__outer">
        <div className="home-yellow-panel how-band__panel relative overflow-hidden rounded-sa-lg">
          <div className="how-band__glow how-band__glow--top" aria-hidden="true" />
          <div className="how-band__glow how-band__glow--bottom" aria-hidden="true" />

          <div className="relative text-center max-w-[1160px] mx-auto">
            <Reveal>
              <span className="learning-journey-badge">
                <span className="learning-journey-badge__dot" aria-hidden="true" />
                How It Works
              </span>
            </Reveal>
            <Reveal delay={80}>
              <h2 className="h-section how-band__title">
                Your{' '}
                <span className="how-band__title-accent">
                  Learning Journey
                  <svg viewBox="0 0 100 10" preserveAspectRatio="none" aria-hidden="true">
                    <path d="M0 5 Q 50 10 100 5" />
                  </svg>
                </span>{' '}
                <span className="how-band__title-tail">In 4 Simple Steps</span>
              </h2>
            </Reveal>
          </div>

          <div className="relative how-band__steps-wrap">
            <div className="how-band__steps relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
              {steps.map((s, i) => (
                <Reveal key={s.title} direction="up" delay={i * 90}>
                  <StepCard {...s} />
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── FAQ BAND ───────────────────────────────────────────────────────
function FaqBand() {
  return (
    <section className="bg-white">
      <div className="container-wide sec-x pb-10 md:pb-14 grid lg:grid-cols-2 gap-10 lg:gap-16 items-start">
        <div>
          <Reveal><Badge>FAQs</Badge></Reveal>
          <Reveal delay={80}>
            <h2 className="h-section mt-5">
              <span className="text-sa-purple">Frequently</span> Asked Question
            </h2>
          </Reveal>
          <Reveal delay={150}>
            <p className="body-lg mt-6">
              Have questions? We've got answers to help you get the most out of your learning journey.
            </p>
          </Reveal>
        </div>
        <Reveal direction="right">
          <div>{FAQS_HOME.map((f, i) => <FAQRow key={i} {...f} color="purple" />)}</div>
        </Reveal>
      </div>
    </section>
  );
}

// ── CTA BAND (Yellow ready-to-learn) ─────────────────────────────
function CTABand({
  className = '',
  badge = 'Contact Us',
  title = <>Ready To Start <span className="text-sa-purple">Learning?</span></>,
  body = 'Join hundreds of learners and take the first step toward your future today.',
  primaryHref = '/services',
  primaryLabel = 'Explore Our Services Now',
  secondaryHref = DISCOVERY_CALL_HREF,
  secondaryLabel = 'Book free 1:1 discovery call',
}) {
  // Avatar bubble positions (relative %)
  const bubbles = [
    { img: HOME_AVATARS.orbit4, size: 64, top: '8%',  left: '8%' },
    { img: HOME_AVATARS.orbit5, size: 52, top: '38%', left: '4%' },
    { img: HOME_AVATARS.orbit6, size: 56, top: '70%', left: '14%' },
    { img: HOME_AVATARS.orbit7, size: 50, top: '78%', left: '0%' },
    { img: HOME_AVATARS.orbit8, size: 54, top: '26%', left: '16%' },
    { img: HOME_AVATARS.orbit9, size: 58, top: '12%', right: '8%' },
    { img: HOME_AVATARS.orbit10, size: 52, top: '44%', right: '4%' },
    { img: HOME_AVATARS.orbit11, size: 60, top: '66%', right: '12%' },
    { img: HOME_AVATARS.orbit12, size: 52, top: '82%', right: '6%' },
    { img: HOME_AVATARS.orbit13, size: 56, top: '72%', right: '21%' },
  ];
  return (
    <section className={`bg-white ${className}`}>
      <div className="container-wide sec-x pb-12 md:pb-20">
        <div className="home-yellow-panel cta-yellow-panel relative overflow-hidden rounded-sa-lg"
             style={{
               padding: 'var(--cta-panel-padding, clamp(42px, 4.8vw, 70px) clamp(24px, 4vw, 64px))',
             }}>
          <div className="yellow-panel-glow yellow-panel-glow--top" aria-hidden="true" />
          <div className="yellow-panel-glow yellow-panel-glow--bottom" aria-hidden="true" />
          <Checker size={60} color="var(--sa-pink)" className="absolute" style={{ right: 80, bottom: 40 }} />

          {/* Avatar bubbles (hidden on small screens to keep clean) */}
          <div className="absolute inset-0 hidden md:block pointer-events-none">
            {bubbles.map((b, i) => (
              <span key={i} className="avatar-ring sa-float pointer-events-auto" style={{
                width: b.size, height: b.size,
                backgroundImage: `url(${b.img})`,
                top: b.top, left: b.left, right: b.right,
                animationDelay: `${i * 0.4}s`,
                '--sa-rot': '0deg',
              }} />
            ))}
          </div>

          <div className="relative text-center mx-auto flex flex-col items-center gap-5"
               style={{ maxWidth: 'var(--cta-content-max-width, 1040px)' }}>
            <Reveal className="cta-badge-reveal">
              <span className="yellow-panel-badge">
                <span className="yellow-panel-badge__dot" aria-hidden="true" />
                {badge}
              </span>
            </Reveal>
            <Reveal delay={80}><h2 className="h-section yellow-panel-title cta-yellow-panel__title">{title}</h2></Reveal>
            <Reveal delay={140}>
              <p className="m-0" style={{ font: '400 18px/1.55 var(--sa-font-sans)', color: 'var(--sa-ink)' }}>{body}</p>
            </Reveal>
            <Reveal delay={200} className="cta-actions flex flex-col sm:flex-row gap-3 mt-2 items-center">
              <Btn href={primaryHref} variant="purple" size="lg" className="cta-action-button">{primaryLabel}</Btn>
              <Btn href={secondaryHref} variant="white" size="lg" className="cta-action-button">{secondaryLabel}</Btn>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <div data-screen-label="Home" className="page-enter">
      <HomeHero />
      <PartnersBand />
      <ServicesBand />
      <AboutBand />
      <ValueBand />
      <HowItWorksBand />
      <FaqBand />
      <CTABand />
    </div>
  );
}

Object.assign(window, { HomePage, CTABand });