/* global React */
// University page — "Progress. Study for a Degree. Build Your Future." (black & gold)

const UNI_GOLD = "#F5B400";

const UNI_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>,
  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>,
  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>,
  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>,
  trophy: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"><path d="M8 4h8v5a4 4 0 0 1-8 0z" /><path d="M8 5H4.5v1.5A3.5 3.5 0 0 0 8 10M16 5h3.5v1.5A3.5 3.5 0 0 1 16 10" /><path d="M12 13v3M9 20h6M10 16h4v4h-4z" /></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>,
  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>,
  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>,
  check: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M4.5 12.5l5 5L19.5 7" /></svg>,
  cross: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
};

const UNI_DIFF = [
{ icon: UNI_IC.cap, t: "Degree Qualification", d: "Gain a recognised university qualification designed for the sports industry." },
{ icon: UNI_IC.briefcase, t: "Industry Experience", d: "Build practical skills through real-world experience and placements in the industry." },
{ icon: UNI_IC.ball, t: "Continue Your Passion", d: "Combine your studies with football, internships or coaching opportunities." }];


const UNI_PATHWAY = [
{ yr: "Year 1", n: "1", title: "HNC", lvl: "Level 4", sub: "Sports Coaching", img: "assets/uni-huddle.webp", pos: "50% 30%" },
{ yr: "Year 2", n: "2", title: "HND", lvl: "Level 5", sub: "Sport & Exercise Science", img: "assets/uni-sc-squats.webp" },
{ yr: "Year 3", n: "3", title: "BSc (Hons)", lvl: "Level 6", sub: "Sports Coaching Top-Up", img: "assets/uni-hurdles.webp" }];


const UNI_STUDY = [
{
  icon: UNI_IC.cap, tint: "#2E6FD8",
  t: "HNC Sports Coaching",
  d: "Build the foundations of coaching, community sport and professional practice.",
  modules: ["Anatomy & Physiology for Sport", "Coaching Principles & Practice", "Sport Psychology", "Fitness Testing & Training", "Planning & Delivering Sessions", "Professional Development", "Community Coaching", "Work-Based Experience"]
},
{
  icon: UNI_IC.dumbbell, tint: "#34A853",
  t: "HND Sport & Exercise Science",
  d: "Develop scientific knowledge and practical skills to enhance performance and health.",
  modules: ["Exercise Physiology", "Biomechanics", "Nutrition for Sport & Exercise", "Strength & Conditioning", "Research Methods", "Performance Analysis", "Injury Prevention & Rehabilitation", "Work-Based Learning"]
},
{
  icon: UNI_IC.trophy, tint: "#F5B400",
  t: "BSc (Hons) Sports Coaching Top-Up",
  d: "Advance your coaching expertise and leadership to degree level.",
  modules: ["Advanced Coaching Practice", "Talent Development", "Sports Leadership & Management", "Applied Sport Psychology", "Research Project", "Performance Strategy", "Professional Practice", "Industry Placement"]
}];


const UNI_JOURNEY = [
{
  kicker: "Student Athlete Pathway", t: "Student Athlete", sub: "U23 Football Programme",
  img: "assets/uni-tackle.webp", pos: "50% 22%", href: "#/scholarship",
  points: ["Compete in the U23 Football Programme", "Monday fixtures in the U23 National Youth Football League", "UEFA qualified coaching", "Strength & Conditioning", "Performance analysis", "Gain your degree"]
},
{
  kicker: "Industry Professional Pathway", t: "Industry Professional", sub: "Internship Route",
  img: "assets/uni-pe-teaching.webp", href: "#/internships",
  points: ["Sports Massage", "Personal Training", "Football Coaching", "Performance Analysis", "Teacher", "PE Teacher", "Real-world industry experience", "Build your career"]
}];


const UNI_VS = {
  trad: ["Large lecture halls", "Limited practical experience", "Generic support", "High living costs", "Large tuition fees", "Little flexibility"],
  fea: ["Small group learning", "Industry experience & placements", "Personal support & mentoring", "Football & career pathways", "Flexible study model", "Save £7,000 in tuition fees over 3 years", "Community environment"]
};

const UNI_CAREERS = [
{ icon: UNI_IC.board, t: "Teaching", img: "assets/uni-football-coaching.webp" },
{ icon: UNI_IC.ball, t: "Football & Multi Sports Coaching", img: "assets/uni-tactics-board.webp" },
{ icon: UNI_IC.chart, t: "Performance Analysis", img: "assets/uni-pa-derby.webp" },
{ icon: UNI_IC.dumbbell, t: "Personal Training", img: "assets/uni-pt-gym.webp" },
{ icon: UNI_IC.massage, t: "Sports Therapy", img: "assets/uni-massage-close.webp" },
{ icon: UNI_IC.briefcase, t: "Sports Business", img: "assets/uni-business-meeting.webp" },
{ icon: UNI_IC.cap, t: "Postgraduate Study", img: "assets/uni-pa-centre.webp" }];


