/* global React, CtaStrip */
// Football Scholarship page — reached from the College page "I want to play" card.

const FS_IC = {
  ball: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="9" /><path d="M12 8l2.8 2-1.1 3.4h-3.4L9.2 10z" fill="currentColor" stroke="none" /></svg>,
  cap: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><path d="M2.5 9.2L12 5l9.5 4.2L12 13.4z" /><path d="M6.5 11.3v3.6c0 1 2.5 2.1 5.5 2.1s5.5-1.1 5.5-2.1v-3.6" /><path d="M21.5 9.2v4.6" /></svg>,
  chart: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 20V4M4 20h16" /><rect x="7" y="13" width="2.6" height="4" fill="currentColor" stroke="none" /><rect x="11.7" y="9.5" width="2.6" height="7.5" fill="currentColor" stroke="none" /><rect x="16.4" y="6" width="2.6" height="11" fill="currentColor" stroke="none" /></svg>,
  grad: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><path d="M2.5 9.2L12 5l9.5 4.2L12 13.4z" /><path d="M12 13.4v4" /><circle cx="12" cy="19.5" r="1.3" fill="currentColor" stroke="none" /></svg>,
  cert: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="3" y="4" width="18" height="13" rx="2" /><path d="M7 8h10M7 11h6" /><circle cx="16.5" cy="15.5" r="2.2" /><path d="M15.5 17.5L15 21l1.5-1 1.5 1-.5-3.5" /></svg>,
  combine: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><circle cx="9" cy="12" r="5.5" /><circle cx="15" cy="12" r="5.5" /></svg>,
  support: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 21s-7-4.6-9.2-9A5.2 5.2 0 0 1 12 6.5 5.2 5.2 0 0 1 21.2 12C19 16.4 12 21 12 21z" /></svg>,
  career: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="3" y="8" width="18" height="11" rx="2" /><path d="M8.5 8V6a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v2" /><path d="M3 13h18" /></svg>,
  train: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M6.5 8v8M3.6 9.6v4.8M17.5 8v8M20.4 9.6v4.8M7 12h10" /></svg>,
  trophy: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 3v8a6 6 0 0 0 12 0V3z" /><path d="M6 5H3v2a3 3 0 0 0 3 3M18 5h3v2a3 3 0 0 1-3 3" /><path d="M9 21h6M12 17v4" /></svg>,
  video: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="3" y="6" width="13" height="12" rx="2" /><path d="M16 10.5l5-3v9l-5-3z" /></svg>,
  develop: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 16l5-5 4 4 6-7" /><path d="M14 8h5v5" /></svg>,
  book: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><path d="M4 5a2 2 0 0 1 2-2h14v16H6a2 2 0 0 0-2 2z" /><path d="M4 19a2 2 0 0 1 2-2h14" /></svg>,
  star: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l2.5 5.6 6.1.6-4.6 4 1.4 6L12 17.9 6.6 19.2l1.4-6-4.6-4 6.1-.6z" /></svg>,
  shield: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><path d="M12 3l7 3v5c0 4.5-3 8.2-7 10-4-1.8-7-5.5-7-10V6z" /></svg>,
  lion: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><circle cx="12" cy="12" r="8" /><path d="M8.5 10.5h.01M15.5 10.5h.01M8.5 15c1 1 2.2 1.5 3.5 1.5s2.5-.5 3.5-1.5" strokeLinecap="round" /></svg>,
  cup: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M7 4h10v4a5 5 0 0 1-10 0z" /><path d="M7 5H4v1.5A3.5 3.5 0 0 0 7 10M17 5h3v1.5A3.5 3.5 0 0 1 17 10" /><path d="M10 13.5h4M9.5 19h5M12 13.5V19" /></svg>,
  check: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12.5l5 5L20 7" /></svg>,
  gcse: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><path d="M4 5a2 2 0 0 1 2-2h14v16H6a2 2 0 0 0-2 2z" /><path d="M9 8h7M9 11h5" strokeLinecap="round" /></svg>,
  class: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="8" r="3" /><path d="M3.5 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5" /><path d="M16 6.2a3 3 0 0 1 0 5.6" /><path d="M18 14.2c2.2.6 3.5 2.3 3.5 4.8" /></svg>,
  tutor: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="7.5" r="3" /><path d="M6 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5" /><path d="M12 12.5v3" /></svg>,
  plan: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="4" y="3" width="16" height="18" rx="2" /><path d="M8 8h8M8 12h8M8 16h5" strokeLinecap="round" /></svg>
};

