/* global React */
// Compete page — the club's competitive programme, JPL Academy to First Team.

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>,
  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>,
  star: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><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>,
  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>,
  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>,
  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>,
  pitch: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="1.5" /><path d="M12 5v14" /><circle cx="12" cy="12" r="2.4" /></svg>,
  gym: <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>,
  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>,
  massage: <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>,
  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>,
  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>,
  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>,
  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>
};

const CP_PATHWAY = [
  { badge: "JPL", t: "JPL Academy", sub: "U12 – U16", d: "Develop, learn and compete in the Junior Premier League.", href: "#/jpl" },
  { badge: "U19", t: "U19 National Youth Football League", sub: "16 – 19 Scholarship Team", d: "Compete in the National Football Youth League — Championship and Premiership.", href: "#/scholarship" },
  { badge: "U23", t: "U23 National Youth Football League", sub: "18+ Scholarship Team", d: "High-performance football alongside university or internships.", href: "#/university" },
  { badge: "1st", t: "First Team", sub: "Step 6", d: "Step 6 football in the Thurlow Nunn League.", href: "#/compete" },
  { badge: "★", t: "Semi-Pro / Pro", sub: "Your future", d: "The next step in your football journey.", href: "#/college" }
];

const CP_PROGRAMME = [
  { img: "assets/cp-jpl.webp", t: "JPL Academy", sub: "U12 – U16", d: "Develop and compete against some of the best academies in the Junior Premier League." },
  { img: "assets/cp-u19.webp", t: "U19 National Youth Football League", sub: "16 – 19 Scholarship Team", d: "Elite college football in the National Football Youth League Championship." },
  { img: "assets/cp-u19prem.webp", t: "U19 National Youth Football League Premiership", d: "Compete in the National Football Youth League Premiership." },
  { img: "assets/cp-u23.webp", t: "U23 National Youth Football League", sub: "18+ Scholarship Team", d: "High-performance environment combining university or internships with elite football." },
  { img: "assets/cp-first.webp", t: "First Team", d: "Step 6 football in the Thurlow Nunn League. Compete. Represent. Make your mark." }
];

const CP_LEAGUES = [
  { img: "assets/logo-lg-jpl.webp", label: "Junior Premier League" },
  { img: "assets/logo-lg-nfyl.webp", label: "National Football Youth League" },
  { img: "assets/logo-lg-futurelions.webp", label: "Future Lions League" },
  { img: "assets/logo-lg-thurlownunn.webp", label: "Thurlow Nunn League" },
  { img: "assets/logo-lg-facup.webp", label: "Cup Competitions" }
];

const CP_SUCCESS = [
  { icon: CP_IC.trophy, t: "JPL Vase Winners", d: "U14 · 2023/24" },
  { icon: CP_IC.trophy, t: "Multiple Cup Runs", d: "Across all age groups" },
  { icon: CP_IC.chart, t: "25+ Players to First Team", d: "Every season" },
  { icon: CP_IC.grad, t: "University Scholarships", d: "Opportunities earned" },
  { icon: CP_IC.star, t: "Semi-Pro Opportunities", d: "Local and national clubs" }
];

const CP_FACILITIES = [
  { img: "assets/photo-ground-aerial.webp", icon: CP_IC.pitch, t: "Top Quality Pitch", d: "FIFA-approved 3G pitch for year-round training and matchday." },
  { img: "assets/photo-sc-gym.webp", icon: CP_IC.gym, t: "High Performance Gym", d: "Strength & conditioning facility to develop stronger, faster, better athletes." },
  { img: "assets/photo-analysis-theatre.webp", icon: CP_IC.video, t: "Analysis Suite", d: "Elite analysis and video technology to review, learn and improve." },
  { img: "assets/photo-massage-clinic.webp", icon: CP_IC.massage, t: "Sports Massage Room", d: "Professional care and recovery to keep players performing at their best." }
];

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

const CP_VALUES = [
  { icon: CP_IC.pulse, t: "Performance", d: "Give your best." },
  { icon: CP_IC.shield, t: "Character", d: "On and off the pitch." },
  { icon: CP_IC.target, t: "Discipline", d: "Every day." },
  { icon: CP_IC.team, t: "Unity", d: "One team." },
  { icon: CP_IC.badge, t: "Pride", d: "Wear the badge." }
];

