/* Desktop testimonials — reusable block + #testimonials page */
function TestimonialCard({ role, quote, sub }) {
  return (
    <figure style={{
      margin: 0, background: "var(--c-paper)", border: "1px solid var(--c-line)",
      borderRadius: "var(--radius-card)", padding: "30px 28px", breakInside: "avoid",
      display: "flex", flexDirection: "column", gap: 20, justifyContent: "space-between"
    }}>
      <div className="display" style={{ fontSize: 40, lineHeight: 1, color: "var(--c-red)" }}>&ldquo;</div>
      <blockquote style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: "var(--c-ink)", textWrap: "pretty" }}>{quote}</blockquote>
      <figcaption className="mono" style={{ fontSize: 11, color: "var(--c-ink-soft)" }}>
        {sub ? <React.Fragment><span style={{ color: "var(--c-red)" }}>{role}</span> · {sub}</React.Fragment> : "Camp " + role.toLowerCase()}
      </figcaption>
    </figure>);
}

function TestimonialsBlock({ quotes, cols = 3, eyebrow = "In their words", title = "From the People Who Lived It.", cta = true, pad = "0 0 96px", bare }) {
  const Outer = bare ? "div" : "section";
  return (
    <Outer data-screen-label="Testimonials" style={bare ? { marginTop: 80 } : { padding: pad }}>
      <div className={bare ? undefined : "container"}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 20, flexWrap: "wrap", marginBottom: 36 }}>
          <div>
            <Eyebrow>{eyebrow}</Eyebrow>
            <h2 className="display" style={{ margin: "14px 0 0", fontSize: "clamp(32px, 4vw, 56px)", lineHeight: 1 }}>{title}</h2>
          </div>
          {cta && <span className="tb-nw"><Btn to="testimonials" kind="ghost">Read all testimonials</Btn></span>}
        </div>
        <div className={`tb-grid tb-c${cols}`} style={{ display: "grid", gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`, gap: 18 }}>
          {quotes.map(([role, q], i) => <TestimonialCard key={i} role={role} quote={q} />)}
        </div>
      </div>
      <style>{`.tb-nw a{white-space:nowrap} @media (max-width: 1000px){.tb-c3{grid-template-columns:repeat(2,minmax(0,1fr)) !important}} @media (max-width: 700px){.tb-grid{grid-template-columns:1fr !important}}`}</style>
    </Outer>);
}

function TestimonialsPage() {
  return (
    <section data-screen-label="All testimonials" style={{ padding: "56px 0 96px" }}>
      <div className="container">
        <SectionHead eyebrow="Testimonials · In their words"
          title={<span>From the people who <span style={{ color: "var(--c-red)" }}>lived it.</span></span>}
          kicker="Every quote here comes from a London LOGIC family, athlete or coach — or from players and parents Coach AD has coached." />
        <div style={{ marginTop: 8 }}>
          <Eyebrow color="var(--c-red)">LOGIC camp · Summer 2026</Eyebrow>
          <div className="tp-cols" style={{ marginTop: 20, columns: 3, columnGap: 18 }}>
            {CAMP_TESTIMONIALS.map(([role, q], i) => <div key={i} style={{ marginBottom: 18, breakInside: "avoid" }}><TestimonialCard role={role} quote={q} /></div>)}
          </div>
        </div>
        <div style={{ marginTop: 56 }}>
          <Eyebrow color="var(--c-red)">About Coach AD</Eyebrow>
          <div className="tp-cols" style={{ marginTop: 20, columns: 3, columnGap: 18 }}>
            {COACH_TESTIMONIALS.map(([role, q, sub], i) => <div key={i} style={{ marginBottom: 18, breakInside: "avoid" }}><TestimonialCard role={role} quote={q} sub={sub} /></div>)}
          </div>
        </div>
        <div style={{ marginTop: 40, background: "var(--c-red)", color: "#fff", borderRadius: "var(--radius-card)", padding: "clamp(28px, 4vw, 48px)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20, flexWrap: "wrap" }}>
          <h3 className="display" style={{ margin: 0, fontSize: "clamp(30px, 4vw, 52px)", lineHeight: 0.96, color: "#fff" }}>Be part of summer 2027.</h3>
          <div className="tb-nw" style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Btn to="register" kind="inverse">Register</Btn>
            <Btn to="camp" kind="ghost"><span style={{ color: "#fff" }}>Camp details</span></Btn>
          </div>
        </div>
      </div>
      <style>{`.tb-nw a{white-space:nowrap} @media (max-width: 1000px){.tp-cols{columns:2 !important}} @media (max-width: 640px){.tp-cols{columns:1 !important}}`}</style>
    </section>);
}

Object.assign(window, { TestimonialCard, TestimonialsBlock, TestimonialsPage });