/* global React */
// About page — "Our Story" copy supplied by client (July 2026).

const AB_GOLD = "#F5B400";

const AB_PATHWAYS = ["PE Teaching", "Football Coaching", "Sports Massage & Physical Therapy", "Personal Training & Fitness", "Performance Analysis", "Sport Business", "Future Educator Academy"];

const AB_FOUNDERS = [
  {
    img: "assets/photo-founder-dan.webp",
    name: "Dan Lester",
    role: "Co-Founder & Director · Head of Education",
    bio: [
      "Dan is a qualified teacher, university lecturer and educational leader with a Master's degree in Sport Psychology. He has worked across schools, colleges, PRUs and SEMH settings in roles including PE Teacher, Curriculum Lead and Senior Leader.",
      "Alongside his teaching career, Dan competed at a high level in football, playing up from Welsh Division 2 to the Welsh Premier League with Cardiff Metropolitan FC. His experience gives him a deep understanding of both the academic and athletic journeys young people take."
    ]
  },
  {
    img: "assets/photo-founder-callum.webp",
    name: "Callum Lawe",
    role: "Co-Founder & Director · Head of Football",
    bio: [
      "Callum is a UEFA A Licensed Coach with a strong background in both football and education. He began his playing journey as a scholar within professional academies, including Nottingham Forest, Lincoln City, Peterborough United and Boston United, before building an impressive coaching career across professional clubs such as Nottingham Forest, Lincoln City, Doncaster Rovers and Boston United.",
      "In education, he has held leadership and behaviour management roles across mainstream and specialist settings, supporting young people from a wide range of backgrounds."
    ]
  }
];

const AB_FACILITIES = [
  { src: "assets/facility-academy-front.webp", cap: "The academy — Highbury Drive" },
  { src: "assets/facility-pitches.webp", cap: "3G & grass pitches" },
  { src: "assets/facility-fifa-1.webp", cap: "FIFA-approved 3G surface" },
  { src: "assets/facility-fifa-2.webp", cap: "FIFA-approved 3G surface" },
  { src: "assets/facility-dugouts.webp", cap: "Pitchside dugouts" },
  { src: "assets/facility-gym-1.webp", cap: "Strength & conditioning gym" },
  { src: "assets/facility-gym-2.webp", cap: "Strength & conditioning gym" },
  { src: "assets/facility-gym-3.webp", cap: "Strength & conditioning gym" },
  { src: "assets/facility-gym-4.webp", cap: "Strength & conditioning gym" },
  { src: "assets/facility-gym-5.webp", cap: "Strength & conditioning gym" },
  { src: "assets/facility-spin.webp", cap: "Spin room" },
  { src: "assets/facility-sledge-hall.webp", cap: "Sledge push/pull hall" },
  { src: "assets/facility-massage.webp", cap: "Sports massage room" },
  { src: "assets/facility-massage-teaching.webp", cap: "Sports massage teaching room" },
  { src: "assets/facility-changing.webp", cap: "First-team changing room" },
  { src: "assets/facility-corridor.webp", cap: "The players' tunnel" },
  { src: "assets/facility-analysis-1.webp", cap: "Performance analysis room" },
  { src: "assets/facility-analysis-2.webp", cap: "Performance analysis room" },
  { src: "assets/facility-classroom-1.webp", cap: "BTEC classroom" },
  { src: "assets/facility-classroom-2.webp", cap: "BTEC classroom" },
  { src: "assets/facility-common-1.webp", cap: "Learner common room" },
  { src: "assets/facility-common-2.webp", cap: "Learner common room" },
  { src: "assets/facility-common-3.webp", cap: "Learner common room" },
  { src: "assets/facility-common-4.webp", cap: "Learner common room" },
  { src: "assets/facility-darts.webp", cap: "Common room games & darts" },
  { src: "assets/facility-academy-side.webp", cap: "The academy campus" },
  { src: "assets/facility-academy-back.webp", cap: "The academy campus" }
];

function FacilitySlideshow() {
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const n = AB_FACILITIES.length;
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setI((v) => (v + 1) % n), 4500);
    return () => clearInterval(t);
  }, [paused, n]);
  const go = (d) => { setPaused(true); setI((v) => (v + d + n) % n); };
  return (
    <div className="ab-slides" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="ab-slides-track">
        {AB_FACILITIES.map((s, j) => (
          <img src={s.src} alt={s.cap} key={j} className={j === i ? "on" : ""} loading="lazy" />
        ))}
        <button type="button" className="ab-slides-btn prev" aria-label="Previous photo" onClick={() => go(-1)}>‹</button>
        <button type="button" className="ab-slides-btn next" aria-label="Next photo" onClick={() => go(1)}>›</button>
        <div className="ab-slides-cap">{AB_FACILITIES[i].cap}<span className="ab-slides-count">{i + 1} / {n}</span></div>
      </div>
      <div className="ab-slides-dots" role="tablist">
        {AB_FACILITIES.map((s, j) => (
          <button type="button" key={j} className={j === i ? "on" : ""} aria-label={"Photo " + (j + 1)} onClick={() => { setPaused(true); setI(j); }}></button>
        ))}
      </div>
    </div>
  );
}

