/* Free School Clinics — desktop #clinics (mirrors mobile/clinics.jsx) */
const DCLINIC_FACTS = [
  ["Free", "No cost to the school"],
  ["Grades 1–8", "Age-appropriate groups"],
  ["75 min", "One class block"],
  ["At your school", "We bring everything"],
];
const DCLINIC_INCLUDES = [
  ["Coaches on site", "LOGIC coaches lead every station — your staff just supervise."],
  ["Equipment provided", "Balls and cones come with us. You provide the gym."],
  ["Fundamentals + play", "Ball handling, passing, shooting and small-sided games, scaled by grade."],
  ["More than basketball", "Every session closes on teamwork, effort and confidence — the LOGIC way."],
];
const DCLINIC_STEPS = [
  ["Submit your school", "Tell us your school name, address and a contact email."],
  ["We reach out", "Coach AD will reach out to find a date."],
  ["Clinic day", "We arrive early, set up, run the clinic and pack up."],
];

function ClinicsDesktopPage() {
  return (
    <div data-screen-label="School Clinics">
      <section style={{ padding: "56px 0 48px" }}>
        <div className="container dcl-hero" style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: "clamp(24px, 4vw, 56px)", alignItems: "center" }}>
          <div>
            <Eyebrow color="var(--c-red)">Free school program · London elementary</Eyebrow>
            <h1 className="display" style={{ margin: "16px 0 0", fontSize: "clamp(56px, 7.5vw, 112px)", lineHeight: 0.9 }}>
              Free school <span style={{ color: "var(--c-red)" }}>clinics.</span>
            </h1>
            <p style={{ marginTop: 20, maxWidth: "46ch", fontSize: 17.5, lineHeight: 1.6, color: "var(--c-ink-soft)" }}>
              We're offering <strong style={{ color: "var(--c-ink)" }}>free basketball clinics</strong> to elementary schools across London.
              Our coaches come to you — bring your gym and your students, we handle the rest.
            </p>
            <div className="dcl-nw" style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <Btn to="clinic-request">Request a clinic for your school</Btn>
              <Btn href="https://calendly.com/coach_ad" kind="ghost">Book a call with Coach AD</Btn>
            </div>
          </div>
          <Slot label="School clinic — coach and young athlete" ratio="16 / 10" src="assets/school-clinic.jpg" position="center" />
        </div>
      </section>

      <section style={{ padding: "0 0 64px" }}>
        <div className="container">
          <div className="dcl-facts" style={{ display: "grid", gridTemplateColumns: "repeat(4, minmax(0,1fr))", border: "1px solid var(--c-line)", borderRadius: "var(--radius-card)", overflow: "hidden" }}>
            {DCLINIC_FACTS.map(([k, v], i) => (
              <div key={k} style={{ padding: "24px 22px", borderLeft: i ? "1px solid var(--c-line)" : "none" }}>
                <div className="display" style={{ fontSize: 34, lineHeight: 0.95, color: "var(--c-red)" }}>{k}</div>
                <div className="mono" style={{ marginTop: 8, color: "var(--c-ink-soft)", fontSize: 11 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: "64px 0", borderTop: "1px solid var(--c-line)", background: "var(--c-paper)" }}>
        <div className="container">
          <SectionHead eyebrow="What's included" title={<span>What your students <span style={{ color: "var(--c-red)" }}>get.</span></span>} />
          <div className="dcl-inc" style={{ display: "grid", gridTemplateColumns: "repeat(4, minmax(0,1fr))", gap: 16 }}>
            {DCLINIC_INCLUDES.map(([t, b], i) => (
              <div key={t} style={{ background: "var(--c-bg)", border: "1px solid var(--c-line)", borderTop: "4px solid var(--c-red)", borderRadius: "var(--radius-card)", padding: "24px 22px" }}>
                <span className="mono" style={{ color: "var(--c-red)", fontSize: 11 }}>{String(i + 1).padStart(2, "0")}</span>
                <div className="display" style={{ marginTop: 12, fontSize: 24, lineHeight: 1.02 }}>{t}</div>
                <p style={{ margin: "10px 0 0", color: "var(--c-ink-soft)", fontSize: 15, lineHeight: 1.55 }}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: "64px 0 32px" }}>
        <div className="container dcl-how" style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: "clamp(24px, 4vw, 56px)", alignItems: "start" }}>
          <div>
            <SectionHead eyebrow="How it works" title={<span>Three steps to <span style={{ color: "var(--c-red)" }}>your gym.</span></span>} />
            <ol style={{ listStyle: "none", margin: 0, padding: 0 }}>
              {DCLINIC_STEPS.map(([t, b], i) => (
                <li key={t} style={{ display: "flex", gap: 16, padding: "20px 0", borderTop: "1px solid var(--c-line)" }}>
                  <span style={{ flex: "0 0 auto", width: 36, height: 36, borderRadius: 999, background: "var(--c-red)", color: "#fff", display: "grid", placeItems: "center", fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600 }}>{i + 1}</span>
                  <div>
                    <div className="display" style={{ fontSize: 24, lineHeight: 1.05 }}>{t}</div>
                    <p style={{ margin: "6px 0 0", color: "var(--c-ink-soft)", fontSize: 15, lineHeight: 1.5 }}>{b}</p>
                  </div>
                </li>
              ))}
            </ol>
          </div>
          <Slot label="Coach defending a clinic athlete" ratio="4 / 3" src="assets/clinic-coaching.jpg" />
        </div>
      </section>

      <section style={{ padding: "32px 0 96px" }}>
        <div className="container">
          <div style={{ position: "relative", overflow: "hidden", background: "var(--c-red)", color: "#fff", borderRadius: "var(--radius-card)", padding: "clamp(32px, 4vw, 56px)", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
            {window.HalfCourt && <div style={{ position: "absolute", bottom: -70, right: -50, opacity: 0.16, pointerEvents: "none" }}><HalfCourt width={420} color="#fff" opacity={1} /></div>}
            <div style={{ position: "relative", maxWidth: 620 }}>
              <span className="mono" style={{ color: "rgba(255,255,255,0.92)" }}>Spots are limited each term</span>
              <h2 className="display" style={{ margin: "12px 0 0", fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 0.94, color: "#fff" }}>Bring LOGIC to your school.</h2>
              <p style={{ margin: "14px 0 0", fontSize: 17, lineHeight: 1.55, color: "rgba(255,255,255,0.94)" }}>Takes under a minute. We'll follow up to confirm a date that works for your school.</p>
            </div>
            <div className="dcl-nw" style={{ position: "relative", flex: "0 0 auto" }}><Btn to="clinic-request" kind="inverse">Request a clinic</Btn></div>
          </div>
        </div>
      </section>
      <style>{`.dcl-nw a{white-space:nowrap} @media (max-width: 1000px){.dcl-hero,.dcl-how{grid-template-columns:1fr !important}.dcl-inc{grid-template-columns:1fr 1fr !important}.dcl-facts{grid-template-columns:1fr 1fr !important}.dcl-facts>div:nth-child(3){border-left:none !important}.dcl-facts>div:nth-child(n+3){border-top:1px solid var(--c-line)}} @media (max-width: 560px){.dcl-inc{grid-template-columns:1fr !important}}`}</style>
    </div>);
}
Object.assign(window, { ClinicsDesktopPage });
