/* Mobile pages: Home, Program, Divisions, About, FAQ */

const DIVISIONS = [
  { id: "rookie",       roman: "I",   name: "Rookie",       grades: "Grades 1–3",   color: "#f2c94c",
    tagline: "Confidence first.",
    detail: "Coordination, comfort, and a love for the game.",
    feel: "Camp-style energy. Lower nets, smaller balls, big smiles.",
    focus: [
      "Introduction to basketball fundamentals",
      "Coordination and physical literacy",
      "Ball familiarity and control",
      "Listening, teamwork, following instructions",
      "Confidence through repetition and play",
    ],
    capacity: 24, mix: "12 boys · 12 girls" },
  { id: "foundation",   roman: "II",  name: "Foundation",   grades: "Grades 4–6",   color: "#5b8a72",
    tagline: "Structured fundamentals.",
    detail: "Structured fundamentals in a still-fun environment.",
    feel: "Camp meets training. Routines, expectations, skill progressions.",
    focus: [
      "Fundamental skill development",
      "Movement mechanics and body control",
      "Spacing and intro team concepts",
      "Applying coaching feedback",
      "Communication and enjoyment of the game",
    ],
    capacity: 24, mix: "12 boys · 12 girls" },
  { id: "development",  roman: "III", name: "Development",  grades: "Grades 7–8",   color: "#3c6997",
    tagline: "Learning meets competing.",
    detail: "The bridge between learning and competing.",
    feel: "Higher structure, intensity, accountability. Game-based learning.",
    focus: [
      "Skill refinement and game application",
      "Decision-making and basketball IQ",
      "Spacing and team understanding",
      "Competitive gameplay and situational drills",
      "Accountability, confidence, performance habits",
    ],
    capacity: 24, mix: "12 boys · 12 girls" },
  { id: "performance",  roman: "IV",  name: "Performance",  grades: "Grades 9–10",  color: "#9a4f29",
    tagline: "Train to compete.",
    detail: "Train to compete. Compete to lead.",
    feel: "Serious training environment. Pace, physicality, decision-making.",
    focus: [
      "Advanced skill execution and live application",
      "Tactical awareness and basketball IQ",
      "Film analysis and performance reflection",
      "Strength and movement efficiency",
      "Leadership, communication, competitive confidence",
    ],
    capacity: 24, mix: "12 boys · 12 girls" },
  { id: "elite",        roman: "V",   name: "Elite",        grades: "High School Varsity", color: "#e6182c",
    tagline: "Showcase-ready.",
    detail: "Senior athletes. Showcase-ready.",
    feel: "Highest intensity. Includes the Community Game on Aug 22.",
    focus: [
      "High-intensity training and competitive gameplay",
      "Advanced skill refinement and execution",
      "Tactical awareness and decision-making",
      "Physical preparation and performance habits",
      "Showcase preparation and competitive exposure",
    ],
    capacity: 24, mix: "12 boys · 12 girls" },
];

const PROGRAM_PILLARS = [
  { n: "01", title: "Skill",     body: "On-court technique progressed through age-appropriate drills, repetition, and live application. Built by coaches who know development." },
  { n: "02", title: "IQ",        body: "Spacing, reads, decisions. We teach the why before the what. Film, walk-throughs, and small-sided live reps." },
  { n: "03", title: "Body",      body: "Athletic preparation, recovery, and movement quality. Built into every day, scaled to every age." },
  { n: "04", title: "Mind",      body: "Confidence, communication, accountability. The character that drives the player." },
  { n: "05", title: "Community", body: "Local. Family-first. Showcase moments that bring London together around basketball." },
];

const PROGRAM_VALUES = [
  ["Educator-led",      "Built by teachers and coaches. Learning goals, success criteria, real reflection."],
  ["Pathway,\nnot pop-up", "Five divisions, twelve years. We grow with the athlete."],
  ["Premium experience", "Player package and daily media coverage. Treated like a pro."],
  ["Capped capacity",   "Training groups capped at 12. All sessions maintain a 1 : 8 ratio."],
  ["Inclusive by design", "12 boys + 12 girls per division. Every cohort, every level."],
  ["London-grown",      "Built here. Sponsored locally. Showcased in our gyms."],
];

const FAQS = [
  ["When does camp run?",
   "Camp runs three weeks total — August 3–21, 2026, Monday through Friday. Families may register for 1, 2, or 3 weeks. Saturday August 22 closes with the Elite Community Game."],
  ["How much does it cost?",
   "Pricing varies by division and number of weeks selected. The 3-week experience starts at $995 (Rookie) and reaches $1,395 (Elite); 1-week and 2-week options are available at every tier. See the Camp page for the full table."],
  ["How big are the cohorts?",
   "120 athletes total — 24 per division (12 boys, 12 girls). This is a low-capacity model and spots fill in registration order."],
  ["What's included?",
   "Player merch package, daily on-court development, athletic preparation, education sessions, daily socials, and weekly photo content."],
  ["What division should my child join?",
   "We recommend by grade entering September 2026: Rookie (G1–3), Foundation (G4–6), Development (G7–8), Performance (G9–10), Elite (high school varsity). Final placement is confirmed by Coach AD."],
  ["What about safety and conduct?",
   "Trained, vetted coaches. Defined Code of Conduct for athletes, parents, and staff. Full waiver, media consent, and emergency protocols handled at registration."],
  ["What if my athlete misses a day?",
   "Talk to us. We'll do our best to make up reps with the cohort and brief the athlete on what was covered."],
  ["Are photos and videos shared publicly?",
   "Only with media-consent at registration. Athletes who opt out are excluded from socials and photo drops — no questions asked."],
];

