/* Sponsors, About (Coach AD), FAQ */

/* ============ About ============ */
function AboutPage() {
  return (
    <section style={{ padding: "60px 0 100px" }}>
      <div className="container">
        <SectionHead
          eyebrow="The founder"
          title={<span>Coach <span style={{ color: "var(--c-red)" }}>AD.</span></span>}
          kicker="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." />
        

        <div style={{
          display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 40,
          alignItems: "stretch"
        }} className="about-grid">
          <PhotoSlot src="assets/founder-portrait.jpeg" label="Coach AD" ratio="4 / 5"
          style={{ borderRadius: "var(--radius-card)", border: "1px solid var(--c-line)" }} />

          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <p style={{ fontSize: 19, lineHeight: 1.6, color: "var(--c-ink)" }}>
              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 

              <i>how learning actually happens</i>.
            </p>
            <p style={{ lineHeight: 1.6, color: "var(--c-ink-soft)", fontSize: "18px" }}>
              London LOGIC is the result. A pathway program designed to grow with the athlete: structured fundamentals
              for the youngest cohorts, decision-making and live application for the middle years, and a serious training
              environment for senior athletes preparing for varsity, college, and beyond. Built locally. Coached personally.
            </p>

            <div style={{
              marginTop: 8, padding: "20px 22px",
              background: "var(--c-warm)", borderRadius: "var(--radius-card)",
              border: "1px solid var(--c-line)",
              display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12
            }}>
              {[
              ["5+", "Years coaching"],
              ["5", "Divisions designed"],
              ["1", "City. Forever."]].
              map(([a, b]) =>
              <div key={b}>
                  <div className="display" style={{ fontSize: 36, color: "var(--c-red)", lineHeight: 1 }}>{a}</div>
                  <div className="mono" style={{ marginTop: 4, color: "var(--c-ink-soft)" }}>{b}</div>
                </div>
              )}
            </div>

            <PhotoSlot src="assets/founder-coaching.jpeg" label="On-court" ratio="16 / 9"
            style={{ borderRadius: "var(--radius-card)", marginTop: 8 }} />
          </div>
        </div>

        {/* Track record — team photo */}
        <div style={{
          marginTop: 80,
          background: "var(--c-paper)",
          border: "1px solid var(--c-line)",
          borderRadius: "var(--radius-card)",
          overflow: "hidden"
        }}>
          <div style={{
            display: "grid", gridTemplateColumns: "1.4fr 1fr",
            alignItems: "stretch"
          }} className="record-grid">
            <div style={{ position: "relative", background: "#0a0a0a", minHeight: 460 }}>
              <img
                src="assets/founder-team-aquinas.png"
                alt="Coach AD with the Aquinas girls' team after a silver-medal finish"
                style={{
                  position: "absolute", inset: 0,
                  width: "100%", height: "100%",
                  objectFit: "cover", objectPosition: "center",
                  display: "block"
                }} />
              
              <div style={{
                position: "absolute", left: 16, top: 16,
                background: "var(--c-red)", color: "#fff",
                padding: "6px 12px", borderRadius: 4,
                fontFamily: "var(--font-mono)", fontSize: 10,
                letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 600
              }}>
                Fall 2025-26 · District Silver
              </div>
              <div style={{
                position: "absolute", left: 0, right: 0, bottom: 0,
                padding: "20px 22px 18px",
                background: "linear-gradient(0deg, rgba(0,0,0,0.78), transparent)",
                color: "#fff"
              }}>
                <div className="mono" style={{ color: "rgba(255,255,255,0.7)" }}>
                  St. Thomas Aquinas · Girls Basketball
                </div>
                <div className="display" style={{ marginTop: 6, fontSize: 22, lineHeight: 1.05, color: "#fff" }}>
                  District finalists.
                </div>
              </div>
            </div>

            <div style={{
              padding: "40px 40px",
              display: "flex", flexDirection: "column", justifyContent: "space-between",
              gap: 24
            }}>
              <div>
                <Eyebrow color="var(--c-red)">District Silver</Eyebrow>
                <h3 className="display" style={{
                  margin: "12px 0 0", fontSize: "clamp(28px, 3.4vw, 42px)",
                  lineHeight: 1.02
                }}>
                  Already building<br />
                  <span style={{ color: "var(--c-red)" }}>competitors in London.</span>
                </h3>
                <p style={{
                  marginTop: 14, fontSize: 15.5, lineHeight: 1.6, color: "var(--c-ink-soft)",
                  maxWidth: "44ch"
                }}>
                  Before London LOGIC, Coach AD was already on the sideline — coaching local
                  athletes to medal finishes and developing the kind of player IQ that
                  shows up when the game is on the line.
                </p>
              </div>

              <div style={{
                display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14,
                paddingTop: 24, 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: 32, lineHeight: 1, color: "var(--c-red)" }}>{a}</div>
                    <div className="mono" style={{ marginTop: 6, color: "var(--c-ink-soft)", fontSize: 10 }}>{b}</div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* OFSAA Provincial Championship — team photo */}
        <div style={{
          marginTop: 32,
          background: "var(--c-paper)",
          border: "1px solid var(--c-line)",
          borderRadius: "var(--radius-card)",
          overflow: "hidden"
        }}>
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1.4fr",
            alignItems: "stretch"
          }} className="record-grid record-grid-flip">
            <div style={{
              padding: "40px 40px",
              display: "flex", flexDirection: "column", justifyContent: "space-between",
              gap: 24
            }}>
              <div>
                <Eyebrow color="var(--c-red)">OFSAA AAA Boys' Champions</Eyebrow>
                <h3 className="display" style={{
                  margin: "12px 0 0", fontSize: "clamp(28px, 3.4vw, 42px)",
                  lineHeight: 1.02
                }}>
                  Provincial champions.<br />
                  <span style={{ color: "var(--c-red)" }}>Best in Ontario.</span>
                </h3>
                <p style={{
                  marginTop: 14, fontSize: 15.5, lineHeight: 1.6, color: "var(--c-ink-soft)",
                  maxWidth: "44ch"
                }}>
                  In 2026, AD was an assistant coach with the Spartans as they took home
                  the OFSAA AAA Boys&apos; 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>

              <div style={{
                display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14,
                paddingTop: 24, 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: 32, lineHeight: 1, color: "var(--c-red)" }}>{a}</div>
                    <div className="mono" style={{ marginTop: 6, color: "var(--c-ink-soft)", fontSize: 10 }}>{b}</div>
                  </div>
                )}
              </div>
            </div>

            <div style={{ position: "relative", background: "#0a0a0a", minHeight: 460 }}>
              <img
                src="assets/founder-team-ofsaa-2026.jpeg"
                alt="Coach AD with the Spartans — OFSAA AAA Boys' Champions 2026"
                style={{
                  position: "absolute", inset: 0,
                  width: "100%", height: "100%",
                  objectFit: "contain", objectPosition: "center",
                  display: "block",
                  background: "#0a0a0a"
                }} />
              <div style={{
                position: "absolute", left: 16, top: 16,
                background: "var(--c-red)", color: "#fff",
                padding: "6px 12px", borderRadius: 4,
                fontFamily: "var(--font-mono)", fontSize: 10,
                letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 600
              }}>
                Winter 2025–26 · Provincial Gold
              </div>
              <div style={{
                position: "absolute", left: 0, right: 0, bottom: 0,
                padding: "20px 22px 18px",
                background: "linear-gradient(0deg, rgba(0,0,0,0.78), transparent)",
                color: "#fff"
              }}>
                <div className="mono" style={{ color: "rgba(255,255,255,0.7)" }}>
                  Mother Teresa Spartans · Boys Basketball
                </div>
                <div className="display" style={{ marginTop: 6, fontSize: 22, lineHeight: 1.05, color: "#fff" }}>
                  Provincial champions.
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Quote */}
        <div style={{
          marginTop: 80,
          padding: "60px 48px",
          background: "var(--c-ink)", color: "var(--c-paper)",
          borderRadius: "var(--radius-card)",
          textAlign: "center"
        }}>
          <div className="display" style={{
            fontSize: "clamp(32px, 4.4vw, 56px)",
            color: "var(--c-red)", lineHeight: 1.1, maxWidth: "22ch", margin: "0 auto"
          }}>
            "Train the body. Teach the game. Develop the mind."
          </div>
          <div className="mono" style={{ marginTop: 22, color: "var(--c-red)", fontSize: "18px" }}>— COACH AD, FOUNDER · LONDON LOGIC BASKETBALL</div>
        </div>

        {/* Voices — testimonials about Coach AD */}
        <div style={{ marginTop: 80 }}>
          <SectionHead
            eyebrow="Testimonials"
            title={<span>What people say <span style={{ color: "var(--c-red)" }}>about Coach AD.</span></span>}
            kicker="Real quotes from athletes and parents from teams that AD has coached." />
          
          <div style={{
            marginTop: 28,
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14
          }} className="testi-grid">
            {[
            ["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, body], i) =>
            <div key={i} style={{
              background: "var(--c-paper)", border: "1px solid var(--c-line)",
              borderRadius: "var(--radius-card)", padding: 26
            }}>
                <div style={{ fontFamily: "var(--font-serif)", fontSize: 22, lineHeight: 1.4, color: "var(--c-ink)" }}>"{quote}"</div>
                <div style={{ marginTop: 18, paddingTop: 16, borderTop: "1px solid var(--c-line)" }}>
                  <div className="mono" style={{ color: "var(--c-red)", fontSize: "16px" }}>{who}</div>
                  <div style={{ marginTop: 6, fontSize: 13, color: "var(--c-ink-soft)" }}>{body}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr !important; } }
        @media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr !important; } }
        @media (max-width: 900px) { .record-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>);

}

