/* Home page — founder hero, mission, 5 divisions teaser, August camp, sponsors teaser */

function HomePage({ go, t }) {
  return (
    <div data-screen-label="01 Home">
      <Hero />
      <CommercialReel />
      <MissionBlock />
      <DivisionsTeaser />
      <AugustTeaser />
      <ScholarshipSpotlight />
      <ExperienceStrip />
      <FollowStrip />
      <SponsorsTeaser />
      <CtaFinal />
    </div>);

}

/* ============================================================
   Social platform glyphs — universal mark set
   ============================================================ */
const SOCIALS = [
{ id: "instagram", handle: "@london_logic_basketball", label: "Instagram", url: "#",
  blurb: "Daily training clips · player drops" },
{ id: "tiktok", handle: "@london_logic_basketball", label: "TikTok", url: "#",
  blurb: "60-second IQ breakdowns" },
{ id: "youtube", handle: "@LondonLOGICBasketball", label: "YouTube", url: "#",
  blurb: "Long-form film & game tape" }];


function SocialGlyph({ id, size = 22, color = "currentColor" }) {
  const s = { width: size, height: size, display: "block" };
  if (id === "instagram") return (
    <svg viewBox="0 0 24 24" style={s} fill="none" stroke={color} strokeWidth="1.7">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1" fill={color} stroke="none" />
    </svg>);
  if (id === "tiktok") return (
    <svg viewBox="0 0 24 24" style={s} fill={color}>
      <path d="M14 3v10.2a2.8 2.8 0 1 1-2.8-2.8h.6V7.6h-.6a5.6 5.6 0 1 0 5.6 5.6V8.9a6 6 0 0 0 3.8 1.3V7.4a3.4 3.4 0 0 1-3.4-3.4V3H14z" />
    </svg>);
  if (id === "youtube") return (
    <svg viewBox="0 0 24 24" style={s} fill={color}>
      <path d="M22 8.2a3 3 0 0 0-2.1-2.1C18 5.6 12 5.6 12 5.6s-6 0-7.9.5A3 3 0 0 0 2 8.2 31.2 31.2 0 0 0 1.6 12 31.2 31.2 0 0 0 2 15.8a3 3 0 0 0 2.1 2.1c1.9.5 7.9.5 7.9.5s6 0 7.9-.5a3 3 0 0 0 2.1-2.1c.3-1.3.4-2.5.4-3.8 0-1.3-.1-2.5-.4-3.8zM10 15V9l5.2 3L10 15z" />
    </svg>);
  if (id === "x") return (
    <svg viewBox="0 0 24 24" style={s} fill={color}>
      <path d="M17.5 3h3.2l-7 8 8.2 10h-6.4l-5-6.5L4.8 21H1.6l7.5-8.6L1.2 3h6.6l4.5 6 5.2-6zm-1.1 16h1.8L7.7 4.9H5.8L16.4 19z" />
    </svg>);
  return null;
}

/* ============================================================
   Commercial reel — placeholder for upcoming hero video
   ============================================================ */
