/* Scholarship page — the deeper version of the home spotlight.
   Covers: the 10 full-ride scholarships, eligibility, application process,
   deadlines, supporter/sponsor contributions, and the Sponsor-a-Week concept. */

const SCHOL_DIVISIONS = [
  { roman: "I",   name: "Rookie",      color: "#f0a04b" },
  { roman: "II",  name: "Foundation",  color: "#5b8a72" },
  { roman: "III", name: "Development", color: "#3c6997" },
  { roman: "IV",  name: "Performance", color: "#7a3b86" },
  { roman: "V",   name: "Elite",       color: "#c41e2a" },
];

function ScholarshipPage() {
  return (
    <React.Fragment>
      <section style={{ padding: "60px 0 40px" }}>
        <div className="container">
          <SectionHead
            eyebrow="The Scholarship Program"
            title={<span>No athlete left on the<br/><span style={{ color: "var(--c-red)" }}>sideline.</span></span>}
            kicker="London LOGIC Basketball believes sport should be accessible to every athlete who wants to play. The Scholarship Program reduces the financial strain for families with a genuine love for the game — funded by sponsors, supported by community, and built on need plus character."
          />
        </div>
      </section>

      {/* ============ The 10 full-ride spots ============ */}
      <section style={{ padding: "20px 0 60px" }}>
        <div className="container">
          <div style={{
            background: "#15110d", color: "#ffffff",
            borderRadius: "var(--radius-card)",
            padding: "44px 48px",
            position: "relative", overflow: "hidden",
          }}>
            <div style={{ position: "absolute", top: -30, right: -50, opacity: 0.12 }}>
              <HalfCourt width={460} color="#fff" opacity={1} />
            </div>

            <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }} className="schol-hero">
              <div>
                <Eyebrow color="var(--c-red)">2026 inaugural cohort</Eyebrow>
                <div className="display" style={{
                  fontSize: "clamp(120px, 16vw, 220px)",
                  lineHeight: 0.82, color: "var(--c-red)", marginTop: 12, marginLeft: "-0.04em",
                }}>10</div>
                <div className="display" style={{ fontSize: "clamp(26px, 2.6vw, 36px)", color: "#fff", marginTop: 8, lineHeight: 1.05 }}>
                  Full-ride scholarships<br/>awarded for Year One.
                </div>
              </div>

              <div>
                <div className="mono" style={{ color: "rgba(255,255,255,0.55)" }}>The breakdown</div>
                <div className="display" style={{ color: "#fff", fontSize: "clamp(28px, 3vw, 40px)", marginTop: 8, lineHeight: 1.05 }}>
                  1 boy <span style={{ color: "var(--c-red)" }}>+</span> 1 girl <span style={{ color: "var(--c-red)" }}>×</span> 5 divisions
                </div>
                <div style={{
                  marginTop: 24, display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 10,
                }}>
                  {SCHOL_DIVISIONS.map(d => (
                    <div key={d.roman} style={{
                      background: "rgba(255,255,255,0.04)",
                      border: "1px solid rgba(255,255,255,0.12)",
                      borderTop: `4px solid ${d.color}`,
                      borderRadius: 8, padding: "12px 6px", textAlign: "center",
                    }}>
                      <div className="display" style={{ fontSize: 22, lineHeight: 1, color: "#fff" }}>{d.roman}</div>
                      <div className="mono" style={{ marginTop: 6, color: "rgba(255,255,255,0.6)", fontSize: 9 }}>2 spots</div>
                    </div>
                  ))}
                </div>
                <p style={{ marginTop: 22, color: "rgba(255,255,255,0.78)", fontSize: 14.5, lineHeight: 1.6 }}>
                  Every recipient receives the full three-week camp — jersey, training kit, gear bag, daily
                  programming, and media coverage. Same experience as a paid registrant. Zero cost to family.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ How it works — for families ============ */}
      <section style={{ padding: "20px 0 60px" }}>
        <div className="container">
          <SectionHead
            eyebrow="For families"
            title={<span>How to <span style={{ color: "var(--c-red)" }}>apply.</span></span>}
            kicker="Free to apply. Awarded on a combination of demonstrated financial need and character — coachability, work ethic, and how the athlete shows up for teammates."
          />

          <div style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14,
          }} className="schol-steps">
            {[
              ["01", "Register as scholarship", "Start a normal registration and choose 'Scholarship Application' instead of 'Paid'. Application is always free."],
              ["02", "Tell us about your athlete", "A short written answer about your athlete's character, basketball journey, and what this opportunity would mean. Reviewed confidentially."],
              ["03", "Coach AD reviews", "Every application is reviewed personally by Coach AD. Need + character. No GPA cut-off, no try-out gauntlet."],
              ["04", "Recipients announced", "All applicants are notified by July 4. Awarded athletes get the full three weeks, kit included."],
            ].map(([n, t, b]) => (
              <div key={n} style={{
                background: "var(--c-paper)",
                border: "1px solid var(--c-line)",
                borderRadius: "var(--radius-card)",
                padding: "26px 24px",
                display: "flex", flexDirection: "column", gap: 12,
              }}>
                <div className="display" style={{ color: "var(--c-red)", fontSize: 32, lineHeight: 1 }}>{n}</div>
                <div className="display" style={{ fontSize: 20, lineHeight: 1.1 }}>{t}</div>
                <div style={{ fontSize: 14, color: "var(--c-ink-soft)", lineHeight: 1.55 }}>{b}</div>
              </div>
            ))}
          </div>

          {/* Deadlines + apply CTA */}
          <div style={{
            marginTop: 22, padding: "22px 26px",
            background: "#15110d", color: "#fff",
            borderRadius: "var(--radius-card)",
            display: "grid", gridTemplateColumns: "1fr 1fr auto", gap: 24, alignItems: "center",
          }} className="schol-deadline">
            <div>
              <div className="mono" style={{ color: "var(--c-red)" }}>Application deadline</div>
              <div className="display" style={{ fontSize: 32, marginTop: 6, lineHeight: 1 }}>June 27 · 2026</div>
            </div>
            <div>
              <div className="mono" style={{ color: "var(--c-red)" }}>Recipients announced</div>
              <div className="display" style={{ fontSize: 32, marginTop: 6, lineHeight: 1 }}>July 4 · 2026</div>
            </div>
            <a
              href="#register"
              onClick={() => { try { localStorage.setItem("logic_register_mode", "scholarship"); } catch (e) {} }}
              style={{
                padding: "16px 22px", background: "var(--c-red)", color: "#fff",
                borderRadius: 999,
                fontFamily: "var(--font-display)", letterSpacing: "0.06em",
                textTransform: "uppercase", fontSize: 16,
                display: "inline-flex", alignItems: "center", gap: 10,
                whiteSpace: "nowrap",
              }}
            >
              Apply for a scholarship <Arrow />
            </a>
          </div>
        </div>
      </section>

      {/* ============ Eligibility ============ */}
      <section style={{ padding: "20px 0 60px" }}>
        <div className="container">
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18,
          }} className="schol-elig">
            <div style={{
              background: "var(--c-paper)",
              border: "1px solid var(--c-line)",
              borderRadius: "var(--radius-card)",
              padding: "32px 32px",
            }}>
              <Eyebrow>Who it's for</Eyebrow>
              <div className="display" style={{ marginTop: 12, fontSize: 28, lineHeight: 1.1 }}>
                Athletes who want the<br/>game, not the price tag.
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: "18px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
                {[
                  "Youth ages 5–18 in the London area",
                  "Demonstrated financial need (no formal threshold — explain in plain terms)",
                  "Character, coachability, and a genuine love for the game",
                  "Commitment to attend all three weeks of camp",
                ].map(x => (
                  <li key={x} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 15, lineHeight: 1.5 }}>
                    <span style={{ flex: "0 0 auto", marginTop: 7, width: 8, height: 8, background: "var(--c-red)", borderRadius: 2 }} />
                    <span>{x}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div style={{
              background: "var(--c-warm)",
              border: "1px solid var(--c-line)",
              borderRadius: "var(--radius-card)",
              padding: "32px 32px",
            }}>
              <Eyebrow color="var(--c-red)">How we decide</Eyebrow>
              <div className="display" style={{ marginTop: 12, fontSize: 28, lineHeight: 1.1 }}>
                Need plus character.<br/>Reviewed personally.
              </div>
              <p style={{ marginTop: 16, fontSize: 15, lineHeight: 1.6, color: "var(--c-ink)" }}>
                Every application is read by Coach AD. We don't ask for tax forms or pay stubs — we ask families to tell us, honestly, why a fully-funded spot would matter. The written answer carries real weight.
              </p>
              <p style={{ marginTop: 12, fontSize: 14.5, lineHeight: 1.6, color: "var(--c-ink-soft)" }}>
                If you're unsure whether to apply: apply. It's free, it's confidential, and we'd rather you put your name in than count yourself out.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ============ Sponsor-a-Week (correctly framed) ============ */}
      <section style={{ padding: "40px 0 60px", background: "var(--c-warm)", borderTop: "1px solid var(--c-line)", borderBottom: "1px solid var(--c-line)" }}>
        <div className="container">
          <SectionHead
            eyebrow="Sponsor-a-Week"
            title={<span>Already registered? <span style={{ color: "var(--c-red)" }}>Pay it forward.</span></span>}
            kicker="This is not a generic donation. Sponsor-a-Week is a specific option for registered athletes who genuinely cannot attend one of their three weeks: instead of taking a refund, you donate that week to a family in need so the spot funds another athlete instead of going unused."
          />

          <div style={{
            display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 18,
          }} className="schol-saw">
            <div style={{
              background: "var(--c-paper)",
              border: "1px solid var(--c-line)",
              borderRadius: "var(--radius-card)",
              padding: "32px 36px",
            }}>
              <Eyebrow>How it works</Eyebrow>
              <ol style={{ listStyle: "none", padding: 0, margin: "18px 0 0", display: "flex", flexDirection: "column", gap: 16, counterReset: "saw" }}>
                {[
                  ["You register as normal.", "Pricing is for the full three-week camp. Your athlete is enrolled in all three weeks."],
                  ["A specific week becomes impossible.", "Family travel, another commitment, an injury — life happens. Reach out to Coach AD."],
                  ["Donate that week instead of refunding.", "You give up the refund for that week and gift the spot to the Scholarship Program."],
                  ["Another athlete fills the chair.", "A London family who couldn't otherwise afford camp takes that week. The spot funds the athlete — not lost."],
                ].map(([h, b], i) => (
                  <li key={h} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                    <span style={{
                      flex: "0 0 auto",
                      width: 32, height: 32, borderRadius: 999, background: "var(--c-red)", color: "#fff",
                      display: "grid", placeItems: "center",
                      fontFamily: "var(--font-display)", fontSize: 16,
                    }}>{i + 1}</span>
                    <div>
                      <div style={{ fontSize: 16, fontWeight: 700, lineHeight: 1.3 }}>{h}</div>
                      <div style={{ fontSize: 14, color: "var(--c-ink-soft)", marginTop: 4, lineHeight: 1.55 }}>{b}</div>
                    </div>
                  </li>
                ))}
              </ol>
            </div>

            <div style={{
              background: "#15110d", color: "#fff",
              borderRadius: "var(--radius-card)",
              padding: "32px 32px",
              display: "flex", flexDirection: "column", justifyContent: "space-between",
            }}>
              <div>
                <Eyebrow color="var(--c-red)">Important to know</Eyebrow>
                <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0", display: "flex", flexDirection: "column", gap: 14 }}>
                  {[
                    ["Only available to registered athletes.", "Sponsor-a-Week is not a public donation channel — it's a refund alternative for families already enrolled."],
                    ["Donate one or more weeks.", "Whatever your athlete genuinely cannot attend. Your athlete keeps the weeks they can attend."],
                    ["No refund, no penalty.", "You're choosing to forgo the partial refund. That's the donation."],
                    ["Talk to Coach AD first.", "We confirm the donated week can actually be filled before processing — so it always lands with an athlete."],
                  ].map(([h, b]) => (
                    <li key={h} style={{ display: "flex", gap: 12 }}>
                      <span style={{ flex: "0 0 auto", marginTop: 6, width: 8, height: 8, background: "var(--c-red)", borderRadius: 2 }} />
                      <div>
                        <div style={{ fontSize: 14.5, fontWeight: 700, color: "#fff" }}>{h}</div>
                        <div style={{ fontSize: 13, color: "rgba(255,255,255,0.7)", marginTop: 2, lineHeight: 1.5 }}>{b}</div>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
              <div style={{ marginTop: 24, display: "flex", gap: 10, flexWrap: "wrap" }}>
                <Btn to="register" kind="primary">Register & opt in</Btn>
                <Btn to="contact" kind="ghost"><span style={{ color: "#fff" }}>Talk to Coach AD</span></Btn>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ For supporters ============ */}
      <section style={{ padding: "60px 0 40px" }}>
        <div className="container">
          <SectionHead
            eyebrow="For supporters"
            title={<span>Fund a kid's <span style={{ color: "var(--c-red)" }}>summer.</span></span>}
            kicker="Sponsors and community partners power the Scholarship Fund. Every dollar contributed goes directly to funding camp spots for London athletes — equipment, jersey, three full weeks of programming."
          />

          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14,
          }} className="schol-supporters">
            {[
              {
                tag: "Individual",
                price: "$1,000+",
                title: "Fund a full ride",
                body: "Cover one athlete's full three-week camp — jersey, kit, daily programming. Recipient is anonymous unless both families opt in.",
                cta: ["Contact Coach AD", "contact"],
              },
              {
                tag: "Business",
                price: "Tiered",
                title: "Sponsor the program",
                body: "Local businesses underwrite multiple spots and receive recognition across camp media, jerseys, and the Aug 22 Community Game.",
                cta: ["See sponsor tiers", "sponsors"],
              },
              {
                tag: "Community",
                price: "Any amount",
                title: "Chip in to the fund",
                body: "One-time community contributions of any size go straight into the Scholarship Fund. Pooled across donors to fund additional partial spots.",
                cta: ["Contact Coach AD", "contact"],
              },
            ].map(c => (
              <div key={c.title} style={{
                background: "var(--c-paper)",
                border: "1px solid var(--c-line)",
                borderRadius: "var(--radius-card)",
                padding: "28px 28px",
                display: "flex", flexDirection: "column", gap: 14,
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <span className="mono" style={{ color: "var(--c-red)" }}>{c.tag}</span>
                  <span className="display" style={{ fontSize: 18, lineHeight: 1 }}>{c.price}</span>
                </div>
                <div className="display" style={{ fontSize: 28, lineHeight: 1.05 }}>{c.title}</div>
                <p style={{ margin: 0, fontSize: 14, color: "var(--c-ink-soft)", lineHeight: 1.55 }}>{c.body}</p>
                <div style={{ marginTop: "auto" }}>
                  <Btn to={c.cta[1]} kind="ghost">{c.cta[0]}</Btn>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Coach AD */}
      {typeof window.ContactCTA !== "undefined" && (
        <window.ContactCTA
          eyebrow="Questions about the program?"
          title={<span>Contact <span style={{ color: "var(--c-red)" }}>Coach AD.</span></span>}
        />
      )}

      <style>{`
        @media (max-width: 1000px) {
          .schol-hero { grid-template-columns: 1fr !important; gap: 24px !important; }
          .schol-steps { grid-template-columns: repeat(2, 1fr) !important; }
          .schol-elig { grid-template-columns: 1fr !important; }
          .schol-saw { grid-template-columns: 1fr !important; }
          .schol-supporters { grid-template-columns: 1fr !important; }
          .schol-deadline { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 600px) {
          .schol-steps { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </React.Fragment>
  );
}

window.ScholarshipPage = ScholarshipPage;