/* Mobile testimonials — reusable rail + #testimonials page */
function MTestimonialCard({ role, quote, sub, rail }) {
  return (
    <figure className="card" style={{
      ...(rail ? { flex: "0 0 80%", scrollSnapAlign: "start" } : null),
      margin: 0, padding: "22px 20px", display: "flex", flexDirection: "column", gap: 14, justifyContent: "space-between",
    }}>
      <div className="display" style={{ fontSize: 36, lineHeight: 1, color: "var(--c-red)" }}>&ldquo;</div>
      <blockquote style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: "#fff", textWrap: "pretty" }}>{quote}</blockquote>
      <figcaption className="mono" style={{ fontSize: 10, color: "var(--c-ink-dim)", lineHeight: 1.5 }}>
        {sub ? <React.Fragment><span style={{ color: "var(--c-red)" }}>{role}</span> · {sub}</React.Fragment> : "Camp " + role.toLowerCase()}
      </figcaption>
    </figure>
  );
}

function MTestimonialsRail({ quotes, onGo, cta = true, eyebrow = "In their words", title = "From the People Who Lived It.", pad = "8px 0 24px" }) {
  return (
    <section style={{ padding: pad }}>
      <div style={{ padding: "0 var(--gutter)" }}>
        <span className="eyebrow">{eyebrow}</span>
        <h2 className="display" style={{ margin: "10px 0 0", fontSize: 32, lineHeight: 1, color: "#fff" }}>{title}</h2>
      </div>
      <div className="rail" style={{ display: "flex", gap: 12, overflowX: "auto", padding: "18px var(--gutter) 10px", scrollSnapType: "x mandatory", alignItems: "stretch" }}>
        {quotes.map(([role, q], i) => <MTestimonialCard key={i} role={role} quote={q} rail />)}
      </div>
      {cta && (
        <div style={{ padding: "8px var(--gutter) 0" }}>
          <button className="btn btn-ghost tappable" onClick={() => onGo("testimonials")}>Read all testimonials →</button>
        </div>
      )}
    </section>
  );
}

function MTestimonialsPage({ onGo }) {
  return (
    <main className="page">
      <section style={{ padding: "10px var(--gutter) 20px" }}>
        <span className="eyebrow">Testimonials · In their words</span>
        <h1 className="display" style={{ margin: "10px 0 0", fontSize: 50, lineHeight: 0.94 }}>
          From the people who <span style={{ color: "var(--c-red)" }}>lived it.</span>
        </h1>
        <p style={{ marginTop: 12, color: "var(--c-ink-soft)", fontSize: 15, lineHeight: 1.55 }}>
          Every quote here comes from a London LOGIC family, athlete or coach — or from players and parents Coach AD has coached.
        </p>
      </section>
      <section style={{ padding: "0 var(--gutter) 24px" }}>
        <span className="mono" style={{ color: "var(--c-red)" }}>LOGIC camp · Summer 2026</span>
        <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 12 }}>
          {CAMP_TESTIMONIALS.map(([role, q], i) => <MTestimonialCard key={i} role={role} quote={q} />)}
        </div>
      </section>
      <section style={{ padding: "0 var(--gutter) 24px" }}>
        <span className="mono" style={{ color: "var(--c-red)" }}>About Coach AD</span>
        <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 12 }}>
          {COACH_TESTIMONIALS.map(([role, q, sub], i) => <MTestimonialCard key={i} role={role} quote={q} sub={sub} />)}
        </div>
      </section>
      <section style={{ padding: "0 var(--gutter) 24px" }}>
        <div className="card card-red" style={{ padding: "24px 22px" }}>
          <div className="display" style={{ fontSize: 30, lineHeight: 1, color: "#fff" }}>Be part of summer 2027.</div>
          <button className="btn btn-inverse tappable" style={{ marginTop: 16 }} onClick={() => onGo("register")}>Register →</button>
          <button className="btn btn-ghost tappable" style={{ marginTop: 8 }} onClick={() => onGo("camp")}>Camp details</button>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { MTestimonialCard, MTestimonialsRail, MTestimonialsPage });