/* global React */
// "I Want to Work in Sport" — Sports Industry Internships page (blue accent).

const WS_BLUE = "#1F6FE0";

const WS_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>,
  board: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="12" rx="1.5" /><path d="M12 16v4M8 20h8" /><path d="M7 8h6M7 11h4" /></svg>,
  massage: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="6" r="2.2" /><path d="M4 20h16M6 16l3.5-4.5L14 14l4-2" /></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>,
  ball: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7.4l3.6 2.6-1.4 4.2h-4.4L8.4 10z" /><path d="M12 3v4.4M15.6 10l4.6-1.4M14.2 14.2l2.8 3.8M9.8 14.2L7 18M8.4 10L3.8 8.6" 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>,
  placement: <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>,
  mentor: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="7.5" r="3" /><path d="M6 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5" /><path d="M12 12.5v3" /></svg>,
  qual: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="3" y="4" width="18" height="13" rx="2" /><path d="M7 8h10M7 11h6" /><circle cx="16.5" cy="15.5" r="2.2" /><path d="M15.5 17.5L15 21l1.5-1 1.5 1-.5-3.5" /></svg>,
  handshake: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 11l4-4 5 2 5-2 4 4" /><path d="M7 7v7l5 5 5-5V7" /><path d="M12 9v6" /></svg>,
  career: <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>,
  spark: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" 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>,
  classSize: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="8" r="3" /><path d="M3.5 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5" /><path d="M16 6.2a3 3 0 0 1 0 5.6" /><path d="M18 14.2c2.2.6 3.5 2.3 3.5 4.8" /></svg>,
  tutor: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="7.5" r="3" /><path d="M6 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5" /></svg>,
  plan: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="4" y="3" width="16" height="18" rx="2" /><path d="M8 8h8M8 12h8M8 16h5" strokeLinecap="round" /></svg>,
  checkbox: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="3" /><path d="M8 12.5l3 3 5.5-6" /></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>,
  clinic: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="6" r="2.2" /><path d="M4 20h16M6 16l3.5-4.5L14 14l4-2" /></svg>,
  suite: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="3" y="5" width="18" height="12" rx="1.5" /><path d="M8 21h8M12 17v4" /><path d="M7 9l3 3 3-4 4 5" strokeLinecap="round" /></svg>,
  network: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="5" r="2.2" /><circle cx="5" cy="18" r="2.2" /><circle cx="19" cy="18" r="2.2" /><path d="M10.8 6.8L6.2 16M13.2 6.8l4.6 9.2M7.2 18h9.6" /></svg>
};

const WS_INTERNSHIPS = [
  { icon: WS_IC.board, t: "PE Teaching", d: "Support learning in schools, develop leadership skills and inspire the next generation.", img: "assets/photo-ws-pe.webp" },
  { icon: WS_IC.massage, t: "Sports Massage", d: "Learn in our on-site clinic and gain practical experience in injury treatment and recovery.", img: "assets/photo-ws-massage.webp" },
  { icon: WS_IC.dumbbell, t: "Personal Training", d: "Develop coaching, programme design and gym-based skills to help others perform.", img: "assets/photo-ws-pt.webp" },
  { icon: WS_IC.ball, t: "Football Coaching", d: "Work with players of all ages and levels whilst gaining coaching qualifications.", img: "assets/photo-ws-coaching.webp" },
  { icon: WS_IC.chart, t: "Performance Analysis", d: "Learn to collect, analyse and present data to support team and player performance.", img: "assets/photo-ws-analysis.webp" }
];

const WS_EXPERIENCE = [
  { icon: WS_IC.placement, t: "Real-World Placements", d: "Gain hands-on experience in schools, gyms, clinics, clubs and organisations." },
  { icon: WS_IC.mentor, t: "Industry Mentors", d: "Learn from experienced professionals who will guide your development." },
  { icon: WS_IC.qual, t: "Practical Qualifications", d: "Achieve recognised qualifications to boost your career prospects." },
  { icon: WS_IC.handshake, t: "Employer Engagement", d: "Work on live projects and build connections with potential employers." },
  { icon: WS_IC.career, t: "Career Development", d: "Develop the skills, confidence and experience to succeed in your chosen field." }
];

const WS_PROGRESSION = [
  { icon: WS_IC.cap, t: "University", d: "Progress onto HNC, HND or Degree programmes in Sport and related subjects." },
  { icon: WS_IC.placement, t: "Employment", d: "Enter the workforce with practical experience and industry recognised skills." },
  { icon: WS_IC.spark, t: "Apprenticeships", d: "Develop further through apprenticeship routes in the sports industry." }
];

