/* PL1 — Coaches & About page */

function CoachesPage() {
  return (
    <>
      <SiteHeader active="coaches" />

      {/* PAGE HEADER + lead coach feature */}
      <section className="section" style={{paddingBlock:"var(--s-10)"}}>
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns:"1.1fr 1fr", gap:"var(--s-9)", alignItems:"center"}}>
            <div>
              <span className="eyebrow eyebrow--accent">Coaches &amp; About</span>
              <h1 className="section__title" style={{fontSize:"var(--t-display)", marginTop:"var(--s-3)", maxWidth:"14ch"}}>
                A small staff. <em>Built deep, not wide.</em>
              </h1>
              <p style={{fontSize:"var(--t-body-lg)", color:"var(--fg-muted)", marginTop:"var(--s-5)", lineHeight:"var(--lh-loose)", maxWidth:"50ch"}}>
                Founded in {`{year placeholder}`} by a former Football League keeper who&apos;d been
                shown the door by the academy system and wanted to build the place that
                hadn&apos;t existed for him. Today PL1 runs as a six-coach studio — every
                staff member played in goal to senior level.
              </p>
              <div style={{display:"flex", gap:"var(--s-3)", marginTop:"var(--s-6)", flexWrap:"wrap"}}>
                <a href="#contact" className="btn btn--primary">Book a trial <ArrowGlyph /></a>
                <a href="#methodology" className="btn btn--ghost">Read methodology</a>
              </div>
            </div>
            <PhotoSlot caption="founder / portrait + signature" ratio="4/5" />
          </div>
        </div>
      </section>

      <Slash />

      {/* PRINCIPLES — three columns */}
      <section className="section section--inverse">
        <div className="container">
          <div className="section__head">
            <span className="eyebrow eyebrow--accent">Methodology</span>
            <p className="section__intro">Three principles that survived a decade of contact with reality. Everything we do laddered up to one of them.</p>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:"var(--s-7)"}}>
            <Principle
              number="P/1"
              title="Decisions over saves."
              copy="The save is the last 5%. The 95% — positioning, scanning, reading the cross — happens before the ball gets near you. We coach the 95%."
            />
            <Principle
              number="P/2"
              title="Recorded, then reviewed."
              copy="Every session is filmed and clipped. If a keeper can't see what they did, they can't change it. Reviews are weekly, written, and ours to keep."
            />
            <Principle
              number="P/3"
              title="Honest, never harsh."
              copy="Feedback is direct. Tone is warm. We have a published code-of-conduct for staff and parents because words to young keepers compound."
            />
          </div>
        </div>
      </section>

      <Slash flip variant="inverse" />

      {/* COACH ROSTER */}
      <section className="section">
        <div className="container">
          <div className="section__head">
            <h2 className="section__title">Meet the <em>full staff.</em></h2>
            <p className="section__intro">Hover any coach for credentials — every coach has played in goal to at least Step&nbsp;1 / National League level.</p>
          </div>
          <div className="coach-grid">
            <Coach name={`{coach 1}`} role="Founder · Lead coach" bio="Former Football League keeper. UEFA B (GK). 11 years coaching keepers from grassroots to Cat 2 academy." creds={["UEFA B", "FA YGK Award", "DBS"]} />
            <Coach name={`{coach 2}`} role="Senior coach · Squad clinics" bio="Ex-National League. Specialism: handling under fatigue and the keeper-as-defender role in modern build-up." creds={["FA Level 3", "Safeguarding"]} />
            <Coach name={`{coach 3}`} role="Video &amp; analytics" bio="Built the PL1 review pipeline. Sports science background; runs all clip turnaround and end-of-season reports." creds={["MSc Sports Sci.", "Hudl Cert."]} />
            <Coach name={`{coach 4}`} role="Coach · 1:1 specialism" bio="Ex-academy keeper (released U18). Strongest with mid-teens who&apos;ve had a setback — knows the route back." creds={["FA Level 2", "Mental Skills"]} />
            <Coach name={`{coach 5}`} role="Coach · Grassroots &amp; intro" bio="Joined as a PL1 keeper aged 12, came back as a coach at 22. The first face most new starters meet." creds={["FA Level 1", "First Aid"]} />
            <Coach name={`{coach 6}`} role="Sports psychologist (visiting)" bio="Quarterly group sessions for U15+ and 1:1 referrals. Specialism: rebound from mistakes, pre-match nerves." creds={["BPS Reg.", "Visiting"]} />
          </div>
        </div>
      </section>

      <Slash />

      {/* WHERE WE TRAIN */}
      <section className="section">
        <div className="container">
          <div className="section__head">
            <h2 className="section__title">Where we train.</h2>
            <p className="section__intro">A purpose-built keeper facility, two outdoor pitches, and visits to your club. We don&apos;t squeeze keepers into the corner of an outfield session.</p>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"2fr 1fr 1fr", gap:"var(--s-5)"}}>
            <PhotoSlot caption="facility / indoor 3G + clip wall" ratio="16/9" />
            <PhotoSlot caption="outdoor / main pitch" ratio="4/5" />
            <PhotoSlot caption="recovery / sports lab" ratio="4/5" />
          </div>
        </div>
      </section>

      <SiteFooter />
    </>
  );
}

function Principle({ number, title, copy }) {
  return (
    <div>
      <div style={{
        fontFamily:"var(--font-mono)", fontSize:"13px", letterSpacing:"0.1em",
        color:"var(--accent)", marginBottom:"var(--s-4)"
      }}>{number}</div>
      <h3 style={{fontSize:"var(--t-h2)", fontWeight:700, letterSpacing:"-0.02em", lineHeight:"var(--lh-snug)"}}>{title}</h3>
      <p style={{marginTop:"var(--s-4)", lineHeight:"var(--lh-loose)"}}>{copy}</p>
    </div>
  );
}

function Coach({ name, role, bio, creds=[] }) {
  return (
    <article className="coach">
      <PhotoSlot className="coach__photo" caption={`coach / ${name.replace(/[{} ]/g,"")}`} ratio="3/4" />
      <h3 className="coach__name">{name}</h3>
      <div className="coach__role" dangerouslySetInnerHTML={{__html: role}} />
      <p className="coach__bio">{bio}</p>
      <div className="coach__creds">
        {creds.map((c,i) => <span key={i} className="tag tag--outline">{c}</span>)}
      </div>
    </article>
  );
}

Object.assign(window, { CoachesPage, Coach, Principle });