/* ---------- HOME ---------- */
function HomePage({ onGo, onOpenPrompt }) {
  return (
    <main className="page" style={{ padding: "0 0 0" }}>
      {/* Hero */}
      <section style={{ padding: "20px var(--gutter) 28px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
          <span className="eyebrow">London · Aug 2026</span>
        </div>
        <h1 className="display" style={{ margin: 0, fontSize: 64, lineHeight: 0.92, color: "#fff" }}>
          Built on<br/>
          <span style={{ color: "var(--c-red)" }}>basketball</span><br/>
          IQ.
        </h1>
        <div className="display" style={{
          marginTop: 18, fontSize: 22, lineHeight: 1.1, color: "#fff",
        }}>
          London's Premier Basketball Camp<br/><span style={{ color: "var(--c-red)" }}>Launching August 2026.</span>
        </div>
        <p style={{
          marginTop: 14, color: "var(--c-ink-soft)", fontSize: 15.5, lineHeight: 1.55,
        }}>
          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 style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 22 }}>
          <button className="btn tappable" onClick={() => onGo("program")}>
            Our philosophy
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <button className="btn btn-ghost tappable" onClick={onOpenPrompt}>
            Talk to Coach AD
          </button>
        </div>
      </section>

      {/* Founder photo card */}
      <section style={{ padding: "0 var(--gutter) 24px" }}>
        <div className="photo" style={{ aspectRatio: "4 / 5", borderRadius: 18 }}>
          <img src="../assets/coach-ad-huddle.jpeg" alt="Coach AD in the huddle" style={{ objectPosition: "center 45%" }}/>
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.78) 100%)",
          }}/>
          <div style={{
            position: "absolute", left: 18, right: 18, bottom: 18, color: "#fff",
          }}>
            <span style={{
              display: "inline-flex", alignItems: "center", gap: 6,
              padding: "5px 10px", borderRadius: 999,
              background: "var(--c-red)", color: "#fff",
              fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em",
              textTransform: "uppercase", fontWeight: 600,
            }}>Founder · Coach AD</span>
            <div className="display" style={{ marginTop: 12, fontSize: 26, lineHeight: 1.05 }}>
              "We coach the why<br/>before the what."
            </div>
          </div>
        </div>
      </section>

      {/* Countdown */}
      <Countdown/>

      {/* Stats grid */}
      <section style={{ padding: "0 var(--gutter) 28px" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
          background: "var(--c-paper)", border: "1px solid var(--c-line)",
          borderRadius: 14, overflow: "hidden",
        }}>
          {[
            ["120", "Athletes total"],
            ["5",   "Age-Divisions"],
            ["3",   "Camp weeks"],
          ].map(([n, l], i, arr) => (
            <div key={l} style={{
              padding: "20px 14px",
              borderRight: i < arr.length - 1 ? "1px solid var(--c-line)" : "none",
            }}>
              <div className="display" style={{ fontSize: 38, lineHeight: 0.9, color: "var(--c-red)" }}>{n}</div>
              <div className="mono" style={{ marginTop: 6, color: "var(--c-ink-soft)", fontSize: 10, letterSpacing: "0.08em" }}>{l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Divisions horizontal rail */}
      <section style={{ padding: "8px 0 24px" }}>
        <div style={{ padding: "0 var(--gutter) 14px", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div>
            <span className="eyebrow">The pathway</span>
            <h2 className="display" style={{ margin: "8px 0 0", fontSize: 30, lineHeight: 1 }}>
              Five divisions,<br/>one arc.
            </h2>
          </div>
          <a onClick={() => onGo("divisions")} className="mono tappable" style={{
            color: "var(--c-red)", padding: 4,
          }}>See all →</a>
        </div>
        <div className="rail" style={{
          display: "flex", gap: 12, overflowX: "auto",
          padding: "4px var(--gutter) 8px",
          scrollSnapType: "x mandatory",
        }}>
          {DIVISIONS.map((d) => (
            <a key={d.id} onClick={() => onGo("divisions")} className="tappable" style={{
              flex: "0 0 220px", scrollSnapAlign: "start",
              background: "var(--c-paper)", border: "1px solid var(--c-line)",
              borderTop: `5px solid ${d.color}`,
              borderRadius: 12, padding: "18px 16px",
              display: "flex", flexDirection: "column", gap: 10,
            }}>
              <span className="mono" style={{ color: d.color, fontSize: 10 }}>Div {d.roman} · {d.grades}</span>
              <div className="display" style={{ fontSize: 26, lineHeight: 1, color: "#fff" }}>{d.name}</div>
              <p style={{ margin: 0, color: "var(--c-ink-soft)", fontSize: 13, lineHeight: 1.45 }}>{d.tagline}</p>
            </a>
          ))}
        </div>
      </section>

      {/* August camp banner */}
      <section style={{ padding: "8px var(--gutter) 24px" }}>
        <div className="card card-red" style={{
          padding: "28px 24px", position: "relative", overflow: "hidden",
        }}>
          <span className="mono" style={{ color: "rgba(255,255,255,0.85)" }}>August Pre-Season Camp</span>
          <div className="display" style={{ marginTop: 12, fontSize: 56, lineHeight: 0.9, color: "#fff" }}>
            Aug 3–21<br/>2026
          </div>
          <p style={{ marginTop: 14, color: "rgba(255,255,255,0.92)", fontSize: 14.5, lineHeight: 1.5 }}>
            Three Monday–Friday weeks. ~20 program hours/week.
            Closes Aug 22 with the Elite Community Game.
          </p>
          <button className="btn btn-inverse tappable" style={{ marginTop: 18 }} onClick={() => onGo("camp")}>
            Camp details →
          </button>
        </div>

        {/* Camp portrait */}
        <div className="photo" style={{ aspectRatio: "4 / 5", borderRadius: 16, marginTop: 12 }}>
          <img src="../assets/camp-young-shooter.jpeg"
            alt="A young London LOGIC athlete gripping the ball, locked in"
            style={{ objectPosition: "center 28%" }}/>
        </div>
      </section>

      {/* Scholarship spotlight */}
      <section style={{ padding: "8px var(--gutter) 24px" }}>
        <div className="card card-ink" style={{ padding: "26px 22px", position: "relative", overflow: "hidden" }}>
          <span className="mono" style={{ color: "var(--c-red)" }}>The Scholarship Program</span>
          <div className="display" style={{ marginTop: 12, fontSize: 32, lineHeight: 1.0, color: "#fff" }}>
            No athlete left<br/>on the <span style={{ color: "var(--c-red)" }}>sideline.</span>
          </div>
          <div style={{
            marginTop: 18,
            display: "flex", alignItems: "center", gap: 14,
          }}>
            <div className="display" style={{ fontSize: 88, lineHeight: 0.85, color: "var(--c-red)" }}>10</div>
            <div style={{ color: "rgba(255,255,255,0.78)", fontSize: 13.5, lineHeight: 1.45 }}>
              Full-ride scholarships<br/>
              <span style={{ color: "#fff" }}>1 boy + 1 girl × 5 divisions</span>
            </div>
          </div>
          <p style={{ marginTop: 16, color: "rgba(255,255,255,0.72)", fontSize: 13, lineHeight: 1.5 }}>
            Full 3-week scholarship. Player package, training kit, jersey. Apply free; awarded on need + character.
          </p>
          <button
            className="btn tappable"
            style={{ marginTop: 18 }}
            onClick={() => {
              try { localStorage.setItem("ll_register_mode", "scholarship"); } catch (_) {}
              onGo("register");
            }}
          >
            Apply now →
          </button>
          <a
            onClick={() => onGo("scholarship")}
            className="mono tappable"
            style={{
              display: "block", marginTop: 12, textAlign: "center",
              color: "var(--c-red)", padding: 6, cursor: "pointer",
            }}
          >
            How it works →
          </a>
        </div>
      </section>

      {/* Mission quote */}
      <section style={{ padding: "20px var(--gutter) 12px" }}>
        <div className="display" style={{ fontSize: 36, lineHeight: 0.96 }}>
          Train the body.<br/>
          Teach the game.<br/>
          <span style={{ color: "var(--c-red)" }}>Develop the mind.</span>
        </div>
        <div className="mono" style={{ marginTop: 14, color: "var(--c-ink-dim)" }}>— Coach AD · founder</div>
      </section>

      {/* Final CTA */}
      <section style={{ padding: "30px var(--gutter) 20px" }}>
        <div className="card" style={{
          padding: "26px 22px", textAlign: "center", background: "var(--c-paper-2)",
        }}>
          <span className="eyebrow" style={{ justifyContent: "center" }}>120 spots · Year One</span>
          <div className="display" style={{ marginTop: 12, fontSize: 32, lineHeight: 1, color: "#fff" }}>
            Be part of <span style={{ color: "var(--c-red)" }}>day one.</span>
          </div>
          <button className="btn tappable" style={{ marginTop: 18 }} onClick={() => onGo("program")}>
            Explore the program
          </button>
          <button className="btn btn-ghost tappable" style={{ marginTop: 8 }} onClick={() => onGo("faq")}>
            Read the FAQ
          </button>
        </div>
      </section>

      {/* The Commercial */}
      <section style={{ padding: "10px var(--gutter) 36px" }}>
        <span className="eyebrow">The Commercial · Coming Summer 2026</span>
        <h2 className="display" style={{ margin: "8px 0 4px", fontSize: 28, lineHeight: 1.05 }}>
          The film that <span style={{ color: "var(--c-red)" }}>introduces</span> us.
        </h2>
        <p style={{ margin: "8px 0 14px", color: "var(--c-ink-soft)", fontSize: 14, lineHeight: 1.5 }}>
          A 60-second hero film shooting this summer — coaches, athletes, and the city of London on camera. First cut drops here.
        </p>

        <div style={{
          position: "relative", aspectRatio: "16 / 11",
          borderRadius: "var(--radius-card)", overflow: "hidden",
          background: "#0a0a0a", border: "1px solid var(--c-line)",
        }}>
          {/* striped backdrop */}
          <div style={{
            position: "absolute", inset: 0,
            background: "repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 14px, rgba(255,255,255,0.08) 14px 28px)",
          }}/>
          {/* top row */}
          <div style={{
            position: "absolute", top: 0, left: 0, right: 0, padding: "14px 14px",
            display: "flex", justifyContent: "space-between", alignItems: "center",
          }}>
            <span style={{
              display: "inline-flex", alignItems: "center", gap: 7,
              background: "var(--c-red)", color: "#fff", padding: "5px 10px", borderRadius: 4,
              fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.14em",
              textTransform: "uppercase", fontWeight: 600,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "#fff" }}/>
              In production
            </span>
            <span className="mono" style={{ color: "rgba(255,255,255,0.7)", fontSize: 9 }}>REEL_01 · 00:60</span>
          </div>
          {/* play button */}
          <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
            <div style={{
              width: 74, height: 74, borderRadius: 999, background: "var(--c-red)",
              display: "grid", placeItems: "center",
              boxShadow: "0 12px 36px rgba(230,24,44,0.5), 0 0 0 1px rgba(255,255,255,0.18)",
            }}>
              <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff" style={{ marginLeft: 4 }}>
                <path d="M7 4.5v15l13-7.5L7 4.5z"/>
              </svg>
            </div>
          </div>
          {/* bottom caption */}
          <div style={{
            position: "absolute", left: 0, right: 0, bottom: 0, padding: "16px 14px",
            background: "linear-gradient(0deg, rgba(0,0,0,0.74), transparent)", color: "#fff",
          }}>
            <div className="mono" style={{ color: "rgba(255,255,255,0.7)", fontSize: 9 }}>
              Dir. Adalton Stephenson · Filmed &amp; Produced by Andrew Tran
            </div>
            <div className="display" style={{ marginTop: 5, fontSize: 20, lineHeight: 1, color: "#fff" }}>
              "Understand Why You Work."
            </div>
          </div>
        </div>

        <div className="mono" style={{ marginTop: 12, color: "var(--c-ink-dim)", fontSize: 10.5, lineHeight: 1.6 }}>
          <span style={{ color: "var(--c-red)" }}>Want a preview?</span> Follow <span style={{ color: "#fff" }}>@london_logic_basketball</span> for first looks.
        </div>
      </section>
    </main>
  );
}

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], ["Hrs", h], ["Min", m], ["Sec", s]];
  return (
    <section style={{ padding: "0 var(--gutter) 24px" }}>
      <div className="card" style={{ padding: "18px 18px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div className="mono" style={{ color: "var(--c-red)" }}>August Summer Camp</div>
          <div className="mono" style={{ color: "var(--c-ink-dim)" }}>Aug 3 · 2026</div>
        </div>
        <div style={{
          marginTop: 12,
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8,
        }}>
          {cells.map(([l, v]) => (
            <div key={l} style={{
              background: "#0a0a0a", borderRadius: 10, padding: "12px 4px",
              textAlign: "center",
            }}>
              <div className="display" style={{ fontSize: 28, lineHeight: 1, color: "var(--c-red)" }}>
                {String(v).padStart(2, "0")}
              </div>
              <div className="mono" style={{ marginTop: 5, color: "var(--c-ink-dim)", fontSize: 9 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- PROGRAM ---------- */
function ProgramPage({ onGo }) {
  return (
    <main className="page">
      {/* Hero */}
      <section style={{ padding: "10px var(--gutter) 22px" }}>
        <span className="eyebrow">The program</span>
        <h1 className="display" style={{ margin: "10px 0 0", fontSize: 52, lineHeight: 0.94 }}>
          Built on <span style={{ color: "var(--c-red)" }}>basketball IQ.</span>
        </h1>
        <p style={{ marginTop: 14, color: "var(--c-ink-soft)", fontSize: 15.5, lineHeight: 1.55 }}>
          London LOGIC isn't just camp. It's a development engine — a long-term pathway
          built by educators who've spent careers shaping how young athletes learn the game.
        </p>
      </section>

      {/* Mission ink card */}
      <section style={{ padding: "0 var(--gutter) 14px" }}>
        <div className="card card-ink" style={{ padding: "26px 22px" }}>
          <span className="mono" style={{ color: "var(--c-red)" }}>Mission</span>
          <div className="display" style={{
            marginTop: 12, fontSize: 32, lineHeight: 1.0, color: "#fff",
          }}>
            <span style={{ color: "var(--c-red)" }}>L</span>eading <span style={{ color: "var(--c-red)" }}>O</span>ur <span style={{ color: "var(--c-red)" }}>G</span>eneration <span style={{ color: "var(--c-red)" }}>I</span>n <span style={{ color: "var(--c-red)" }}>C</span>reation — through the game we love.
          </div>
          <div style={{
            marginTop: 22, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12,
            paddingTop: 18, borderTop: "1px solid rgba(255,255,255,0.16)",
          }}>
            {[["Train", "the body"], ["Teach", "the game"], ["Develop", "the mind"]].map(([a, b]) => (
              <div key={a}>
                <div className="display" style={{ fontSize: 22, color: "var(--c-red)", lineHeight: 1 }}>{a}</div>
                <div className="mono" style={{ marginTop: 4, color: "rgba(255,255,255,0.7)", fontSize: 9.5 }}>{b}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Coaching moment candid */}
      <section style={{ padding: "0 var(--gutter) 24px" }}>
        <div className="photo" style={{
          aspectRatio: "4 / 5",
          borderRadius: "var(--radius-card)",
        }}>
          <img
            src="../assets/program-coach-moment.jpeg"
            alt="Coach AD sharing a moment with a young athlete at camp"
            style={{ objectFit: "cover", objectPosition: "center 30%" }}
          />
        </div>
      </section>

      {/* Five pillars */}
      <section style={{ padding: "4px var(--gutter) 24px" }}>
        <span className="eyebrow">The five pillars</span>
        <h2 className="display" style={{ margin: "8px 0 14px", fontSize: 28, lineHeight: 1.05 }}>
          What every athlete leaves with.
        </h2>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {PROGRAM_PILLARS.map(p => (
            <div key={p.n} className="card" style={{ padding: "20px 20px" }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
                <span className="mono" style={{ color: "var(--c-red)" }}>{p.n}</span>
                <div className="display" style={{ fontSize: 28, lineHeight: 1, color: "#fff" }}>{p.title}</div>
              </div>
              <p style={{ marginTop: 10, color: "var(--c-ink-soft)", fontSize: 13.5, lineHeight: 1.5 }}>{p.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Identity / six commitments */}
      <section style={{ padding: "4px var(--gutter) 24px" }}>
        <span className="eyebrow">Identity</span>
        <h2 className="display" style={{ margin: "8px 0 14px", fontSize: 28, lineHeight: 1.05 }}>
          Six commitments to <span style={{ color: "var(--c-red)" }}>every family.</span>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {PROGRAM_VALUES.map(([t, b], i) => (
            <div key={t} className="card" style={{
              padding: 16,
              background: i % 2 ? "var(--c-paper)" : "var(--c-paper-2)",
            }}>
              <div className="display" style={{ fontSize: 17, color: "#fff", lineHeight: 1.1, whiteSpace: "pre-line" }}>{t}</div>
              <p style={{ marginTop: 6, color: "var(--c-ink-soft)", fontSize: 12.5, lineHeight: 1.45 }}>{b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA strip — Find your division */}
      <section style={{ padding: "8px var(--gutter) 12px" }}>
        <div className="card card-red" style={{ padding: "24px 22px" }}>
          <span className="mono" style={{ color: "rgba(255,255,255,0.9)" }}>Find your division</span>
          <div className="display" style={{ marginTop: 10, fontSize: 28, lineHeight: 1.05, color: "#fff" }}>
            Five divisions.<br/>One pathway.
          </div>
          <button className="btn btn-inverse tappable" style={{ marginTop: 18 }} onClick={() => onGo("divisions")}>
            Explore divisions →
          </button>
        </div>
      </section>
    </main>
  );
}

/* ---------- DIVISIONS ---------- */
function DivisionsPage({ onGo }) {
  const [open, setOpen] = React.useState(null);
  return (
    <main className="page">
      <section style={{ padding: "10px var(--gutter) 22px" }}>
        <span className="eyebrow">The pathway</span>
        <h1 className="display" style={{ margin: "10px 0 0", fontSize: 52, lineHeight: 0.94 }}>
          Five divisions,<br/>one <span style={{ color: "var(--c-red)" }}>arc.</span>
        </h1>
        <p style={{ marginTop: 14, color: "var(--c-ink-soft)", fontSize: 15.5, lineHeight: 1.55 }}>
          A 12-year pathway. Athletes grow into the next division as their game grows up.
        </p>
        <p style={{ marginTop: 8, color: "var(--c-ink-dim)", fontSize: 13, lineHeight: 1.5 }}>
          Tap any division to see its full focus, feel, and capacity.
        </p>
      </section>

      <section style={{ padding: "0 var(--gutter) 8px", display: "flex", flexDirection: "column", gap: 12 }}>
        {DIVISIONS.map((d) => {
          const isOpen = open === d.id;
          return (
            <div key={d.id} className="card" style={{
              padding: 0, position: "relative", overflow: "hidden",
              borderTop: `5px solid ${d.color}`,
              transition: "background 200ms var(--ease-snap)",
            }}>
              {/* Summary row — always visible, tappable */}
              <button
                onClick={() => setOpen(isOpen ? null : d.id)}
                className="tappable"
                aria-expanded={isOpen}
                style={{
                  width: "100%", textAlign: "left",
                  background: "transparent", border: "none",
                  padding: "22px 20px",
                  display: "flex", alignItems: "flex-start", gap: 14,
                  cursor: "pointer", color: "inherit",
                }}
              >
                <div style={{ flex: 1, minWidth: 0 }}>
                  <span className="mono" style={{ color: d.color }}>Div {d.roman} · {d.grades}</span>
                  <div className="display" style={{ marginTop: 8, fontSize: 30, lineHeight: 0.96, color: "#fff" }}>{d.name}</div>
                  <div className="display" style={{ marginTop: 6, fontSize: 14, color: d.color, lineHeight: 1.1 }}>{d.tagline}</div>
                  <p style={{ margin: "10px 0 0", color: "var(--c-ink-soft)", fontSize: 13.5, lineHeight: 1.5 }}>{d.detail}</p>
                </div>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 12, flex: "0 0 auto" }}>
                  <span className="display" style={{
                    fontSize: 44, lineHeight: 0.85,
                    color: isOpen ? d.color : "rgba(255,255,255,0.1)",
                    transition: "color 200ms var(--ease-snap)",
                  }}>{d.roman}</span>
                  <span style={{
                    width: 28, height: 28, borderRadius: 999,
                    background: isOpen ? d.color : "rgba(255,255,255,0.06)",
                    color: isOpen ? "#0a0a0a" : "#fff",
                    display: "grid", placeItems: "center",
                    transform: `rotate(${isOpen ? 180 : 0}deg)`,
                    transition: "transform 280ms var(--ease-snap), background 200ms ease, color 200ms ease",
                  }}>
                    <svg width="12" height="12" viewBox="0 0 14 14" fill="none">
                      <path d="M3 5l4 4 4-4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </span>
                </div>
              </button>

              {/* Expanded detail */}
              <div style={{
                maxHeight: isOpen ? 1200 : 0,
                overflow: "hidden",
                transition: "max-height 460ms var(--ease-snap)",
              }}>
                <div style={{ padding: "0 20px 22px" }}>
                  {/* Feel quote */}
                  <div style={{
                    padding: "14px 16px",
                    background: "rgba(255,255,255,0.04)",
                    border: "1px solid var(--c-line)",
                    borderLeft: `3px solid ${d.color}`,
                    borderRadius: 10,
                    fontStyle: "italic", color: "#fff",
                    fontSize: 14, lineHeight: 1.5,
                  }}>"{d.feel}"</div>

                  {/* Capacity / stats panel */}
                  <div style={{
                    marginTop: 14, padding: "20px 20px",
                    background: d.color, color: "#0a0a0a",
                    borderRadius: 12,
                  }}>
                    <div className="mono" style={{ color: "rgba(0,0,0,0.7)", fontSize: 10 }}>Cohort size</div>
                    <div className="display" style={{ fontSize: 64, lineHeight: 0.9, marginTop: 4, color: "#0a0a0a" }}>{d.capacity}</div>
                    <div className="mono" style={{ marginTop: 6, color: "rgba(0,0,0,0.75)" }}>{d.mix}</div>
                    <div style={{
                      marginTop: 16, paddingTop: 14,
                      borderTop: "1px solid rgba(0,0,0,0.18)",
                      display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10,
                    }}>
                      {[
                        ["Grades", d.grades],
                        ["Programming", "~20 hrs / wk"],
                        ["Camp duration", "3 full weeks"],
                        ["Coach ratio", "~1 : 8"],
                      ].map(([k, v]) => (
                        <div key={k}>
                          <div className="mono" style={{ color: "rgba(0,0,0,0.7)", fontSize: 9 }}>{k}</div>
                          <div style={{ marginTop: 4, fontSize: 13.5, fontWeight: 700, color: "#0a0a0a" }}>{v}</div>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Development focus */}
                  <div style={{ marginTop: 16 }}>
                    <span className="mono" style={{ color: "var(--c-ink-soft)" }}>Development focus</span>
                    <ul style={{ listStyle: "none", padding: 0, margin: "10px 0 0", display: "flex", flexDirection: "column", gap: 10 }}>
                      {d.focus.map((f, i) => (
                        <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, lineHeight: 1.45, color: "#fff" }}>
                          <span style={{
                            flex: "0 0 auto", marginTop: 2,
                            width: 20, height: 20, borderRadius: 5,
                            background: d.color, color: "#0a0a0a",
                            display: "grid", placeItems: "center",
                            fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 700,
                          }}>{i + 1}</span>
                          <span>{f}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  {/* Reserve CTA */}
                  <a
                    href="#register"
                    onClick={(e) => {
                      e.preventDefault();
                      try { localStorage.setItem("ll_register_division", d.id); } catch (_) {}
                      onGo("register");
                    }}
                    className="tappable"
                    style={{
                      marginTop: 18,
                      display: "flex", alignItems: "center", justifyContent: "space-between",
                      padding: "14px 16px 14px 18px",
                      background: "#0a0a0a",
                      color: "#fff",
                      borderRadius: 12,
                      border: `1px solid ${d.color}`,
                      fontFamily: "var(--font-display)", fontSize: 15.5,
                      letterSpacing: "0.06em", textTransform: "uppercase",
                      textDecoration: "none",
                    }}
                  >
                    <span>Reserve a <span style={{ color: d.color }}>{d.name}</span> spot</span>
                    <span style={{
                      width: 28, height: 28, borderRadius: 999,
                      background: d.color, color: "#0a0a0a",
                      display: "grid", placeItems: "center", flex: "0 0 auto",
                    }}>
                      <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
                        <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </span>
                  </a>
                </div>
              </div>
            </div>
          );
        })}
      </section>

      {/* Contact Coach AD — match the founder page */}
      <section style={{ padding: "12px var(--gutter) 0" }}>
        <span className="eyebrow">Questions about a division?</span>
        <h2 className="display" style={{ margin: "8px 0 8px", fontSize: 28, lineHeight: 1.05 }}>
          Contact <span style={{ color: "var(--c-red)" }}>Coach AD.</span>
        </h2>
        <p style={{ margin: "0 0 14px", color: "var(--c-ink-soft)", fontSize: 14, lineHeight: 1.55 }}>
          Final placement is confirmed by Coach AD. Book a 20-minute call or email — every parent gets a personal answer.
        </p>
      </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=Question%20about%20a%20division"
          className="btn btn-inverse tappable"
          style={{ textDecoration: "none" }}
        >
          Or email instead
        </a>
      </section>
    </main>
  );
}

/* ---------- ABOUT ---------- */
function AboutPage({ onGo }) {
  return (
    <main className="page">
      <section style={{ padding: "10px var(--gutter) 22px" }}>
        <span className="eyebrow">The founder</span>
        <h1 className="display" style={{ margin: "10px 0 0", fontSize: 60, lineHeight: 0.92 }}>
          Coach <span style={{ color: "var(--c-red)" }}>AD.</span>
        </h1>
        <p style={{ marginTop: 12, color: "var(--c-ink-soft)", fontSize: 15.5, lineHeight: 1.55 }}>
          Educator. Coach. Mentor. London LOGIC is the program he wished he had growing up — and the one he's spent his career preparing to lead.
        </p>
      </section>

      <section style={{ padding: "0 var(--gutter) 20px" }}>
        <div className="photo" style={{ aspectRatio: "4 / 5", borderRadius: 16 }}>
          <img src="../assets/founder-portrait.jpeg" alt="Coach AD"/>
        </div>
      </section>

      <section style={{ padding: "0 var(--gutter) 20px", display: "flex", flexDirection: "column", gap: 14 }}>
        <p style={{ margin: 0, color: "#fff", fontSize: 16, lineHeight: 1.6 }}>
          Coach AD is a London-based educator and high school basketball coach. He's spent years building age-appropriate
          development models for athletes from grade-school first-touches all the way to varsity competition —
          with a teacher's instinct for how learning actually happens.
        </p>
        <p style={{ margin: 0, color: "var(--c-ink-soft)", fontSize: 14.5, lineHeight: 1.6 }}>
          London LOGIC is the result. A pathway program designed to grow with the athlete: structured fundamentals
          for the youngest cohorts, decision-making for the middle years, and a serious training environment
          for senior athletes preparing for varsity, college, and beyond.
        </p>
      </section>

      {/* Stats */}
      <section style={{ padding: "10px var(--gutter) 24px" }}>
        <div className="card" style={{
          padding: 0, overflow: "hidden",
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
        }}>
          {[
            ["5+", "Years coaching"],
            ["5",  "Divisions designed"],
            ["1",  "City. Forever."],
          ].map(([a, b], i) => (
            <div key={b} style={{
              padding: "18px 14px",
              borderRight: i < 2 ? "1px solid var(--c-line)" : "none",
            }}>
              <div className="display" style={{ fontSize: 36, color: "var(--c-red)", lineHeight: 1 }}>{a}</div>
              <div className="mono" style={{ marginTop: 6, color: "var(--c-ink-soft)" }}>{b}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Track record / Aquinas photo */}
      <section style={{ padding: "0 var(--gutter) 24px" }}>
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div className="photo" style={{ aspectRatio: "16 / 11", borderRadius: 0 }}>
            <img src="../assets/founder-team-aquinas.png" alt="Coach AD and the Aquinas team"/>
            <div style={{
              position: "absolute", left: 12, top: 12,
              background: "var(--c-red)", color: "#fff",
              padding: "5px 10px", borderRadius: 4,
              fontFamily: "var(--font-mono)", fontSize: 9.5,
              letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 600,
            }}>Fall 2025-26 · District Silver</div>
          </div>
          <div style={{ padding: "20px 20px" }}>
            <span className="mono" style={{ color: "var(--c-red)" }}>District Silver</span>
            <div className="display" style={{ marginTop: 8, fontSize: 24, lineHeight: 1.05, color: "#fff" }}>
              Already building<br/><span style={{ color: "var(--c-red)" }}>competitors in London.</span>
            </div>
            <p style={{ marginTop: 10, color: "var(--c-ink-soft)", fontSize: 14, lineHeight: 1.55 }}>
              Before London LOGIC, Coach AD was already on the sideline — coaching local athletes to medal
              finishes and developing player IQ that shows up when the game is on the line.
            </p>
            <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, paddingTop: 16, borderTop: "1px solid var(--c-line)" }}>
              {[
                ["13",     "Athletes coached"],
                ["Silver", "WOSSAA finish"],
                ["1",      "Tight-knit team"],
              ].map(([a, b]) => (
                <div key={b}>
                  <div className="display" style={{ fontSize: 22, color: "var(--c-red)", lineHeight: 1 }}>{a}</div>
                  <div className="mono" style={{ marginTop: 4, color: "var(--c-ink-soft)", fontSize: 9 }}>{b}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* OFSAA Provincial Championship */}
      <section style={{ padding: "0 var(--gutter) 24px" }}>
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div className="photo" style={{ aspectRatio: "5 / 3", borderRadius: 0, background: "#0a0a0a" }}>
            <img src="../assets/founder-team-ofsaa-2026.jpeg" alt="Coach AD with the Spartans — OFSAA AAA Boys' Champions 2026" style={{ objectFit: "contain" }}/>
            <div style={{
              position: "absolute", left: 12, top: 12,
              background: "var(--c-red)", color: "#fff",
              padding: "5px 10px", borderRadius: 4,
              fontFamily: "var(--font-mono)", fontSize: 9.5,
              letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 600,
            }}>Winter 2025–26 · Provincial Gold</div>
          </div>
          <div style={{ padding: "20px 20px" }}>
            <span className="mono" style={{ color: "var(--c-red)" }}>OFSAA AAA Boys' Champions</span>
            <div className="display" style={{ marginTop: 8, fontSize: 24, lineHeight: 1.05, color: "#fff" }}>
              Provincial champions.<br/><span style={{ color: "var(--c-red)" }}>Best in Ontario.</span>
            </div>
            <p style={{ marginTop: 10, color: "var(--c-ink-soft)", fontSize: 14, lineHeight: 1.55 }}>
              In 2026, AD was an assistant coach with the Spartans as they took home the
              OFSAA AAA Boys' Basketball Championship banner — the top high school
              basketball title in the province. Learning firsthand the development
              philosophies that built that team, Coach AD hopes to put the same in place
              for London LOGIC.
            </p>
            <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, paddingTop: 16, borderTop: "1px solid var(--c-line)" }}>
              {[
                ["Gold",   "OFSAA AAA Boys'"],
                ["#1",     "In Ontario"],
                ["2026",   "Banner year"],
              ].map(([a, b]) => (
                <div key={b}>
                  <div className="display" style={{ fontSize: 22, color: "var(--c-red)", lineHeight: 1 }}>{a}</div>
                  <div className="mono" style={{ marginTop: 4, color: "var(--c-ink-soft)", fontSize: 9 }}>{b}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Quote */}
      <section style={{ padding: "10px var(--gutter) 24px" }}>
        <div className="card card-ink" style={{ padding: "28px 22px", textAlign: "center" }}>
          <div className="display" style={{
            fontSize: 26, lineHeight: 1.1, color: "var(--c-red)",
          }}>
            "Train the body. Teach the game. Develop the mind."
          </div>
          <div className="mono" style={{ marginTop: 14, color: "var(--c-red)" }}>
            — Coach AD · London LOGIC
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section style={{ padding: "8px var(--gutter) 24px" }}>
        <span className="eyebrow">Testimonials</span>
        <h2 className="display" style={{ margin: "8px 0 14px", fontSize: 26, lineHeight: 1.05 }}>
          What people say <span style={{ color: "var(--c-red)" }}>about Coach AD.</span>
        </h2>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {[
            [
              "Playing for you this season was a great experience. Your coaching methods were clear, supportive, and helped me improve both individually and as part of the team. The season pushed me to grow in confidence and skill. Can't wait until next year!",
              "Past athlete",
              "Player from the Fall 2025-26 Season",
            ],
            [
              "As a parent, I truly saw tremendous growth in my daughter this year. Her skills improved significantly, and most importantly, her confidence grew so much thanks to your positive and encouraging approach. You consistently went above and beyond — coming early, staying late, and creating a fun, supportive environment with team activities.",
              "Parent of past athlete",
              "Parent of a Player from the Fall 2025-26 Season",
            ],
            [
              "I saw our daughter grow this Fall with your training. You built her up and gave her the confidence to achieve more on the court and even off the court, in a leadership role. I am grateful for the positive influence you've had on her.",
              "Parent of past athlete",
              "Parent of a Player from the Fall 2025-26 Season",
            ],
          ].map(([quote, who, sub], i) => (
            <div key={i} className="card" style={{ padding: 22 }}>
              <div style={{
                fontFamily: "Georgia, serif", fontSize: 16.5,
                lineHeight: 1.5, color: "#fff",
              }}>"{quote}"</div>
              <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--c-line)" }}>
                <div className="mono" style={{ color: "var(--c-red)" }}>{who}</div>
                <div style={{ marginTop: 4, color: "var(--c-ink-soft)", fontSize: 12.5 }}>{sub}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Contact CTA */}
      <section style={{ padding: "8px 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" className="btn btn-inverse tappable" style={{ textDecoration: "none" }}>
          Or email instead
        </a>
      </section>
    </main>
  );
}

/* ---------- FAQ ---------- */
function FaqPage() {
  const [open, setOpen] = React.useState(0);
  return (
    <main className="page">
      <section style={{ padding: "10px var(--gutter) 22px" }}>
        <span className="eyebrow">Answers</span>
        <h1 className="display" style={{ margin: "10px 0 0", fontSize: 52, lineHeight: 0.94 }}>
          Things <span style={{ color: "var(--c-red)" }}>parents ask.</span>
        </h1>
        <p style={{ marginTop: 14, color: "var(--c-ink-soft)", fontSize: 14.5, lineHeight: 1.55 }}>
          Don't see your question? Email <span style={{ color: "#fff" }}>coach_ad@londonlogicbasketball.com</span> and we'll get back within 2 business days.
        </p>
      </section>

      <section style={{ padding: "0 var(--gutter) 16px" }}>
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          {FAQS.map(([q, a], i) => {
            const on = open === i;
            return (
              <div key={i} style={{
                borderBottom: i < FAQS.length - 1 ? "1px solid var(--c-line)" : "none",
                background: on ? "var(--c-paper-2)" : "transparent",
              }}>
                <button onClick={() => setOpen(on ? -1 : i)} style={{
                  width: "100%", textAlign: "left", border: "none", background: "transparent",
                  padding: "18px 18px", display: "flex", alignItems: "center", gap: 12, cursor: "pointer",
                }}>
                  <span className="mono" style={{ color: "var(--c-red)", minWidth: 22 }}>{String(i + 1).padStart(2, "0")}</span>
                  <span style={{
                    flex: 1,
                    fontFamily: "var(--font-display)", fontSize: 17,
                    color: "#fff", letterSpacing: "0.01em", lineHeight: 1.15,
                    textTransform: "uppercase",
                  }}>{q}</span>
                  <span style={{
                    width: 22, height: 22, borderRadius: 999,
                    background: on ? "var(--c-red)" : "rgba(255,255,255,0.08)",
                    display: "grid", placeItems: "center",
                    transform: `rotate(${on ? 45 : 0}deg)`,
                    transition: "transform 220ms var(--ease-snap), background 220ms ease",
                    color: "#fff", fontSize: 16, lineHeight: 1, paddingBottom: 2,
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: on ? 400 : 0, overflow: "hidden",
                  transition: "max-height 320ms var(--ease-snap)",
                }}>
                  <div style={{
                    padding: "0 18px 18px 52px",
                    color: "var(--c-ink-soft)", fontSize: 14.5, lineHeight: 1.55,
                  }}>{a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      <section style={{ padding: "20px var(--gutter) 0" }}>
        <div className="card card-red" style={{ padding: "22px 22px" }}>
          <div className="mono" style={{ color: "rgba(255,255,255,0.85)" }}>Still have a question?</div>
          <div className="display" style={{ marginTop: 8, fontSize: 22, color: "#fff", lineHeight: 1.05 }}>
            Talk to Coach AD directly.
          </div>
          <a href="https://calendly.com/coach_ad" target="_blank" rel="noopener noreferrer" className="btn btn-inverse tappable" style={{ marginTop: 16, textDecoration: "none" }}>
            Book a call with Coach AD
          </a>
          <div className="mono" style={{ marginTop: 10, color: "rgba(255,255,255,0.75)", fontSize: 11, textAlign: "center" }}>
            or email <span style={{ color: "#fff" }}>coach_ad@londonlogicbasketball.com</span>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage, ProgramPage, DivisionsPage, AboutPage, FaqPage, DIVISIONS, FAQS });