/* Mobile: Scholarship page — deeper version of home spotlight.
   Covers: 10 full-ride scholarships, eligibility, application process,
   Sponsor-a-Week (correctly framed), supporter/sponsor contributions. */

const M_SCHOL_DIVS = [
  { roman: "I",   name: "Rookie",      color: "#f0a04b" },
  { roman: "II",  name: "Foundation",  color: "#5b8a72" },
  { roman: "III", name: "Development", color: "#3c6997" },
  { roman: "IV",  name: "Performance", color: "#9a4f29" },
  { roman: "V",   name: "Elite",       color: "#e6182c" },
];

function ScholarshipPage({ onGo }) {
  return (
    <main className="page">
      {/* Hero */}
      <section style={{ padding: "10px var(--gutter) 22px" }}>
        <span className="eyebrow">The Scholarship Program</span>
        <h1 className="display" style={{ margin: "10px 0 0", fontSize: 50, lineHeight: 0.94 }}>
          No athlete left<br/>on the <span style={{ color: "var(--c-red)" }}>sideline.</span>
        </h1>
        <p style={{ marginTop: 14, color: "var(--c-ink-soft)", fontSize: 15, lineHeight: 1.55 }}>
          London LOGIC believes sport should be accessible to every athlete who wants to play.
          The Scholarship Program reduces financial strain for families with a genuine love
          for the game — funded by sponsors, supported by community.
        </p>
      </section>

      {/* The 10 full rides */}
      <section style={{ padding: "0 var(--gutter) 24px" }}>
        <div className="card card-ink" style={{ padding: "26px 22px", position: "relative", overflow: "hidden" }}>
          <span className="mono" style={{ color: "var(--c-red)" }}>2026 inaugural cohort</span>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 14 }}>
            <div className="display" style={{ fontSize: 110, lineHeight: 0.82, color: "var(--c-red)" }}>10</div>
            <div className="display" style={{ fontSize: 20, lineHeight: 1.0, color: "#fff" }}>
              Full-ride<br/>scholarships<br/>for Year One.
            </div>
          </div>
          <div style={{
            marginTop: 18, paddingTop: 16, borderTop: "1px solid rgba(255,255,255,0.12)",
          }}>
            <div className="mono" style={{ color: "rgba(255,255,255,0.55)" }}>The breakdown</div>
            <div className="display" style={{ marginTop: 6, fontSize: 18, lineHeight: 1.15, color: "#fff" }}>
              1 boy <span style={{ color: "var(--c-red)" }}>+</span> 1 girl <span style={{ color: "var(--c-red)" }}>×</span> 5 divisions
            </div>
            <div style={{
              marginTop: 14, display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6,
            }}>
              {M_SCHOL_DIVS.map(d => (
                <div key={d.roman} style={{
                  background: "rgba(255,255,255,0.04)",
                  border: "1px solid rgba(255,255,255,0.12)",
                  borderTop: `3px solid ${d.color}`,
                  borderRadius: 6, padding: "8px 0", textAlign: "center",
                }}>
                  <div className="display" style={{ fontSize: 14, color: "#fff", lineHeight: 1 }}>{d.roman}</div>
                </div>
              ))}
            </div>
            <p style={{ marginTop: 16, color: "rgba(255,255,255,0.72)", fontSize: 13, lineHeight: 1.55 }}>
              Every recipient gets 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>
      </section>

      {/* How to apply */}
      <section style={{ padding: "0 var(--gutter) 24px" }}>
        <span className="eyebrow">For families</span>
        <h2 className="display" style={{ margin: "8px 0 6px", fontSize: 28, lineHeight: 1.05 }}>
          How to <span style={{ color: "var(--c-red)" }}>apply.</span>
        </h2>
        <p style={{ margin: "0 0 14px", color: "var(--c-ink-soft)", fontSize: 14, lineHeight: 1.55 }}>
          Free to apply. Awarded on demonstrated financial need plus character — coachability, work ethic, and
          how the athlete shows up for teammates.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {[
            ["01", "Register as scholarship", "Start a registration and pick 'Scholarship Application' instead of 'Paid'. Always free."],
            ["02", "Tell us about your athlete", "A short written answer — character, basketball journey, what the spot would mean. Reviewed confidentially."],
            ["03", "Coach AD reviews", "Every application is read personally by Coach AD. Need + character. No GPA cut-off, no try-out gauntlet."],
            ["04", "Recipients announced", "All applicants notified by July 4. Awarded athletes get the full three weeks, kit included."],
          ].map(([n, t, b]) => (
            <div key={n} className="card" style={{ padding: "20px 20px" }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                <span className="display" style={{ color: "var(--c-red)", fontSize: 22, lineHeight: 1 }}>{n}</span>
                <span className="display" style={{ fontSize: 18, lineHeight: 1.1, color: "#fff" }}>{t}</span>
              </div>
              <p style={{ margin: "10px 0 0", color: "var(--c-ink-soft)", fontSize: 13.5, lineHeight: 1.55 }}>{b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Deadlines + apply */}
      <section style={{ padding: "0 var(--gutter) 24px" }}>
        <div className="card card-ink" style={{ padding: "22px 20px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div>
              <div className="mono" style={{ color: "var(--c-red)", fontSize: 10 }}>Apply by</div>
              <div className="display" style={{ marginTop: 4, fontSize: 22, lineHeight: 1, color: "#fff" }}>June 27</div>
              <div className="mono" style={{ marginTop: 4, color: "rgba(255,255,255,0.5)", fontSize: 9 }}>2026</div>
            </div>
            <div>
              <div className="mono" style={{ color: "var(--c-red)", fontSize: 10 }}>Recipients announced</div>
              <div className="display" style={{ marginTop: 4, fontSize: 22, lineHeight: 1, color: "#fff" }}>July 4</div>
              <div className="mono" style={{ marginTop: 4, color: "rgba(255,255,255,0.5)", fontSize: 9 }}>2026</div>
            </div>
          </div>
          <button
            className="btn tappable"
            style={{ marginTop: 18 }}
            onClick={() => {
              try { localStorage.setItem("ll_register_mode", "scholarship"); } catch (_) {}
              onGo("register");
            }}
          >
            Apply now →
          </button>
        </div>
      </section>

      {/* Eligibility */}
      <section style={{ padding: "0 var(--gutter) 24px" }}>
        <span className="eyebrow">Who it's for</span>
        <h2 className="display" style={{ margin: "8px 0 12px", fontSize: 26, lineHeight: 1.05 }}>
          Athletes who want the game,<br/><span style={{ color: "var(--c-red)" }}>not the price tag.</span>
        </h2>
        <div className="card" style={{ padding: 20 }}>
          <ul style={{ listStyle: "none", padding: 0, margin: 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",
            ].map(x => (
              <li key={x} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, lineHeight: 1.5, color: "#fff" }}>
                <span style={{ flex: "0 0 auto", marginTop: 6, width: 8, height: 8, background: "var(--c-red)", borderRadius: 2 }} />
                <span>{x}</span>
              </li>
            ))}
          </ul>
          <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--c-line)" }}>
            <span className="mono" style={{ color: "var(--c-red)" }}>How we decide</span>
            <p style={{ margin: "8px 0 0", color: "var(--c-ink-soft)", fontSize: 13.5, lineHeight: 1.55 }}>
              Every application is read by Coach AD. We don't ask for tax forms — we ask families to tell us,
              honestly, why a fully-funded spot would matter. Unsure whether to apply? Apply. It's free and confidential.
            </p>
          </div>
        </div>
      </section>

      {/* Sponsor-a-Week */}
      <section style={{ padding: "8px var(--gutter) 24px" }}>
        <span className="eyebrow">Sponsor-a-Week</span>
        <h2 className="display" style={{ margin: "8px 0 8px", fontSize: 28, lineHeight: 1.05 }}>
          Already registered?<br/><span style={{ color: "var(--c-red)" }}>Pay it forward.</span>
        </h2>
        <p style={{ margin: "0 0 16px", color: "var(--c-ink-soft)", fontSize: 14, lineHeight: 1.55 }}>
          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.
        </p>

        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          {[
            ["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.", "Travel, injury, an unavoidable conflict. 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, a) => (
            <div key={h} style={{
              display: "flex", gap: 14, padding: "16px 18px",
              borderBottom: i < a.length - 1 ? "1px solid var(--c-line)" : "none",
            }}>
              <span style={{
                flex: "0 0 auto",
                width: 28, height: 28, borderRadius: 999,
                background: "var(--c-red)", color: "#fff",
                display: "grid", placeItems: "center",
                fontFamily: "var(--font-display)", fontSize: 14,
              }}>{i + 1}</span>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 14.5, fontWeight: 700, color: "#fff", lineHeight: 1.3 }}>{h}</div>
                <div style={{ marginTop: 4, fontSize: 13, color: "var(--c-ink-soft)", lineHeight: 1.5 }}>{b}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="card card-ink" style={{ padding: "22px 20px", marginTop: 12 }}>
          <span className="mono" style={{ color: "var(--c-red)" }}>Important to know</span>
          <ul style={{ listStyle: "none", padding: 0, margin: "12px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
            {[
              ["Only available to registered athletes.", "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."],
            ].map(([h, b]) => (
              <li key={h} style={{ display: "flex", gap: 10 }}>
                <span style={{ flex: "0 0 auto", marginTop: 6, width: 7, height: 7, background: "var(--c-red)", borderRadius: 2 }} />
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: "#fff" }}>{h}</div>
                  <div style={{ marginTop: 2, fontSize: 12.5, color: "rgba(255,255,255,0.65)", lineHeight: 1.5 }}>{b}</div>
                </div>
              </li>
            ))}
          </ul>
          <button className="btn tappable" style={{ marginTop: 16 }} onClick={() => onGo("register")}>
            Register & opt in
          </button>
        </div>
      </section>

      {/* For supporters */}
      <section style={{ padding: "8px var(--gutter) 24px" }}>
        <span className="eyebrow">For supporters</span>
        <h2 className="display" style={{ margin: "8px 0 12px", fontSize: 28, lineHeight: 1.05 }}>
          Fund a kid's <span style={{ color: "var(--c-red)" }}>summer.</span>
        </h2>
        <p style={{ margin: "0 0 14px", color: "var(--c-ink-soft)", fontSize: 14, lineHeight: 1.55 }}>
          Sponsors and community partners power the Scholarship Fund. Every dollar contributed goes
          directly to funding camp spots for London athletes.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {[
            { tag: "Individual",  price: "$1,000+",   title: "Fund a full ride",
              body: "Cover one athlete's full three-week camp — jersey, kit, daily programming. Recipient 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 get 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} className="card" style={{ padding: 20 }}>
              <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: 16, color: "#fff" }}>{c.price}</span>
              </div>
              <div className="display" style={{ marginTop: 8, fontSize: 22, lineHeight: 1.1, color: "#fff" }}>{c.title}</div>
              <p style={{ margin: "8px 0 14px", color: "var(--c-ink-soft)", fontSize: 13, lineHeight: 1.55 }}>{c.body}</p>
              <button className="btn btn-ghost tappable" onClick={() => onGo(c.cta[1])}>
                {c.cta[0]}
              </button>
            </div>
          ))}
        </div>
      </section>

      {/* Contact CTA */}
      <section style={{ padding: "8px var(--gutter) 12px" }}>
        <span className="eyebrow">Questions about the program?</span>
        <h2 className="display" style={{ margin: "8px 0 8px", fontSize: 26, lineHeight: 1.05 }}>
          Contact <span style={{ color: "var(--c-red)" }}>Coach AD.</span>
        </h2>
      </section>
      <section style={{ padding: "0 var(--gutter) 12px", display: "flex", flexDirection: "column", gap: 10 }}>
        <a
          href="https://calendly.com/coach_ad"
          target="_blank"
          rel="noopener noreferrer"
          className="btn tappable"
          style={{ textDecoration: "none" }}
        >
          Book a call with Coach AD
        </a>
        <a
          href="mailto:coach_ad@londonlogicbasketball.com?subject=Scholarship%20question"
          className="btn btn-inverse tappable"
          style={{ textDecoration: "none" }}
        >
          Or email instead
        </a>
      </section>
    </main>
  );
}

Object.assign(window, { ScholarshipPage });