function CommercialReel() {
  return (
    <section style={{ padding: "20px 0 80px" }}>
      <div className="container">
        <div style={{
          display: "flex", justifyContent: "space-between",
          alignItems: "flex-end", flexWrap: "wrap", gap: 16, marginBottom: 20
        }}>
          <div>
            <Eyebrow color="var(--c-red)">The Commercial · Coming Summer 2026</Eyebrow>
            <h2 className="display" style={{
              margin: "12px 0 0",
              fontSize: "clamp(36px, 5.4vw, 72px)",
              lineHeight: 0.96
            }}>
              The film that <span style={{ color: "var(--c-red)" }}>introduces</span> us.
            </h2>
          </div>
          <p style={{
            maxWidth: "44ch", margin: 0, fontSize: 15.5,
            color: "var(--c-ink-soft)", lineHeight: 1.55
          }}>A 60-second hero film shooting this summer — coaches, athletes and the city of London on camera. First cut drops here.


          </p>
        </div>

        <div className="reel-frame" style={{
          position: "relative",
          aspectRatio: "16 / 9",
          borderRadius: "var(--radius-card)",
          overflow: "hidden",
          background: "#0a0a0a",
          border: "1px solid var(--c-line)",
          cursor: "pointer"
        }}>
          {/* Striped placeholder backdrop */}
          <div style={{
            position: "absolute", inset: 0,
            background:
            "repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 18px, rgba(255,255,255,0.08) 18px 36px)"
          }} />

          {/* Court silhouette */}
          <div style={{
            position: "absolute", inset: 0,
            display: "grid", placeItems: "center",
            opacity: 0.16, color: "#fff"
          }}>
            <HalfCourt width={720} color="currentColor" opacity={1} />
          </div>

          {/* Top overlay row */}
          <div style={{
            position: "absolute", top: 0, left: 0, right: 0,
            padding: "20px 24px",
            display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12
          }}>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              background: "var(--c-red)", color: "#fff",
              padding: "6px 12px", borderRadius: 4,
              fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em",
              textTransform: "uppercase", fontWeight: 600
            }}>
              <span style={{ width: 7, height: 7, borderRadius: 999, background: "#fff",
                animation: "reelDot 1.4s ease-in-out infinite" }} />
              In production
            </div>
            <div className="mono" style={{ color: "rgba(255,255,255,0.7)", fontSize: 10 }}>
              REEL_01 · 00:60 · 2.39:1
            </div>
          </div>

          {/* Center play button */}
          <div style={{
            position: "absolute", inset: 0, display: "grid", placeItems: "center"
          }}>
            <div className="reel-play" style={{
              width: 112, height: 112, borderRadius: 999,
              background: "var(--c-red)",
              display: "grid", placeItems: "center",
              boxShadow: "0 14px 50px rgba(209,26,42,0.55), 0 0 0 1px rgba(255,255,255,0.18)",
              position: "relative"
            }}>
              <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff"
              style={{ marginLeft: 6 }}>
                <path d="M7 4.5v15l13-7.5L7 4.5z" />
              </svg>
              <span className="reel-pulse" />
            </div>
          </div>

          {/* Bottom caption row */}
          <div style={{
            position: "absolute", left: 0, right: 0, bottom: 0,
            padding: "22px 24px",
            background: "linear-gradient(0deg, rgba(0,0,0,0.7), transparent)",
            color: "#fff",
            display: "flex", justifyContent: "space-between",
            alignItems: "flex-end", gap: 16, flexWrap: "wrap"
          }}>
            <div>
              <div className="mono" style={{ color: "rgba(255,255,255,0.7)" }}>
                Dir. Adalton Stephenson · Filmed &amp; Produced by Andrew Tran
              </div>
              <div className="display" style={{ marginTop: 6, fontSize: 28, lineHeight: 1, color: "#fff" }}>
                "Understand Why You Work."
              </div>
            </div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {["Coaches", "Families", "Athletes", "London"].map((t) =>
              <span key={t} style={{
                fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em",
                textTransform: "uppercase", padding: "6px 10px",
                border: "1px solid rgba(255,255,255,0.3)", borderRadius: 999,
                color: "#fff"
              }}>{t}</span>
              )}
            </div>
          </div>
        </div>

        {/* Sub-row — three frames + CTA */}
        <div style={{
          marginTop: 14,
          display: "grid", gridTemplateColumns: "repeat(3, 1fr) auto", gap: 12,
          alignItems: "stretch"
        }} className="reel-sub">
          {[
          ["FRAME 01", "Cold open · gym lights"],
          ["FRAME 02", "Coach AD to camera"],
          ["FRAME 03", "Closing game · crowd"]].map(([k, l]) =>
          <div key={k} style={{
            aspectRatio: "16 / 10",
            background: "#0a0a0a", color: "#fff",
            borderRadius: 10, overflow: "hidden",
            position: "relative",
            border: "1px solid var(--c-line)"
          }}>
              <div style={{
              position: "absolute", inset: 0,
              background:
              "repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 12px, rgba(255,255,255,0.09) 12px 24px)"
            }} />
              <div style={{
              position: "absolute", left: 12, top: 10,
              fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em",
              color: "var(--c-red)"
            }}>{k}</div>
              <div style={{
              position: "absolute", left: 12, bottom: 10,
              color: "rgba(255,255,255,0.8)", fontSize: 12
            }}>{l}</div>
            </div>
          )}
          <a href="#register" className="reel-cta" style={{
            background: "var(--c-ink)", color: "#fff",
            borderRadius: 10, padding: "18px 22px",
            display: "flex", flexDirection: "column", justifyContent: "space-between",
            minWidth: 200, textDecoration: "none"
          }}>
            <div className="mono" style={{ color: "var(--c-red)" }}>Want a preview?</div>
            <div className="display" style={{ fontSize: 22, lineHeight: 1.05, marginTop: 8, color: "#fff" }}>
              Follow our socials &rarr;
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 14, color: "#fff" }}>
              {SOCIALS.map((s) =>
              <SocialGlyph key={s.id} id={s.id} size={18} color="#fff" />
              )}
            </div>
          </a>
        </div>
      </div>

      <style>{`
        @keyframes reelDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
        .reel-play .reel-pulse {
          position: absolute; inset: 0; border-radius: 999px;
          border: 2px solid var(--c-red);
          animation: reelPulse 1.8s ease-out infinite;
        }
        @keyframes reelPulse {
          0% { transform: scale(1); opacity: 0.8; }
          100% { transform: scale(1.55); opacity: 0; }
        }
        .reel-frame:hover .reel-play { transform: scale(1.04); }
        .reel-play { transition: transform 220ms ease; }
        @media (max-width: 900px) {
          .reel-sub { grid-template-columns: 1fr 1fr !important; }
          .reel-cta { grid-column: 1 / -1; }
        }
        @media (max-width: 560px) {
          .reel-sub { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>);

}

/* ============================================================
   Follow strip — drive traffic to socials
   ============================================================ */
function FollowStrip() {
  return (
    <section style={{ padding: "20px 0 40px" }}>
      <div className="container">
        <div style={{
          background: "#15110d", color: "#fff",
          borderRadius: "var(--radius-card)",
          overflow: "hidden",
          position: "relative"
        }}>
          <div style={{
            position: "absolute", top: -60, right: -80,
            opacity: 0.10, color: "#fff", pointerEvents: "none"
          }}>
            <HalfCourt width={520} color="currentColor" opacity={1} />
          </div>

          <div style={{
            position: "relative",
            display: "grid",
            gridTemplateColumns: "minmax(280px, 1fr) 2fr",
            gap: 0,
            alignItems: "stretch"
          }} className="follow-grid">

            {/* Left intro panel */}
            <div style={{
              padding: "44px 40px",
              borderRight: "1px solid rgba(255,255,255,0.12)",
              display: "flex", flexDirection: "column", justifyContent: "space-between",
              gap: 24
            }} className="follow-intro">
              <div>
                <Eyebrow color="var(--c-red)">Follow the build</Eyebrow>
                <h2 className="display" style={{
                  margin: "12px 0 0",
                  fontSize: "clamp(34px, 4.6vw, 56px)",
                  lineHeight: 0.96, color: "#fff"
                }}>
                  Behind every<br />
                  <span style={{ color: "var(--c-red)" }}>rep, drill,</span><br />
                  &amp; rebound.
                </h2>
              </div>
              <p style={{
                margin: 0, color: "rgba(255,255,255,0.72)",
                fontSize: 15, lineHeight: 1.55, maxWidth: "32ch"
              }}>
                Daily clips through camp, weekly drops in the off-season,
                and first looks at the 2026 commercial when it lands.
              </p>
            </div>

            {/* Right — social cards */}
            <div style={{
              display: "grid",
              gridTemplateColumns: `repeat(${SOCIALS.length}, 1fr)`,
              gap: 0
            }} className="follow-cards">
              {SOCIALS.map((s, i) =>
              <a key={s.id} href={s.url} target="_blank" rel="noreferrer"
              className="follow-card"
              style={{
                padding: "32px 26px",
                display: "flex", flexDirection: "column",
                justifyContent: "space-between", gap: 28,
                minHeight: 240,
                color: "#fff",
                borderRight: i < SOCIALS.length - 1 ? "1px solid rgba(255,255,255,0.12)" : "none",
                position: "relative",
                transition: "background 220ms ease"
              }}>
                  <div style={{
                  width: 44, height: 44, borderRadius: 10,
                  background: "rgba(255,255,255,0.06)",
                  border: "1px solid rgba(255,255,255,0.16)",
                  display: "grid", placeItems: "center"
                }}>
                    <SocialGlyph id={s.id} size={22} color="#fff" />
                  </div>
                  <div>
                    <div className="display" style={{ fontSize: 22, lineHeight: 1.05, color: "#fff" }}>
                      {s.label}
                    </div>
                    <div className="mono" style={{
                    marginTop: 8, color: "var(--c-red)", fontSize: 11
                  }}>
                      {s.handle}
                    </div>
                    <div style={{
                    marginTop: 10, fontSize: 13, lineHeight: 1.5,
                    color: "rgba(255,255,255,0.7)"
                  }}>
                      {s.blurb}
                    </div>
                  </div>
                  <div style={{
                  display: "inline-flex", alignItems: "center", gap: 8,
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  letterSpacing: "0.1em", textTransform: "uppercase",
                  color: "#fff"
                }}>
                    Follow <Arrow />
                  </div>
                </a>
              )}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .follow-card:hover { background: rgba(255,255,255,0.04); }
        @media (max-width: 1000px) {
          .follow-grid { grid-template-columns: 1fr !important; }
          .follow-intro { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.12); }
        }
        @media (max-width: 720px) {
          .follow-cards { grid-template-columns: repeat(2, 1fr) !important; }
          .follow-card:nth-child(2) { border-right: none !important; }
          .follow-card:nth-child(1), .follow-card:nth-child(2) {
            border-bottom: 1px solid rgba(255,255,255,0.12);
          }
        }
        @media (max-width: 460px) {
          .follow-cards { grid-template-columns: 1fr !important; }
          .follow-card { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.12); }
          .follow-card:last-child { border-bottom: none !important; }
        }
      `}</style>
    </section>);

}

