/* global React */
// JPL Academy page — Junior Premier League, U12–U16.

const JP_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>,
  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>,
  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" /><path d="M8.5 12l2.4 2.4L15.5 9.6" strokeLinecap="round" /></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>,
  crest: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><path d="M12 3l7 2.5v5.5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V5.5z" /><path d="M12 8v8M8.5 12h7" strokeLinecap="round" /></svg>,
  send: <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>,
  pulse: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12h4l2.5-6 4 12 2.5-6h5" /></svg>,
  target: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="8.5" /><circle cx="12" cy="12" r="4.5" /><circle cx="12" cy="12" r="1.2" fill="currentColor" stroke="none" /></svg>,
  team: <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>,
  badge: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><circle cx="12" cy="9" r="5.5" /><path d="M9 13.8L7.5 21l4.5-2.4L16.5 21 15 13.8" /></svg>,
  play: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><path d="M8 5.5l11 6.5-11 6.5z" /></svg>
};

const JP_HERO_STRIP = [
  { icon: JP_IC.ball, t: "Junior Premier League", d: "U12 – U16" },
  { icon: JP_IC.chart, t: "Elite Coaching", d: "UEFA qualified" },
  { icon: JP_IC.shield, t: "Player Pathway", d: "Academy to first team" },
  { icon: JP_IC.pulse, t: "Strength & Conditioning", d: "All age groups" },
  { icon: JP_IC.cap, t: "Education + Football", d: "Balanced approach" }
];

const JP_PATHWAY = [
  { icon: JP_IC.ball, t: "JPL Academy", sub: "U12 – U16", d: "Develop your game in the Junior Premier League.", href: "#/jpl", here: true },
  { icon: JP_IC.shield, t: "Football Scholarship", sub: "16 – 19", d: "Full-time football and a BTEC Level 3 Diploma.", href: "#/scholarship" },
  { icon: JP_IC.cap, t: "University Programme", sub: "18+", d: "Degree study alongside the U23 programme.", href: "#/university" },
  { icon: JP_IC.crest, t: "First Team", sub: "Step 6 Football", d: "Compete for Holbeach United in the senior game.", href: "#/scholarship" },
  { icon: JP_IC.send, t: "Beyond Football", sub: "Your future", d: "University, professional contracts or career paths.", href: "#/college" }
];

const JP_EXPECT = [
  { img: "assets/photo-jpl-coaching.webp", t: "Professional Coaching", d: "UEFA qualified coaches focused on your development." },
  { img: "assets/photo-jpl-training.webp", t: "High-Quality Training", d: "Structured sessions built on technical, tactical and physical development." },
  { img: "assets/photo-jpl-fixtures.webp", t: "Competitive Fixtures", d: "JPL matches and cup competitions against the best opposition." },
  { img: "assets/photo-jpl-analysis.webp", t: "Sports Science & Analysis", d: "Data-driven insights to improve performance and prevent injury." },
  { img: "assets/photo-jpl-conditioning.webp", t: "Strength & Conditioning", d: "Age-appropriate programmes to build stronger athletes." },
  { img: "assets/photo-jpl-workshops.webp", t: "Educational Workshops", d: "Termly workshops to develop holistic players — sport psychology, sporting nutrition, recovery methods and more." }
];

const JP_VALUES = [
  { icon: JP_IC.pulse, t: "Performance", d: "On the pitch." },
  { icon: JP_IC.shield, t: "Character", d: "Off the pitch." },
  { icon: JP_IC.target, t: "Discipline", d: "Every day." },
  { icon: JP_IC.team, t: "Unity", d: "One team." },
  { icon: JP_IC.badge, t: "Pride", d: "Wear the badge." }
];

