/* Program page — philosophy + 5 pillars + identity */

const PILLARS = [
  { n: "01", title: "Skill", body: "On-court technique progressed through age-appropriate drills, repetition, and live application. Built by coaches who know development." },
  { n: "02", title: "IQ", body: "Spacing, reads, decisions. We teach the why before we teach the what. Film, walk-throughs, and small-sided live reps." },
  { n: "03", title: "Body", body: "Athletic preparation, recovery, and movement quality. Built into every day, scaled to every age." },
  { n: "04", title: "Mind", body: "Confidence, communication, accountability. The character that drives the player." },
  { n: "05", title: "Community", body: "Local. Family-first. Showcase moments that bring London together around basketball." },
];

const VALUES = [
  ["Educator-led", "Built by teachers and coaches. Learning goals, success criteria, real reflection."],
  ["Pathway, not pop-up", "Five divisions, twelve years. We grow with the athlete."],
  ["Premium experience", "Player package and daily media coverage. Your athlete is treated like a pro."],
  ["Capped capacity", "Training groups capped at 12. All sessions maintain a 1 : 8 coach-to-athlete ratio."],
  ["Inclusive by design", "12 boys + 12 girls per division. Every cohort, every level."],
  ["London-grown", "Built here. Sponsored locally. Showcased in our gyms."],
];

function ProgramPage() {
  return (
    <div data-screen-label="02 Program">
    <section style={{ padding: "60px 0 100px" }}>
      <div className="container">
        <SectionHead
          eyebrow="The program"
          title={<span>Built on <span style={{ color: "var(--c-red)" }}>basketball IQ.</span></span>}
          kicker="London LOGIC isn't just camp. It's a development engine — a long-term pathway built by educators who've spent careers shaping how young athletes learn the game."
        />

        {/* Mission */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.15fr 1fr",
          gap: 32, alignItems: "stretch", marginBottom: 80,
        }} className="mission-grid">
          <div style={{
            background: "var(--c-ink)",
            color: "var(--c-paper)",
            borderRadius: "var(--radius-card)",
            padding: "44px 48px",
            display: "flex", flexDirection: "column", justifyContent: "space-between",
          }}>
            <div>
              <Eyebrow color="var(--c-red)">Mission</Eyebrow>
              <h3 className="display" style={{
                margin: "16px 0 0", fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 0.95, color: "inherit",
              }}>
                <span style={{ color: "var(--c-red)" }}>L</span>eading <span style={{ color: "var(--c-red)" }}>O</span>ur <span style={{ color: "var(--c-red)" }}>G</span>eneration <span style={{ color: "var(--c-red)" }}>I</span>n <span style={{ color: "var(--c-red)" }}>C</span>reation — through the game we love.
              </h3>
            </div>
            <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
              {[["Train", "the body"], ["Teach", "the game"], ["Develop", "the mind"]].map(([a, b]) => (
                <div key={a} style={{ paddingTop: 18, borderTop: "1px solid rgba(255,255,255,0.18)" }}>
                  <div className="display" style={{ fontSize: 24, color: "var(--c-red)" }}>{a}</div>
                  <div className="mono" style={{ marginTop: 4, opacity: 0.8 }}>{b}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{
            aspectRatio: "3 / 4",
            width: "100%",
            borderRadius: "var(--radius-card)",
            overflow: "hidden",
            backgroundImage: "url(assets/program-coach-moment.jpeg)",
            backgroundSize: "cover",
            backgroundPosition: "center 30%",
            position: "relative",
          }}>
          </div>
        </div>

        {/* 5 pillars */}
        <SectionHead eyebrow="The five pillars" title="What every athlete leaves with."/>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 14 }} className="pillars-grid">
          {PILLARS.map(p => (
            <div key={p.n} style={{
              background: "var(--c-paper)",
              border: "1px solid var(--c-line)",
              borderRadius: "var(--radius-card)",
              padding: "26px 22px",
              minHeight: 280,
              display: "flex", flexDirection: "column",
            }}>
              <span className="mono" style={{ color: "var(--c-red)" }}>{p.n}</span>
              <h4 className="display" style={{ margin: "12px 0 0", fontSize: 36, lineHeight: 1, color: "var(--c-ink)" }}>
                {p.title}
              </h4>
              <p style={{ marginTop: 14, fontSize: 14, color: "var(--c-ink-soft)", lineHeight: 1.55 }}>{p.body}</p>
            </div>
          ))}
        </div>

        {/* Values */}
        <div style={{ marginTop: 100 }}>
          <SectionHead eyebrow="Identity" title={<span>Six commitments to <span style={{ color: "var(--c-red)" }}>every family.</span></span>}/>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }} className="values-grid">
            {VALUES.map(([t, b], i) => (
              <div key={t} style={{
                background: i % 2 ? "var(--c-paper)" : "var(--c-warm)",
                border: "1px solid var(--c-line)",
                borderRadius: "var(--radius-card)",
                padding: 26,
              }}>
                <div className="display" style={{ fontSize: 24, lineHeight: 1.05 }}>{t}</div>
                <div style={{ marginTop: 10, fontSize: 14.5, color: "var(--c-ink-soft)", lineHeight: 1.55 }}>{b}</div>
              </div>
            ))}
          </div>
        </div>

        {/* CTA strip */}
        <div style={{
          marginTop: 80,
          background: "var(--c-red)", color: "#fff",
          borderRadius: "var(--radius-card)",
          padding: "48px 48px",
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap",
        }}>
          <div>
            <Eyebrow color="rgba(255,255,255,0.85)">Find your division</Eyebrow>
            <h3 className="display" style={{ margin: "10px 0 0", fontSize: "clamp(28px, 4vw, 48px)", color: "#fff" }}>
              Five divisions. One pathway.
            </h3>
          </div>
          <Btn to="divisions" kind="inverse">Explore divisions</Btn>
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) {
          .pillars-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .values-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 800px) {
          .mission-grid { grid-template-columns: 1fr !important; }
          .pillars-grid, .values-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>

    {/* Contact — book a call / get the info pack */}
    {typeof window.ContactCTA !== "undefined" && <window.ContactCTA />}
    </div>
  );
}

window.ProgramPage = ProgramPage;