/* Kooperation & Weiterbildung page */

function OrgModel() {
  const [dach, farm, schule] = window.SITE.orgModel;
  return (
    <div className="org-model">
      <div className="org-top">
        <div className="org-node is-dach">
          <div className="on-role">{dach.role}</div>
          <div className="on-name">{dach.name}</div>
          <p className="on-desc">{dach.d}</p>
        </div>
      </div>
      <div className="org-connector" aria-hidden="true"></div>
      <div className="org-pair">
        <span className="org-connector-l" aria-hidden="true"></span>
        <span className="org-connector-r" aria-hidden="true"></span>
        {[farm, schule].map((n) => (
          <div className="org-node" key={n.key}>
            <div className="on-role">{n.role}</div>
            <div className="on-name">{n.name}</div>
            <p className="on-desc">{n.d}</p>
          </div>
        ))}
      </div>
      <div className="org-goal center">
        <span className="pill-tag">↓ {window.SITE.orgGoal}</span>
      </div>
    </div>
  );
}

function KooperationPage() {
  return (
    <main className="page-enter">
      <PageHero
        crumb="Kooperation & Weiterbildung"
        eyebrow="Für Schulen & Träger · Kooperation"
        title="Gemeinsam die dritte Entwicklungsstufe verwirklichen"
        lead="Die Montessori Farm kooperiert mit Schulträgern, die anerkannte Abschlüsse und schulische Expertise einbringen. So entsteht ein Lernort, der Praxis und Schule auf Augenhöhe verbindet."
      >
        <div className="hero-ctas">
          <a className="btn btn--primary btn--lg" href="#anfrage">Kooperation anfragen <Arrow /></a>
          <a className="btn btn--ghost btn--lg" href="#modelle">Kooperationsmodelle</a>
        </div>
      </PageHero>

      {/* organisationsmodell */}
      <section className="section section--tight">
        <div className="container">
          <SecHead eyebrow="Organisationsmodell" title="Wie die Zusammenarbeit aufgebaut ist" center>
            Drei Partner, ein gemeinsames Ziel: Das Dach, der Lernort und der Schulträger setzen die dritte
            Entwicklungsstufe nach dem Erdkinderplan zusammen um.
          </SecHead>
          <Reveal><OrgModel /></Reveal>
        </div>
      </section>

      {/* kooperationsmodelle */}
      <section className="section section--sage has-rays" id="modelle">
        <div className="rays rays--sage" style={{ "--ray-opacity": ".03", "--ray-x": "18%" }} aria-hidden="true"></div>
        <div className="container">
          <SecHead eyebrow="Drei Modelle" title="Die Kooperationsmodelle im Detail">
            Vom befristeten Einstieg bis zur vollen Integration – jedes Modell lässt sich auf die Bedürfnisse
            des Partners zuschneiden.
          </SecHead>
          <div className="path-cards">
            {window.SITE.coopModels.map((m, i) => (
              <Reveal key={m.key} delay={String((i % 3) + 1)}>
                <div className="path-card">
                  <Ph motif={`${m.title}: Kooperation am Lernort`} tone={m.tone} />
                  <div className="pc-body">
                    <div className="pc-head">
                      <span className="pc-tag">{m.title}</span>
                      <span className="pc-dur">{m.dur}</span>
                    </div>
                    <p className="pc-desc">{m.d}</p>
                    <ul>{m.points.map((pt) => <li key={pt}>{pt}</li>)}</ul>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* vorteile für partner */}
      <section className="section">
        <div className="container">
          <SecHead eyebrow="Für Partner" title="Was die Kooperation Partnern bietet">
            Schulen und Träger gewinnen einen erprobten Praxisort und ein engagiertes Netzwerk.
          </SecHead>
          <div className="grid" style={{ gridTemplateColumns: "repeat(3,1fr)" }}>
            {window.SITE.partnerBenefits.map((b, i) => (
              <Reveal key={b.t} delay={String((i % 3) + 1)}>
                <div className="card" style={{ height: "100%" }}>
                  <div style={{ fontFamily: "var(--font-script)", color: "var(--sage)", fontSize: "1.9rem", lineHeight: 1 }}>{String(i + 1).padStart(2, "0")}</div>
                  <h3 style={{ fontSize: "1.18rem", margin: ".3em 0 .4em" }}>{b.t}</h3>
                  <p style={{ margin: 0, color: "var(--ink-soft)", fontSize: ".95rem" }}>{b.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* weiterbildung */}
      <section className="section section--olive has-rays">
        <div className="rays" aria-hidden="true"></div>
        <div className="container">
          <SecHead eyebrow="Weiterbildung" light title="Weiterbildung & Teamcoachings">
            Wir geben unsere Erfahrung weiter – an Pädagog:innen und Teams, die die dritte Entwicklungsstufe
            aufbauen oder begleiten.
          </SecHead>
          <div className="school-list">
            {window.SITE.weiterbildung.map((w, i) => (
              <Reveal key={w.t} delay={String((i % 2) + 1)}>
                <div className="s"><h4>{w.t}</h4><p>{w.d}</p></div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* kooperationspartner */}
      <section className="section">
        <div className="container" style={{ maxWidth: 920 }}>
          <SecHead eyebrow="Partner" title="Unser aktueller Kooperationspartner" center />
          <Reveal>
            <div className="partner-card">
              <Ph motif="Logo Montessori-Campus Dietzenbach" tone="ph--sage" className="pc-logo" />
              <div>
                <div className="pc-role">{window.SITE.partner.role}</div>
                <h3>{window.SITE.partner.name}</h3>
                <p>{window.SITE.partner.d}</p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* kontaktstrecke */}
      <section className="section section--sage has-rays" id="anfrage">
        <div className="rays rays--sage" style={{ "--ray-opacity": ".03" }} aria-hidden="true"></div>
        <div className="container" style={{ maxWidth: 820 }}>
          <Reveal>
            <InterestForm
              eyebrow="Anfrage"
              title="Kooperation anfragen"
              lead="Ihr seid Schule, Träger oder Pädagog:in und möchtet mit der Montessori Farm zusammenarbeiten? Schreibt uns – wir melden uns persönlich."
              reasons={["Kooperation", "Weiterbildung", "Teamcoaching", "Sonstiges"]}
              id="anfrage-form"
            />
          </Reveal>
        </div>
      </section>

      <CtaBand
        title="Lasst uns ins Gespräch kommen"
        text="Jede Kooperation beginnt mit einem Austausch auf Augenhöhe. Wir freuen uns auf eure Anfrage."
        primary={{ label: "Kooperation anfragen", href: "#anfrage" }}
        secondary={{ label: "Der Lernort", href: "#/lernort" }}
      />
    </main>
  );
}

Object.assign(window, { KooperationPage, OrgModel });