/* === Page: Leistungen === */
function LeistungenPage() {
  const services = [
    { num: "01", t: "Manuelle Therapie", b: "Gezielte Mobilisation und Behandlung der Gelenke, Faszien und Weichteile zur Wiederherstellung der Beweglichkeit.", tags: ["Gelenke", "Faszien"] },
    { num: "02", t: "Krankengymnastik", b: "Strukturierte Bewegungs­therapie auf Basis sauberer Befundung — kein Standardprogramm.", tags: ["Befund-basiert"] },
    { num: "03", t: "Trainingstherapie", b: "Aktive Therapie mit progressivem Belastungsaufbau. Ihr Trainingsplan wandert mit in unsere App.", tags: ["Aktiv", "App"] },
    { num: "04", t: "Triggerpunkttherapie", b: "Lokale Behandlung myofaszialer Schmerzpunkte — meistens als Werkzeug, selten als Programm.", tags: ["Schmerz"] },
    { num: "05", t: "Schröpftherapie", b: "Klassisches und modernes Schröpfen — eingebettet in einen aktiven Therapieplan.", tags: ["Ganzheitlich"] },
    { num: "06", t: "Rotlichttherapie", b: "Unterstützend bei chronischen Beschwerden und zur Regulation des vegetativen Nervensystems.", tags: ["Regeneration"] },
    { num: "07", t: "Schulter-Nachsorge", b: "Strukturiertes Phasen­modell vom OP-Tag bis zur Sport- und Belastungsfreigabe.", tags: ["Schwerpunkt"] },
    { num: "08", t: "Ernährung & Mikronährstoffe", b: "Beratung und Diagnostik (z.B. Vitamin D) — als Ergänzung, nicht als Ersatz.", tags: ["Beratung"] },
    { num: "09", t: "TeleTherapie", b: "Folgetermine und Trainings­begleitung digital — wenn ein Vor-Ort-Termin gerade nicht passt.", tags: ["Digital"] },
  ];

  return (
    <div className="page-enter">
      <section className="section" style={{ borderTop: "none", paddingBlock: "clamp(72px, 8vw, 120px)" }}>
        <div className="container">
          <Eyebrow num="01">Leistungen</Eyebrow>
          <h1 style={{ marginTop: 24, fontSize: "clamp(44px, 6vw, 84px)", lineHeight: 1, letterSpacing: "-0.035em", maxWidth: "16ch" }}>
            Methoden als Werkzeug — <em>nie als Programm.</em>
          </h1>
          <p style={{ marginTop: 32, fontSize: 18, color: "var(--ink-2)", maxWidth: "62ch", lineHeight: 1.55 }}>
            Wir kombinieren bewährte und moderne Verfahren — immer mit dem gleichen Ziel:
            Sie verstehen Ihre Beschwerden und können sie selbst kontrollieren.
          </p>
        </div>
      </section>

      <section className="section section--alt">
        <div className="container">
          <div className="grid-3">
            {services.map((s) => (
              <div className="card" key={s.num}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <span className="card__num">{s.num}</span>
                  <div style={{ display: "flex", gap: 6 }}>
                    {s.tags.map((t) => <Tag key={t} accent={t === "Schwerpunkt"}>{t}</Tag>)}
                  </div>
                </div>
                <h3 className="card__title">{s.t}</h3>
                <p className="card__body">{s.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead
            num="02"
            kicker="Ihr Behandlungsweg"
            title="So läuft eine Behandlung bei uns ab."
            lede="Vier klare Phasen — vom ersten Befund bis zur eigenständigen Trainings­begleitung."
          />
          <div className="grid-4">
            {[
              { n: "01", t: "Befund", b: "Ausführliche Anamnese, Bewegungs- und Schmerztests. Wir nehmen uns Zeit, bis das Bild stimmt." },
              { n: "02", t: "Edukation", b: "Sie verstehen, was wir gefunden haben — und was wir gemeinsam verändern werden." },
              { n: "03", t: "Therapie + Training", b: "Manuelle Therapie als Werkzeug, Trainingstherapie als Motor. Plan landet in der App." },
              { n: "04", t: "Selbstständigkeit", b: "Begleitung, bis Sie das Programm allein führen können — oder gar nicht mehr brauchen." },
            ].map((p) => (
              <div key={p.n} style={{ borderTop: "1px solid var(--line-2)", paddingTop: 24 }}>
                <div className="card__num">{p.n}</div>
                <h3 style={{ fontFamily: "var(--serif)", fontSize: 24, marginTop: 14, letterSpacing: "-0.01em" }}>{p.t}</h3>
                <p style={{ color: "var(--ink-2)", fontSize: 14, marginTop: 10, lineHeight: 1.6 }}>{p.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* === Page: Über uns / Team === */
function TeamPage() {
  const team = [
    { name: "Dr. Markus Lehmann", role: "Praxisgründer · Manuelle Therapie", focus: "Schulter, Komplexbefund, Diagnostik" },
    { name: "Sara Becker, M.Sc.", role: "Schulter & Trainingstherapie", focus: "Athletik, Wurfsport, Reha" },
    { name: "Jonas Wenzel", role: "Vegetatives NS · Ernährung", focus: "Chronische Schmerzen, Mikronährstoffe" },
    { name: "Lina Vogt", role: "Krankengymnastik · Reha", focus: "Knie, Hüfte, Post-OP" },
    { name: "T. Roth, B.Sc.", role: "Trainingstherapie", focus: "Rücken, Aufbau, Prävention" },
    { name: "M. Albrecht", role: "Triggerpunkt · Manuell", focus: "Nacken, Kopfschmerz" },
  ];
  return (
    <div className="page-enter">
      <section className="section" style={{ borderTop: "none", paddingBlock: "clamp(72px, 8vw, 120px)" }}>
        <div className="container">
          <Eyebrow num="01">Über uns</Eyebrow>
          <h1 style={{ marginTop: 24, fontSize: "clamp(44px, 6vw, 84px)", lineHeight: 1, letterSpacing: "-0.035em", maxWidth: "18ch" }}>
            Sechs Therapeut:innen. <em>Eine Haltung.</em>
          </h1>
          <p style={{ marginTop: 32, fontSize: 18, color: "var(--ink-2)", maxWidth: "62ch", lineHeight: 1.55 }}>
            Wir sind ein kleines Team mit gemeinsamem fachlichem Anspruch — und ehrlichem
            Interesse an Weiterentwicklung. Was uns verbindet, ist die Frage: Wie
            machen wir Patienten unabhängig?
          </p>
        </div>
      </section>

      <section className="section section--alt">
        <div className="container">
          <div className="grid-3">
            {team.map((p) => (
              <div key={p.name} style={{ display: "grid", gap: 16 }}>
                <Placeholder label={`PORTRAIT · ${p.name.split(" ").slice(-1)}`} variant="portrait"/>
                <div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 24, letterSpacing: "-0.01em" }}>{p.name}</div>
                  <div className="muted" style={{ fontSize: 13, marginTop: 4, fontFamily: "var(--mono)", textTransform: "uppercase", letterSpacing: ".06em" }}>{p.role}</div>
                  <div style={{ marginTop: 12, fontSize: 14, color: "var(--ink-2)" }}>Schwerpunkt: {p.focus}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="split">
            <div>
              <Eyebrow num="02">Wie wir arbeiten</Eyebrow>
              <h2 style={{ marginTop: 18, fontSize: "clamp(34px, 4.4vw, 56px)" }}>Struktur, die Qualität trägt.</h2>
              <ul style={{ listStyle: "none", padding: 0, margin: "32px 0 0", display: "grid", gap: 18 }}>
                {[
                  ["2× pro Woche", "Fachaustausch über aktuelle Patienten und Studien"],
                  ["Monatlich", "Team- und Orga-Meeting"],
                  ["Quartalsweise", "Interne Fortbildungen — Schwerpunkt-Themen"],
                  ["Jährlich", "Externe Weiterbildungen mit Budget"],
                ].map(([k, v]) => (
                  <li key={k} style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 24, paddingBottom: 18, borderBottom: "1px solid var(--line)" }}>
                    <div style={{ fontFamily: "var(--mono)", fontSize: 12, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--muted)" }}>{k}</div>
                    <div style={{ color: "var(--ink-2)" }}>{v}</div>
                  </li>
                ))}
              </ul>
            </div>
            <Placeholder label="FOTO · Fachaustausch im Team" variant="tall"/>
          </div>
        </div>
      </section>
    </div>
  );
}

window.LeistungenPage = LeistungenPage;
window.TeamPage = TeamPage;