/* Mobile: Free School Clinics page + school request form */ const CLINIC_WEB3FORMS_KEY = "b8d90ff4-9ffd-422f-a59d-c0c2d5e120c6"; const CLINIC_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 CLINIC_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 CLINIC_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 ClinicsPage({ onGo }) { return (

Free school program · London elementary

Free school clinics.

We're offering free basketball clinics to elementary schools across London. Our coaches come to you — bring your gym and your students, we handle the rest.

Book a call with Coach AD

{CLINIC_FACTS.map(([k, v], i) => (

{k}

{v}

))}

What your students get.

{CLINIC_INCLUDES.map(([t, b], i) => (

{String(i + 1).padStart(2, "0")}

{t}

{b}

))}

Three steps to your gym.

{i + 1}

{t}

{b}

Spots are limited each term

Bring LOGIC to your school.

Takes under a minute. We'll follow up to confirm a date that works for your school.

); } function ClinicField({ label, value, onChange, type = "text", placeholder, optional, multiline }) { const base = { padding: "14px 14px", borderRadius: 10, border: "1.5px solid var(--c-line)", background: "#0a0a0a", color: "#fff", fontFamily: "inherit", fontSize: 16, WebkitAppearance: "none", width: "100%" }; return ( {label}{optional && · optional} {multiline ?

onChange(e.target.value)} placeholder={placeholder} style={{ ...base, minHeight: 110, resize: "vertical", lineHeight: 1.5 }} />
        : <input value={value} onChange={e => onChange(e.target.value)} type={type} placeholder={placeholder} style={base} />}
    </label>
  );
}

React.useEffect(() => { window.scrollTo({ top: 0, behavior: "smooth" }); }, [done]);

async function submit() {
    if (!valid || sending) return;
    setSending(true); setError(null);
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          access_key: CLINIC_WEB3FORMS_KEY,
          subject: `[School Clinic Request] ${d.schoolName}`,
          from_name: "London LOGIC Basketball — School Clinic Form (Mobile)",
          "School Name": d.schoolName,
          "School Address": [d.street, d.city, d.province].filter(Boolean).join(", "),
          "Contact Name": d.contactName,
          "Contact Email": d.email,
          "Contact Phone": d.phone || "—",
          "Notes": d.notes || "—",
          replyto: d.email,
        }),
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok || !json.success) throw new Error(json.message || `Submission failed (${res.status})`);
      setDone(true);
    } catch (e) {
      setError(e.message || "Network error.");
    } finally {
      setSending(false);
    }
  }

if (done) return (
    <main className="page">
      <section style={{ padding: "60px var(--gutter) 30px", textAlign: "center" }}>
        <span className="eyebrow" style={{ justifyContent: "center" }}>Request received</span>
        <h1 className="display" style={{ margin: "16px 0 0", fontSize: 64, lineHeight: 0.92, color: "#fff" }}>
          See you <span style={{ color: "var(--c-red)" }}>in the gym.</span>
        </h1>
        <p style={{ marginTop: 16, color: "var(--c-ink-soft)", fontSize: 15, lineHeight: 1.55 }}>
          Thanks — we've logged <strong style={{ color: "#fff" }}>{d.schoolName}</strong>. Coach AD will email{" "}
          <span style={{ color: "#fff" }}>{d.email}</span> to find a date.
        </p>
      </section>
      <section style={{ padding: "0 var(--gutter) 24px", display: "flex", flexDirection: "column", gap: 10 }}>
        <button className="btn tappable" onClick={() => onGo("clinics")}>Back to school clinics</button>
        <button className="btn btn-ghost tappable" onClick={() => onGo("home")}>Back home</button>
      </section>
    </main>
  );

return (
    <main className="page">
      <section style={{ padding: "10px var(--gutter) 18px" }}>
        <a onClick={() => onGo("clinics")} className="mono tappable" style={{ color: "var(--c-ink-soft)", fontSize: 10.5, cursor: "pointer", display: "inline-block", padding: "4px 0" }}>← School clinics</a>
        <span className="eyebrow" style={{ display: "flex", marginTop: 12 }}>Free school clinic · request</span>
        <h1 className="display" style={{ margin: "10px 0 0", fontSize: 46, lineHeight: 0.95 }}>
          Bring LOGIC to <span style={{ color: "var(--c-red)" }}>your school.</span>
        </h1>
        <p style={{ marginTop: 12, color: "var(--c-ink-soft)", fontSize: 14.5, lineHeight: 1.55 }}>
          Free for London elementary schools. Tell us where you are and who to contact — we'll handle the rest.
        </p>
      </section>

<section style={{ padding: "0 var(--gutter) 16px" }}>
        <div style={{ background: "#15110d", color: "#fff", borderRadius: "12px 12px 0 0", padding: "11px 16px" }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "#fff" }}>School clinic request · $0</span>
        </div>
        <div className="card" style={{ padding: "22px 20px", borderTopLeftRadius: 0, borderTopRightRadius: 0, display: "flex", flexDirection: "column", gap: 22 }}>
          <div>
            <span className="mono" style={{ color: "var(--c-red)" }}>01 · School</span>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 12 }}>
              <ClinicField label="School name" value={d.schoolName} onChange={up("schoolName")} placeholder="e.g. Northridge Public School" />
              <ClinicField label="Street address" value={d.street} onChange={up("street")} />
              <ClinicField label="City" value={d.city} onChange={up("city")} />
              <ClinicField label="Province" value={d.province} onChange={up("province")} />
            </div>
          </div>
          <div>
            <span className="mono" style={{ color: "var(--c-red)" }}>02 · Contact</span>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 12 }}>
              <ClinicField label="Contact name" value={d.contactName} onChange={up("contactName")} placeholder="Teacher, principal or coordinator" />
              <ClinicField label="Contact email" type="email" value={d.email} onChange={up("email")} placeholder="name@school.ca" />
              <ClinicField label="Phone" type="tel" value={d.phone} onChange={up("phone")} optional />
              <ClinicField label="Anything we should know?" value={d.notes} onChange={up("notes")} optional multiline placeholder="Grades, number of students, preferred dates…" />
            </div>
          </div>
          {error && (
            <div style={{ padding: "12px 14px", borderRadius: 10, border: "1px solid var(--c-red)", background: "rgba(230,24,44,0.08)", fontSize: 13, lineHeight: 1.45 }}>
              <strong style={{ color: "var(--c-red)" }}>Couldn't send.</strong> {error} Try again, or email{" "}
              <a href="mailto:coach_ad@londonlogicbasketball.com?subject=Free%20school%20clinic%20enquiry" style={{ color: "#fff", textDecoration: "underline" }}>coach_ad@londonlogicbasketball.com</a>.
            </div>
          )}
          <button className="btn tappable" onClick={submit} disabled={!valid || sending}
            style={{ opacity: valid ? 1 : 0.4, cursor: valid && !sending ? "pointer" : "default" }}>
            {sending ? "Sending…" : "Submit clinic request →"}
          </button>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ClinicsPage, ClinicRequestPage });