const WS_SUPPORT = [
  { icon: WS_IC.classSize, t: "Small class sizes", d: "Individual support in every lesson." },
  { icon: WS_IC.tutor, t: "Dedicated tutor", d: "A tutor who knows you and supports your goals." },
  { icon: WS_IC.plan, t: "Individual Learning Plans", d: "Tailored support to help you achieve." }
];

const WS_BIZ_UNITS = [
  { n: "01", t: "Exploring Business", d: "An introduction to business purposes, structures and environments." },
  { n: "02", t: "Developing a Marketing Campaign", d: "Assessing market research and planning campaigns under supervised conditions." },
  { n: "03", t: "Personal and Business Finance", d: "Developing skills in managing personal finances and understanding business accounting." },
  { n: "04", t: "Managing an Event", d: "Planning, running and reviewing a business event." },
  { n: "05", t: "International Business", d: "Analysing global markets and international trade." }
];

const WS_FACILITIES = [
  { icon: WS_IC.gym, label: "On-Site Gym" },
  { icon: WS_IC.clinic, label: "Sports Massage Clinic" },
  { icon: WS_IC.suite, label: "Analysis Suite" },
  { icon: WS_IC.network, label: "Industry Connections" }
];

function WorkInSportPage() {
  return (
    <div data-screen-label="Work In Sport" style={{ ["--ws"]: WS_BLUE }}>

      {/* ---------- Hero ---------- */}
      <section className="ws-hero" data-screen-label="WS Hero">
        <div className="ws-hero-photo" aria-hidden="true">
          <img src="assets/photo-ws-hero.webp" alt="" />
        </div>
        <div className="container ws-hero-inner">
          <div className="ws-hero-text">
            <span className="ws-hero-ico" aria-hidden="true">{WS_IC.cap}</span>
            <h1 className="ws-title">
              <span className="line">I Want To</span>
              <span className="line accent">Work In Sport</span>
            </h1>
            <div className="ws-kicker">Sports Industry Internships</div>
            <p className="ws-select-note">Select <strong>one</strong> of our internships to balance with your <strong>two</strong> courses of study: BTEC Level 3 Diploma (equivalent to 2 A-Levels) &amp; BTEC Level 3 in Sport Business (equivalent to 1 A-Level).</p>
            <p className="ws-sub">Gain real-world experience, industry qualifications and the skills to build your future in the sports industry whilst studying at college.</p>
            <div className="ws-actions">
              <a href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener" className="btn ws-btn-solid">Register Your Interest <span className="arrow">→</span></a>
              <a href="https://forms.gle/qh6Hcq5eaNH94kZ67" target="_blank" rel="noopener" className="btn btn-ghost">Request a Prospectus <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 4v12M6 12l6 6 6-6M4 21h16" /></svg></a>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- BTEC courses band ---------- */}
      <section className="ws-btec" data-screen-label="WS BTEC">
        <div className="container">
          <div className="ws-btec-row">
            <div className="ws-btec-lead">
              <span className="ws-btec-ico" aria-hidden="true">{WS_IC.cap}</span>
              <p>You will study <span className="gold">both</span> of the following BTEC courses <span className="gold">alongside your internship:</span></p>
            </div>
            <div className="ws-btec-course">
              <span className="ws-btec-check" aria-hidden="true">{WS_IC.checkbox}</span>
              <div>
                <h4>BTEC Level 3 National Extended Diploma in Sports Coaching &amp; Development</h4>
                <p>Equivalent to 2 A-Levels.</p>
              </div>
            </div>
            <div className="ws-btec-or" aria-hidden="true">AND</div>
            <div className="ws-btec-course">
              <span className="ws-btec-check" aria-hidden="true">{WS_IC.checkbox}</span>
              <div>
                <h4>BTEC Level 3 in Sports Business</h4>
                <p>Equivalent to 1 A-Level.</p>
              </div>
            </div>
          </div>
          <p className="ws-btec-note">Combined, the two courses are equivalent to 3 A-Levels — with a potential 168 UCAS points available. Both are recognised by universities and employers and provide a clear route to higher education or a career in the sports industry.</p>
        </div>
      </section>

      {/* ---------- 5 internships ---------- */}
      <section className="ws-block ws-light" data-screen-label="WS Internships">
        <div className="container">
          <div className="ws-head"><h2>Choose from 5 sports industry internships</h2></div>
          <div className="ws-five">
            {WS_INTERNSHIPS.map((x, i) => (
              <article className="ws-intern" key={i}>
                <span className="ws-intern-ico" aria-hidden="true">{x.icon}</span>
                <h3>{x.t}</h3>
                <p>{x.d}</p>
                <div className="ws-intern-media"><img src={x.img} alt="" /></div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- What you'll experience (dark band) ---------- */}
      <section className="ws-block ws-dark" data-screen-label="WS Experience">
        <div className="container">
          <div className="ws-head ws-head-dark"><h2>What you'll experience</h2></div>
          <div className="ws-xp-row">
            {WS_EXPERIENCE.map((x, i) => (
              <div className="ws-xp" key={i}>
                <span className="ws-xp-ico" aria-hidden="true">{x.icon}</span>
                <h4>{x.t}</h4>
                <p>{x.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- Units studied ---------- */}
      <section className="ws-block ws-light ws-units" data-screen-label="WS Units">
        <div className="container">
          <div className="ws-head"><h2>The units you'll study</h2></div>
          <div className="ws-units-grid">
            <article className="ws-units-card">
              <header className="ws-units-head">
                <h3>BTEC Level 3 National Extended Diploma in Sports Coaching &amp; Development</h3>
                <span className="ws-units-eq">Equivalent to 2 A-Levels</span>
              </header>
              <div className="ws-units-cols">
                <div>
                  <h4 className="ws-units-sub">Mandatory units</h4>
                  <ul className="ws-units-list">
                    {window.FEA_DATA.BTEC_UNITS.mandatory.map((u, i) => <li key={i}>{u}</li>)}
                  </ul>
                </div>
                <div>
                  <h4 className="ws-units-sub">Optional units</h4>
                  <ul className="ws-units-list">
                    {window.FEA_DATA.BTEC_UNITS.optional.map((u, i) => <li key={i}>{u}</li>)}
                  </ul>
                </div>
              </div>
            </article>
            <article className="ws-units-card">
              <header className="ws-units-head">
                <h3>BTEC Level 3 in Sport Business</h3>
                <span className="ws-units-eq">Equivalent to 1 A-Level</span>
              </header>
              <div className="ws-biz-list">
                {WS_BIZ_UNITS.map((u, i) => (
                  <div className="ws-biz-unit" key={i}>
                    <span className="ws-biz-num" aria-hidden="true">{u.n}</span>
                    <div>
                      <h4>{u.t}</h4>
                      <p>{u.d}</p>
                    </div>
                  </div>
                ))}
              </div>
            </article>
          </div>
        </div>
      </section>

      {/* ---------- Progression + support ---------- */}
      <section className="ws-block ws-light" data-screen-label="WS Progression">
        <div className="container">
          <div className="ws-prog">
            <div className="ws-prog-col">
              <h3 className="ws-panel-head">Progression opportunities</h3>
              <div className="ws-prog-list">
                {WS_PROGRESSION.map((x, i) => (
                  <div className="ws-prog-item" key={i}>
                    <span className="ws-prog-ico" aria-hidden="true">{x.icon}</span>
                    <div>
                      <h4>{x.t}</h4>
                      <p>{x.d}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="ws-prog-col">
              <h3 className="ws-panel-head">Support every step of the way</h3>
              <div className="ws-prog-list">
                {WS_SUPPORT.map((x, i) => (
                  <div className="ws-prog-item" key={i}>
                    <span className="ws-prog-ico" aria-hidden="true">{x.icon}</span>
                    <div>
                      <h4>{x.t}</h4>
                      <p>{x.d}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="ws-prog-media">
              <img src="assets/photo-ws-building.webp" alt="The Holbeach United FEA building at Highbury Drive" />
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Learn. Train. Grow. footer strip ---------- */}
      <section className="ws-foot" data-screen-label="WS Footer CTA">
        <div className="container ws-foot-row">
          <div className="ws-foot-learn">
            <h3>Learn. <span className="ws-blue">Train.</span> Grow.</h3>
            <p>Our facilities and industry links give you everything you need to gain experience, build confidence and kick-start your career in sport.</p>
          </div>
          <div className="ws-foot-facilities">
            {WS_FACILITIES.map((f, i) => (
              <div className="ws-facility" key={i}>
                <span className="ws-facility-ico" aria-hidden="true">{f.icon}</span>
                <span>{f.label}</span>
              </div>
            ))}
          </div>
          <div className="ws-foot-cta">
            <h4>Ready to start your career in sport?</h4>
            <p>Take the first step towards an exciting future with our Sports Industry Internship pathways.</p>
            <div className="ws-foot-actions">
              <a href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener" className="btn ws-btn-invert">Register Your Interest <span className="arrow">→</span></a>
              <a href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener" className="btn ws-btn-line">Book an Open Day <span className="arrow">→</span></a>
            </div>
          </div>
          <div className="ws-foot-brand">
            <img src="assets/logo-fea-tiger.webp" alt="Holbeach United FEA" />
            <span className="nh-pack">#ThePack</span>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { WorkInSportPage });