function Hero() {
  return (
    <section style={{ padding: "32px 0 60px", position: "relative", color: "rgb(255, 0, 0)" }}>
      <div className="container" style={{
        display: "grid",
        gridTemplateColumns: "1.1fr 1fr",
        gap: 28, alignItems: "stretch", color: "black"
      }}>
        {/* Left — copy block */}
        <div style={{
          background: "#0a0a0a", color: "#fff",
          borderRadius: "var(--radius-card)",
          padding: "44px 48px 40px",
          display: "flex", flexDirection: "column", justifyContent: "space-between",
          minHeight: 560,
          position: "relative", overflow: "hidden"
        }} className="hero-copy">
          <div style={{ position: "absolute", top: -20, right: -40, opacity: 0.18, color: "#fff" }}>
            <HalfCourt width={420} color="currentColor" opacity={1} />
          </div>
          <div style={{ position: "relative" }}>
            <Eyebrow color="var(--c-red)">London, ON · August 2026</Eyebrow>
            <h1 className="display" style={{
              margin: "20px 0 0",
              fontSize: "clamp(56px, 9vw, 132px)",
              lineHeight: 1.02, color: "#fff"

            }}>
              Built on<br />
              <span style={{ color: "var(--c-red)", fontSize: "112px" }}>basketball</span><br />
              IQ.
            </h1>
            <div className="display" style={{
              marginTop: 22,
              fontSize: "clamp(22px, 2.6vw, 32px)",
              lineHeight: 1.1,
              color: "#fff",
              maxWidth: "22ch"
            }}>
              London's Premier Basketball Camp <span style={{ color: "var(--c-red)" }}>· Launching August 2026.</span>
            </div>
            <p style={{
              marginTop: 18, maxWidth: "44ch",
              fontSize: 17, lineHeight: 1.55, color: "rgba(255,255,255,0.78)"
            }}>
              An educator-led basketball academy for youth ages 5–18. A 12-year pathway built to train the body, teach the game, and develop the mind.
            </p>
          </div>
          <div style={{ position: "relative", display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
            <Btn to="register" kind="primary">Reserve a spot</Btn>
            <Btn to="program" kind="inverse">Our philosophy</Btn>
          </div>
          <a href="#register" onClick={() => {try {localStorage.setItem("logic_register_mode", "scholarship");} catch (e) {}}} style={{
            position: "relative", marginTop: 22, textDecoration: "none",
            display: "flex", alignItems: "center", gap: 14,
            background: "var(--c-red)", color: "#fff",
            padding: "14px 18px", borderRadius: 12,
            border: "1px solid color-mix(in oklab, white 18%, var(--c-red))"
          }} className="hero-schol">
            <div style={{
              flex: "0 0 auto",
              fontFamily: "var(--font-display, var(--font-mono))",
              fontSize: 36, fontWeight: 900, lineHeight: 1, color: "#fff",
              padding: "6px 12px", background: "rgba(0,0,0,0.35)", borderRadius: 8
            }}>10</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="mono" style={{ color: "rgba(255,255,255,0.9)", fontSize: 10, letterSpacing: "0.1em" }}>Free scholarship spots · 2026</div>
              <div style={{ marginTop: 4, color: "#fff", fontWeight: 700, fontSize: 15, lineHeight: 1.3 }}>
                One boy &amp; one girl from each division — full ride. Apply free →
              </div>
            </div>
          </a>
        </div>

        {/* Right — founder photo */}
        <div style={{
          position: "relative",
          borderRadius: "var(--radius-card)",
          overflow: "hidden",
          background: "var(--c-warm)",
          minHeight: 560
        }}>
          <div style={{
            position: "absolute", inset: 0,
            backgroundImage: "url(assets/coach-ad-huddle.jpeg)",
            backgroundSize: "cover", backgroundPosition: "center 45%"
          }} />
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.65) 100%)"
          }} />
          <div style={{
            position: "absolute", left: 24, bottom: 24, right: 24,
            color: "#fff"
          }}>
            <Pill tone="red">Founder · Coach AD</Pill>
            <div className="display" style={{ marginTop: 12, fontSize: 28, lineHeight: 1.05, color: "#fff" }}>
              "We coach the why<br />before the what."
            </div>
          </div>
          <div style={{
            position: "absolute", top: 18, right: 18,
            background: "rgba(0,0,0,0.55)", color: "#fff",
            padding: "8px 12px", borderRadius: 999,
            backdropFilter: "blur(8px)",
            fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase"
          }}>120 spots · 5 divisions</div>
        </div>
      </div>

      {/* Tip-off countdown — directly above the hero stats */}
      <Countdown />

      {/* Hero footer stats */}
      <div className="container" style={{ marginTop: 28 }}>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
          background: "var(--c-paper)",
          border: "1px solid var(--c-line)",
          borderRadius: "var(--radius-card)",
          overflow: "hidden"
        }} className="hero-stats">
          {[
          ["120", "Athletes total"],
          ["5", "Age-Divisions"],
          ["3", "Camp weeks"]].
          map(([n, l], i, arr) =>
          <div key={l} style={{
            padding: "20px 24px",
            borderRight: i < arr.length - 1 ? "1px solid var(--c-line)" : "none"
          }}>
              <div className="display" style={{ fontSize: 56, lineHeight: 0.9, color: "var(--c-red)" }}>{n}</div>
              <div className="mono" style={{ marginTop: 6, color: "var(--c-ink-soft)" }}>{l}</div>
            </div>
          )}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .hero-copy { padding: 32px 28px !important; min-height: auto !important; }
          .hero-stats { grid-template-columns: repeat(3, 1fr) !important; }
        }
        @media (max-width: 1000px) { 
          section[style*="32px 0 60px"] > .container[style*="1.1fr 1fr"] { 
            grid-template-columns: 1fr !important; 
          }
        }
      `}</style>
    </section>);

}

function MarqueeStrip() {
  return null;
}

function MissionBlock() {
  return (
    <section style={{ padding: "100px 0" }}>
      <div className="container mission-row" style={{
        display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56, alignItems: "center"
      }}>
        <div>
          <Eyebrow>Our promise</Eyebrow>
          <h2 className="display" style={{
            margin: "16px 0 0",
            fontSize: "clamp(40px, 6vw, 88px)",
            lineHeight: 0.95
          }}>
            Train the body.<br />
            Teach the game.<br />
            <span style={{ color: "var(--c-red)" }}>Develop the mind.</span>
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <p style={{ fontSize: 18.5, lineHeight: 1.6, color: "var(--c-ink)" }}>
            London LOGIC isn't a one-week pop-up. It's a long-term development model — a 12-year pathway from
            Rookie to Elite, designed by an educator who has spent his career thinking about how young athletes learn.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--c-ink-soft)" }}>
            Every cohort is small. Every coach is intentional. Every athlete leaves the gym smarter than they came in.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 8 }}>
            <Btn to="program" kind="primary">Read the philosophy</Btn>
            <Btn to="about" kind="ghost">Meet Coach AD</Btn>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .mission-row { grid-template-columns: 1fr !important; gap: 24px !important; } }`}</style>
    </section>);

}