const UNI_LEARNERS = [
{ name: "Charlie Bell", img: "assets/uni-learner-charlie.webp", role: "HNC Sports Coaching", role2: "Football Coaching Pathway", quote: "I get to play football, earn my degree and gain real experience. The perfect balance." },
{ name: "Gracie Elgie", img: "assets/uni-learner-gracie.webp", role: "HND Sports Coaching", role2: "Sports Massage Internship", quote: "The internship has given me the skills and confidence to build my career." },
{ name: "Callum Hanson", img: "assets/uni-learner-callum.webp", role: "BSc (Hons) Sports Coaching", role2: "Performance Analysis Internship", quote: "Studying here has opened doors I never thought possible in the sports industry." }];


function UniversityPage() {
  return (
    <div className="uni" data-screen-label="University" style={{ ["--uni"]: UNI_GOLD }}>

      {/* ---------- Hero — full-width collage like the home page ---------- */}
      <section className="nh-hero uni-hero" data-screen-label="UNI Hero">
        <div className="nh-collage" aria-hidden="true">
          {["assets/uni-whiteboard.webp", "assets/uni-analysis-lab.webp", "assets/uni-gym-visit.webp", "assets/uni-community-coaching.webp", "assets/uni-team-talk.webp", "assets/uni-event-dinner.webp"].map((src, i) =>
          <div className="nh-collage-cell" key={i}><img src={src} alt="" /></div>
          )}
          <div className="nh-collage-shade"></div>
        </div>
        <div className="container nh-hero-body">
          <div className="nh-hero-main">
            <div className="nh-eyebrow">University Pathways. <span className="gold">Degrees with experience.</span></div>
            <h1 className="nh-title uni-title">
              <span className="line">Progress.</span>
              <span className="line accent">Build your future.</span>
            </h1>
            <p className="nh-sub">Complete your degree whilst gaining industry experience, developing your skills and creating opportunities within sport.</p>
            <div className="nh-actions">
              <a href="https://forms.gle/qh6Hcq5eaNH94kZ67" target="_blank" rel="noopener" className="btn uni-btn-solid">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>
              <a href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener" className="btn uni-btn-line">Register Your Interest <span className="arrow">→</span></a>
            </div>
            <div className="uni-partner">
              <span>Our Partners</span>
              <span className="uni-partner-mark" aria-label="The University of Northampton"><img className="uon-logo" src="assets/logo-uni-northampton.webp" alt="University of Northampton" /></span>
              <span className="uni-partner-mark" aria-label="Activate Learning"><img className="uon-logo" src="assets/logo-partner-activate.webp" alt="Activate Learning" /></span>
              <span className="uni-partner-mark" aria-label="Virtual Alliance Higher Education"><img className="uon-logo" src="assets/logo-partner-vahe.webp" alt="Virtual Alliance Higher Education (VAHE)" /></span>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- University, differently ---------- */}
      <section className="uni-block" data-screen-label="UNI Differently">
        <div className="container">
          <div className="uni-head">
            <h2>University, differently.</h2>
            <p>Most universities offer lectures. We offer experience.</p>
          </div>
          <div className="uni-diff-row">
            {UNI_DIFF.map((x, i) =>
            <div className="uni-diff" key={i}>
                <span className="uni-diff-ico" aria-hidden="true">{x.icon}</span>
                <div>
                  <h4>{x.t}</h4>
                  <p>{x.d}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ---------- Degree pathway ---------- */}
      <section className="uni-block uni-block-line" data-screen-label="UNI Pathway">
        <div className="container">
          <div className="uni-head uni-head-rule"><h2>Choose your degree pathway</h2></div>
          <div className="uni-path-row">
            {UNI_PATHWAY.map((p, i) =>
            <React.Fragment key={i}>
                <article className="uni-path">
                  <span className="uni-path-num" aria-hidden="true">{p.n}</span>
                  <div className="uni-path-media"><img src={p.img} alt="" style={p.pos ? { objectPosition: p.pos } : undefined} /></div>
                  <div className="uni-path-body">
                    <div className="yr">{p.yr}</div>
                    <h3>{p.title} <span className="uni-lvl">({p.lvl})</span></h3>
                    <div className="sub">{p.sub}</div>
                  </div>
                </article>
                {i < UNI_PATHWAY.length - 1 && <span className="uni-path-arrow" aria-hidden="true">❯</span>}
              </React.Fragment>
            )}
          </div>
          <p className="uni-path-note">Progress from HNC to HND and complete your degree with a BSc (Hons) Top-Up.<br /><span className="gold">A full-time programme only — Monday to Friday — combining study with practical experience in the sports industry.</span></p>
        </div>
      </section>

      {/* ---------- What you'll study ---------- */}
      <section className="uni-block" data-screen-label="UNI Study">
        <div className="container">
          <div className="uni-head">
            <h2>What you'll study</h2>
            <p>Industry-focused modules designed to develop your knowledge, skills and career opportunities.</p>
          </div>
          <div className="uni-study-grid">
            {UNI_STUDY.map((c, i) =>
            <article className="uni-course" key={i} style={{ ["--tint"]: c.tint }}>
                <span className="uni-course-ico" aria-hidden="true">{c.icon}</span>
                <h3>{c.t}</h3>
                <p className="lead">{c.d}</p>
                <ul>
                  {c.modules.map((m, j) =>
                <li key={j}><span className="tick" aria-hidden="true">{UNI_IC.check}</span>{m}</li>
                )}
                </ul>
              </article>
            )}
          </div>
        </div>
      </section>

      {/* ---------- Your journey ---------- */}
      <section className="uni-block uni-block-line" data-screen-label="UNI Journey">
        <div className="container">
          <div className="uni-head uni-head-rule"><h2>Your journey. Your future.</h2></div>
          <div className="uni-journey-grid">
            {UNI_JOURNEY.map((j, i) =>
            <article className="uni-journey" key={i}>
                <div className="uni-journey-media" aria-hidden="true"><img src={j.img} alt="" style={j.pos ? { objectPosition: j.pos } : undefined} /></div>
                <div className="uni-journey-body">
                  <div className="kicker">{j.kicker}</div>
                  <h3>{j.t}</h3>
                  <div className="sub">{j.sub}</div>
                  <ul>
                    {j.points.map((p, k) =>
                  <li key={k}><span className="tick" aria-hidden="true">{UNI_IC.check}</span>{p}</li>
                  )}
                  </ul>
                  <a href={j.href} className="btn uni-btn-line uni-btn-sm">Learn More <span className="arrow">→</span></a>
                </div>
              </article>
            )}
          </div>
        </div>
      </section>

      {/* ---------- What makes us different (VS) ---------- */}
      <section className="uni-block" data-screen-label="UNI VS">
        <div className="container">
          <div className="uni-head"><h2>What makes us different?</h2></div>
          <div className="uni-vs">
            <div className="uni-vs-col uni-vs-trad">
              <div className="uni-vs-media" aria-hidden="true"><img src="assets/uni-trad-lecture.webp" alt="" /></div>
              <h3>Traditional University</h3>
              <ul>
                {UNI_VS.trad.map((x, i) =>
                <li key={i}><span className="mark no" aria-hidden="true">{UNI_IC.cross}</span>{x}</li>
                )}
              </ul>
            </div>
            <div className="uni-vs-badge" aria-hidden="true">VS</div>
            <div className="uni-vs-col uni-vs-fea">
              <div className="uni-vs-media" aria-hidden="true"><img src="assets/uni-graduation.webp" alt="" style={{ objectPosition: "50% 22%" }} /></div>
              <h3>Holbeach United FEA University</h3>
              <ul>
                {UNI_VS.fea.map((x, i) =>
                <li key={i}><span className="mark yes" aria-hidden="true">{UNI_IC.check}</span>{x}</li>
                )}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Where can this take you ---------- */}
      <section className="uni-block uni-block-line" data-screen-label="UNI Careers">
        <div className="container">
          <div className="uni-head uni-head-rule"><h2>Where can this take you?</h2></div>
          <div className="uni-careers">
            {UNI_CAREERS.map((c, i) =>
            <div className="uni-career" key={i}>
                <img src={c.img} alt="" />
                <span className="scrim" aria-hidden="true"></span>
                <span className="uni-career-ico" aria-hidden="true">{c.icon}</span>
                <span className="uni-career-lbl">{c.t}</span>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ---------- Learners ---------- */}
      <section className="uni-block" data-screen-label="UNI Learners">
        <div className="container">
          <div className="uni-head"><h2>Meet our university learners</h2></div>
          <div className="uni-learners">
            {UNI_LEARNERS.map((l, i) =>
            <figure className="uni-learner" key={i}>
                <div className="uni-learner-top">
                  <span className="uni-avatar" aria-hidden="true">{l.img ? <img src={l.img} alt="" /> : l.name[0]}</span>
                  <blockquote>
                    <span className="qm" aria-hidden="true">“</span>
                    {l.quote}
                    <span className="qm qm-close" aria-hidden="true">”</span>
                  </blockquote>
                </div>
                <figcaption>
                  <span className="nm">{l.name}</span>
                  <span>{l.role}</span>
                  <span>{l.role2}</span>
                </figcaption>
              </figure>
            )}
          </div>
        </div>
      </section>

      {/* ---------- Footer CTA ---------- */}
      <section className="uni-cta" data-screen-label="UNI Footer CTA">
        <div className="uni-cta-photo" aria-hidden="true"><img src="assets/uni-team-talk.webp" alt="" /></div>
        <div className="container uni-cta-row">
          <div className="uni-cta-text">
            <h3><span>Your degree.</span> <span>Your passion.</span> <span className="gold">Your future.</span></h3>
            <p>Study differently. Gain experience. Build a career in sport.<br />This is your pathway to a brighter future.</p>
            <div className="uni-cta-actions">
              <a href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener" className="btn uni-btn-solid">Register Your Interest <span className="arrow">→</span></a>
              <a href="https://forms.gle/qhQPuDfyevaFHpQW7" target="_blank" rel="noopener" className="btn uni-btn-line">Book an Open Day <span className="arrow">→</span></a>
            </div>
          </div>
          <div className="uni-cta-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, { UniversityPage });