/* PL1 — Programs page */

function ProgramsPage() {
  return (
    <>
      <SiteHeader active="programs" />

      {/* PAGE HEADER */}
      <section className="section" style={{paddingBlock:"var(--s-10) var(--s-7)"}}>
        <div className="container">
          <span className="eyebrow eyebrow--accent">Programs</span>
          <h1 className="section__title" style={{fontSize:"var(--t-display)", marginTop:"var(--s-3)", maxWidth:"15ch"}}>
            How a PL1 <em>keeper</em> is built.
          </h1>
          <p className="section__intro" style={{marginTop:"var(--s-5)", maxWidth:"60ch"}}>
            Four formats designed to slot into a real keeper&apos;s real season —
            from the kid taking gloves seriously for the first time to the academy
            keeper who needs a second voice in the room.
          </p>
        </div>
      </section>

      {/* CORE PROGRAMS */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <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 />

      {/* DETAILED BREAKDOWN — split rows alternating image side */}
      <section className="section">
        <div className="container" style={{display:"flex", flexDirection:"column", gap:"var(--s-10)"}}>
          <ProgramDetail
            number="01"
            tag="Add-on"
            name="Video review"
            copy="We watch your last match together. Twenty minutes, one coach, a marked-up clip pack you keep. Best used the day before a fixture or two days after."
            bullets={[
              "Match footage uploaded by Sunday 6pm",
              "Annotated clips delivered Monday evening",
              "Optional 20-min coach call (£18)",
            ]}
            price="£35"
            unit="per match"
            caption="program / video review interface"
          />
          <ProgramDetail
            number="02"
            tag="Squad"
            name="Goalkeeping curriculum (clubs)"
            copy="We embed with grassroots and academy clubs to deliver a sequenced keeper curriculum. Six-week, twelve-week, or full-season agreements."
            reverse
            bullets={[
              "Curriculum mapped to FA Youth Award standards",
              "Coach education for your existing GK lead",
              "Quarterly progress reports per keeper",
            ]}
            price="POA"
            unit="club rates"
            caption="program / squad clinic"
          />
        </div>
      </section>

      <Slash flip />

      {/* WEEKLY RHYTHM — table */}
      <section className="section section--inverse">
        <div className="container">
          <div className="section__head">
            <span className="eyebrow eyebrow--accent">A typical week</span>
            <p className="section__intro">A regular PL1 keeper does roughly six hours of intentional goalkeeping work between Monday and Saturday — not on top of club training, distributed inside it.</p>
          </div>
          <table className="results-table" style={{color:"var(--fg-on-inverse)"}}>
            <thead>
              <tr><th>Day</th><th>Focus</th><th>Format</th><th>Time</th></tr>
            </thead>
            <tbody>
              <tr><td className="tier">Mon</td><td>Match review</td><td>Video, async</td><td>20 min</td></tr>
              <tr><td className="tier">Tue</td><td>Technical — handling &amp; footwork</td><td>1:1 or club</td><td>60 min</td></tr>
              <tr><td className="tier">Wed</td><td>Recovery / mobility</td><td>Home plan</td><td>20 min</td></tr>
              <tr><td className="tier">Thu</td><td>Decision-making in traffic</td><td>Squad clinic</td><td>90 min</td></tr>
              <tr><td className="tier">Fri</td><td>Pre-match activation</td><td>Self-led</td><td>15 min</td></tr>
              <tr><td className="tier">Sat</td><td>Match</td><td>Filmed</td><td>—</td></tr>
            </tbody>
          </table>
        </div>
      </section>

      <Slash />

      {/* PRICING NOTE / FAQ teaser */}
      <section className="section">
        <div className="container">
          <div className="section__head">
            <h2 className="section__title">Honest about what it costs.</h2>
            <p className="section__intro">
              No tiered memberships, no minimums, no signing fees. Pay per session or save with a block.
              Bursaries available — we don&apos;t want price to be the reason a serious keeper doesn&apos;t train.
            </p>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:"var(--s-6)"}}>
            {[
              ["6-session block", "£330", "Save £60 vs pay-as-you-go", false],
              ["Term-time pass", "£780", "12 sessions across the term, miss two free", true],
              ["Bursary place", "£0–£35", "Apply with two paragraphs — no income proof needed", false],
            ].map(([title, price, copy, featured], i) => (
              <div key={i} className={"card " + (featured ? "program program--featured" : "")} style={{padding:"var(--s-7)"}}>
                <h3 style={{fontFamily:"var(--font-display)", fontWeight:700, fontSize:"var(--t-h3)", letterSpacing:"-0.01em"}}>{title}</h3>
                <div style={{fontFamily:"var(--font-display)", fontWeight:800, fontSize:"clamp(36px,3vw,52px)", letterSpacing:"-0.02em", marginTop:"12px"}}>{price}</div>
                <p style={{color: featured ? "rgba(23,28,32,0.78)" : "var(--fg-muted)", marginTop:"8px", fontSize:"14.5px"}}>{copy}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <SiteFooter />
    </>
  );
}

function ProgramDetail({ number, tag, name, copy, bullets, price, unit, reverse=false, caption }) {
  const media = (
    <div style={{flex:"1"}}>
      <PhotoSlot caption={caption} ratio="4/3" />
    </div>
  );
  const text = (
    <div style={{flex:"1", display:"flex", flexDirection:"column", gap:"var(--s-4)"}}>
      <div style={{display:"flex", alignItems:"center", gap:"14px"}}>
        <span style={{
          fontFamily:"var(--font-display)", fontWeight:800,
          fontSize:"40px", letterSpacing:"-0.04em",
          color:"var(--accent-text)", lineHeight:1
        }}>{number}</span>
        <span className="tag tag--outline">{tag}</span>
      </div>
      <h3 style={{fontSize:"var(--t-h2)", fontWeight:700, letterSpacing:"-0.02em"}}>{name}</h3>
      <p style={{color:"var(--fg-muted)", fontSize:"var(--t-body-lg)", lineHeight:"var(--lh-loose)"}}>{copy}</p>
      <ul className="pl-list">
        {bullets.map((b,i) => <li key={i}>{b}</li>)}
      </ul>
      <div style={{
        display:"flex", justifyContent:"space-between", alignItems:"baseline",
        marginTop:"var(--s-4)", paddingTop:"var(--s-5)",
        borderTop:"1px solid var(--hairline)"
      }}>
        <div>
          <span style={{fontFamily:"var(--font-display)", fontWeight:700, fontSize:"32px", letterSpacing:"-0.02em"}}>{price}</span>
          <span style={{color:"var(--fg-muted)", fontSize:"13px", marginLeft:"8px"}}>{unit}</span>
        </div>
        <a href="#" className="btn btn--primary btn--sm">Enquire <ArrowGlyph /></a>
      </div>
    </div>
  );
  return (
    <div style={{display:"flex", gap:"var(--s-9)", alignItems:"center", flexWrap:"wrap"}}>
      {reverse ? <>{text}{media}</> : <>{media}{text}</>}
    </div>
  );
}

Object.assign(window, { ProgramsPage, ProgramDetail });