function DivisionsTeaser() {
  const D = typeof DIV_FULL !== "undefined" ? DIV_FULL : [];
  return (
    <section style={{ padding: "60px 0", background: "var(--c-paper)", borderTop: "1px solid var(--c-line)", borderBottom: "1px solid var(--c-line)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16, marginBottom: 36 }}>
          <SectionHead eyebrow="The pathway" title="Five divisions, one arc." />
          <Btn to="divisions" kind="ghost">All divisions</Btn>
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: `repeat(${D.length || 5}, 1fr)`, gap: 12
        }} className="div-teaser">
          {D.map((d, i) =>
          <a key={d.id} href="#divisions" style={{
            display: "block",
            background: "var(--c-bg)",
            border: `1px solid var(--c-line)`,
            borderTop: `5px solid ${d.color}`,
            borderRadius: "var(--radius-card)",
            padding: "24px 22px",
            transition: "transform 200ms ease"
          }} onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-4px)"}
          onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0)"}>
              <div className="display" style={{ fontSize: 32, lineHeight: 1, color: d.color }}>{d.name}</div>
              <div className="mono" style={{ marginTop: 8, color: "var(--c-ink-soft)", fontSize: 10 }}>{d.grades}</div>
              <p style={{ marginTop: 14, fontSize: 13, color: "var(--c-ink-soft)", lineHeight: 1.5 }}>{d.tagline}</p>
            </a>
          )}
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .div-teaser { grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
    </section>);

}