function CompetePage() {
  const scrollToTeams = (e) => {
    e.preventDefault();
    const el = document.getElementById("cp-teams");
    if (el) {
      const y = el.getBoundingClientRect().top + window.pageYOffset - 70;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };

  return (
    <div data-screen-label="Compete">

      {/* ---------- Hero ---------- */}
      <section className="fs-hero cp-hero" data-screen-label="Compete Hero">
        <div className="fs-hero-photo" aria-hidden="true">
          <img src="assets/cp-header.webp" alt="" />
        </div>
        <div className="container fs-hero-inner">
          <div className="fs-hero-text">
            <h1 className="fs-title">
              <span className="line">Compete.</span>
              <span className="line">Perform.</span>
              <span className="line accent">Win.</span>
            </h1>
            <div className="fs-kicker">Football with purpose.</div>
            <p className="fs-sub">From Junior Premier League to National Football Youth League and Senior Men's Football, our competitive programme provides opportunities for players at every stage of their journey.</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>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- One club. One pathway. ---------- */}
      <section className="jp-path" data-screen-label="Compete Pathway">
        <div className="container">
          <h2 className="jp-path-title">One club. One pathway.</h2>
          <div className="jp-path-row cp-path-row">
            {CP_PATHWAY.map((s, i) => (
              <React.Fragment key={i}>
                <a className="jp-path-step" href={s.href}>
                  <span className={"cp-path-badge" + (s.badge === "★" ? " is-star" : "")} aria-hidden="true">{s.badge === "★" ? CP_IC.star : s.badge}</span>
                  <div className="jp-path-t">{s.t}</div>
                  <div className="jp-path-sub">{s.sub}</div>
                  <p>{s.d}</p>
                </a>
                {i < CP_PATHWAY.length - 1 && <span className="jp-path-arrow" aria-hidden="true">→</span>}
              </React.Fragment>
            ))}
          </div>
          <div className="cp-path-foot">You don't need to leave Holbeach to progress.</div>
        </div>
      </section>

      {/* ---------- Our competitive programme ---------- */}
      <section className="fs-block" id="cp-teams" data-screen-label="Compete Programme">
        <div className="container">
          <div className="fs-head"><h2>Our competitive programme</h2></div>
          <div className="fs-xp-grid fs-xp-5">
            {CP_PROGRAMME.map((c, i) => (
              <article className="fs-xp" key={i}>
                <div className="fs-xp-media"><img src={c.img} alt="" /></div>
                <h4>{c.t}{c.sub && <span className="cp-xp-sub"> {c.sub}</span>}</h4>
                <p>{c.d}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- Compete against the best ---------- */}
      <section className="cp-leagues" data-screen-label="Compete Leagues">
        <div className="container">
          <h2 className="jp-path-title">Compete against the best</h2>
          <div className="cp-leagues-row">
            {CP_LEAGUES.map((l, i) => (
              <div className="cp-league" key={i}>
                <span className="cp-league-logo" aria-hidden="true"><img src={l.img} alt="" /></span>
                <span className="cp-league-lbl">{l.label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- Player facilities ---------- */}
      <section className="fs-block" data-screen-label="Compete Facilities">
        <div className="container">
          <div className="fs-head"><h2>Player facilities</h2></div>
          <div className="cp-fac-grid">
            {CP_FACILITIES.map((f, i) => (
              <article className="fs-xp" key={i}>
                <div className="fs-xp-media"><img src={f.img} alt="" /></div>
                <div className="cp-fac-head">
                  <span className="cp-fac-ico" aria-hidden="true">{f.icon}</span>
                  <h4>{f.t}</h4>
                </div>
                <p>{f.d}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- First team appearances ---------- */}
      <section className="fs-block" data-screen-label="Compete First Team">
        <div className="container cp-ft">
          <div className="cp-ft-intro">
            <h2>Academy players who have made a first team appearance</h2>
            <p className="cp-ft-lede"><span className="gold-lede">We are proud</span> to give our academy players the opportunity to step up and represent Holbeach United at first team level.</p>
          </div>
          <ol className="cp-ft-list">
            {CP_FIRST_TEAM.map((r, i) => (
              <li key={i}>
                <span className="cp-ft-num">{i + 1}</span>
                <span className="cp-ft-name">{r}</span>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* ---------- Closing banner ---------- */}
      <section className="nh-banner-wrap" data-screen-label="Compete Banner">
        <div className="container">
          <div className="nh-banner">
            <div className="nh-banner-tag">
              <span>Are you ready</span>
              <span className="gold">to compete?</span>
            </div>
            <div className="nh-banner-mid">
              <p style={{ marginTop: 0 }}>Join a club built around performance, development and opportunity. Your journey starts here.</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>
        <div className="jp-values">
          <div className="container jp-values-row">
            {CP_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, { CompetePage });