/* === Page: Startseite === */
function HomePage({ heroRecruitVariant, employerVariant, employerLeadVariant }) {
  return (
    <div className="page-enter">
      {/* HERO */}
      <section className="hero">
        <div className="container">
          <div className="hero__row">
            <div>
              <HomeHeroRecruitCopy variant={heroRecruitVariant} />
            </div>
            <div className="hero__visual">
              <Placeholder
                label="HERO · Behandlungssituation Schulter"
                variant="portrait"
                className="hero__image"
                src="images/hero-v3.png"
                alt="Physiotherapeut erklärt Patientin im Beratungsgespräch an einem Behandlungstisch"
                style={{ height: "100%", aspectRatio: "auto" }}
              />
            </div>
          </div>
        </div>
      </section>

      {/* PHILOSOPHIE */}
      <section className="section">
        <div className="container">
          <SectionHead
            num="02"
            kicker="Unsere Philosophie"
            title="Ganzheitlich, evidenzbasiert und aktiv - mit dem Ziel echter Selbstständigkeit"
            lede="Klassische Physiotherapie Praxen behandeln passiv und seriell. Wir kombinieren wissenschaftlich fundierte Methoden mit aktivem Training und einer klaren Mission: Sie sollen verstehen, was Ihren Körper bewegt, und es selbst steuern können."
          />
          <div className="grid-3">
            {[
              { num: "I", t: "Evidenzbasiert", b: "Die Methoden, die wir einsetzen, haben einen wissenschaftlichen Hintergrund. Wir folgen aktuellen Studien — nicht Trends." },
              { num: "II", t: "Ganzheitlich", b: "Bewegungsapparat, Nervensystem, Ernährung und Mikronährstoffe greifen ineinander. Wir denken den Körper zusammen." },
              { num: "III", t: "Aktiv statt passiv", b: "Manuelle Therapie ist ein Werkzeug, kein Programm. Trainingstherapie und Edukation sind der Kern." },
              { num: "IV", t: "Edukation", b: "Sie verlassen jede Sitzung mit einem klareren Bild davon, was passiert — und was Sie tun können." },
              { num: "V", t: "Lange Sitzungen", b: "35–60 Minuten 1:1. Genug Zeit, um sauber zu untersuchen, zu erklären und zu trainieren." },
              { num: "VI", t: "Begleitung", b: "Coaching und Prävention auch nach der Akutphase — damit Sie selbstständig zurecht kommen.." },
            ].map((c) => (
              <div className="card" key={c.num}>
                <div className="card__num">{c.num}</div>
                <h3 className="card__title">{c.t}</h3>
                <p className="card__body">{c.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SCHULTER SCHWERPUNKT (Split) */}
      <section className="section section--alt">
        <div className="container">
          <div className="split">
            <div>
              <Eyebrow num="03">Schwerpunkt</Eyebrow>
              <h2 style={{ marginTop: 18, fontSize: "clamp(34px, 4.4vw, 60px)" }}>
                Schwerpunkt orthopädische und chirurgische Krankheitsbilder.
              </h2>
              <p style={{ marginTop: 24, fontSize: 17, color: "var(--ink-2)", maxWidth: "52ch", lineHeight: 1.6 }}>
                Wir betreuen das volle orthopädische Spektrum, spezialisieren uns aber in der Schulter­therapie — inklusive strukturierter
                Nachsorge nach OPs.
              </p>
              <ul style={{ listStyle: "none", padding: 0, margin: "32px 0 0", display: "grid", gap: 14 }}>
                {[
                  "Impingement, Rotatorenmanschette, Kalkschulter",
                  "Nachsorge nach Schulter-OP (strukturiertes Phasenmodell)",
                  "Nachsorge nach Bandscheibenvorfall",
                  "Rücken, Knie, Hüfte und chronische Schmerzen",
                ].map((t) => (
                  <li key={t} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <span className="list-check" style={{ marginTop: 4 }}>{ICONS.check}</span>
                    <span style={{ color: "var(--ink-2)" }}>{t}</span>
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 36 }}>
                <Button variant="ghost" href="#/leistungen">Alle Leistungen</Button>
              </div>
            </div>
            <Placeholder
              label="FOTO · Schulter-Untersuchung im Behandlungsraum"
              variant="tall"
              src="images/schwerpunkt.png"
              alt="Physiotherapeut begleitet Patientin bei einer Schulterübung am Behandlungstisch"
            />
          </div>
        </div>
      </section>

      {/* DIGITAL APP (Split reversed) */}
      <section className="section">
        <div className="container">
          <div className="split">
            <div style={{ display: "grid", placeItems: "center" }}>
              <PhoneMock
                src="images/trainings-app.png"
                alt="PhysioKur Trainings-App mit Übungsplan, Timer und Erledigt-Tracking"
              />
            </div>
            <div>
              <Eyebrow num="04">Trainings-App</Eyebrow>
              <h2 style={{ marginTop: 18, fontSize: "clamp(34px, 4.4vw, 60px)" }}>
                Ihr Trainingsplan — in der Hand.
              </h2>
              <p style={{ marginTop: 24, fontSize: 17, color: "var(--ink-2)", maxWidth: "52ch", lineHeight: 1.6 }}>
                Nach jeder Sitzung erhalten Sie Ihren individuellen Plan in unserer App:
                mit Bildern, klaren Texten und Videoanleitungen. Damit Übungen zuhause
                so präzise sitzen wie in der Praxis.
              </p>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 24 }}>
                <Tag>Bilder</Tag><Tag>Texte</Tag><Tag>Videos</Tag><Tag accent>Eigenständig trainieren</Tag>
              </div>
              <div style={{ marginTop: 32 }}>
                <Button variant="primary" href="#/patienten">Mehr für Patienten</Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* KOOPERATION */}
      <section className="section section--ink">
        <div className="container">
          <div className="split" style={{ alignItems: "flex-start" }}>
            <div>
              <Eyebrow num="05">Kooperation</Eyebrow>
              <h2 style={{ marginTop: 18, fontSize: "clamp(34px, 4.4vw, 60px)" }}>
                Tür an Tür mit der Orthopädie.
              </h2>
              <p style={{ marginTop: 24, fontSize: 17, color: "color-mix(in srgb, var(--bg) 78%, transparent)", maxWidth: "52ch", lineHeight: 1.6 }}>
                Unsere Praxis befindet sich im 1. Stock über der orthopädischen Praxis Dr. Sharma zusammen — im
                selben Gebäude. Das bedeutet kurze Wege zur Orthopädie und zur eventuellen Abklärung von Befunden.
              
              </p>
            </div>
            <div className="grid-2" style={{ gap: 16 }}>
              {[
                { t: "Direkte neben der Orthopädie", b: "Physiotherapie und Facharztpraxis unter einem Dach" },
                { t: "Therapie mit Plan", b: "Befundorientiert, strukturiert und nachvollziehbar aufgebaut." },
                { t: "Zurück in Bewegung", b: "Begleitung Schritt für Schritt zurück in Alltag und Sport" },
                { t: "Nachsorge nach OP", b: "Strukturiert vom OP-Tag bis zum Alltag." },
              ].map((c) => (
                <div key={c.t} className="card coop-card">
                  <h3 style={{ fontFamily: "var(--serif)", fontSize: 20, color: "var(--bg)" }}>{c.t}</h3>
                  <p style={{ marginTop: 10, fontSize: 14, color: "color-mix(in srgb, var(--bg) 72%, transparent)", lineHeight: 1.55 }}>{c.b}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <HomeEmployerSection variant={employerVariant} leadVariant={employerLeadVariant} />

      {/* DUAL CTA */}
      <section className="section section--alt">
        <div className="container">
          <div className="grid-2">
            <div className="card" style={{ padding: 40 }}>
              <Tag accent>Für Patienten</Tag>
              <h3 style={{ fontFamily: "var(--serif)", fontSize: "clamp(28px, 3vw, 40px)", marginTop: 18, lineHeight: 1.1 }}>
                Termin anfragen.<br/>Persönlich, nicht online.
              </h3>
              <p style={{ marginTop: 18, color: "var(--ink-2)", maxWidth: "44ch" }}>
                Wir nehmen uns Zeit für Ihr Anliegen — telefonisch oder per Formular.
                Keine Buchungs-Maschine.
              </p>
              <div style={{ marginTop: 28 }}>
                <Button variant="primary" href="#/kontakt">Kontakt aufnehmen</Button>
              </div>
            </div>
            <div className="card" style={{ padding: 40 }}>
              <Tag>Für Therapeut:innen</Tag>
              <h3 style={{ fontFamily: "var(--serif)", fontSize: "clamp(28px, 3vw, 40px)", marginTop: 18, lineHeight: 1.1 }}>
                Werden Sie Teil eines Teams, das sich entwickelt.
              </h3>
              <p style={{ marginTop: 18, color: "var(--ink-2)", maxWidth: "44ch" }}>
                Lange Behandlungszeiten, überdurchschnittliche Bezahlung,
                regelmäßige Fortbildung — Motivation zählt mehr als CV.
              </p>
              <div style={{ marginTop: 28 }}>
                <Button variant="accent" href="#/karriere">Kennenlerngespräch</Button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}


function HomeHeroRecruitCopy({ variant }) {
  const recruitLede = "Für unser Team suchen wir fachlich qualifizierte Therapeut:innen mit aktivem, evidenzbasiertem Anspruch — nicht für eine Durchlaufpraxis.";
  const meta = (
    <div className="hero__meta">
      <div className="hero__meta-item"><div className="k">35–60</div><div className="v">Min. Behandlungszeit</div></div>
      <div className="hero__meta-item"><div className="k">12+</div><div className="v">Therapie-Methoden</div></div>
      <div className="hero__meta-item"><div className="k">1:1</div><div className="v">Betreuung</div></div>
    </div>
  );
  const recruitCtas = (primaryLabel = "Jetzt bewerben", secondaryLabel = "Termin anfragen") => (
    <div className="hero__cta-row">
      <Button variant="primary" href="#/karriere">{primaryLabel}</Button>
      <Button variant="ghost" href="#/kontakt">{secondaryLabel}</Button>
    </div>
  );

  if (variant === "search-tag") {
    return (
      <>
        <div style={{ marginBottom: 18 }}>
          <Tag accent>Gesucht: Qualifizierte Therapeut:innen</Tag>
        </div>
        <Eyebrow num="01">Physiokur Physiotherapie</Eyebrow>
        <h1 style={{ marginTop: 18 }}>Teamverstärkung mit fachlichem Anspruch.</h1>
        <p className="hero__lede">{recruitLede}</p>
        {recruitCtas("Zur Stellenausschreibung")}
        {meta}
      </>
    );
  }

  if (variant === "split-cta") {
    return (
      <>
        <Eyebrow num="01">Karriere & Physiokur</Eyebrow>
        <div className="section-head" style={{ marginBottom: 0, marginTop: 18 }}>
          <div>
            <h1 style={{ fontSize: "clamp(34px, 4.4vw, 60px)", textWrap: "balance" }}>
              Qualifizierte Physiotherapeut:innen gesucht.
            </h1>
            <p className="hero__lede" style={{ marginTop: 24 }}>{recruitLede}</p>
          </div>
          <div style={{ display: "grid", gap: 12, justifyItems: "start", alignContent: "end" }}>
            <Button variant="primary" href="#/karriere">Jetzt bewerben</Button>
            <Button variant="ghost" href="#/kontakt">Termin anfragen</Button>
          </div>
        </div>
        {meta}
      </>
    );
  }

  if (variant === "callout-band") {
    return (
      <>
        <Eyebrow num="01">Physiokur Physiotherapie</Eyebrow>
        <h1 style={{ marginTop: 18 }}>
          Physiotherapie <em className="hero__highlight">mit Blick aufs Ganze.</em>
        </h1>
        <p className="hero__lede">
          Evidenzbasierte, ganzheitliche Therapie mit dem Ziel, Ihre Beschwerden
          nachhaltig zu verstehen und selbst zu kontrollieren — durch aktive
          Behandlung, Edukation und individuelle Trainingspläne.
        </p>
        <div className="hero__cta-row">
          <Button variant="primary" href="#/kontakt">Termin anfragen</Button>
          <Button variant="ghost" href="#/leistungen">Leistungen ansehen</Button>
        </div>
        <div className="card" style={{ padding: 24, marginTop: 28 }}>
          <p style={{ fontSize: 17, color: "var(--ink-2)", maxWidth: "62ch", lineHeight: 1.55 }}>
            Aktuell suchen wir qualifizierte Therapeut:innen mit aktivem
            Therapieanspruch für unsere Praxis.
          </p>
          <div style={{ marginTop: 20 }}>
            <Button variant="primary" href="#/karriere">Jetzt bewerben</Button>
          </div>
        </div>
        {meta}
      </>
    );
  }

  if (variant === "emphasis-em") {
    return (
      <>
        <Eyebrow num="01">Karriere & Physiokur</Eyebrow>
        <h1 style={{ marginTop: 18 }}>
          Zu uns passende, <em>qualifizierte</em> Therapeut:innen gesucht.
        </h1>
        <p className="hero__lede">{recruitLede}</p>
        <div className="hero__cta-row">
          <Button variant="primary" href="#/karriere">Jetzt bewerben</Button>
        </div>
        {meta}
      </>
    );
  }

  return (
    <>
      <Eyebrow num="01">Physiokur Physiotherapie</Eyebrow>
      <h1 style={{ marginTop: 18 }}>Wir suchen qualifizierte Physiotherapeut:innen.</h1>
      <p className="hero__lede">{recruitLede}</p>
      {recruitCtas()}
      {meta}
    </>
  );
}

function EmployerDualMatchIntro({ leadVariant }) {
  const introCtas = (primaryLabel) => (
    <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
      <Button variant="primary" href="#/karriere">{primaryLabel}</Button>
      <Button variant="ghost" href="#/kontakt">Kennenlerngespräch</Button>
    </div>
  );

  if (leadVariant === "search-tag") {
    return (
      <>
        <div style={{ marginBottom: 18 }}>
          <Tag accent>Gesucht: Qualifizierte Therapeut:innen</Tag>
        </div>
        <SectionHead
          num="06"
          kicker="Karriere & Arbeitgebermarke"
          title="Verstärken Sie unser Fach-Team."
          lede="Für unser Team suchen wir qualifizierte Physiotherapeut:innen mit aktivem, evidenzbasiertem Therapieanspruch — nicht für eine Durchlaufpraxis."
        />
        {introCtas("Zur Stellenausschreibung")}
      </>
    );
  }

  if (leadVariant === "split-cta") {
    return (
      <div className="section-head" style={{ marginBottom: 56 }}>
        <div>
          <Eyebrow num="06">Karriere & Arbeitgebermarke</Eyebrow>
          <h2 style={{ marginTop: 18, fontSize: "clamp(34px, 4.4vw, 60px)", textWrap: "balance" }}>
            Qualifizierte Physiotherapeut:innen gesucht.
          </h2>
          <p className="section-head__lede" style={{ marginTop: 24 }}>
            Wir erweitern unser Team und suchen fachlich qualifizierte Therapeut:innen,
            die aktive Therapie mit Zeit, Austausch und Weiterentwicklung verbinden.
          </p>
        </div>
        <div style={{ display: "grid", gap: 12, justifyItems: "start", alignContent: "end" }}>
          <Button variant="primary" href="#/karriere">Jetzt bewerben</Button>
          <Button variant="ghost" href="#/kontakt">Kennenlerngespräch</Button>
        </div>
      </div>
    );
  }

  if (leadVariant === "callout-band") {
    return (
      <>
        <SectionHead
          num="06"
          kicker="Karriere & Arbeitgebermarke"
          title="Wir wachsen — und suchen verstärkt."
          lede="Unser Arbeitgeberauftritt bleibt klar: Bedingungen, Haltung und passende Profile statt Teamportraits."
        />
        <div className="card" style={{ padding: 28, marginBottom: 56 }}>
          <p style={{ fontSize: 18, color: "var(--ink-2)", maxWidth: "62ch", lineHeight: 1.55 }}>
            Aktuell suchen wir qualifizierte Therapeut:innen mit aktivem
            Therapieanspruch für unsere Praxis.
          </p>
          <div style={{ marginTop: 24 }}>
            <Button variant="primary" href="#/karriere">Qualifizierte Bewerbung senden</Button>
          </div>
        </div>
      </>
    );
  }

  if (leadVariant === "emphasis-em") {
    return (
      <SectionHead
        num="06"
        kicker="Karriere & Arbeitgebermarke"
        title={<>Wir suchen <em>qualifizierte</em> Therapeut:innen — nicht nur Verstärkung.</>}
        lede="Gesucht sind fachlich fundierte Kolleg:innen, die evidenzbasierte, aktive Therapie mit uns weiterdenken."
        className="employer-intro"
      />
    );
  }

  return (
    <>
      <SectionHead
        num="06"
        kicker="Karriere & Arbeitgebermarke"
        title="Wir suchen qualifizierte Physiotherapeut:innen."
        lede="Für unser Team suchen wir fachlich qualifizierte Therapeut:innen, die aktive Therapie mit Zeit, Austausch und Weiterentwicklung verbinden."
      />
      {introCtas("Jetzt bewerben")}
    </>
  );
}

function HomeEmployerSection({ variant, leadVariant }) {
  const benefits = [
    { num: "I", t: "Zeit statt Durchlauf", b: "35–60 Minuten pro Sitzung. Genug Raum für Untersuchung, Edukation und Training." },
    { num: "II", t: "Fortbildung mit Ziel", b: "Interner Austausch, Studien und externe Kurse — statt Punktabsolvieren." },
    { num: "III", t: "Aktive Therapie", b: "Training und Edukation stehen im Mittelpunkt — nicht passive Abfolge." },
    { num: "IV", t: "Team statt Wechsel", b: "Feste Bezugspersonen, gemeinsame Standards und regelmäßiger Fachaustausch." },
  ];
  const offer = [
    "35–60 Minuten Behandlungszeit",
    "wöchentlich Fachaustausch",
    "Versorgung mit Nährstoffen",
    "Überdurchschnittliche Bezahlung",
    "Keine Durchlaufpraxis",
  ];
  const fit = [
    "Sie wollen Therapie mit Tiefe statt Tempo",
    "Evidenz und aktives Training sind Ihr Anspruch",
    "Sie entwickeln sich fachlich weiter",
    "Motivation zählt mehr als ein perfektes CV",
  ];
  const steps = [
    { num: "01", t: "Einarbeitung mit Haltung", b: "Klare Standards, feste Bezugspersonen und ein Team, das sich austauscht." },
    { num: "02", t: "Fachlicher Austausch", b: "Zweimal wöchentlich Fallbesprechung, interne Fortbildung und gemeinsame Standards." },
    { num: "03", t: "Weiterentwicklung", b: "Externe Kurse, Zeit für Studien und Raum, Therapie bewusst weiterzuentwickeln." },
  ];
  const roles = ["Manuelle Therapie", "Schulter", "Trainingstherapie", "Ernährung & NS"];
  const cta = (
    <div style={{ display: "flex", gap: 12, marginTop: 48, flexWrap: "wrap" }}>
      <Button variant="primary" href="#/karriere">Offene Stellen</Button>
      <Button variant="ghost" href="#/kontakt">Kennenlerngespräch</Button>
    </div>
  );

  if (variant === "editorial-split") {
    return (
      <section className="section">
        <div className="container">
          <div className="split">
            <div>
              <Eyebrow num="06">Karriere & Arbeitgebermarke</Eyebrow>
              <h2 style={{ marginTop: 18, fontSize: "clamp(34px, 4.4vw, 60px)" }}>
                Arbeiten, wo Therapie <em>Raum hat.</em>
              </h2>
              <p style={{ marginTop: 24, fontSize: 17, color: "var(--ink-2)", maxWidth: "52ch", lineHeight: 1.6 }}>
                Wir suchen Therapeut:innen, die mehr wollen als Durchlauf — mit Zeit,
                Austausch und einer Praxis, die aktive Therapie ernst nimmt.
              </p>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 14 }}>
              {offer.map((item) => (
                <li key={item} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span className="list-check" style={{ marginTop: 4 }}>{ICONS.check}</span>
                  <span style={{ color: "var(--ink-2)" }}>{item}</span>
                </li>
              ))}
            </ul>
          </div>
          {cta}
        </div>
      </section>
    );
  }

  if (variant === "ink-band") {
    return (
      <section className="section section--ink">
        <div className="container">
          <Eyebrow num="06">Karriere & Arbeitgebermarke</Eyebrow>
          <h2 style={{ marginTop: 18, fontSize: "clamp(34px, 4.4vw, 60px)" }}>
            Werden Sie Teil einer Praxis, die <em>aktiv arbeitet.</em>
          </h2>
          <p style={{ marginTop: 24, fontSize: 17, color: "color-mix(in srgb, var(--bg) 78%, transparent)", maxWidth: "60ch", lineHeight: 1.6 }}>
            Keine Durchlaufpraxis, keine reine Abfolge von Behandlungen. Wir bieten
            Zeit, Austausch und Entwicklung für Therapeut:innen mit Anspruch.
          </p>
          <div className="hero__meta" style={{ marginTop: 40 }}>
            <div className="hero__meta-item"><div className="k">2×</div><div className="v">Fachaustausch</div></div>
            <div className="hero__meta-item"><div className="k">35–60</div><div className="v">Min. Behandlungszeit</div></div>
            <div className="hero__meta-item"><div className="k">Fortbildung</div><div className="v">Intern & extern</div></div>
          </div>
          {cta}
        </div>
      </section>
    );
  }

  if (variant === "culture-steps") {
    return (
      <section className="section">
        <div className="container">
          <SectionHead
            num="06"
            kicker="Karriere & Arbeitgebermarke"
            title="So wächst es bei uns."
            lede="Wir akquirieren Menschen, die Therapie mit Tiefe, Austausch und Weiterentwicklung verbinden wollen."
          />
          <div className="grid-3">
            {steps.map((step) => (
              <div className="card" key={step.num}>
                <div className="card__num">{step.num}</div>
                <h3 className="card__title">{step.t}</h3>
                <p className="card__body">{step.b}</p>
              </div>
            ))}
          </div>
          {cta}
        </div>
      </section>
    );
  }

  if (variant === "dual-match") {
    return (
      <section className="section">
        <div className="container">
          <EmployerDualMatchIntro leadVariant={leadVariant} />
          {leadVariant === "emphasis-em" && (
            <div className="employer-dual-apply">
              <Button variant="primary" href="#/karriere">Jetzt bewerben</Button>
            </div>
          )}
          <div className="grid-2">
            <div className="card" style={{ padding: 32 }}>
              <h3 style={{ fontFamily: "var(--serif)", fontSize: 28, letterSpacing: "-0.01em" }}>Was wir bieten</h3>
              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "grid", gap: 14 }}>
                {offer.map((item) => (
                  <li key={item} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <span className="list-check" style={{ marginTop: 4 }}>{ICONS.check}</span>
                    <span style={{ color: "var(--ink-2)" }}>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="card" style={{ padding: 32 }}>
              <h3 style={{ fontFamily: "var(--serif)", fontSize: 28, letterSpacing: "-0.01em" }}>Wer zu uns passt</h3>
              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "grid", gap: 14 }}>
                {fit.map((item) => (
                  <li key={item} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                    <span className="list-check" style={{ marginTop: 4 }}>{ICONS.check}</span>
                    <span style={{ color: "var(--ink-2)" }}>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 32 }}>
            {roles.map((role) => <Tag key={role}>{role}</Tag>)}
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="section">
      <div className="container">
        <SectionHead
          num="06"
          kicker="Karriere & Arbeitgebermarke"
          title="Arbeiten, wo Therapie Raum hat."
          lede="Wir suchen Therapeut:innen, die mehr wollen als Durchlauf — mit Zeit, Austausch und aktiver Therapie."
        />
        <div className="grid-3">
          {benefits.map((item) => (
            <div className="card" key={item.num}>
              <div className="card__num">{item.num}</div>
              <h3 className="card__title">{item.t}</h3>
              <p className="card__body">{item.b}</p>
            </div>
          ))}
        </div>
        {cta}
      </div>
    </section>
  );
}

window.HomePage = HomePage;