const FS_PILLARS = [
  {
    t: "Football", icon: FS_IC.ball, img: "assets/photo-fs-football.webp",
    items: ["National Youth Football League Fixtures", "Future Lions League", "UEFA qualified coaches", "Professional analysis", "Strength & conditioning", "Individual development"]
  },
  {
    t: "Education", icon: FS_IC.cap, img: "assets/photo-fs-education.webp",
    items: ["BTEC Level 3 National Extended Diploma in Sports Coaching & Development", "Equivalent to 3 A-Levels", "Earn up to 168 UCAS points", "Experienced teaching staff", "Small class sizes", "Pathways to universities, apprenticeships & employment"]
  },
  {
    t: "Future", icon: FS_IC.chart, img: "assets/photo-fs-future.webp",
    items: ["Higher Education", "Semi-pro & professional football", "USA Scholarships", "Coaching opportunities", "Employment in sport", "Lifelong progression"]
  }
];

const FS_STUDY = ["Health, Wellbeing & Sport", "Careers in the Sport & Active Leisure Industry", "Sport Development", "Self-Employment in Sport & Physical Activity", "Practical Sports Application", "Fitness Testing", "Rules, Regulations & Officiating in Sport", "Technical & Tactical Skills in Sport", "Organising Events in Sport", "Developing Coaching Skills", "Research Project in Sport", "Applied Coaching Skills"];

const FS_PROGRESSION = [
  { icon: FS_IC.cap, label: "University" },
  { icon: FS_IC.ball, label: "Higher-Level Football" },
  { icon: FS_IC.career, label: "Employment" },
  { icon: FS_IC.star, label: "Self-Employment" },
  { icon: FS_IC.train, label: "Apprenticeships" },
  { icon: FS_IC.grad, label: "USA Scholarships" },
  { icon: FS_IC.develop, label: "Sport & Fitness Careers" }
];

const FS_SUPPORT = [
  { icon: FS_IC.gcse, label: "GCSE English & Maths support available" },
  { icon: FS_IC.class, label: "Small class sizes" },
  { icon: FS_IC.tutor, label: "Dedicated tutor support" },
  { icon: FS_IC.support, label: "SEND/SENCO Support" },
  { icon: FS_IC.plan, label: "Individual Learning Plans" }
];

const FS_PARENTS = [
  { icon: FS_IC.cert, t: "Recognised Qualification", d: "BTEC Level 3 Extended Diploma in Sport. Equivalent to 3 A-Levels." },
  { icon: FS_IC.combine, t: "Football & Education Combined", d: "A balanced programme where neither football nor education is compromised." },
  { icon: FS_IC.grad, t: "University Progression", d: "Clear progression routes into university with the skills and qualifications you need." },
  { icon: FS_IC.support, t: "Individual Support", d: "Every learner is known, supported and challenged to be the best they can be." },
  { icon: FS_IC.career, t: "Career Opportunities", d: "Football is not the only destination. We prepare you for life beyond the game." }
];

const FS_EXPERIENCE_STEPS = [
  { icon: FS_IC.train, t: "Train", d: "3–4 high quality training sessions per week with UEFA coaches." },
  { icon: FS_IC.trophy, t: "Compete", d: "Play in the National Football Youth League every week." },
  { icon: FS_IC.video, t: "Analyse", d: "Individual and team video analysis to improve performance." },
  { icon: FS_IC.develop, t: "Develop", d: "Strength & conditioning programmes to build better athletes." },
  { icon: FS_IC.book, t: "Study", d: "Full-time college education alongside your football." },
  { icon: FS_IC.star, t: "Progress", d: "A clear pathway to higher football and future opportunities." }
];