function AugustTeaser() {
  return (
    <section style={{ padding: "100px 0" }}>
      <div className="container">
        <div style={{
          display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 28,
          alignItems: "stretch"
        }} className="aug-row">
          <div style={{
            background: "var(--c-red)", color: "#fff",
            borderRadius: "var(--radius-card)",
            padding: "48px 48px",
            display: "flex", flexDirection: "column", justifyContent: "space-between",
            minHeight: 460, position: "relative", overflow: "hidden"
          }}>
            <div style={{ position: "absolute", bottom: -60, right: -40, opacity: 0.18 }}>
              <HalfCourt width={400} color="#fff" opacity={1} />
            </div>
            <div style={{ position: "relative" }}>
              <Eyebrow color="rgba(255,255,255,0.9)">August Pre-Season Camp</Eyebrow>
              <div className="display" style={{
                marginTop: 18, fontSize: "clamp(64px, 9.5vw, 132px)", lineHeight: 0.9, color: "#fff"
              }}>
                Aug 3 – 21<br />2026
              </div>
              <p style={{ marginTop: 22, maxWidth: "40ch", color: "rgba(255,255,255,0.92)", fontSize: 17.5, lineHeight: 1.5 }}>Three Monday–Friday weeks. ~20 program hours/week. Closes Aug 22 with the Elite Community Game.</p>
            </div>
            <div style={{ position: "relative", display: "flex", gap: 10, marginTop: 32, flexWrap: "wrap" }}>
              <Btn to="camp" kind="inverse">Camp details</Btn>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: 14 }}>
            <figure style={{
              margin: 0, aspectRatio: "4 / 3", height: "100%", width: "100%",
              minHeight: 200, overflow: "hidden",
              borderRadius: "var(--radius-card)", background: "#0a0a0a"
            }}>
              <img src="assets/camp-young-shooter.jpeg"
                alt="A young London LOGIC athlete gripping the ball, locked in"
                style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 28%", display: "block" }} />
            </figure>
            <div style={{
              background: "var(--c-warm)",
              border: "1px solid var(--c-line)",
              borderRadius: "var(--radius-card)",
              padding: "26px 28px",
              display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "20px 20px",
              alignContent: "center"
            }}>
              <Mini k="Spots / division" v="24" sub="12 boys · 12 girls" />
              <Mini k="Total spots" v="120" sub="2026 inaugural" />
              <Mini k="Training hours / week" v="~20" sub="Per cohort" />
              <Mini k="Coach ratio" v="1 : 8" sub="Approx." />
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 1000px) { .aug-row { grid-template-columns: 1fr !important; } }`}</style>
    </section>);

}
function ScholarshipSpotlight() {
  const divs = [
  { roman: "I", name: "Rookie" },
  { roman: "II", name: "Foundation" },
  { roman: "III", name: "Development" },
  { roman: "IV", name: "Performance" },
  { roman: "V", name: "Elite" }];

  return (
    <section style={{ padding: "100px 0", background: "var(--c-warm)", borderTop: "1px solid var(--c-line)", borderBottom: "1px solid var(--c-line)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16, marginBottom: 32 }}>
          <div>
            <Eyebrow color="var(--c-red)">The Scholarship Program</Eyebrow>
            <h2 className="display" style={{ margin: "12px 0 0", fontSize: "clamp(40px, 6.4vw, 88px)", lineHeight: 0.95 }}>
              No athlete left on the<br />
              <span style={{ color: "var(--c-red)" }}>sideline.</span>
            </h2>
            <p style={{ marginTop: 16, maxWidth: "56ch", fontSize: 17, lineHeight: 1.55, color: "var(--c-ink-soft)" }}>London LOGIC Basketball believes sport should be accessible to athletes who want to play. The LOGIC Scholarship Fund helps reduce the financial strain for athletes with a genuine love for the game, creating greater access to the full camp experience through sponsor and community support.


            </p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 18 }} className="schol-row">
          {/* Left — 10 free spots */}
          <div style={{
            background: "#15110d", color: "#ffffff",
            borderRadius: "var(--radius-card)", padding: "44px 44px",
            position: "relative", overflow: "hidden",
            display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 460
          }}>
            <div style={{ position: "absolute", top: -30, right: -50, opacity: 0.14 }}>
              <HalfCourt width={420} color="#fff" opacity={1} />
            </div>
            <div style={{ position: "relative" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 28, flexWrap: "wrap" }}>
                <div className="display" style={{ fontSize: "clamp(160px, 20vw, 260px)", lineHeight: 0.82, color: "var(--c-red)", marginLeft: "clamp(-20px, -1.5vw, -8px)" }}>10</div>
                <div style={{ flex: 1, minWidth: 240 }}>
                  <div className="display" style={{ color: "var(--c-red)", fontSize: "clamp(22px, 2.2vw, 30px)", letterSpacing: "0.02em", lineHeight: 1 }}>Full-ride scholarships</div>
                  <div className="display" style={{ fontSize: "clamp(34px, 3.6vw, 52px)", color: "#fff", marginTop: 12, lineHeight: 1.0 }}>
                    Awarded to the<br />2026 inaugural<br />cohort.
                  </div>
                </div>
              </div>
              <div style={{ marginTop: 28, display: "inline-flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
                <span className="mono" style={{
                  color: "rgba(255,255,255,0.55)", fontSize: 11, letterSpacing: "0.14em"
                }}>The breakdown</span>
                <span className="display" style={{
                  color: "#fff", fontSize: 22, lineHeight: 1
                }}>
                  1 boy <span style={{ color: "var(--c-red)" }}>+</span> 1 girl <span style={{ color: "var(--c-red)" }}>×</span> 5 divisions <span style={{ color: "var(--c-red)" }}>=</span> 10 full rides
                </span>
              </div>
              <p style={{ marginTop: 24, color: "rgba(255,255,255,0.78)", fontSize: 14.5, lineHeight: 1.55, maxWidth: "52ch" }}>
                One boy and one girl from each of the five divisions receive a fully-funded spot —
                jersey, training kit, gear bag, and the full 3-week experience. Apply for free; awarded on need + character.
              </p>
            </div>
            <div style={{ position: "relative", display: "flex", gap: 10, marginTop: 28, flexWrap: "wrap" }}>
              <Btn onClick={() => {try {localStorage.setItem("logic_register_mode", "scholarship");} catch (e) {}window.location.hash = "register";}} kind="primary">Apply for a scholarship</Btn>
              <Btn to="scholarship" kind="ghost"><span style={{ color: "#fff" }}>How it works</span></Btn>
            </div>
          </div>

          {/* Right — donate a week */}
          <div style={{
            background: "var(--c-paper)", border: "1px solid var(--c-line)",
            borderRadius: "var(--radius-card)", padding: "36px 36px",
            display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 460
          }}>
            <div>
              <Eyebrow>Pay it forward</Eyebrow>
              <div className="display" style={{ marginTop: 14, fontSize: 32, lineHeight: 1.05 }}>
                Can't make a week?<br /><span style={{ color: "var(--c-red)" }}>Donate it.</span>
              </div>
              <p style={{ marginTop: 14, fontSize: 15.5, lineHeight: 1.55, color: "var(--c-ink-soft)" }}>Sponsor-a-Week is for registered athletes who genuinely can't make one of their registered weeks. Instead of taking a refund, you donate that specific week to a family in need — the spot funds another athlete instead of going unused.
              </p>
              <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", display: "flex", flexDirection: "column", gap: 10 }}>
                {[
                ["You're registered for multiple weeks.", "Available when your registration covers two or three weeks."],
                ["A specific week becomes impossible.", "Travel, injury, an unavoidable conflict — life happens."],
                ["Donate that week instead of refunding.", "A London athlete on scholarship takes the open chair."]].
                map(([h, b]) =>
                <li key={h} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <span style={{
                    flex: "0 0 auto", marginTop: 5,
                    width: 8, height: 8, background: "var(--c-red)", borderRadius: 2
                  }} />
                    <div>
                      <div style={{ fontSize: 14.5, fontWeight: 700 }}>{h}</div>
                      <div style={{ fontSize: 13, color: "var(--c-ink-soft)", marginTop: 2 }}>{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="scholarship" kind="ghost">Read more</Btn>
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 18, padding: "18px 22px",
          background: "#15110d", color: "rgba(255,255,255,0.85)",
          borderRadius: "var(--radius-card)",
          display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap"
        }}>
          <div className="mono" style={{ color: "var(--c-red)" }}>Scholarship deadline · June 27, 2026</div>
          <div style={{ fontSize: 14 }}>Recipients announced July 4. Questions? <a href="#contact" style={{ color: "#fff", textDecoration: "underline" }}>coach_ad@londonlogicbasketball.com</a></div>
        </div>
      </div>
      <style>{`
        @media (max-width: 1000px) { .schol-row { grid-template-columns: 1fr !important; } }
        @media (max-width: 720px) {
          .roster-row { grid-template-columns: 1fr !important; gap: 12px !important; }
          .roster-row > div:first-child { border-right: none !important; padding-right: 0 !important; }
          .roster-row > div:last-child { border-left: none !important; padding-left: 0 !important; text-align: center !important; }
        }
        @media (max-width: 700px) { .schol-divs { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 540px) { .roster-pills { grid-template-columns: repeat(3, 1fr) !important; } }
      `}</style>
    </section>);

}

function Mini({ k, v, sub }) {
  return (
    <div>
      <div className="mono" style={{ color: "var(--c-ink-soft)", fontSize: 11 }}>{k}</div>
      <div className="display" style={{ fontSize: 54, lineHeight: 0.95, marginTop: 6, color: "var(--c-red)" }}>{v}</div>
      <div className="mono" style={{ marginTop: 4, color: "var(--c-ink-soft)", fontSize: 10 }}>{sub}</div>
    </div>);

}

function ExperienceStrip() {
  return (
    <section style={{
      padding: "80px 0", background: "#15110d", color: "#ffffff"
    }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 56, alignItems: "center" }} className="exp-row">
          <div>
            <Eyebrow color="var(--c-red)">The athlete experience</Eyebrow>
            <h2 className="display" style={{ margin: "14px 0 0", fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 0.95, color: "#fff" }}>
              Treated like a pro. <span style={{ color: "var(--c-red)" }}>From day one.</span>
            </h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 18 }}>
            {[
            ["Player package", "Branded jersey, training kit, gear bag."],
            ["Daily media", "Socials every day. Photo drops every week."],
            ["Media Day", "Pro-style headshots & action reels for every athlete."],
            ["Showcase moment", "Closing game on August 22."]].
            map(([t, b]) =>
            <div key={t} style={{ paddingTop: 18, borderTop: "1px solid rgba(255,255,255,0.18)" }}>
                <div className="display" style={{ fontSize: 22, color: "#fff" }}>{t}</div>
                <div style={{ marginTop: 6, color: "rgba(255,255,255,0.7)", fontSize: 14, lineHeight: 1.5 }}>{b}</div>
              </div>
            )}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .exp-row { grid-template-columns: 1fr !important; } }`}</style>
    </section>);

}

