/* Free school clinic request — desktop #clinic-request */
async function submitClinicRequest(d) {
  const res = await fetch("https://api.web3forms.com/submit", {
    method: "POST",
    headers: { "Content-Type": "application/json", "Accept": "application/json" },
    body: JSON.stringify({
      access_key: "b8d90ff4-9ffd-422f-a59d-c0c2d5e120c6",
      subject: `[School Clinic Request] ${d.schoolName}`,
      from_name: "London LOGIC Basketball — School Clinic Form",
      replyto: d.email,
      "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 || "—",
    }),
  });
  const json = await res.json().catch(() => ({}));
  if (!res.ok || !json.success) throw new Error(json.message || `Submission failed (${res.status})`);
}

function ClinicRequestDesktopPage() {
  const blank = { schoolName: "", street: "", city: "London", province: "ON", contactName: "", email: "", phone: "", notes: "" };
  const [d, setD] = React.useState(blank);
  const [sending, setSending] = React.useState(false);
  const [sent, setSent] = React.useState(null);
  const [err, setErr] = React.useState(null);
  const up = (k) => (e) => setD({ ...d, [k]: e.target.value });
  const ready = d.schoolName.trim() && d.street.trim() && d.city.trim() && d.contactName.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(d.email);

  return (
    <section data-screen-label="School Clinic Request" style={{ padding: "48px 0 96px" }}>
      <div className="container">
        <a href="#clinics" className="mono" style={{ display: "inline-flex", gap: 8, color: "var(--c-ink-soft)", marginBottom: 20 }}>← School clinics</a>
        <SectionHead eyebrow="Free school clinic · request"
          title={<span>Bring LOGIC to <span style={{ color: "var(--c-red)" }}>your school .</span></span>}
          kicker="Free for London elementary schools. Tell us where you are and who to contact — we'll handle the rest." />
        <div className="cr-wrap" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.6fr) minmax(0, 1fr)", gap: "clamp(20px, 3vw, 40px)", alignItems: "start" }}>
          <form onSubmit={async (e) => {
            e.preventDefault(); if (!ready || sending) return;
            setSending(true); setErr(null);
            try { await submitClinicRequest(d); setSent({ school: d.schoolName, email: d.email }); setD(blank); } catch (x) { setErr(x.message || "Network error."); } finally { setSending(false); }
          }} style={{ background: "var(--c-paper)", border: "1px solid var(--c-line)", borderRadius: "var(--radius-card)", padding: "clamp(24px, 3.4vw, 40px)" }}>
            <div className="cr-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <VolField label="School name" full><input required value={d.schoolName} onChange={up("schoolName")} autoComplete="organization" style={volFieldStyle} /></VolField>
              <VolField label="Street address" full><input required value={d.street} onChange={up("street")} autoComplete="street-address" style={volFieldStyle} /></VolField>
              <VolField label="City"><input required value={d.city} onChange={up("city")} style={volFieldStyle} /></VolField>
              <VolField label="Province"><input required value={d.province} onChange={up("province")} style={volFieldStyle} /></VolField>
              <VolField label="Contact name"><input required value={d.contactName} onChange={up("contactName")} autoComplete="name" style={volFieldStyle} /></VolField>
              <VolField label="Contact email"><input required type="email" value={d.email} onChange={up("email")} autoComplete="email" style={volFieldStyle} /></VolField>
              <VolField label="Phone (optional)"><input type="tel" value={d.phone} onChange={up("phone")} autoComplete="tel" style={volFieldStyle} /></VolField>
              <VolField label="Anything we should know? (optional)" hint="Grades, number of students, preferred dates…" full>
                <textarea rows={4} value={d.notes} onChange={up("notes")} style={{ ...volFieldStyle, resize: "vertical", lineHeight: 1.5 }} />
              </VolField>
            </div>
            <div style={{ marginTop: 22, display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
              <button type="submit" disabled={!ready || sending} className="btn tappable" style={{
                padding: "14px 22px", borderRadius: 999, border: 0, background: "var(--c-red)", color: "#fff",
                fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 700,
                cursor: ready && !sending ? "pointer" : "not-allowed", opacity: ready && !sending ? 1 : 0.45,
              }}>{sending ? "Sending…" : "Submit clinic request"}</button>
              <span style={{ fontSize: 13, color: "var(--c-ink-soft)" }}>Free — no cost to the school.</span>
            </div>
            {err && <p style={{ margin: "12px 0 0", color: "var(--c-red)", fontSize: 14 }}>Couldn't send: {err} — or email <a href="mailto:coach_ad@londonlogicbasketball.com?subject=Free%20school%20clinic%20enquiry" style={{ color: "var(--c-red)", textDecoration: "underline" }}>coach_ad@londonlogicbasketball.com</a></p>}
          </form>
          <aside style={{ borderTop: "2px solid var(--c-red)", paddingTop: 16 }}>
            <Eyebrow color="var(--c-red)">How it works</Eyebrow>
            <ol style={{ margin: "16px 0 0", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 16 }}>
              {[["01", "Submit your school", "Tell us your school name, address and a contact email."], ["02", "We reach out", "Coach AD will reach out to find a date."], ["03", "Clinic day", "We arrive early, set up, run the clinic and pack up."]].map(([n, t, b]) =>
              <li key={n} style={{ display: "grid", gridTemplateColumns: "34px 1fr", gap: 10 }}>
                <span className="mono" style={{ color: "var(--c-red)" }}>{n}</span>
                <div><div className="display" style={{ fontSize: 22, lineHeight: 1 }}>{t}</div><p style={{ margin: "6px 0 0", fontSize: 14.5, lineHeight: 1.5, color: "var(--c-ink-soft)" }}>{b}</p></div>
              </li>)}
            </ol>
          </aside>
        </div>
      </div>
      {sent && (
        <div role="dialog" aria-modal="true" onClick={() => setSent(null)} style={{ position: "fixed", inset: 0, zIndex: 200, background: "rgba(0,0,0,0.62)", display: "grid", placeItems: "center", padding: 20 }}>
          <div onClick={(e) => e.stopPropagation()} style={{ maxWidth: 560, width: "100%", background: "#0a0a0a", color: "#fff", borderRadius: "var(--radius-card)", borderTop: "5px solid var(--c-red)", padding: "clamp(28px, 5vw, 48px)", textAlign: "center" }}>
            <span className="mono" style={{ color: "var(--c-red)" }}>Request received</span>
            <h2 className="display" style={{ margin: "14px 0 0", fontSize: "clamp(38px, 6vw, 60px)", lineHeight: 0.96, color: "#fff" }}>See you <span style={{ color: "var(--c-red)" }}>in the gym.</span></h2>
            <p style={{ margin: "18px auto 0", maxWidth: "40ch", fontSize: 16, lineHeight: 1.6, color: "rgba(255,255,255,0.8)" }}>
              Thanks — we've logged <strong style={{ color: "#fff" }}>{sent.school}</strong>. Coach AD will email {sent.email} to find a date.
            </p>
            <div style={{ marginTop: 26, display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
              <a href="#clinics" onClick={() => setSent(null)} style={{ padding: "14px 22px", borderRadius: 999, background: "var(--c-red)", color: "#fff", fontFamily: "var(--font-display)", letterSpacing: "0.06em", textTransform: "uppercase", fontSize: 15 }}>Back to school clinics</a>
              <a href="#home" onClick={() => setSent(null)} style={{ padding: "14px 22px", borderRadius: 999, background: "transparent", border: "2px solid rgba(255,255,255,0.4)", color: "#fff", fontFamily: "var(--font-display)", letterSpacing: "0.06em", textTransform: "uppercase", fontSize: 15 }}>Back home</a>
            </div>
          </div>
        </div>
      )}
      <style>{`@media (max-width: 900px){.cr-wrap{grid-template-columns:1fr !important}} @media (max-width: 600px){.cr-grid{grid-template-columns:1fr !important}}`}</style>
    </section>);
}
Object.assign(window, { ClinicRequestDesktopPage });