/* PL1 marketing — Home page */

function HomePage() {
  return (
    <>
      <SiteHeader active="home" />
      {/* HERO */}
      <section className="hero">
        <div className="container">
          <div className="hero__grid">
            <div className="hero__copy">
              <span className="eyebrow">
                <span className="hero__eyebrow">
                  <span className="hero__eyebrow-dot" aria-hidden />
                  Now booking — autumn cohort
                </span>
              </span>
              <h1 className="hero__display">
                Goalkeeping<br/>that earns the<br/><em>next call-up.</em>
              </h1>
              <p className="hero__lede">
                We coach keepers ages 9–18 from grassroots to professional academies.
                Technique, decision-making, and the temperament to play under pressure —
                taught by coaches who&apos;ve been there.
              </p>

              {/* the two paths */}
              <div className="hero__paths">
                <div className="hero__path">
                  <span className="hero__path-kicker">Already a member?</span>
                  <a href="#login" className="hero__path-link">
                    Log in to your dashboard
                    <span className="arrow"><ArrowGlyph size={14} /></span>
                  </a>
                </div>
                <div className="hero__path hero__path--secondary">
                  <span className="hero__path-kicker">Just browsing?</span>
                  <a href="#explore" className="hero__path-link">
                    Explore the academy
                    <span className="arrow"><ArrowGlyph size={14} /></span>
                  </a>
                </div>
              </div>

              <div className="hero__stats">
                <div className="hero__stat">
                  <div className="hero__stat-num">25</div>
                  <div className="hero__stat-label">at pro academies</div>
                </div>
                <div className="hero__stat">
                  <div className="hero__stat-num">11<span style={{fontSize:"0.6em",color:"var(--fg-muted)"}}>yrs</span></div>
                  <div className="hero__stat-label">coaching keepers</div>
                </div>
                <div className="hero__stat">
                  <div className="hero__stat-num">9–18</div>
                  <div className="hero__stat-label">age range</div>
                </div>
              </div>
            </div>

            <div className="hero__media">
              <PhotoSlot caption="hero / keeper full-stretch save" ratio="4 / 5" />
            </div>
          </div>
        </div>
      </section>

      <Slash />

      {/* INTRO BAND - inverse to break rhythm */}
      <section className="section section--inverse">
        <div className="container">
          <div className="anchor-row">
            <div className="mark-anchor">
              <img src="assets/pl1-logo.svg" alt="" />
            </div>
            <div>
              <span className="eyebrow eyebrow--accent">Why PL1</span>
              <h2 className="section__title" style={{marginTop:"12px"}}>
                One position. <em>Everything we do.</em>
              </h2>
              <p style={{marginTop:"20px", fontSize:"var(--t-body-lg)", maxWidth:"50ch", lineHeight:"var(--lh-loose)"}}>
                The goalkeeper is the only player whose mistakes are also the score.
                We treat the position with the obsession it deserves — small details,
                large reps, video, and brutal honesty wrapped in care.
              </p>
              <ul className="pl-list" style={{marginTop:"28px", maxWidth:"44ch"}}>
                <li>Position-specific curriculum from U10 → U18</li>
                <li>Two coaches per session, max twelve keepers</li>
                <li>Every session recorded; clipped &amp; shared next morning</li>
                <li>Safer-coaching certified, DBS-checked staff</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <Slash flip />

      {/* PROGRAMS PREVIEW */}
      <section className="section">
        <div className="container">
          <div className="section__head">
            <h2 className="section__title">Programs <em>built for keepers</em>, not built for keepers as an afterthought.</h2>
            <div>
              <p className="section__intro">
                Three formats. One philosophy. Pick the cadence that matches the season —
                or stack them when the season demands it.
              </p>
              <a href="#programs" className="btn btn--ghost" style={{marginTop:"20px"}}>
                See all programs <ArrowGlyph />
              </a>
            </div>
          </div>

          <div className="programs">
            <ProgramCard
              name="1:1 sessions"
              tags={["60 min", "weekly", "U10–U18"]}
              copy="One coach, one keeper. Technical fundamentals filmed and reviewed — built around what your last match told us you need."
              price="£65"
              unit="per session"
            />
            <ProgramCard
              featured
              name="Squad clinics"
              tags={["90 min", "fortnightly", "max 12"]}
              copy="Position group training with two coaches. The room where decision-making sharpens — handling under fatigue, distribution under pressure."
              price="£28"
              unit="per session"
            />
            <ProgramCard
              name="Residency week"
              tags={["5 days", "school holidays", "ages 12+"]}
              copy="A full week immersion. Mornings on the grass, afternoons on the wall — film, analytics, sports psych, recovery."
              price="£395"
              unit="per week"
            />
          </div>
        </div>
      </section>

      <Slash />

      {/* RESULTS PROOF + TESTIMONIAL */}
      <section className="section">
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns:"1fr", gap:"var(--s-7)"}}>
            <StatProof />
            <div className="quote-grid">
              <div className="quote">
                <div className="quote__mark" aria-hidden>&ldquo;</div>
                <p className="quote__body">
                  My son went from “sometimes plays in goal” at his club to a
                  Cat&nbsp;2 academy trial in eighteen months. The PL1 coaches
                  knew exactly what scouts wanted to see — and built it into him.
                </p>
                <div className="quote__attribution">
                  <div className="quote__avatar" />
                  <div>
                    <div className="quote__name">Parent — {`{placeholder name}`}</div>
                    <div className="quote__meta">Joined Sep 2023 · U13 keeper</div>
                  </div>
                </div>
              </div>
              <div className="quote">
                <div className="quote__mark" aria-hidden>&ldquo;</div>
                <p className="quote__body">
                  First academy I&apos;ve been to where the GK coach actually
                  played in goal. Everything they say lands because you can tell
                  it&apos;s been earned.
                </p>
                <div className="quote__attribution">
                  <div className="quote__avatar" />
                  <div>
                    <div className="quote__name">{`{placeholder name}`}, 16</div>
                    <div className="quote__meta">U17 keeper · second season</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA BAND */}
      <section className="section section--inverse" style={{paddingBlock:"var(--s-10)"}}>
        <div className="container" style={{display:"flex", justifyContent:"space-between", alignItems:"center", gap:"var(--s-7)", flexWrap:"wrap"}}>
          <div style={{maxWidth:"42ch"}}>
            <span className="eyebrow eyebrow--accent">Trial week</span>
            <h2 className="section__title" style={{marginTop:"10px"}}>Bring a glove. <em>Bring a willingness.</em></h2>
            <p style={{marginTop:"16px"}}>One free trial session for new keepers. No pitch you didn&apos;t expect, no upsell on the way out.</p>
          </div>
          <div style={{display:"flex", gap:"var(--s-3)", flexWrap:"wrap"}}>
            <a href="#contact" className="btn btn--primary btn--lg">Book a trial <ArrowGlyph /></a>
            <a href="#programs" className="btn btn--ghost btn--lg" style={{borderColor:"rgba(250,250,247,0.3)", color:"var(--fg-on-inverse)"}}>See programs</a>
          </div>
        </div>
      </section>

      <SiteFooter />
    </>
  );
}

function ProgramCard({ name, tags=[], copy, price, unit, featured=false, mediaCaption }) {
  return (
    <article className={"program" + (featured ? " program--featured" : "")}>
      <div className="program__media">
        <PhotoSlot caption={mediaCaption || `program / ${name.toLowerCase()}`} ratio="4/3" />
      </div>
      <div className="program__body">
        <div className="program__meta">
          {tags.map((t,i) => (
            <span key={i} className={featured ? "tag tag--outline" : "tag"}
                  style={featured ? {borderColor:"rgba(23,28,32,0.25)", color:"var(--brand-ink)"} : null}>
              {t}
            </span>
          ))}
        </div>
        <h3 className="program__name">{name}</h3>
        <p className="program__copy">{copy}</p>
        <div className="program__price">
          <div>
            <span className="program__price-num">{price}</span>{" "}
            <span className="program__price-unit">{unit}</span>
          </div>
          <a href="#" className="program__cta">
            Details <ArrowGlyph size={12} />
          </a>
        </div>
      </div>
    </article>
  );
}

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