function TestimonialPlaceholder() {
  return null;
}

function SponsorsTeaser() {
  return (
    <section style={{ padding: "60px 0 100px" }}>
      <div className="container">
        <div style={{
          background: "var(--c-warm)", borderRadius: "var(--radius-card)",
          border: "1px solid var(--c-line)",
          padding: "44px 44px",
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36, alignItems: "center"
        }} className="spon-row">
          <div>
            <Eyebrow>Local sponsors</Eyebrow>
            <h3 className="display" style={{ margin: "12px 0 0", fontSize: "clamp(28px, 4vw, 48px)", lineHeight: 1 }}>
              Be a part of <span style={{ color: "var(--c-red)" }}>year one.</span>
            </h3>
            <p style={{ marginTop: 12, color: "var(--c-ink-soft)", maxWidth: "44ch", fontSize: 15.5 }}>
              Court Sponsor through Community Friend tiers — visible to 120 athletes, 240+ family contacts, and the city of London.
            </p>
            <div style={{ marginTop: 18 }}>
              <Btn to="sponsors" kind="primary">Sponsor tiers</Btn>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
            {["Court", "Half-Court", "Three-Point", "Friend", "Title", "Local"].map((n) =>
            <div key={n} style={{
              aspectRatio: "1.6 / 1",
              background: "var(--c-paper)",
              border: "1px dashed var(--c-line)",
              borderRadius: 8,
              display: "grid", placeItems: "center",
              fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase",
              color: "var(--c-ink-soft)"
            }}>{n}</div>
            )}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .spon-row { grid-template-columns: 1fr !important; } }`}</style>
    </section>);

}

function Countdown() {
  const TARGET = new Date("2026-08-03T09:00:00-04:00").getTime();
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, TARGET - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor(diff % 86400000 / 3600000);
  const m = Math.floor(diff % 3600000 / 60000);
  const s = Math.floor(diff % 60000 / 1000);
  const cells = [["Days", d], ["Hours", h], ["Minutes", m], ["Seconds", s]];
  return (
    <section style={{ padding: "8px 0 32px" }}>
      <div className="container">
        <div style={{
          background: "var(--c-paper)", border: "1px solid var(--c-line)",
          borderRadius: "var(--radius-card)", padding: "22px 28px",
          display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 24, alignItems: "center"
        }} className="cd-row">
          <div>
            <div className="mono" style={{ color: "var(--c-red)" }}>August Summer Camp</div>
            <div className="display" style={{ fontSize: 26, marginTop: 4, lineHeight: 1 }}>Mon · Aug 3 · 2026</div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
            {cells.map(([l, v]) =>
            <div key={l} style={{
              background: "var(--c-ink)", color: "var(--c-paper)",
              borderRadius: 10, padding: "12px 8px", textAlign: "center"
            }}>
                <div className="display" style={{ fontSize: 32, lineHeight: 1, color: "var(--c-red)" }}>{String(v).padStart(2, "0")}</div>
                <div className="mono" style={{ marginTop: 4, opacity: 0.75, fontSize: 9 }}>{l}</div>
              </div>
            )}
          </div>
          <Btn to="register" kind="primary">Reserve a spot</Btn>
        </div>
      </div>
      <style>{`@media (max-width: 800px) { .cd-row { grid-template-columns: 1fr !important; gap: 14px !important; } }`}</style>
    </section>);

}

function CtaFinal() {
  return (
    <section style={{ padding: "60px 0 100px" }}>
      <div className="container">
        <div style={{
          background: "#15110d", color: "#ffffff",
          borderRadius: "var(--radius-card)", padding: "72px 56px",
          textAlign: "center", position: "relative", overflow: "hidden"
        }}>
          <div style={{ position: "absolute", inset: 0, opacity: 0.12, display: "grid", placeItems: "center" }}>
            <HalfCourt width={620} color="#fff" opacity={1} />
          </div>
          <div style={{ position: "relative" }}>
            <Eyebrow color="var(--c-red)">120 spots · Inaugural cohort 2026</Eyebrow>
            <h2 className="display" style={{ margin: "16px 0 0", fontSize: "clamp(54px, 9vw, 132px)", color: "#fff", lineHeight: 0.92 }}>
              Be part of <span style={{ color: "var(--c-red)" }}>day one.</span>
            </h2>
            <p style={{ marginTop: 18, maxWidth: "52ch", margin: "18px auto 0", color: "rgba(255,255,255,0.78)", fontSize: 17 }}>Reserve your athlete's spot in one of London's top camps. One, two, or three weeks. Five divisions. One unforgettable summer.

            </p>
            <div style={{ display: "inline-flex", gap: 12, marginTop: 28 }}>
              <Btn to="register" kind="primary">Register now</Btn>
              <Btn to="faq" kind="inverse">Read the FAQ</Btn>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

window.HomePage = HomePage;
window.SocialGlyph = SocialGlyph;