/* Team page */

function TeamPage() {
  return (
    <main className="page-enter">
      <PageHero
        crumb="Team"
        eyebrow="Menschen am Lernort"
        title="Das Team hinter der Farm"
        lead="Pädagogische Leitung, Management und jugendliche Community Manager:innen tragen den Lernort gemeinsam. House Parents leben mit, Ehemalige kehren als Begleitung zurück."
      />

      {/* pädagogische leitung */}
      <section className="section section--tight">
        <div className="container">
          <SecHead eyebrow="Pädagogische Leitung" title="Pädagogische Leitung" />
          <div className="lead-grid">
            {window.SITE.teamLead.map((p, i) => (
              <Reveal key={p.name} delay={String((i % 2) + 1)}>
                <div className="person">
                  <Ph motif={`Porträt ${p.name}`} tone="ph--olive" className="p-photo" />
                  <div>
                    <div className="p-name">{p.name}</div>
                    <div className="p-role">{p.role}</div>
                    <div className="p-quals">
                      {p.quals.map((q) => <span key={q}>{q}</span>)}
                    </div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* management */}
      <section className="section section--sage has-rays">
        <div className="rays rays--sage" style={{ "--ray-opacity": ".03", "--ray-x": "82%" }} aria-hidden="true"></div>
        <div className="container">
          <SecHead eyebrow="Management" title="Geschäftsführung & Management" />
          <div className="mgmt-grid">
            {window.SITE.teamMgmt.map((p, i) => (
              <Reveal key={p.name} delay={String((i % 3) + 1)}>
                <div className="mgmt-card">
                  <Ph motif={`Porträt ${p.name}`} tone="ph--sage" />
                  <div className="mc-body">
                    <div className="mc-name">{p.name}</div>
                    <div className="mc-role">{p.role}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* community manager */}
      <section className="section">
        <div className="container">
          <SecHead eyebrow="Community Manager:innen" title="Jugendliche Bereichsverantwortliche">
            Acht Jugendliche übernehmen einen Bereich der Farm und tragen dort Verantwortung – vom Garten
            bis zur Küche.
          </SecHead>
          <div className="cm-grid">
            {window.SITE.teamCMs.map((p, i) => (
              <Reveal key={p.name} delay={String((i % 4) + 1)}>
                <div className="cm-card">
                  <div className="cmc-name">{p.name}</div>
                  <div className="cmc-area">{p.area}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* house parent concept */}
      <section className="section section--olive has-rays">
        <div className="rays" aria-hidden="true"></div>
        <div className="container">
          <div className="split-2">
            <Reveal>
              <div>
                <span className="eyebrow" style={{ color: "var(--sage-200)" }}>House Parents & Alumni</span>
                <h2 style={{ color: "#fff", fontSize: "clamp(1.9rem,3.4vw,2.7rem)" }}>House Parents leben mit, Alumni führen mit</h2>
                <p className="lead" style={{ color: "rgba(255,255,255,.85)", marginTop: "1rem" }}>
                  House Parents begleiten die Lerngruppe im Alltag und schaffen einen verlässlichen
                  Lebensrahmen auf der Farm – nah dran, Tag für Tag. Ehemalige Jugendliche kehren als
                  Begleitung zurück, übernehmen Verantwortung in der Leitung und geben weiter, was sie
                  selbst hier gelernt haben.
                </p>
              </div>
            </Reveal>
            <Reveal delay="2">
              <div className="school-list" style={{ gridTemplateColumns: "1fr" }}>
                <div className="s"><h4>House-Parent-Konzept</h4><p>Verlässliche Bezugspersonen, die mit der Lerngruppe leben und die Farm als gemeinsamen Lebensort tragen.</p></div>
                <div className="s"><h4>Alumni in der Leitung</h4><p>Ehemalige kehren zurück, übernehmen Verantwortung und schließen den Kreis zwischen Lernen und Weitergeben.</p></div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <CtaBand
        title="Lernt das Team persönlich kennen"
        text="Am Infoabend oder bei einer Hospitation trefft ihr die Menschen, die den Lernort tragen."
        primary={{ label: "Interesse anmelden", href: "#/familien" }}
        secondary={{ label: "Kontakt aufnehmen", href: "#/kontakt" }}
      />
    </main>
  );
}

Object.assign(window, { TeamPage });