/* global React */
// "I Want to Run Sport" — Sport Business Studies page (green accent).

const RS_GREEN = "#34A853";

const RS_IC = {
  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>,
  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="M12 6.5l1 1.9 2.1.3-1.5 1.5.3 2.1-1.9-1-1.9 1 .3-2.1-1.5-1.5 2.1-.3z" fill="currentColor" stroke="none" /><path d="M9 13.8L8 21l4-2 4 2-1-7.2" /></svg>,
  calendar: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10h18M8 3v4M16 3v4" strokeLinecap="round" /></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>,
  route: <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>,
  megaphone: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><path d="M3 10v4a1 1 0 0 0 1 1h2l3 4v-14l-3 4H4a1 1 0 0 0-1 1z" /><path d="M13 6c3 0 6 2.5 6 6s-3 6-6 6" strokeLinecap="round" /></svg>,
  events: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10h18M8 3v4M16 3v4" strokeLinecap="round" /><path d="M8 14.5l2.5 2.5 5-5" strokeLinecap="round" /></svg>,
  pound: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M14.5 8.6c-.5-.9-1.4-1.4-2.4-1.4-1.5 0-2.5 1.1-2.5 2.7 0 2.5.4 3.4-1 5.6h6" /><path d="M8.5 12.5h4.5" /></svg>,
  leader: <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>,
  scales: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v16M8 20h8" /><path d="M4 7h16" /><path d="M6.5 7L4 13a2.6 2.6 0 0 0 5 0L6.5 7zM17.5 7L15 13a2.6 2.6 0 0 0 5 0L17.5 7z" /></svg>,
  strategy: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 20V4M4 20h16" /><path d="M7 15l3.5-4 3 2.5L18 8" /><path d="M15 8h3v3" /></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.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>,
  projects: <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>,
  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>,
  sim: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="3" y="4" width="18" height="12" rx="1.5" /><path d="M12 16v4M8 20h8" /><path d="M7 12l3-3.5 2.5 2L16 7" strokeLinecap="round" /></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>,
  building: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="5" y="3" width="14" height="18" /><path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2" strokeLinecap="round" /><path d="M10.5 21v-3h3v3" /></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>,
  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>,
  compass: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M15.5 8.5l-2 5-5 2 2-5z" /></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>,
  group: <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>,
  software: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="3" y="4" width="18" height="14" rx="1.5" /><path d="M8 9l-2.5 2.5L8 14M16 9l2.5 2.5L16 14M13 8l-2 8" strokeLinecap="round" /></svg>,
  present: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><rect x="3" y="4" width="18" height="12" rx="1.5" /><path d="M12 16v4M8 20h8" /><path d="M7 8h6M7 11h4" strokeLinecap="round" /></svg>
};

const RS_FEATS = [
  { icon: RS_IC.badge, label: <>Equivalent to 3 A Levels<br />168 UCAS Points</> },
  { icon: RS_IC.calendar, label: "Industry recognised qualification" },
  { icon: RS_IC.briefcase, label: "Real-world business focus" },
  { icon: RS_IC.cap, label: "Pathway to university and employment" }
];

const RS_ADDONS = [
  { icon: RS_IC.massage, t: "Sports Massage", d: "Gain hands-on experience in our clinic and learn injury treatment and recovery.", img: "assets/photo-sbz-massage.webp" },
  { icon: RS_IC.dumbbell, t: "Personal Training", d: "Develop coaching skills and learn how to design and deliver effective training programmes.", img: "assets/photo-sbz-barbell.webp" },
  { icon: RS_IC.ball, t: "Football Coaching", d: "Work with players of all ages and develop your coaching and leadership skills.", img: "assets/photo-sbz-coach.webp" },
  { icon: RS_IC.chart, t: "Sport Business Only", d: "Focus purely on your business studies and develop the skills to lead and innovate in sport.", img: "assets/photo-sbz-suit.webp" }
];

const RS_STUDY = [
  { icon: RS_IC.megaphone, t: "Marketing in Sport", d: "Learn how to promote brands, events and athletes in a competitive market." },
  { icon: RS_IC.events, t: "Events Management", d: "Plan and deliver sporting events and experiences that create a lasting impact." },
  { icon: RS_IC.pound, t: "Finance & Accounting", d: "Understand budgets, financial planning and the commercial side of sport organisations." },
  { icon: RS_IC.leader, t: "Leadership", d: "Develop leadership qualities to inspire teams and drive success." },
  { icon: RS_IC.scales, t: "Sports Law & Ethics", d: "Explore the legal framework and ethical considerations within the sports industry." },
  { icon: RS_IC.strategy, t: "Business Strategy", d: "Learn how organisations grow, adapt and succeed in the global sports market." }
];

const RS_PHOTOS = [
  "assets/photo-sbz-present.webp",
  "assets/photo-sbz-medals.webp",
  "assets/photo-sbz-laptop.webp",
  "assets/photo-sbz-consult.webp",
  "assets/photo-sbz-bizplan.webp"
];

const RS_EXPERIENCE = [
  { icon: RS_IC.projects, t: "Industry Projects", d: "Work on real projects with sports organisations and businesses." },
  { icon: RS_IC.tutor, t: "Expert Tutors", d: "Learn from industry professionals with real-world experience." },
  { icon: RS_IC.sim, t: "Business Simulations", d: "Develop decision-making and problem-solving skills in realistic scenarios." },
  { icon: RS_IC.handshake, t: "Networking Opportunities", d: "Connect with employers and leaders across the sports industry." },
  { icon: RS_IC.building, t: "Employer Engagement", d: "Guest speakers, workshops and visits to leading sports businesses." }
];

