/* PL1 — Testimonials & Results page */

function ResultsPage() {
  return (
    <>
      <SiteHeader active="testimonials" />

      {/* PAGE HEADER */}
      <section className="section" style={{paddingBlock:"var(--s-10) var(--s-7)"}}>
        <div className="container">
          <span className="eyebrow eyebrow--accent">Testimonials &amp; results</span>
          <h1 className="section__title" style={{fontSize:"var(--t-display)", marginTop:"var(--s-3)", maxWidth:"14ch"}}>
            The receipts. <em>All of them.</em>
          </h1>
          <p className="section__intro" style={{marginTop:"var(--s-5)", maxWidth:"60ch"}}>
            We&apos;re upfront about what worked and what didn&apos;t. Not every PL1 keeper
            signs to a pro academy — but every keeper who left here got better.
            Below: the headline number, and the full list behind it.
          </p>
        </div>
      </section>

      {/* HERO PROOF — the 25 */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <StatProof />
        </div>
      </section>

      <Slash />

      {/* BREAKDOWN STATS */}
      <section className="section">
        <div className="container">
          <div className="section__head">
            <h2 className="section__title">By tier, by year.</h2>
            <p className="section__intro">A snapshot of where PL1-trained keepers signed last season. We update this list every September — keepers who&apos;ve been released since are still counted at the level they reached.</p>
          </div>

          {/* tier cards */}
          <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:"var(--s-5)", marginBottom:"var(--s-7)"}}>
            <TierStat n="9" label="Premier League academies" tier="L1" />
            <TierStat n="8" label="EFL Championship academies" tier="L1" />
            <TierStat n="5" label="EFL L1 / L2 academies" tier="L2" />
            <TierStat n="3" label="Women&apos;s Super League pathway" tier="L1" />
          </div>

          {/* the full list */}
          <table className="results-table">
            <thead>
              <tr>
                <th>Keeper</th>
                <th>Age at signing</th>
                <th>Tier</th>
                <th>Year</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["A. R.",   "U13", "PL Cat 1 academy", "2024"],
                ["L. M.",   "U15", "PL Cat 1 academy", "2024"],
                ["M. S.",   "U14", "PL Cat 2 academy", "2024"],
                ["K. P.",   "U16", "Championship academy", "2024"],
                ["D. O.",   "U12", "Championship academy", "2023"],
                ["S. T.",   "U15", "WSL pathway", "2023"],
                ["J. B.",   "U16", "EFL L1 academy", "2023"],
                ["F. A.",   "U13", "PL Cat 2 academy", "2023"],
                ["…",       "—",   "+ 17 more listed September each year", "—"],
              ].map((row, i) => (
                <tr key={i}>
                  <td className="tier">{row[0]}</td>
                  <td>{row[1]}</td>
                  <td><span className={"level " + (row[2].includes("PL") ? "level--l1" : "level--l2")}>{row[2]}</span></td>
                  <td>{row[3]}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <p style={{fontSize:"12px", color:"var(--fg-subtle)", marginTop:"var(--s-4)"}}>
            Initials only — we don&apos;t publish full names of under-18 keepers without parental consent.
            Full list with permissions available on request to scouting partners.
          </p>
        </div>
      </section>

      <Slash flip />

      {/* TESTIMONIALS GRID */}
      <section className="section section--inverse">
        <div className="container">
          <div className="section__head">
            <span className="eyebrow eyebrow--accent">Voices</span>
            <p className="section__intro">From parents, keepers, and coaches who&apos;ve sent kids our way. Unedited beyond initials.</p>
          </div>
          <div className="quote-grid" style={{marginBottom:"var(--s-7)"}}>
            <QuoteCard
              body="The clip review pack that lands every Monday morning is the single most useful coaching artefact my son has ever received. Six months in and his footwork is unrecognisable."
              name={`Parent — {placeholder}`}
              meta="U14 keeper · second season"
            />
            <QuoteCard
              body="I went to a different academy first. They had me doing the same shot-stopping drill for nine months. PL1 had me playing as a defender who happens to use his hands inside two sessions."
              name={`{placeholder}, 17`}
              meta="Academy keeper · third season at PL1"
            />
          </div>
          <div className="quote-grid">
            <QuoteCard
              body="Honest about my daughter's ceiling, generous with their time, never once chased a payment. The way an academy should be run."
              name={`Parent — {placeholder}`}
              meta="U16 keeper · 18 months at PL1"
            />
            <QuoteCard
              body="As a Cat 2 scout I trust PL1 keepers more than I trust most agents. If they say a kid is ready I go and watch the kid."
              name={`{scout name placeholder}`}
              meta="Recruitment, EFL club · referrer since 2022"
            />
          </div>
        </div>
      </section>

      <Slash />

      {/* LOGO STRIP — destinations */}
      <section className="section">
        <div className="container">
          <span className="eyebrow eyebrow--accent">Where PL1 keepers play now</span>
          <h2 className="section__title" style={{marginTop:"var(--s-3)"}}>
            From this 3G to <em>those academies.</em>
          </h2>
          <div className="logo-strip" style={{marginTop:"var(--s-6)"}}>
            <span className="logo-strip__item">{`{Club A}`}</span>
            <span className="logo-strip__item">{`{Club B}`}</span>
            <span className="logo-strip__item">{`{Club C}`}</span>
            <span className="logo-strip__item">{`{Club D}`}</span>
            <span className="logo-strip__item">{`{Club E}`}</span>
            <span className="logo-strip__item">{`{Club F}`}</span>
          </div>
          <p style={{marginTop:"var(--s-4)", fontSize:"12px", color:"var(--fg-subtle)"}}>
            Placeholder strip — real club crests inserted on handoff, with each club&apos;s
            media-use guidelines respected. We&apos;ll list affiliations, not claim partnerships
            we don&apos;t have.
          </p>
        </div>
      </section>

      {/* CTA BAND */}
      <section className="section section--inverse" style={{paddingBlock:"var(--s-9)"}}>
        <div className="container" style={{display:"flex", justifyContent:"space-between", alignItems:"center", gap:"var(--s-7)", flexWrap:"wrap"}}>
          <div style={{maxWidth:"42ch"}}>
            <h2 className="section__title" style={{fontSize:"var(--t-h1)"}}>Add your name to the list.</h2>
            <p style={{marginTop:"12px"}}>One trial session is all most keepers need to know if PL1 is for them.</p>
          </div>
          <a href="#contact" className="btn btn--primary btn--lg">Book a trial <ArrowGlyph /></a>
        </div>
      </section>

      <SiteFooter />
    </>
  );
}

function TierStat({ n, label, tier="L1" }) {
  return (
    <div className="card" style={{padding:"var(--s-6)"}}>
      <div style={{
        fontFamily:"var(--font-display)", fontWeight:800,
        fontSize:"clamp(48px,5vw,72px)", letterSpacing:"-0.04em",
        lineHeight:0.9, color:"var(--accent-text)"
      }}>{n}</div>
      <div style={{
        marginTop:"var(--s-3)", fontFamily:"var(--font-display)",
        fontWeight:600, fontSize:"15px", lineHeight:1.3
      }} dangerouslySetInnerHTML={{__html: label}} />
    </div>
  );
}

function QuoteCard({ body, name, meta }) {
  return (
    <div className="quote">
      <div className="quote__mark" aria-hidden>&ldquo;</div>
      <p className="quote__body">{body}</p>
      <div className="quote__attribution">
        <div className="quote__avatar" />
        <div>
          <div className="quote__name">{name}</div>
          <div className="quote__meta">{meta}</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ResultsPage, TierStat, QuoteCard });