const FS_EXPERIENCE_CARDS = [
  { img: "assets/photo-fs-qualification.webp", t: "Nationally Recognised Qualification", d: "Receive expert teaching so that you are prepared for life outside of the game." },
  { img: "assets/photo-fs-coach.webp", t: "UEFA Qualified Coaches", d: "Learn from experienced, UEFA-qualified coaches who develop players the right way." },
  { img: "assets/photo-fs-match.webp", t: "National Youth Football League", d: "Compete in the National Football Youth League against the best academies." },
  { img: "assets/photo-fs-analysis.webp", t: "Video Analysis", d: "Elite analysis using the latest technology to improve your game week by week." },
  { img: "assets/photo-fs-gym.webp", t: "Strength & Conditioning", d: "Individual programmes to improve speed, strength, power and resilience." },
  { img: "assets/photo-fs-reviews.webp", t: "Player Reviews", d: "Regular reviews with coaches to track progress and set new targets." },
  { img: "assets/photo-fs-idp.webp", t: "Individual Development Plans", d: "Personalised plans to help you reach your football and personal potential." }
];

const FS_FIRST_TEAM = [
  ["Akyuz", "Zeren"], ["Barnes", "Edward"], ["Bell", "Charlie"], ["Buffong", "Tyriece"],
  ["Coelho", "Denis"], ["Lyall", "Alexander"], ["Vaidilauskis", "Matas"], ["Joof", "Rio"],
  ["Kotloczki", "Milan"], ["Lee", "McKenzie"], ["Szablowski", "Alan"], ["Bats", "Louie"],
  ["Bell", "Teddy"], ["Bodibe", "Josh"], ["French", "Harry"], ["Mujere", "Marshal"],
  ["Salih", "Zaid"], ["Williams", "Jack"], ["Wright", "Callum"], ["Barsby", "Jake"],
  ["Barnes", "Harvey"], ["Hall", "Freeman"], ["Klebahs", "Maximus"], ["O'Sullivan", "Jack"],
  ["Winks", "Harry"], ["Wilkshire", "Harry"], ["Lawrence", "Zack"], ["Cole", "Riley"]
];

const FS_STORIES = [
  { img: "assets/photo-fc-goal.webp", name: "Dan Roberts", d: "Defender / Midfielder. Progressed from U19 to First Team." },
  { img: "assets/photo-match-header.webp", name: "Denis Coelho", d: "Forward. Top scorer and now a key first team player." },
  { img: "assets/photo-match-tackle.webp", name: "Patrick Kacirek", d: "Midfielder. Developed through our pathway." },
  { img: "assets/photo-fc-touchline.webp", name: "Callum Wright", d: "Forward. First team regular from the academy." }
];

const FS_COMPETITIONS = [
  { img: "assets/logo-comp-nfyl.webp", label: "National Football Youth League Championship" },
  { img: "assets/logo-comp-nfyl.webp", label: "National Football Youth League Premiership" },
  { img: "assets/logo-comp-futurelions.webp", label: "Future Lions League" },
  { img: "assets/logo-comp-facup.webp", label: "Cup Competitions" }
];

function FsSectionHead({ children }) {
  return (
    <div className="fs-head">
      <h2>{children}</h2>
    </div>
  );
}

