/* The Team hub + Volunteers subpage + shared breadcrumb */
function TeamCrumb({ current }) {
  return (
    <div className="container" style={{ paddingTop: 28 }}>
      <div className="mono" style={{ fontSize: 12, display: "flex", gap: 8, alignItems: "center", color: "var(--c-ink-soft)" }}>
        <a href="#team" style={{ color: "var(--c-red)" }}>The Team</a><span>/</span><span>{current}</span>
      </div>
    </div>);
}

function TeamPage() {
  const cards = [
  { to: "about", eyebrow: "Founder", title: "The Founder", src: "assets/founder-coaching.jpeg", pos: "center 35%", alt: "Coach AD coaching on the court",
    body: "Coach AD — educator, coach and mentor. The story behind why LOGIC exists.", cta: "Meet Coach AD" },
  { to: "coaches", eyebrow: "Staff", title: "The Coaches", src: "assets/coaches-staff-2026.jpg", pos: "center 40%", alt: "The London LOGIC coaching staff in red polos on the gym floor",
    body: "Coaches, educators and athletes who teach the game the way they wish they'd been taught.", cta: "Meet the coaches" },
  { to: "volunteers", eyebrow: "Crew", title: "The Volunteers", src: "assets/volunteer-interview.jpg", pos: "center 40%", alt: "A LOGIC volunteer interviewing an athlete in front of the London LOGIC media wall",
    body: "The young leaders and community members behind media day, check-in and everything in between.", cta: "Meet the volunteers" }];
  return (
    <React.Fragment>
      <section data-screen-label="The Team" style={{ padding: "60px 0 28px" }}>
        <div className="container">
          <SectionHead
            eyebrow="Our people"
            title={<span style={{ whiteSpace: "nowrap" }}>The <span style={{ color: "var(--c-red)" }}>Team.</span></span>}
            kicker="One founder, a staff of coaches, and a crew of volunteers — the people who make LOGIC run." />
        </div>
      </section>
      <section style={{ padding: "0 0 96px" }}>
        <div className="container team-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "clamp(16px, 2vw, 28px)" }}>
          {cards.map((c) =>
          <a key={c.to} href={`#${c.to}`} className="team-card" style={{ display: "flex", flexDirection: "column", gap: 18, color: "var(--c-ink)" }}>
            <div style={{ aspectRatio: "4 / 5", borderRadius: "var(--radius-card)", overflow: "hidden", background: "#0a0a0a" }}>
              <img src={c.src} alt={c.alt} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: c.pos, display: "block", transition: "transform 500ms cubic-bezier(.2,.7,.2,1)" }} />
            </div>
            <div style={{ paddingBottom: 10, borderBottom: "2px solid var(--c-red)" }}>
              <Eyebrow color="var(--c-red)">{c.eyebrow}</Eyebrow>
            </div>
            <div className="display" style={{ fontSize: "clamp(30px, 3vw, 44px)", lineHeight: 0.95 }}>{c.title}</div>
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: "var(--c-ink-soft)", maxWidth: "38ch", textWrap: "pretty" }}>{c.body}</p>
            <span className="mono" style={{ fontSize: 12, color: "var(--c-red)", display: "inline-flex", gap: 8, alignItems: "center" }}>{c.cta} <Arrow /></span>
          </a>
          )}
        </div>
        <style>{`.team-card:hover img{transform:scale(1.04)}@media (max-width: 900px){.team-grid{grid-template-columns:1fr !important}}`}</style>
      </section>
    </React.Fragment>);
}

function VolunteersPage() {
  return (
    <React.Fragment>
      <TeamCrumb current="The Volunteers" />
      <section data-screen-label="The Volunteers" style={{ padding: "32px 0 28px" }}>
        <div className="container">
          <SectionHead
            eyebrow="Our people"
            title={<span>The <span style={{ color: "var(--c-red)" }}>Volunteers.</span></span>}
            kicker="The young leaders and community members behind camp media, assistant coaching and everything in between." />
        </div>
      </section>
      <section style={{ padding: "0 0 96px" }}>
        <div className="container">
          <figure style={{ margin: 0, borderRadius: "var(--radius-card)", overflow: "hidden", background: "#0a0a0a" }}>
            <img src="assets/volunteer-interview.jpg" alt="A LOGIC volunteer interviewing an athlete in front of the London LOGIC media wall" style={{ width: "100%", height: "auto", display: "block" }} />
          </figure>
          <div className="mono" style={{ marginTop: 12, fontSize: 11, color: "var(--c-ink-soft)" }}>Media day · Summer 2026</div>
          <div style={{ marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Btn to="volunteer-apply" kind="primary">Apply to volunteer</Btn>
            <Btn to="team" kind="ghost">Back to the team</Btn>
          </div>
        </div>
      </section>
    </React.Fragment>);
}
Object.assign(window, { TeamPage, VolunteersPage, TeamCrumb });