function AboutPage() {
  return (
    <div className="ab" data-screen-label="About" style={{ ["--accent"]: AB_GOLD }}>

      {/* ---------- Hero: Meet the Founders ---------- */}
      <section className="ab-hero" data-screen-label="About Hero">
        <div className="ab-hero-bg" aria-hidden="true">
          <img src="assets/photo-ground-aerial.webp" alt="" />
        </div>
        <div className="container ab-hero-inner">
          <div className="ab-hero-text">
            <span className="eyebrow">About us</span>
            <h1 className="display ab-hero-title">Meet the<br /><span className="gold">Founders</span></h1>
            <p className="ab-hero-sub">Built by educators. Driven by football.<br />Focused on changing lives.</p>
            <div className="ab-hero-actions">
              <a href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener" className="btn btn-primary">Apply Now <span className="arrow">→</span></a>
              <a href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener" className="btn btn-ghost">Book a Visit</a>
            </div>
          </div>
          <div className="ab-hero-media">
            <img src="assets/photo-founders-mural.webp" alt="Founders Dan Lester and Callum Lawe in front of the tiger mural" />
          </div>
        </div>
      </section>

      {/* ---------- Our story ---------- */}
      <section className="ab-block ab-story" data-screen-label="About Story">
        <div className="container ab-story-inner">
          <span className="eyebrow">Our story</span>
          <h2 className="ab-h2">Built on <span className="gold">a simple belief</span></h2>
          <p>Holbeach United FEA was built on a simple belief: education should prepare young people for real life, while allowing them to pursue their passion for sport.</p>
          <p>We began as a football scholarship programme, giving aspiring players the opportunity to combine full-time football with further education. From day one, our focus was clear — to create an environment where learners could develop as athletes, achieve academically, and build a future both inside and beyond the game.</p>
          <p>As our experience grew, so did our understanding. Not every learner wants the same outcome. Some aim to play professionally, while others are passionate about careers in coaching, teaching, fitness, therapy, or the wider sports industry. Instead of offering a one-size-fits-all approach, we chose to build something more flexible and meaningful.</p>
          <p>Today, Holbeach United FEA has evolved into both a Football Academy and a Sports College, offering a range of specialist pathways tailored to each individual. Alongside our Football Scholarship Programme, learners can explore pathways in:</p>
          <div className="ab-story-chips">
            {AB_PATHWAYS.map((p, i) => <span className="ab-chip" key={i}>{p}</span>)}
          </div>
          <p>Every pathway combines nationally recognised qualifications, real work experience, and clear progression routes into employment, apprenticeships, university, or professional sport.</p>
        </div>
      </section>

      {/* ---------- More than just football ---------- */}
      <section className="ab-block ab-purpose" data-screen-label="About More Than Football">
        <div className="container ab-purpose-grid">
          <div className="ab-purpose-lead">
            <span className="eyebrow">More than just football</span>
            <h2 className="ab-h2">Develop the athlete.<br />Educate the person.<br />Build <span className="gold">the future.</span></h2>
          </div>
          <div className="ab-purpose-text">
            <p>Our vision has always extended beyond the pitch. We believe education should be practical, relevant, and directly connected to real careers.</p>
            <p>That's why our programmes blend classroom learning with industry qualifications, professional placements, leadership development, and hands-on experiences.</p>
            <p className="ab-goal">Our goal is simple: develop the athlete, educate the person, and build the future.</p>
          </div>
        </div>
      </section>

      {/* ---------- Meet the founders ---------- */}
      <section className="ab-block" data-screen-label="About Founders">
        <div className="container">
          <div className="ab-head"><h2>Meet the founders</h2></div>
          <div className="ab-founders">
            {AB_FOUNDERS.map((f, i) => (
              <article className="ab-founder" key={i}>
                <div className="ab-founder-media">
                  <img src={f.img} alt={f.name} />
                </div>
                <div className="ab-founder-body">
                  <h3>{f.name}</h3>
                  <div className="ab-founder-role">{f.role}</div>
                  <div className="ab-founder-bio">
                    {f.bio.map((p, j) => <p key={j}>{p}</p>)}
                  </div>
                </div>
              </article>
            ))}
          </div>
          <p className="ab-founders-note">Together, their combined expertise in education, leadership, and elite sport has shaped an environment that is ambitious, supportive, and centred around each individual learner.</p>
        </div>
      </section>

      {/* ---------- Facilities slideshow ---------- */}
      <section className="ab-block ab-facilities" data-screen-label="About Facilities">
        <div className="container">
          <div className="ab-head"><h2>Our campus &amp; facilities</h2></div>
          <FacilitySlideshow />
        </div>
      </section>

      {/* ---------- What makes us different ---------- */}
      <section className="ab-block ab-diff" data-screen-label="About Different">
        <div className="container ab-diff-grid">
          <div className="ab-diff-list">
            <div className="ab-head ab-head-left"><h2>What makes us different</h2></div>
            <p>What truly sets Holbeach United FEA apart isn't just our courses or facilities — it's our people.</p>
            <p>Every decision we make is driven by a commitment to help learners grow in confidence, develop strong character, and access real opportunities for their future. We understand the challenges young people face because we've spent our careers helping them overcome them.</p>
            <p>We're proud of how far we've come, but even more excited about what lies ahead. Our mission remains the same as it was on day one: to give every learner the best possible experience, along with the support, opportunities, and belief they need to succeed in life.</p>
            <div className="ab-sign">
              <div className="ab-sign-name">Dan Lester &amp; Callum Lawe</div>
              <div className="ab-sign-role">Co-Founders, Holbeach United Football &amp; Education Academy</div>
            </div>
          </div>
          <div className="ab-diff-media">
            <img src="assets/photo-squad-full.webp" alt="The full FEA squad and staff" />
          </div>
        </div>
      </section>

      {/* ---------- CTA ---------- */}
      <CtaStrip
        heading="Ready to start your journey?"
        body="Whether you're looking for football, education, university or career opportunities, we'd love to hear from you."
        primary={{ label: "Apply Now", href: "https://forms.gle/qhQPuDfyevaFHpQW7" }}
        secondary={{ label: "Book a Visit", href: "https://forms.gle/qhQPuDfyevaFHpQW7" }} />

    </div>
  );
}

Object.assign(window, { AboutPage });