function JPLAcademyPage({ section }) {
  return (
    <div data-screen-label="JPL Academy">

      {/* ---------- Hero ---------- */}
      <section className="fs-hero jp-hero" data-screen-label="JPL Hero">
        <div className="fs-hero-photo" aria-hidden="true">
          <img src="assets/photo-jpl-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">Achieve.</span>
            </h1>
            <p className="fs-sub">Train. Compete. Grow. The JPL Academy combines high-level coaching, competitive fixtures and a clear player pathway to help you reach your full potential.</p>
            <div className="fs-actions">
              <a href="https://forms.gle/d7j9kyn3dwCNagy6A" target="_blank" rel="noopener" className="btn btn-primary">Register Your Interest <span className="arrow">→</span></a>
            </div>
          </div>
        </div>
        <div className="jp-strip">
          <div className="container jp-strip-row">
            {JP_HERO_STRIP.map((x, i) => (
              <div className="jp-strip-item" key={i}>
                <span className="jp-strip-ico" aria-hidden="true">{x.icon}</span>
                <div>
                  <div className="jp-strip-t">{x.t}</div>
                  <div className="jp-strip-d">{x.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- Pathway ---------- */}
      <section className="jp-path" data-screen-label="JPL Pathway">
        <div className="container">
          <h2 className="jp-path-title">The Holbeach Football Pathway</h2>
          <div className="jp-path-row">
            {JP_PATHWAY.map((s, i) => (
              <React.Fragment key={i}>
                <a className={"jp-path-step" + (s.here ? " is-here" : "")} href={s.href}>
                  <span className="jp-path-ico" aria-hidden="true">{s.icon}</span>
                  <div className="jp-path-t">{s.t}</div>
                  <div className="jp-path-sub">{s.sub}</div>
                  <p>{s.d}</p>
                </a>
                {i < JP_PATHWAY.length - 1 && <span className="jp-path-arrow" aria-hidden="true">→</span>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- What you can expect ---------- */}
      <section className="fs-block" data-screen-label="JPL Expect">
        <div className="container">
          <div className="fs-head"><h2>What you can expect</h2></div>
          <div className="fs-xp-grid">
            {JP_EXPECT.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>

      {/* ---------- Age groups ---------- */}
      <section className="fs-block" data-screen-label="JPL Age Groups">
        <div className="container">
          <div className="fs-head"><h2>Our age groups</h2></div>
          <div className="jp-ages">
            {[...section.pages].reverse().map((p) => (
              <div className="jp-age jp-age-static" key={p.id}>
                <div className="jp-age-media">
                  <div className="jp-age-ph">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="6.5" width="18" height="13" rx="2" /><path d="M8.5 6.5l1.2-2h4.6l1.2 2" /><circle cx="12" cy="12.8" r="3.4" /></svg>
                    <span>{p.label} squad photo</span>
                  </div>
                </div>
                <div className="jp-age-body">
                  <div className="jp-age-label">{p.label}</div>
                  <p>{p.tagline}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- Closing banner ---------- */}
      <section className="nh-banner-wrap" data-screen-label="JPL Banner">
        <div className="container">
          <div className="nh-banner">
            <div className="nh-banner-tag">
              <span>Your journey starts here.</span>
              <span className="gold">Are you ready?</span>
            </div>
            <div className="nh-banner-mid">
              <p style={{ marginTop: 0 }}>Join a winning environment that will challenge you, develop you and prepare you for what's next.</p>
              <div className="nh-banner-actions">
                <a href="https://forms.gle/d7j9kyn3dwCNagy6A" target="_blank" rel="noopener" className="btn btn-primary">Register Your Interest <span className="arrow">→</span></a>
                <a href="https://forms.gle/d7j9kyn3dwCNagy6A" target="_blank" rel="noopener" className="btn nh-btn-outline">Book a Trial Session <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>
        <div className="jp-values">
          <div className="container jp-values-row">
            {JP_VALUES.map((v, i) => (
              <div className="jp-value" key={i}>
                <span className="jp-value-ico" aria-hidden="true">{v.icon}</span>
                <div>
                  <div className="jp-value-t">{v.t}</div>
                  <div className="jp-value-d">{v.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { JPLAcademyPage });