function FootballScholarshipPage() {
  return (
    <div data-screen-label="Football Scholarship">

      {/* ---------- Hero ---------- */}
      <section className="fs-hero" data-screen-label="FS Hero">
        <div className="fs-hero-photo" aria-hidden="true">
          <img src="assets/photo-fs-hero.webp" alt="" />
        </div>
        <div className="container fs-hero-inner">
          <div className="fs-hero-text">
            <h1 className="fs-title">
              <span className="line">Play.</span>
              <span className="line">Develop.</span>
              <span className="line accent">Progress.</span>
            </h1>
            <div className="fs-kicker">Football with purpose.</div>
            <p className="fs-sub">Elite football, recognised qualifications and a pathway designed to help you maximise your potential on and off the pitch.</p>
            <div className="fs-actions">
              <a href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener" className="btn btn-primary">Register Your Interest <span className="arrow">→</span></a>
              <a href="https://forms.gle/qh6Hcq5eaNH94kZ67" target="_blank" rel="noopener" className="btn btn-ghost">Request a Prospectus <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 4v12M6 12l6 6 6-6M4 21h16" /></svg></a>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- More than a football academy ---------- */}
      <section className="fs-block" data-screen-label="FS Pillars">
        <div className="container">
          <FsSectionHead>More than a football academy</FsSectionHead>
          <div className="fs-pillars">
            {FS_PILLARS.map((p, i) => (
              <article className="fs-pillar" key={i}>
                <div className="fs-pillar-head">
                  <span className="fs-pillar-ico" aria-hidden="true">{p.icon}</span>
                  <h3>{p.t}</h3>
                </div>
                <div className="fs-pillar-media"><img src={p.img} alt="" /></div>
                <ul className="fs-list">
                  {p.items.map((x, j) => <li key={j}><span className="fs-tick" aria-hidden="true">{FS_IC.check}</span>{x}</li>)}
                </ul>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- Education that works ---------- */}
      <section className="fs-block" data-screen-label="FS Education">
        <div className="container">
          <FsSectionHead>Education that works for your future</FsSectionHead>
          <div className="fs-edu">
            <div className="fs-edu-media"><img src="assets/photo-fs-squad.webp" alt="The full Holbeach United FEA scholarship squad" /></div>
            <div className="fs-edu-body">
              <h3>BTEC Level 3 National Extended Diploma in Sports Coaching & Development</h3>
              <div className="fs-edu-equiv">Equivalent to 3 A Levels · Earn up to 168 UCAS Points</div>
              <p>A full-time two-year programme designed to develop the knowledge, skills and behaviours required for success in higher education, employment and the sports industry.</p>
              <div className="fs-edu-label">What you will study</div>
              <ul className="fs-study">
                {FS_STUDY.map((x, i) => <li key={i}><span className="fs-tick" aria-hidden="true">{FS_IC.check}</span>{x}</li>)}
              </ul>
            </div>
          </div>
          <div className="fs-edu-foot">
            <div className="fs-edu-panel">
              <div className="fs-edu-panel-head">Progression opportunities</div>
              <div className="fs-minirow">
                {FS_PROGRESSION.map((p, i) => (
                  <div className="fs-mini" key={i}>
                    <span className="fs-mini-ico" aria-hidden="true">{p.icon}</span>
                    <span>{p.label}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="fs-edu-panel">
              <div className="fs-edu-panel-head">Support every step of the way</div>
              <div className="fs-minirow">
                {FS_SUPPORT.map((p, i) => (
                  <div className="fs-mini" key={i}>
                    <span className="fs-mini-ico" aria-hidden="true">{p.icon}</span>
                    <span>{p.label}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Why parents choose ---------- */}
      <section className="fs-block" data-screen-label="FS Parents">
        <div className="container">
          <FsSectionHead>Why parents choose Holbeach United FEA</FsSectionHead>
          <div className="fs-parents">
            {FS_PARENTS.map((p, i) => (
              <div className="fs-parent" key={i}>
                <span className="fs-parent-ico" aria-hidden="true">{p.icon}</span>
                <h4>{p.t}</h4>
                <p>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- The scholarship experience (6 steps) ---------- */}
      <section className="fs-block" data-screen-label="FS Experience Steps">
        <div className="container">
          <FsSectionHead>The football scholarship experience</FsSectionHead>
          <div className="fs-steps">
            {FS_EXPERIENCE_STEPS.map((s, i) => (
              <div className="fs-step" key={i}>
                <span className="fs-step-ico" aria-hidden="true">{s.icon}</span>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- What you'll experience (photo cards) ---------- */}
      <section className="fs-block" data-screen-label="FS Experience Cards">
        <div className="container">
          <FsSectionHead>What you'll experience</FsSectionHead>
          <div className="fs-xp-grid fs-xp-7">
            {FS_EXPERIENCE_CARDS.map((c, i) => (
              <article className="fs-xp" key={i}>
                <div className="fs-xp-media"><img src={c.img} alt="" /></div>
                <h4>{c.t}</h4>
                <p>{c.d}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- First team progressions + success stories ---------- */}
      <section className="fs-block" data-screen-label="FS First Team">
        <div className="container">
          <div className="fs-ft">
            <div className="fs-ft-table-wrap">
              <h3 className="fs-ft-title">Players who have progressed to first team</h3>
              <p className="fs-ft-sub">25+ players have made a first team appearance for Holbeach United.</p>
              <div className="fs-ft-table">
                <div className="fs-ft-row fs-ft-row-head">
                  <span>#</span><span>Surname</span><span>First name</span>
                </div>
                {FS_FIRST_TEAM.map((r, i) => (
                  <div className="fs-ft-row" key={i}>
                    <span>{i + 1}</span><span>{r[0]}</span><span>{r[1]}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Competitions strip ---------- */}
      <section className="fs-comps" data-screen-label="FS Competitions">
        <div className="container fs-comps-row">
          {FS_COMPETITIONS.map((c, i) => (
            <div className="fs-comp" key={i}>
              <span className="fs-comp-ico fs-comp-img" aria-hidden="true"><img src={c.img} alt="" /></span>
              <span className="fs-comp-lbl">{c.label}</span>
            </div>
          ))}
        </div>
      </section>

      {/* ---------- On the pitch / in the classroom ---------- */}
      <section className="fs-block" data-screen-label="FS Complete Person">
        <div className="container">
          <div className="fs-complete">
            <div className="fs-complete-col">
              <h4>On the pitch</h4>
              <div className="fs-complete-media"><img src="assets/photo-fs-pitch.webp" alt="" /></div>
              <ul className="fs-list">
                {["Elite coaching", "National Youth Football League Fixtures", "S&C and performance analysis", "Individual development"].map((x, i) => (
                  <li key={i}><span className="fs-tick" aria-hidden="true">{FS_IC.check}</span>{x}</li>
                ))}
              </ul>
            </div>
            <div className="fs-complete-mid">
              <div className="fs-complete-kicker">Football + Education</div>
              <h3>Developing the <span className="gold">complete person.</span></h3>
            </div>
            <div className="fs-complete-col">
              <h4>In the classroom</h4>
              <div className="fs-complete-media"><img src="assets/photo-fs-classroom.webp" alt="" /></div>
              <ul className="fs-list">
                {["BTEC Level 3 National Extended Diploma in Sports Coaching & Development", "Equivalent to 3 A Levels", "Earn up to 168 UCAS points", "University progression", "Support from experienced teaching staff"].map((x, i) => (
                  <li key={i}><span className="fs-tick" aria-hidden="true">{FS_IC.check}</span>{x}</li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Closing banner ---------- */}
      <section className="nh-banner-wrap" data-screen-label="FS Banner">
        <div className="container">
          <div className="nh-banner">
            <div className="nh-banner-tag">
              <span>Ready to play?</span>
              <span className="gold">Ready to progress?</span>
            </div>
            <div className="nh-banner-mid">
              <p style={{ marginTop: 0 }}>Join a football scholarship programme built around performance, development and opportunity.</p>
              <div className="nh-banner-actions">
                <a href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener" className="btn btn-primary">Register Your Interest <span className="arrow">→</span></a>
                <a href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener" className="btn nh-btn-outline">Book a Trial <span className="arrow">→</span></a>
              </div>
            </div>
            <div className="nh-banner-brand">
              <img src="assets/logo-fea-tiger.webp" alt="Holbeach United crest" />
              <span className="nh-pack">#ThePack</span>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { FootballScholarshipPage });
