/* global React, Hero, Doorway, Placeholder, SubCard, CtaStrip, IdStrip, SubNav, OpenEvenings */
// Page components. Each accepts a `section` (or none for Home) and renders content from data.

const { useState: useStateP } = React;

// ============================================================
// Pathway band — three elite-pathway picture cards
// ============================================================
const PATHWAY_CARDS = [
{
  title: "Explore a Football Scholarship",
  img: "assets/photo-fc-huddle.webp",
  desc: "Combine BTEC Level 3 qualifications with elite football training in a high-performance environment.",
  href: "#/college"
},
{
  title: "Explore Sports Business",
  img: "assets/photo-sb-stadium.webp",
  desc: "Study marketing, finance, events and entrepreneurship through live projects on a working semi-professional club.",
  href: "#/run-sport"
},
{
  title: "Explore Sports Business Studies",
  img: "assets/photo-sb-events.webp",
  desc: "A BTEC National Level 3 Diploma in Business — worth up to two A-Levels and UCAS points toward university.",
  href: "#/run-sport"
}];


function PathwaySection() {
  return (
    <section className="pathway" data-screen-label="01.3 Pathway">
      <div className="container">
        <div className="pathway-head">
          <div className="pathway-eyebrow">More than football. More than education.</div>
          <h2>A complete elite sport &amp; education pathway</h2>
        </div>
        <div className="pathway-grid">
          {PATHWAY_CARDS.map((c, i) =>
          <a className="pathway-card" key={i} href={c.href}>
              <img className="pathway-card-img" src={c.img} alt="" />
              <span className="pathway-card-scrim" aria-hidden="true"></span>
              <div className="pathway-card-overlay">
                <h3>{c.title}</h3>
                <p>{c.desc}</p>
                <span className="pathway-card-cta">Find out more <span className="arrow">→</span></span>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// Hero stats band (light strip below the hero)
// ============================================================
const HERO_STATS = [
{
  num: "120+", label: "Learners Supported", desc: "Since our foundation in 2021.",
  icon: <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>
},
{
  num: "100%", label: "Progression Rate", desc: "To positive destinations.",
  icon: <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>
},
{
  num: "7", label: "Specialist Pathways", desc: "Across sport careers and sport business.",
  icon: <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>
},
{
  num: "100%", label: "Pass Rate", desc: "Since our foundation in 2021. The best grades in our region year on year!",
  icon: <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>
},
{
  num: "100%", label: "Focussed On Your Future", desc: "Every learner, everyday.",
  icon: <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>
}];


function HeroStats() {
  return (
    <section className="stats-bar" data-screen-label="01.05 Stats">
      <div className="container">
        <div className="stats-grid">
          {HERO_STATS.map((s, i) =>
          <div className="stat-item" key={i}>
              <div className="stat-top">
                <span className="stat-ico" aria-hidden="true">{s.icon}</span>
                <span className="stat-num">{s.num}</span>
              </div>
              <div className="stat-label">{s.label}</div>
              <p className="stat-desc">{s.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// Testimonials — "Meet our learners" carousel
// ============================================================
const TESTIMONIALS = [
{ name: "Milan K", rolePre: "Football", roleGold: "Scholarship", img: "assets/photo-tm-milan.webp",
  quote: "Holbeach United FEA gave me the perfect balance of football and education. I've progressed to a university degree and continue to play at a high level." },
{ name: "Louie G", rolePre: "Sports", roleGold: "Massage Intern", img: "assets/photo-tm-louie.webp",
  quote: "Through my Sports Massage Internship I gained real experience in a professional environment and now I'm working towards my degree in Sports Therapy." },
{ name: "Jack R", rolePre: "Sport", roleGold: "Business Studies", img: "assets/photo-tm-jack.webp",
  quote: "The Sport Business course has opened my eyes to the commercial side of sport. I've secured a placement with a professional sports organisation." },
{ name: "Kim H", rolePre: "", roleGold: "Parent to Charlie H", img: "assets/photo-tm-kim.webp",
  quote: "The structure, mentoring and care the staff give is brilliant. My son comes home motivated every single day — we couldn't ask for more." },
{ name: "Brandon Watts", rolePre: "PE Teaching", roleGold: "Intern", img: "assets/photo-tm-brandon.webp",
  quote: "I spend a day a week in a real school. By the time I leave I'll have hundreds of hours of teaching experience behind me." },
{ name: "Rob B", rolePre: "", roleGold: "Parent to Teddy B", img: "assets/photo-tm-rob.webp",
  quote: "Free transport, real qualifications and football every day. It's given my son a genuine pathway without us having to relocate." }];


function Testimonials() {
  const PER = 3;
  const pages = Math.ceil(TESTIMONIALS.length / PER);
  const [page, setPage] = useStateP(0);
  const move = (d) => setPage((p) => (p + d + pages) % pages);
  const slice = TESTIMONIALS.slice(page * PER, page * PER + PER);
  return (
    <section className="testimonials" data-screen-label="01.4 Learners">
      <div className="container">
        <div className="tm-head"><h2>What our learners &amp; parents say</h2></div>
        <div className="tm-row-wrap">
          <button className="tm-arrow" onClick={() => move(-1)} aria-label="Previous">‹</button>
          <div className="tm-grid">
            {slice.map((t, i) =>
            <figure className="tm-card" key={page + "-" + i}>
                <div className="tm-portrait">{t.img ? <img src={t.img} alt={t.name} /> : <span className="tm-monogram">{t.name[0]}</span>}</div>
                <div className="tm-body">
                  <span className="tm-quote-mark" aria-hidden="true">“</span>
                  <blockquote>{t.quote}</blockquote>
                  <figcaption>— {t.name},{t.rolePre ? " " + t.rolePre : ""} <span className="gold">{t.roleGold}</span></figcaption>
                </div>
              </figure>
            )}
          </div>
          <button className="tm-arrow" onClick={() => move(1)} aria-label="Next">›</button>
        </div>
        <div className="tm-dots">
          {Array.from({ length: pages }).map((_, i) =>
          <button key={i} className={"tm-dot" + (i === page ? " is-active" : "")} onClick={() => setPage(i)} aria-label={"Page " + (i + 1)}></button>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// Future banner (home closing CTA)
// ============================================================
function FutureBanner() {
  return (
    <section className="future-banner-wrap" data-screen-label="01.6 Apply">
      <div className="container">
        <div className="future-banner">
          <div className="fb-photo">
            <img className="fb-photo-img" src="assets/photo-ground-aerial.webp" alt="The Holbeach United ground at Carter's Park" />
            <img className="fb-photo-crest" src="assets/logo-fea-tiger.webp" alt="" aria-hidden="true" />
          </div>
          <div className="fb-mid">
            <h3>Ready to begin?</h3>
            <p className="fb-open">Applications now open for <span className="gold">September 2027</span></p>
            <p className="fb-note">Join a specialist sports college creating life changing opportunities through elite sport, education and industry experience.</p>
            <div className="fb-actions">
              <a className="btn btn-primary" href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener">Apply Now <span className="arrow">→</span></a>
              <a className="btn fb-btn-outline" href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener">Book an Open Day <span className="arrow">→</span></a>
            </div>
          </div>
          <div className="fb-brand">
            <img className="fb-crest" src="assets/logo-fea-tiger.webp" alt="Holbeach United crest" />
            <div className="fb-tag">One Community.<br />Countless Possibilities.<br />A Future Without Limits.</div>
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// Outcomes — "Your future starts here" destinations + progression
// ============================================================
const OC_IC = {
  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>,
  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>,
  whistle: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><path d="M3 11a4 4 0 0 1 4-4h9l5-2v7a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z" /><circle cx="8.5" cy="11" r="2.1" /></svg>,
  dumbbell: <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>,
  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>,
  briefcase: <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>
};

const OUTCOMES = [
{ t: "University", d: "Progress to degree programmes across sport, business, teaching and health.", img: "assets/photo-study-whiteboard.webp", icon: OC_IC.cap },
{ t: "Professional & Semi-Pro Football", d: "Continue your playing journey within clubs across the football pyramid.", img: "assets/photo-match-header.webp", icon: OC_IC.ball },
{ t: "Teaching & Education", d: "Inspire the next generation through schools, academies and education settings.", img: "assets/photo-pe-highfive.webp", icon: OC_IC.whistle },
{ t: "Sport, Fitness & Wellbeing", d: "Careers in personal training, strength & conditioning, rehabilitation and performance.", img: "assets/photo-pt-barbell.webp", icon: OC_IC.dumbbell },
{ t: "Performance & Analysis", d: "Work behind the scenes helping athletes and teams maximise performance.", img: "assets/photo-pa-matchanalysis.webp", icon: OC_IC.chart },
{ t: "Sport Business", d: "Marketing, events, operations and leadership opportunities within the sports industry.", img: "assets/photo-sb-stadium.webp", icon: OC_IC.briefcase }];


const UNI_LOGOS = [
  { src: "assets/logo-uni-loughborough-clean.webp", alt: "Loughborough University" },
  { src: "assets/logo-uni-leedsbeckett-clean.webp", alt: "Leeds Beckett University" },
  { src: "assets/logo-uni-derby.webp", alt: "University of Derby" },
  { src: "assets/logo-uni-cardiffmet.webp", alt: "Cardiff Metropolitan University" },
  { src: "assets/logo-uni-ntu-clean.webp", alt: "Nottingham Trent University" },
  { src: "assets/logo-uni-lincoln-clean.webp", alt: "University of Lincoln" }
];

const EMP_LOGOS = [
  { src: "assets/logo-emp-snapfitness-clean.webp", alt: "Snap Fitness 24-7" },
  { src: "assets/logo-emp-activelincs.webp", alt: "Active Lincolnshire" },
  { src: "assets/logo-emp-everyoneactive.webp", alt: "Everyone Active" },
  { src: "assets/logo-emp-castle-cropped.webp", alt: "Castle Sports Centre & Swimming Pool" },
  { src: "assets/logo-emp-lincsfa.webp", alt: "Lincolnshire Football Association" },
  { src: "assets/logo-emp-holbeach.webp", alt: "Holbeach United Football & Education Academy" },
  { src: "assets/logo-emp-sportengland.webp", alt: "Sport England" }
];

const PROGRESS = [
{ label: "Leading Universities", icon: OC_IC.cap, n: 4, href: "#/university", logos: UNI_LOGOS },
{ label: "Industry & Employers", icon: OC_IC.briefcase, n: 4, href: "#/college", logos: EMP_LOGOS }];


function OutcomesSection() {
  return (
    <section className="outcomes" data-screen-label="01.2 Outcomes">
      <div className="container">
        <div className="oc-progress">
          <div className="oc-progress-head"><h3>Our learners have progressed to</h3></div>
          <div className="oc-progress-grid">
            {PROGRESS.map((g, i) =>
            <div className="oc-pg" key={i}>
                <div className="oc-pg-head">
                  <span className="oc-pg-ico" aria-hidden="true">{g.icon}</span>
                  <span>{g.label}</span>
                </div>
                <div className="oc-pg-logos">
                  {g.logos ?
                g.logos.map((l, j) => <span className="oc-logo" key={j}><img src={l.src} alt={l.alt} title={l.alt} /></span>) :
                Array.from({ length: g.n }).map((_, j) =>
                <span className="oc-logo-slot" key={j}>Logo</span>
                )}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// Choose Your Pathway — three detailed programme columns
// ============================================================
const CP_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>
};

const CP_MINI = {
  person: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="3.2" /><path d="M5.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6" /></svg>,
  cap: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" 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" /></svg>,
  briefcase: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" 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>,
  whistle: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"><path d="M3 11a4 4 0 0 1 4-4h9l5-2v7a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z" /><circle cx="8.5" cy="11" r="2" /></svg>,
  spark: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v4M12 16v4M4 12h4M16 12h4M6.3 6.3l2.8 2.8M14.9 14.9l2.8 2.8M17.7 6.3l-2.8 2.8M9.1 14.9l-2.8 2.8" /></svg>
};

const CP_CARDS = [
  {
    color: "gold",
    img: "assets/photo-cp-play.webp",
    icon: CP_IC.ball,
    kicker: "I WANT TO PLAY",
    prog: "Football Scholarship",
    desc: "For ambitious players looking to combine full-time education with an elite football development programme.",
    experience: ["Elite football coaching", "Video analysis", "National league fixtures", "Individual development plans", "Strength & conditioning", "UEFA qualified coaches", "Performance analysis", "Football coaching opportunities"],
    progression: [
      { icon: CP_MINI.person, label: "Higher-Level Football" },
      { icon: CP_MINI.cap, label: "University" },
      { icon: CP_MINI.whistle, label: "Football Coaching" },
      { icon: CP_MINI.briefcase, label: "Employment" }
    ],
    cta: "Explore Football Scholarship",
    href: "#/scholarship"
  },
  {
    color: "blue",
    img: "assets/photo-cp-work.webp",
    icon: CP_IC.cap,
    kicker: "I WANT TO WORK IN SPORT",
    prog: "Sports Industry Internships",
    desc: "For learners looking to gain practical experience whilst studying.",
    chooseFrom: ["PE Teaching", "Football Coaching", "Sports Massage", "Performance Analysis", "Personal Training"],
    experience: ["Real-world placements", "Employer engagement", "Industry mentors", "Career development", "Practical qualifications"],
    progression: [
      { icon: CP_MINI.cap, label: "University" },
      { icon: CP_MINI.briefcase, label: "Employment" },
      { icon: CP_MINI.spark, label: "Apprenticeships" }
    ],
    cta: "Explore Sports Industry Internships",
    href: "#/internships"
  },
  {
    color: "green",
    img: "assets/photo-cp-run.webp",
    icon: CP_IC.chart,
    kicker: "I WANT TO RUN SPORT",
    prog: "Sport Business Studies",
    desc: "For future leaders, entrepreneurs and professionals within the sports industry.",
    experience: ["Marketing", "Business Development", "Events", "Commercial Operations", "Leadership", "Industry Projects"],
    progression: [
      { icon: CP_MINI.cap, label: "University" },
      { icon: CP_MINI.briefcase, label: "Sport Industry Careers" },
      { icon: CP_MINI.spark, label: "Entrepreneurship" }
    ],
    cta: "Explore Sports Business",
    href: "#/run-sport"
  }
];

function ChoosePathway() {
  return (
    <section className="choose" data-screen-label="01.1 Pathway" id="programmes">
      <div className="container">
        <div className="choose-head"><h2>Choose your pathway</h2></div>
        <div className="choose-grid">
          {CP_CARDS.map((c, i) => (
            <article className={"cp-card cp-" + c.color} key={i}>
              <div className="cp-media">
                <img src={c.img} alt="" />
              </div>
              <span className="cp-ico" aria-hidden="true">{c.icon}</span>
              <div className="cp-body">
                <h3 className="cp-kicker">{c.kicker}</h3>
                <div className="cp-prog">{c.prog}</div>
                <p className="cp-desc">{c.desc}</p>

                {c.chooseFrom && (
                  <>
                    <div className="cp-label cp-label-choose">Choose from:</div>
                    <ul className="cp-choose">
                      {c.chooseFrom.map((x, j) => (
                        <li key={j}><span className="cp-mini" aria-hidden="true">{CP_MINI.person}</span>{x}</li>
                      ))}
                    </ul>
                  </>
                )}

                <div className="cp-label cp-label-exp">What you'll experience:</div>
                <ul className="cp-checks">
                  {c.experience.map((x, j) => (
                    <li key={j}><span className="cp-tick" aria-hidden="true">✓</span>{x}</li>
                  ))}
                </ul>

                <div className="cp-label cp-label-prog">Progression to:</div>
                <div className="cp-prog-row">
                  {c.progression.map((p, j) => (
                    <div className="cp-prog-item" key={j}>
                      <span className="cp-prog-ico" aria-hidden="true">{p.icon}</span>
                      <span className="cp-prog-lbl">{p.label}</span>
                    </div>
                  ))}
                </div>
              </div>
              <a className="cp-cta" href={c.href}>
                {c.cta}
                <span className="arrow" aria-hidden="true">→</span>
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Home — hub with six doorways
// ============================================================
// ============================================================
// NEW HOME PAGE — "A future without limits"
// ============================================================
const NH_FEATURES = [
  {
    t: "Educate", d: "Gain knowledge. Build skills.",
    icon: <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>
  },
  {
    t: "Compete", d: "Play at your best. Raise your level.",
    icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 8.6l3.23 2.35-1.23 3.8h-4l-1.23-3.8z" fill="currentColor" stroke="currentColor" /><path d="M12 8.6V3.2M15.23 10.95l5.14-1.67M13.99 14.75l3.18 4.37M10.01 14.75l-3.18 4.37M8.77 10.95L3.63 9.28" /></svg>
  },
  {
    t: "Succeed", d: "Achieve your goals. Build your future.",
    icon: <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>
  }
];

const NH_COLLAGE = [
  "assets/photo-fc-touchline.webp",
  "assets/photo-study-whiteboard.webp",
  "assets/photo-massage-clinic.webp",
  "assets/photo-pa-matchanalysis.webp",
  "assets/photo-signing.webp",
  "assets/photo-fc-goal.webp"
];

const NH_STATS = [
  { num: "120+", label: "Learners Supported", desc: "Across all pathways.",
    icon: <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> },
  { num: "100%", label: "Pass Rate", desc: "Since our foundation.",
    icon: <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> },
  { num: "100%", label: "Progression Rate", desc: "To positive destinations.",
    icon: <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> },
  { num: "7", label: "Specialist Pathways", desc: "Endless opportunities.",
    icon: <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> }
];

const NH_CARDS = [
  { key: "study", kicker: "Study", sub: "College Programmes", img: "assets/photo-home-study.webp",
    desc: "BTEC Level 3 qualifications in sport. Expert teaching. Individual support. Your foundation for success.",
    cta: "Explore College", href: "#/college",
    icon: <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> },
  { key: "progress", kicker: "Progress", sub: "University Pathways", img: "assets/photo-home-progress.webp",
    desc: "HNC, HND & BSc (Hons) in Sports Coaching. Study in partnership with the University of Northampton.",
    cta: "Explore University", href: "#/university",
    icon: <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> },
  { key: "play", kicker: "Play", sub: "Football Scholarship Programme", img: "assets/photo-home-play.webp",
    desc: "Elite football programme, recognised qualifications and a pathway designed to help you maximise your potential on and off the pitch.",
    cta: "Explore Scholarship", href: "#/scholarship",
    icon: <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> },
  { key: "compete", kicker: "Compete", sub: "First Team Football", img: "assets/photo-home-compete.webp",
    desc: "Step 6 Men's Football. Be part of the journey. Live the experience.",
    cta: "Explore Competition", href: "#/compete",
    icon: <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> },
  { key: "jpl", kicker: "JPL Football Academy", sub: "Feeder Programme", img: "assets/photo-home-jpl.webp", wide: true, chip: "U12 – U16",
    desc: "Our JPL Academy develops young players by competing against the best. Graduates gain direct progression into our College Scholarship Programme after U16s — your pathway to football and education.",
    cta: "Explore Academy", href: "#/jpl",
    icon: <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> }
];

function HomePage({ sections }) {
  return (
    <div data-screen-label="01 Home">
      <section className="nh-hero" data-screen-label="Home Hero">
        <div className="nh-headerimg" aria-hidden="true">
          <img src="assets/photo-home-hero.webp" alt="" />
          <div className="nh-collage-shade"></div>
        </div>
        <div className="container nh-hero-body">
          <div className="nh-hero-main">
            <div className="nh-eyebrow">More than sport. <span className="gold">More than education.</span></div>
            <h1 className="nh-title">
              <span className="line">A Future</span>
              <span className="line accent">Without Limits.</span>
            </h1>
            <p className="nh-sub">
              Holbeach United FEA is a specialist sports college and university pathway provider, combining education, elite football and real-world experience to help you achieve your ambitions.
            </p>
            <div className="nh-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="#/about" className="btn btn-ghost">About Us</a>
            </div>
            <a className="nh-ofsted" href="https://reports.ofsted.gov.uk" target="_blank" rel="noopener">
              <img src="assets/ofsted-good.webp" alt="Ofsted Good Provider" />
              <span>Rated <strong>Good</strong> by Ofsted</span>
            </a>
          </div>
          <div className="nh-features">
            {NH_FEATURES.map((f, i) => (
              <div className="nh-feature" key={i}>
                <span className="nh-feature-ico" aria-hidden="true">{f.icon}</span>
                <div>
                  <h4>{f.t}</h4>
                  <p>{f.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="container nh-statsbar">
          <div className="nh-statsbar-head">Trusted by learners since 2021</div>
          <div className="nh-statsbar-grid">
            {NH_STATS.map((s, i) => (
              <div className="nh-stat" key={i}>
                <span className="nh-stat-ico" aria-hidden="true">{s.icon}</span>
                <div>
                  <div className="nh-stat-num">{s.num}</div>
                  <div className="nh-stat-lbl">{s.label}</div>
                  <div className="nh-stat-desc">{s.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="nh-future" data-screen-label="Choose Your Future">
        <div className="container">
          <div className="nh-future-head"><h2>Choose your future.</h2></div>
          <p className="nh-future-sub">Whether you want to study, play, coach, teach, analyse, lead or compete, we have a pathway designed for you.</p>
          <div className="nh-future-grid">
            {NH_CARDS.map((c) => (
              <a className={"nh-fcard" + (c.wide ? " nh-fcard-wide" : "")} key={c.key} href={c.href}>
                <div className="nh-fcard-media"><img src={c.img} alt="" /><span className="nh-fcard-scrim" aria-hidden="true"></span></div>
                <span className="nh-fcard-ico" aria-hidden="true">{c.icon}</span>
                <div className="nh-fcard-body">
                  <h3>{c.kicker}</h3>
                  <div className="nh-fcard-sub">{c.sub}{c.chip && <span className="nh-fcard-chip">{c.chip}</span>}</div>
                  <p>{c.desc}</p>
                  <span className="nh-fcard-cta">{c.cta} <span className="arrow">→</span></span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="nh-banner-wrap" data-screen-label="More Than Sport">
        <div className="container">
          <div className="nh-banner">
            <div className="nh-banner-tag">
              <span>More Than Sport.</span>
              <span>More Than Education.</span>
              <span className="gold">A Future Without Limits.</span>
            </div>
            <div className="nh-banner-mid">
              <div className="nh-banner-kicker">Ready to take the next step?</div>
              <p>Join a community of ambitious young people creating opportunities through sport, education and industry experience.</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 an Open Day <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>
  );
}

// ============================================================
// College landing (formerly the home page) — rendered at #/college
// ============================================================
function CollegeLanding({ sections }) {
  return (
    <div data-screen-label="College">
      <section className="home-hero">
        <div className="home-hero-photo" aria-hidden="true">
          <img src="assets/photo-college-hero.webp" alt="" />
        </div>
        <div className="container home-hero-inner">
          <div className="home-hero-text">
          <h1 className="home-hero-title">
            <span className="line">Study.</span>
            <span className="line">Develop</span>
            <span className="line accent">Succeed.</span>
          </h1>
          <div className="home-hero-eyebrow">Specialist Sports College</div>
          <p className="home-hero-sub">
            At Holbeach United FEA, every learner follows a specialist sports college programme designed to combine education, industry experience, and personal development.
          </p>

          <div className="hero-actions">
            <a href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener" className="btn btn-primary">Register Your Interest</a>
            <a href="https://forms.gle/qh6Hcq5eaNH94kZ67" target="_blank" rel="noopener" className="btn btn-ghost">Request a Prospectus</a>
          </div>
          </div>
        </div>
        <div className="home-hero-cut" aria-hidden="true"></div>
      </section>

      <HeroStats />

      <ChoosePathway />

      <Testimonials />

      <OutcomesSection />

      <FutureBanner />
    </div>);

}

// ============================================================
// Section landing (e.g. /college, /pdp-select)
// ============================================================
function SectionPage({ section }) {
  return (
    <div data-screen-label={`${section.num} ${section.label}`} style={{ ["--accent"]: section.accent, ["--accent-ink"]: section.accentInk }}>
      <IdStrip section={section} />
      <SubNav section={section} />
      <Hero
        eyebrowNum={`${section.num} / 06`}
        eyebrowLabel={section.label.toUpperCase() + (section.sub ? " · " + section.sub.toUpperCase() : "")}
        title={section.tagline.split(".")[0]}
        titleAccent={section.tagline.split(".")[1] ? section.tagline.split(".").slice(1).join(".").trim() + (section.tagline.endsWith(".") ? "" : "") : ""}
        sub={section.lede}
        image={section.image}
        imageFit={section.imageFit}
        brief={section.heroBrief}
        stats={section.stats}
        primaryCta={{ label: "Apply / Register", href: "https://forms.gle/qhQPuDfyevaFHpQW7" }}
        secondaryCta={section.pages.length ? { label: "View programmes", href: "#programmes-" + section.id } : null} />
      

      {section.pillars &&
      <section className="block tight">
          <div className="container">
            <div className="pillars">
              {section.pillars.map((p, i) =>
            <div className="pillar" key={i}>
                  <h3>{p.t}</h3>
                  <p>{p.d}</p>
                </div>
            )}
            </div>
          </div>
        </section>
      }

      {section.pages.length > 0 &&
      <section className="block" id={"programmes-" + section.id}>
          <div className="container">
            <div className="section-head">
              <h2>Programmes in {section.label}.</h2>
              <p className="lede">Pick the route that fits. Internships can be combined with the Football Scholarship where relevant.</p>
            </div>
            <div className="subpages">
              {section.pages.map((p, i) =>
            <SubCard key={p.id} section={section} page={p} idx={i} />
            )}
            </div>
          </div>
        </section>
      }

      {(() => {
        const imgs = [];
        if (section.image) imgs.push(section.image);
        (section.gallery || []).forEach((g) => {const s = g.src || g;if (imgs.indexOf(s) < 0) imgs.push(s);});
        section.pages.forEach((p) => {if (p.image && p.imageFit !== "cutout" && imgs.indexOf(p.image) < 0) imgs.push(p.image);});
        const pick = imgs.slice(0, 3);
        if (pick.length < 2) return null;
        return (
          <section className="block tight">
            <div className="container">
              <div className="section-head">
                <h2>On the ground.</h2>
                <p className="lede">Every {section.label} student trains, studies and competes from Highbury Drive, Holbeach — alongside the Holbeach United first team.</p>
              </div>
              <div className="photo-row">
                {pick.map((src, i) =>
                <div className={"photo-cell" + (i === 0 ? " lead" : "")} key={i}>
                    <img src={src} alt="" />
                  </div>
                )}
              </div>
            </div>
          </section>);

      })()}

      <CtaStrip
        heading={`Ready to join ${section.label}?`}
        body="Register interest, book a trial day or request the full prospectus. We'll come back to you within two working days."
        primary={{ label: "Register interest", href: "https://forms.gle/qhQPuDfyevaFHpQW7" }}
        secondary={{ label: "Enquire now", href: "#/contact" }} />
      
    </div>);

}

// ============================================================
// Sub-page (e.g. /college/football-academy)
// ============================================================
function SubPage({ section, page, idx }) {
  return (
    <div data-screen-label={`${section.num}.${idx + 1} ${page.label}`} style={{ ["--accent"]: section.accent, ["--accent-ink"]: section.accentInk }}>
      <IdStrip section={section} />
      <SubNav section={section} currentPageId={page.id} />

      <header className="page-header">
        <div className="container">
          <div className="crumbs">
            <a href="#/">FEA</a>
            <span className="sep">/</span>
            <a href={"#/" + section.id}>{section.label}</a>
            <span className="sep">/</span>
            <span className="here">{page.label}</span>
          </div>
          <div className="page-header-row">
            <h1>{page.label}</h1>
            <p className="lede">{page.tagline}</p>
          </div>
        </div>
      </header>

      <section style={{ borderTop: "1px solid var(--line-soft)", padding: "40px 0 0" }}>
        <div className="container">
          {page.gallery ?
          <div className="facility-grid">
              {page.gallery.map((g, i) =>
            <figure className="facility-cell" key={i}>
                  <img src={g.src} alt={g.cap} />
                  <figcaption>{g.cap}</figcaption>
                </figure>
            )}
            </div> :
          page.image ?
          <div className={"subpage-hero" + (page.imageFit === "cutout" ? " is-cutout" : "")}>
              <img src={page.image} alt="" />
            </div> :

          <Placeholder brief={page.heroBrief} aspect="21/9" tag="HERO" />
          }
        </div>
      </section>

      <section className="container">
        <div className="subpage-body">
          <div>
            <span className="eyebrow"><span className="num">/ 01</span>Overview</span>
            <h2 style={{ marginTop: 16 }}>{page.tagline}</h2>
            <p>{page.lede}</p>
            <p style={{ marginTop: 16 }}>
              All FEA programmes are delivered from Highbury Drive, Holbeach, in professional facilities shared with the Holbeach United first team. Internships can be combined with the Football Scholarship, and daily transport routes run across the region.
            </p>
          </div>
          <div>
            <span className="eyebrow"><span className="num">/ 02</span>What's included</span>
            <ul className="checks">
              {page.bullets.map((b, i) => <li key={i}>{b}</li>)}
            </ul>
          </div>
        </div>
      </section>

      <section className="block tight" style={{ borderTop: "1px solid var(--line-soft)" }}>
        <div className="container">
          <div className="section-head">
            <h2>Continue inside {section.label}.</h2>
            <p className="lede">Related programmes you can combine, or pivot to.</p>
          </div>
          <div className="subpages">
            {section.pages.filter((p) => p.id !== page.id).slice(0, 4).map((p, i) =>
            <SubCard key={p.id} section={section} page={p} idx={i} />
            )}
          </div>
        </div>
      </section>

      <CtaStrip
        heading={`Apply for ${page.label}.`}
        body="Tell us your year group, current school and what you want to leave with — we'll route you to the right programme lead."
        primary={{ label: "Register interest", href: "https://forms.gle/qhQPuDfyevaFHpQW7" }}
        secondary={{ label: "Explore Courses", href: "#/brochure" }} />
      
    </div>);

}

// ============================================================
// Apply page
// ============================================================
function ApplyPage({ sections, prefillSection, prefillPage }) {
  const [submitted, setSubmitted] = useStateP(false);
  return (
    <div data-screen-label="Apply">
      <header className="page-header">
        <div className="container">
          <div className="crumbs">
            <a href="#/">FEA</a>
            <span className="sep">/</span>
            <span className="here">Apply / Register Interest</span>
          </div>
          <div className="page-header-row">
            <h1>One form.<br />Every pathway.</h1>
            <p className="lede">Tell us where you are in your journey — your year group, what you're hoping to do, and how we can get in touch. The relevant programme lead will respond within two working days.</p>
          </div>
        </div>
      </header>

      <section className="container" style={{ padding: "56px 0 96px" }}>
        {submitted ?
        <div className="apply-success">
            <h3>Got it. Cheers.</h3>
            <p style={{ color: "var(--ink-soft)" }}>Your enquiry has been routed to the right pathway lead. We'll email you within two working days. In the meantime, the prospectus PDF will be in your inbox shortly.</p>
            <div style={{ marginTop: 24, display: "flex", gap: 12 }}>
              <a href="#/" className="btn btn-ghost">Back to home</a>
              <button className="btn btn-primary" onClick={() => setSubmitted(false)}>Submit another</button>
            </div>
          </div> :

        <form className="apply-form" onSubmit={(e) => {e.preventDefault();setSubmitted(true);}}>
            <div className="field">
              <label htmlFor="first">First name</label>
              <input id="first" type="text" required defaultValue="" />
            </div>
            <div className="field">
              <label htmlFor="last">Last name</label>
              <input id="last" type="text" required />
            </div>
            <div className="field">
              <label htmlFor="dob">Date of birth</label>
              <input id="dob" type="date" />
            </div>
            <div className="field">
              <label htmlFor="phone">Phone</label>
              <input id="phone" type="tel" placeholder="07…" />
            </div>
            <div className="field full">
              <label htmlFor="email">Email</label>
              <input id="email" type="email" required placeholder="you@example.com" />
            </div>
            <div className="field">
              <label htmlFor="section">Pathway</label>
              <select id="section" defaultValue={prefillSection || ""}>
                <option value="">Choose a pathway…</option>
                {sections.map((s) =>
              <option key={s.id} value={s.id}>{s.label}</option>
              )}
              </select>
            </div>
            <div className="field">
              <label htmlFor="year">Current year group</label>
              <select id="year" defaultValue="">
                <option value="">Year group…</option>
                {["Yr 3", "Yr 4", "Yr 5", "Yr 6", "Yr 7", "Yr 8", "Yr 9", "Yr 10", "Yr 11", "Yr 12", "Yr 13", "Adult"].map((y) =>
              <option key={y}>{y}</option>
              )}
              </select>
            </div>
            <div className="field full">
              <label htmlFor="notes">Anything we should know?</label>
              <textarea id="notes" placeholder="Current club, school, position, ambitions…" />
            </div>
            <div className="submit-row">
              <button type="submit" className="btn btn-primary">Send enquiry <span className="arrow">→</span></button>
            </div>
          </form>
        }
      </section>
    </div>);

}

// ============================================================
// About page
// ============================================================
function AboutPage({ sections }) {
  return (
    <div data-screen-label="About">
      <Hero
        eyebrowNum="ABOUT"
        eyebrowLabel="FEA Sports Group · Holbeach United FEA"
        title="The club came first."
        titleAccent="Everything else followed."
        sub="FEA Sports Group is built around Holbeach United Football Club. The Football Scholarship, the internships, the JPL academy and the junior pathways all grew out of one ground in south Lincolnshire — and they're all still delivered from it."
        image="assets/photo-signing.webp"
        stats={[
        { k: "Holbeach", v: "south Lincolnshire" },
        { k: "16–19", v: "post-16 scholarship & internships" },
        { k: "6", v: "active programmes" }]
        }
        primaryCta={{ label: "Programmes", href: "#/" }}
        secondaryCta={{ label: "Visit us", href: "#/contact" }} />
      
      <section className="block">
        <div className="container">
          <div className="section-head">
            <h2>Why parents and players choose FEA.</h2>
            <p className="lede">A structured, professional environment that balances education and football — with daily mentoring, a positive culture and real progression routes into university, apprenticeships and work.</p>
          </div>
          <div className="pillars">
            <div className="pillar"><h3>Education first</h3><p>Every programme is built on a Level 3 qualification worth up to 168 UCAS points — the equivalent of three A-Levels. Football and industry experience wrap around the education, never the other way round.</p></div>
            <div className="pillar"><h3>Real experience</h3><p>Interns work every week with academy players and the Holbeach United first team. You leave with hundreds of logged hours and an industry qualification, not just a certificate.</p></div>
            <div className="pillar"><h3>Professional environment</h3><p>3G and grass pitches, an S&amp;C performance lab, an analysis theatre and a sports therapy clinic — students share professional facilities with a semi-professional club.</p></div>
          </div>
        </div>
      </section>
      <OpenEvenings />
      <CtaStrip
        heading="Start your journey."
        body="Register your interest and the right pathway lead will be in touch. Limited places for the September 2027 intake."
        primary={{ label: "Apply / Register", href: "https://forms.gle/qhQPuDfyevaFHpQW7" }}
        secondary={{ label: "Contact us", href: "#/contact" }} />
      
    </div>);

}

// ============================================================
// Contact page
// ============================================================
function ContactPage() {
  const C = window.FEA_DATA.CONTACT;
  return (
    <div data-screen-label="Contact">
      <header className="page-header">
        <div className="container">
          <div className="crumbs">
            <a href="#/">FEA</a><span className="sep">/</span><span className="here">Contact</span>
          </div>
          <div className="page-header-row">
            <h1>Highbury Drive.<br />Holbeach.<br />PE12 7PR.</h1>
            <p className="lede">Holbeach United FEA is based at Highbury Drive, Holbeach. Visitors are welcome — call or email ahead to arrange a tour, or book onto one of our open evenings.</p>
          </div>
        </div>
      </header>
      <section className="container" style={{ padding: "56px 0 96px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }}>
          <div className="subpage-hero">
            <img src="assets/academy-sign-wall.webp" alt="Holbeach United FEA academy signage at Highbury Drive" />
          </div>
          <div>
            <span className="eyebrow eyebrow-gold">Directors</span>
            {C.directors.map((d, i) => (
              <p style={{ fontSize: 17, marginTop: 12, lineHeight: 1.7 }} key={i}>
                <strong>{d.name}</strong><br />
                <a href={"mailto:" + d.email}>{d.email}</a><br />
                <a href={"tel:" + d.phone.replace(/\s/g, "")}>{d.phone}</a>
              </p>
            ))}
            <p style={{ fontSize: 17, marginTop: 12, lineHeight: 1.7 }}>
              <a href={C.webHref} target="_blank" rel="noreferrer">{C.web}</a><br />
              {C.instagram}
            </p>
            <div style={{ height: 24 }}></div>
            <span className="eyebrow eyebrow-gold">Find us</span>
            <p style={{ fontSize: 17, marginTop: 12, color: "var(--ink-soft)" }}>
              {C.addressLines.map((l, i) => <span key={i}>{l}<br /></span>)}
            </p>
            <div style={{ height: 24 }}></div>
            <span className="eyebrow eyebrow-gold">Open evenings · {C.intake}</span>
            <p style={{ fontSize: 17, marginTop: 12, color: "var(--ink-soft)" }}>
              {C.openEvenings.map((e, i) => <span key={i}>{e.day} · {e.time}<br /></span>)}
            </p>
            <div style={{ height: 28 }}></div>
            <a href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener" className="btn btn-primary">Apply / Register <span className="arrow">→</span></a>
          </div>
        </div>
      </section>
    </div>);

}

// ============================================================
// 404
// ============================================================
function NotFoundPage() {
  return (
    <div data-screen-label="404" style={{ padding: "120px 0" }}>
      <div className="container">
        <span className="eyebrow"><span className="num">404</span>Off the pitch</span>
        <h1 className="display" style={{ fontSize: 96, marginTop: 16 }}>Page not found.</h1>
        <p className="lede" style={{ maxWidth: "50ch", marginTop: 12 }}>The URL you've hit doesn't exist on the FEA site. Head back to the homepage or pick a pathway from the nav.</p>
        <div style={{ marginTop: 32 }}><a href="#/" className="btn btn-primary">Back home <span className="arrow">→</span></a></div>
      </div>
    </div>);

}

// ============================================================
// Brochure page — capture contact details, then offer the download
// ============================================================
function BrochurePage({ sections, prefillSection }) {
  const [submitted, setSubmitted] = useStateP(false);
  return (
    <div data-screen-label="Brochure">
      <header className="page-header">
        <div className="container">
          <div className="crumbs">
            <a href="#/">FEA</a><span className="sep">/</span><span className="here">Explore Courses</span>
          </div>
          <div className="page-header-row">
            <h1>Explore the courses.<br />Get the brochure.</h1>
            <p className="lede">Leave your details and we'll send the full FEA Sports Group prospectus straight to your inbox — every pathway, qualification and open evening. You can download it on the spot too.</p>
          </div>
        </div>
      </header>

      <section className="container" style={{ padding: "56px 0 96px" }}>
        {submitted ?
        <div className="apply-success">
            <h3>Your brochure is ready.</h3>
            <p style={{ color: "var(--ink-soft)" }}>Thanks — a copy is on its way to your inbox. You can also download it right now.</p>
            <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="assets/FEA-Prospectus.pdf" target="_blank" rel="noreferrer" className="btn btn-primary">Download brochure (PDF) <span className="arrow">↓</span></a>
              <a href="#/" className="btn btn-ghost">Back to home</a>
            </div>
          </div> :

        <form className="apply-form" onSubmit={(e) => {e.preventDefault();setSubmitted(true);}}>
            <div className="field">
              <label htmlFor="bfirst">First name</label>
              <input id="bfirst" type="text" required />
            </div>
            <div className="field">
              <label htmlFor="blast">Last name</label>
              <input id="blast" type="text" required />
            </div>
            <div className="field full">
              <label htmlFor="bemail">Email</label>
              <input id="bemail" type="email" required placeholder="you@example.com" />
            </div>
            <div className="field">
              <label htmlFor="bphone">Phone</label>
              <input id="bphone" type="tel" placeholder="07…" />
            </div>
            <div className="field">
              <label htmlFor="bsection">Course of interest</label>
              <select id="bsection" defaultValue={prefillSection || ""}>
                <option value="">Choose a pathway…</option>
                {sections.map((s) =>
              <option key={s.id} value={s.id}>{s.label}</option>
              )}
              </select>
            </div>
            <div className="submit-row">
              <button type="submit" className="btn btn-primary">Get the brochure <span className="arrow">→</span></button>
            </div>
          </form>
        }
      </section>
    </div>);

}

Object.assign(window, { HomePage, CollegeLanding, SectionPage, SubPage, ApplyPage, ContactPage, BrochurePage, NotFoundPage });