const RS_PROGRESSION = [
  { icon: RS_IC.cap, t: "University", d: "Progress onto HNC, HND or Degree programmes in Sport Business or related subjects." },
  { icon: RS_IC.briefcase, t: "Employment", d: "Launch your career in roles across the sports industry and beyond." },
  { icon: RS_IC.spark, t: "Entrepreneurship", d: "Start your own business or sports venture with the skills and confidence to succeed." }
];

const RS_SUPPORT = [
  { icon: RS_IC.classSize, t: "Small class sizes", d: "Individual support in every lesson." },
  { icon: RS_IC.tutor, t: "Dedicated tutor", d: "A tutor who knows you and supports your goals." },
  { icon: RS_IC.compass, t: "Careers guidance", d: "Personalised careers advice and industry insights." },
  { icon: RS_IC.plan, t: "Individual Learning Plans", d: "Tailored support to help you achieve." }
];

const RS_FACILITIES = [
  { icon: RS_IC.suite, label: "Business Suite" },
  { icon: RS_IC.group, label: "Group Spaces" },
  { icon: RS_IC.software, label: "Industry Software" },
  { icon: RS_IC.present, label: "Presentation Studio" }
];

function RunSportPage() {
  return (
    <div data-screen-label="Run Sport" style={{ ["--ws"]: RS_GREEN }}>

      {/* ---------- Hero ---------- */}
      <section className="ws-hero" data-screen-label="RS Hero">
        <div className="ws-hero-photo" aria-hidden="true">
          <img src="assets/photo-sbz-meeting.webp" alt="" />
        </div>
        <div className="container ws-hero-inner">
          <div className="ws-hero-text">
            <span className="ws-hero-ico" aria-hidden="true">{RS_IC.chart}</span>
            <h1 className="ws-title">
              <span className="line">I Want To</span>
              <span className="line accent">Run Sport</span>
            </h1>
            <div className="ws-kicker">Sport Business Studies</div>
            <p className="ws-sub">For future leaders, entrepreneurs and professionals who want to build successful careers in the sports industry and beyond.</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>

      {/* ---------- Main programme + internship add-ons ---------- */}
      <section className="ws-block ws-light rs-split-block" data-screen-label="RS Programme">
        <div className="container rs-split">
          <div className="rs-main">
            <h3 className="ws-panel-head">Your main study programme</h3>
            <div className="rs-course">BTEC Level 3 in Sports Business</div>
            <p className="rs-main-copy">Designed to develop the knowledge, skills and behaviours needed to build a successful career in the sports industry.</p>
            <div className="rs-feats">
              {RS_FEATS.map((f, i) => (
                <div className="rs-feat" key={i}>
                  <span className="rs-feat-ico" aria-hidden="true">{f.icon}</span>
                  <span>{f.label}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="rs-addons">
            <h3 className="ws-panel-head">Make it yours: add an industry internship</h3>
            <p className="rs-addons-copy">Enhance your course with practical experience in your chosen area of the sports industry.</p>
            <div className="rs-addon-grid">
              {RS_ADDONS.map((x, i) => (
                <article className="rs-addon" key={i}>
                  <div className="rs-addon-media"><img src={x.img} alt="" /></div>
                  <span className="rs-addon-ico" aria-hidden="true">{x.icon}</span>
                  <h4>{x.t}</h4>
                  <p>{x.d}</p>
                </article>
              ))}
            </div>
            <div className="rs-banner">Choose to study the Sport Business course on its own or add an internship to build your experience.</div>
          </div>
        </div>
      </section>

      {/* ---------- What you'll study ---------- */}
      <section className="ws-block ws-light rs-study-block" data-screen-label="RS Study">
        <div className="container">
          <div className="ws-head"><h2>What you'll study</h2></div>
          <div className="rs-study">
            {RS_STUDY.map((x, i) => (
              <div className="rs-topic" key={i}>
                <span className="rs-topic-ico" aria-hidden="true">{x.icon}</span>
                <h4>{x.t}</h4>
                <p>{x.d}</p>
              </div>
            ))}
          </div>
          <div className="rs-photos">
            {RS_PHOTOS.map((src, i) => (
              <div className="rs-photo" key={i}><img src={src} alt="" /></div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- What you'll experience (dark band) ---------- */}
      <section className="ws-block ws-dark" data-screen-label="RS Experience">
        <div className="container">
          <div className="ws-head ws-head-dark"><h2>What you'll experience</h2></div>
          <div className="ws-xp-row">
            {RS_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>

      {/* ---------- Progression + support ---------- */}
      <section className="ws-block ws-light" data-screen-label="RS 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">
                {RS_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">
                {RS_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-sbz-signage.webp" alt="FEA learners working together in the education suite" />
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Learn. Lead. Succeed. footer strip ---------- */}
      <section className="ws-foot" data-screen-label="RS Footer CTA">
        <div className="container ws-foot-row">
          <div className="ws-foot-learn">
            <h3>Learn. <span className="ws-blue">Lead.</span> Succeed.</h3>
            <p>Our facilities, resources and industry links give you everything you need to turn your passion for sport into a rewarding career.</p>
          </div>
          <div className="ws-foot-facilities">
            {RS_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 build your future in sport?</h4>
            <p>Take the first step towards a career in the sport industry with our Sport Business programme.</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, { RunSportPage });