/* ============ FAQ ============ */
const FAQS = [
["When does the camp run?",
"August 3–21, 2026, Monday through Friday. Three weeks total. Saturday August 22 closes with the Elite Community Game."],
["How much does it cost?",
"Pricing is by division for the full three-week camp: Rookie $995, Foundation $1,175, Development $1,275, Performance $1,345, Elite $1,395."],
["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 (varsity). The selector during registration suggests automatically — 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 the 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."]];


function FaqPage() {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: "60px 0 100px" }}>
      <div className="container" style={{ maxWidth: 1000 }}>
        <SectionHead
          eyebrow="Answers"
          title={<span>Things <span style={{ color: "var(--c-red)" }}>parents ask.</span></span>}
          kicker="Don't see your question? Email coach_ad@londonlogicbasketball.com and we'll get back within 2 business days." />
        

        <div style={{
          background: "var(--c-paper)", border: "1px solid var(--c-line)",
          borderRadius: "var(--radius-card)", 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-warm)" : "transparent",
                transition: "background 200ms ease"
              }}>
                <button onClick={() => setOpen(on ? -1 : i)} style={{
                  width: "100%", textAlign: "left", border: "none", background: "transparent",
                  padding: "26px 32px", display: "flex", alignItems: "center", gap: 16, cursor: "pointer"
                }}>
                  <span className="mono" style={{ color: "var(--c-red)", minWidth: 28 }}>{String(i + 1).padStart(2, "0")}</span>
                  <span style={{
                    flex: 1, fontFamily: "var(--font-display)", fontSize: 22,
                    color: "var(--c-ink)", letterSpacing: "0.01em"
                  }}>{q}</span>
                  <span style={{
                    transform: `rotate(${on ? 45 : 0}deg)`, transition: "transform 200ms ease",
                    fontSize: 22, color: "var(--c-ink-soft)"
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: on ? 400 : 0, overflow: "hidden",
                  transition: "max-height 280ms ease"
                }}>
                  <div style={{ padding: "0 32px 26px 76px", fontSize: 16, color: "var(--c-ink)", lineHeight: 1.6 }}>{a}</div>
                </div>
              </div>);

          })}
        </div>

        <div style={{
          marginTop: 60,
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14
        }} className="faq-foot">
          <div style={{
            background: "var(--c-warm)", borderRadius: "var(--radius-card)", padding: 28,
            border: "1px solid var(--c-line)"
          }}>
            <Eyebrow>Safety</Eyebrow>
            <div className="display" style={{ marginTop: 10, fontSize: 28 }}>Code of Conduct & policies</div>
            <p style={{ marginTop: 10, color: "var(--c-ink-soft)", fontSize: 14, lineHeight: 1.55 }}>
              Behaviour expectations for athletes, parents, and coaches. Emergency protocols. Safe-sport partnerships.
              Available in full at registration.
            </p>
          </div>
          <div style={{
            background: "var(--c-ink)", color: "var(--c-paper)",
            borderRadius: "var(--radius-card)", padding: 28
          }}>
            <Eyebrow color="var(--c-red)">Talk to us</Eyebrow>
            <div className="display" style={{ marginTop: 10, fontSize: 28, color: "#fff" }}>coach_ad@londonlogicbasketball.com</div>
            <p style={{ marginTop: 10, color: "rgba(255,255,255,0.7)", fontSize: 14, lineHeight: 1.55 }}>
              Two business days. Always.
            </p>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 700px) { .faq-foot { grid-template-columns: 1fr !important; } }`}</style>
    </section>);

}

window.AboutPage = AboutPage;
window.FaqPage = FaqPage;