/* === Page: Für Patienten === */
function PatientenPage() {
  return (
    <div className="page-enter">
      <section className="section" style={{ borderTop: "none", paddingBlock: "clamp(72px, 8vw, 120px)" }}>
        <div className="container">
          <Eyebrow num="01">Für Patienten</Eyebrow>
          <h1 style={{ marginTop: 24, fontSize: "clamp(44px, 6vw, 84px)", lineHeight: 1, letterSpacing: "-0.035em", maxWidth: "18ch" }}>
            Was Sie bei uns <em>erwartet</em> — und was nicht.
          </h1>
          <p style={{ marginTop: 32, fontSize: 18, color: "var(--ink-2)", maxWidth: "62ch", lineHeight: 1.55 }}>
            Wir sind keine Durchlaufpraxis und keine reine Massagepraxis. Wir nehmen
            uns Zeit, untersuchen sauber und arbeiten aktiv mit Ihnen.
          </p>
        </div>
      </section>

      <section className="section section--alt">
        <div className="container">
          <div className="grid-2">
            <div className="card" style={{ padding: 36 }}>
              <Tag accent>Was Sie bekommen</Tag>
              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "grid", gap: 14 }}>
                {[
                  "35–60 Minuten 1:1",
                  "Saubere Befundung mit Anamnese",
                  "Aktive Therapie + manuelle Werkzeuge",
                  "Trainings­plan in der App, mit Videos",
                  "Optional: Ernährung & Mikronährstoffe",
                  ,
                ].map((t) => (
                  <li key={t} style={{ display: "flex", gap: 12 }}>
                    <span className="list-check" style={{ marginTop: 4 }}>{ICONS.check}</span>
                    <span style={{ color: "var(--ink-2)" }}>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="card" style={{ padding: 36, background: "var(--bg-2)" }}>
              <Tag>Was wir nicht tun</Tag>
              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "grid", gap: 14 }}>
                {[
                  "20-Minuten-Termine im Akkord",
                  "Reine Wellness-Massage als Therapie verkaufen",
                  "Ohne Befund einfach drauflos behandeln",
                  "Sie endlos in der Praxis halten",
                ].map((t) => (
                  <li key={t} style={{ display: "flex", gap: 12 }}>
                    <span style={{ marginTop: 6, width: 14, height: 1, background: "var(--muted)" }}></span>
                    <span className="muted">{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="split">
            <div>
              <Eyebrow num="02">Trainings-App</Eyebrow>
              <h2 style={{ marginTop: 18, fontSize: "clamp(32px, 4vw, 50px)" }}>
                Ihr Plan — mit Videos, immer dabei.
              </h2>
              <p style={{ marginTop: 24, fontSize: 17, color: "var(--ink-2)", maxWidth: "52ch", lineHeight: 1.6 }}>
                In der Sitzung den Plan in der App erstellen lassen.
                So können Sie zuhause präzise weiter arbeiten — und sehen Fortschritte.
              </p>
            </div>
            <div style={{ display: "grid", placeItems: "center" }}><PhoneMock/></div>
          </div>
        </div>
      </section>

      <section className="section section--alt">
        <div className="container">
          <SectionHead num="03" kicker="Häufige Fragen" title="Bevor Sie anrufen." lede="Die Antworten auf das, was Patienten am häufigsten fragen."/>
          <FAQ items={[
            { q: "Brauche ich eine Überweisung?", a: "Eine ärztliche Verordnung ist hilfreich, aber für Selbstzahler nicht zwingend. Bei Privatversicherten richten wir uns nach Ihrem Tarif. Wir beraten Sie gerne." },
            { q: "Was muss auf dem Rezept stehen?", a: "Bei Krankengymnastik auf gesetzlichem Rezept, machen wir ausschließlich KG-Doppelbehnadlungen (KG-Doppel). Das muss ausdrücklich genauso auf dem Rezept stehen." },
            { q: "Buchen Sie online?", a: "Bewusst nicht. Wir möchten Sie persönlich oder per Formular kennenlernen — kurz, aber ehrlich. Anruf oder Kontaktformular genügt." },
            { q: "Behandeln Sie auch chronische Beschwerden?", a: "Ja. Gerade bei chronischen Schmerzen ist unser ganzheitlicher Ansatz inkl. vegetativem Nervensystem und Ernährung sinnvoll." },
            { q: "Was kostet eine Behandlung?", a: "Wir rechnen nach GOÄ/Privatpreisliste ab. Für Selbstzahler nennen wir die Preise transparent vorab am Telefon." },
          ]}/>
        </div>
      </section>
    </div>
  );
}

/* === Page: Karriere === */
function KarrierePage() {
  return (
    <div className="page-enter">
      <section className="section" style={{ borderTop: "none", paddingBlock: "clamp(72px, 8vw, 120px)" }}>
        <div className="container">
          <Eyebrow num="01">Karriere</Eyebrow>
          <h1 style={{ marginTop: 24, fontSize: "clamp(44px, 6vw, 84px)", lineHeight: 1, letterSpacing: "-0.035em", maxWidth: "16ch" }}>
            Therapie machen, <em>die etwas verändert.</em>
          </h1>
          <p style={{ marginTop: 32, fontSize: 18, color: "var(--ink-2)", maxWidth: "62ch", lineHeight: 1.55 }}>
            Wenn Sie 20-Minuten-Akkord satt haben und richtig arbeiten wollen —
            evidenzbasiert, mit Zeit und einem Team, das sich austauscht — sind Sie bei
            uns vermutlich richtig.
          </p>
          <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Button variant="primary" href="#/kontakt">Kennenlerngespräch anfragen</Button>
          </div>
        </div>
      </section>

      <section className="section section--ink">
        <div className="container">
          <SectionHead num="02" kicker="Was wir bieten" title="Bedingungen, die Therapie erst ermöglichen." />
          <div className="grid-3">
            {[
              { t: "35–60 Min. Behandlungen", b: "Genug Zeit für sauberen Befund, Edukation und Training — nicht im Akkord." },
              { t: "Überdurchschnittliche Bezahlung", b: "Vergütung, die Wertschätzung und fachlichen Anspruch widerspiegelt." },
              { t: "2× wöchentlich Fachaustausch", b: "Patientenfälle, Studien und Methoden gemeinsam denken." },
              { t: "Interne Fortbildungen", b: "Quartalsweise zu Schwerpunkt-Themen wie Schulter, Rücken, Schmerz." },
              { t: "Jährliche Bonuszahlungen für Zuverlässigkeit" },
              { t: "Zusatzleistungen", b: "Nährstoffberatung, Vitamin-D-Tests und Supplemente — für Sie selbst." },
            ].map((c) => (
              <div key={c.t || c.b} style={{ background: "color-mix(in srgb, var(--bg) 8%, transparent)", border: "1px solid var(--primary-2)", borderRadius: 16, padding: 26 }}>
                {c.t && (
                  <h3 style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--bg)", letterSpacing: "-0.01em" }}>{c.t}</h3>
                )}
                {c.b && (
                  <p style={{ marginTop: c.t ? 12 : 0, fontSize: c.bSmall ? 13 : 14, color: "color-mix(in srgb, var(--bg) 75%, transparent)", lineHeight: 1.6 }}>{c.b}</p>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="split">
            <div>
              <Eyebrow num="03">Wer zu uns passt</Eyebrow>
              <h2 style={{ marginTop: 18, fontSize: "clamp(32px, 4vw, 52px)" }}>
                Motivation und Haltung &gt; reine Erfahrung.
              </h2>
              <p style={{ marginTop: 24, fontSize: 17, color: "var(--ink-2)", maxWidth: "52ch", lineHeight: 1.6 }}>
                Wir suchen keine fertigen Spezialisten. Wir suchen Menschen, die Lust
                haben sich zu entwickeln — und die das Selbe wollen wie wir:
                Patienten unabhängig zu machen.
              </p>
              <ul style={{ listStyle: "none", padding: 0, margin: "32px 0 0", display: "grid", gap: 14 }}>
                {[
                  "Sie denken evidenzbasiert — auch wenn das mehr Arbeit ist",
                  "Sie sehen Therapie ganzheitlich",
                  "Sie sind offen für Feedback und gemeinsame Fallarbeit",
                  "Berufseinsteiger:innen herzlich willkommen",
                ].map((t) => (
                  <li key={t} style={{ display: "flex", gap: 12 }}>
                    <span className="list-check" style={{ marginTop: 4 }}>{ICONS.check}</span>
                    <span style={{ color: "var(--ink-2)" }}>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
            <Placeholder label="FOTO · Therapeut:in im Edukations-Gespräch" variant="tall"/>
          </div>
        </div>
      </section>

      <section className="section section--alt">
        <div className="container">
          <SectionHead num="04" kicker="Offene Stellen" title="Aktuell suchen wir." />
          <div style={{ display: "grid", gap: 12 }}>
            {[
              { role: "Physiotherapeut:in (m/w/d)", type: "Vollzeit · unbefristet", focus: "Schwerpunkt Schulter & Rücken — Berufseinsteiger willkommen" },
              { role: "Physiotherapeut:in (m/w/d)", type: "Teilzeit · 20–30h", focus: "Manuelle Therapie & Trainingstherapie" },
              { role: "Praktikum / Hospitanz", type: "Flexibel", focus: "Einblick in evidenzbasierte Praxis" },
            ].map((j, i) => (
              <a key={i} href="#/kontakt" className="card" style={{ display: "grid", gridTemplateColumns: "1fr 2fr 1fr auto", gap: 24, alignItems: "center", padding: 28 }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 12, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--muted)" }}>{`0${i+1}`}</div>
                <div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 22 }}>{j.role}</div>
                  <div style={{ fontSize: 13, marginTop: 6, color: "var(--muted)" }}>{j.focus}</div>
                </div>
                <div style={{ fontSize: 14, color: "var(--ink-2)" }}>{j.type}</div>
                <div style={{ display: "flex", alignItems: "center", gap: 6, color: "var(--accent)", fontFamily: "var(--mono)", fontSize: 12, textTransform: "uppercase", letterSpacing: ".08em" }}>
                  Bewerben {ICONS.arrow}
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* === Page: Kontakt === */
const KONTAKT_EMAIL = "tkurleto@yahoo.de";

function KontaktPage() {
  const [sent, setSent] = useState(false);
  const [type, setType] = useState("patient");

  function handleSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    const name = (data.get("name") || "").toString().trim();
    const email = (data.get("email") || "").toString().trim();
    const phone = (data.get("phone") || "").toString().trim();
    const topic = (data.get("topic") || "").toString().trim();
    const message = (data.get("message") || "").toString().trim();
    const roleLabel = type === "bewerber" ? "Bewerber:in" : "Patient:in";
    const topicLabel = type === "bewerber" ? "Position" : "Anliegen";

    const subject = type === "bewerber"
      ? `Bewerbung von ${name}`
      : `Terminanfrage von ${name}`;

    const body = [
      `Typ: ${roleLabel}`,
      `Name: ${name}`,
      `E-Mail: ${email}`,
      phone ? `Telefon: ${phone}` : null,
      topic ? `${topicLabel}: ${topic}` : null,
      "",
      "Nachricht:",
      message || "(keine Nachricht)",
    ].filter((line) => line !== null).join("\n");

    window.location.href =
      `mailto:${KONTAKT_EMAIL}` +
      `?subject=${encodeURIComponent(subject)}` +
      `&body=${encodeURIComponent(body)}`;

    setSent(true);
  }

  return (
    <div className="page-enter">
      <section className="section" style={{ borderTop: "none", paddingBlock: "clamp(72px, 8vw, 110px) clamp(40px, 6vw, 80px)" }}>
        <div className="container">
          <Eyebrow num="01">Kontakt</Eyebrow>
          <h1 style={{ marginTop: 24, fontSize: "clamp(44px, 6vw, 84px)", lineHeight: 1, letterSpacing: "-0.035em", maxWidth: "16ch" }}>
            Persönlich erreichbar. <em>Kein Buchungs­system.</em>
          </h1>
        </div>
      </section>

      <section className="section" style={{ borderTop: "none", paddingTop: 0 }}>
        <div className="container">
          <div className="split" style={{ alignItems: "flex-start" }}>
            <div>
              <div style={{ display: "grid", gap: 28 }}>
                <div>
                  <div className="muted" style={{ fontFamily: "var(--mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: ".08em" }}>Telefon (bevorzugt)</div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 36, marginTop: 8 }}>030 · 1234 5678</div>
                  <div className="muted" style={{ marginTop: 6, fontSize: 14 }}>Mo–Fr · 8:00–18:00</div>
                </div>
                <div>
                  <div className="muted" style={{ fontFamily: "var(--mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: ".08em" }}>E-Mail</div>
                  <a href={`mailto:${KONTAKT_EMAIL}`} style={{ fontFamily: "var(--serif)", fontSize: 22, marginTop: 8, display: "inline-block", color: "inherit" }}>
                    {KONTAKT_EMAIL}
                  </a>
                </div>
                <div>
                  <div className="muted" style={{ fontFamily: "var(--mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: ".08em" }}>Adresse</div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 22, marginTop: 8, lineHeight: 1.3 }}>
                    Beispielstraße 12<br/>10115 Berlin
                  </div>
                  <div className="muted" style={{ marginTop: 6, fontSize: 14 }}>Im selben Gebäude: Orthopädie Dr. Sharma</div>
                </div>
              </div>
              <Placeholder label="MAP · Praxis-Standort" variant="wide" style={{ marginTop: 40, aspectRatio: "16/9" }}/>
            </div>

            <div className="card" style={{ padding: 36 }}>
              {sent ? (
                <div style={{ display: "grid", placeItems: "center", textAlign: "center", padding: "40px 0" }}>
                  <div style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--accent)", color: "#fff", display: "grid", placeItems: "center" }}>{ICONS.check}</div>
                  <h3 style={{ fontFamily: "var(--serif)", fontSize: 28, marginTop: 24 }}>Vielen Dank.</h3>
                  <p className="muted" style={{ marginTop: 12, maxWidth: "40ch" }}>
                    Ihr E-Mail-Programm sollte sich geöffnet haben. Bitte die Nachricht dort noch absenden.
                  </p>
                  <div style={{ marginTop: 24 }}><Button variant="ghost" onClick={() => setSent(false)}>Neue Anfrage</Button></div>
                </div>
              ) : (
                <form onSubmit={handleSubmit} style={{ display: "grid", gap: 18 }}>
                  <div>
                    <div className="muted" style={{ fontFamily: "var(--mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: ".08em", marginBottom: 10 }}>Ich bin</div>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                      {[["patient", "Patient:in"], ["bewerber", "Bewerber:in"]].map(([k, v]) => (
                        <button type="button" key={k} onClick={() => setType(k)}
                          style={{
                            padding: "12px 14px", borderRadius: 10,
                            border: "1px solid " + (type === k ? "var(--primary)" : "var(--line)"),
                            background: type === k ? "var(--primary)" : "transparent",
                            color: type === k ? "var(--bg)" : "var(--ink)",
                            fontSize: 14, transition: "all .18s ease"
                          }}>{v}</button>
                      ))}
                    </div>
                  </div>
                  <div className="field">
                    <label>Name</label>
                    <input name="name" required placeholder="Vor- und Nachname"/>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                    <div className="field">
                      <label>E-Mail</label>
                      <input name="email" type="email" required placeholder="ihre@email.de"/>
                    </div>
                    <div className="field">
                      <label>Telefon</label>
                      <input name="phone" type="tel" placeholder="030 ..."/>
                    </div>
                  </div>
                  {type === "patient" && (
                    <div className="field">
                      <label>Beschwerde / Anliegen</label>
                      <select name="topic" defaultValue="">
                        <option value="" disabled>Bitte wählen</option>
                        <option>Schulter</option>
                        <option>Rücken</option>
                        <option>Knie / Hüfte</option>
                        <option>Chronische Schmerzen</option>
                        <option>Nachsorge nach OP</option>
                        <option>Sonstiges</option>
                      </select>
                    </div>
                  )}
                  {type === "bewerber" && (
                    <div className="field">
                      <label>Position</label>
                      <select name="topic" defaultValue="">
                        <option value="" disabled>Bitte wählen</option>
                        <option>Physiotherapeut:in Vollzeit</option>
                        <option>Physiotherapeut:in Teilzeit</option>
                        <option>Praktikum / Hospitanz</option>
                        <option>Initiativbewerbung</option>
                      </select>
                    </div>
                  )}
                  <div className="field">
                    <label>Nachricht</label>
                    <textarea name="message" placeholder={type === "patient" ? "Kurz Ihre Situation und Wunschtermin." : "Was motiviert Sie? Was suchen Sie?"} ></textarea>
                  </div>
                  <Button variant="primary" type="submit">Anfrage senden</Button>
                  <p className="muted" style={{ fontSize: 12 }}>
                    Öffnet Ihr E-Mail-Programm mit einer vorausgefüllten Nachricht an {KONTAKT_EMAIL}.
                  </p>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.PatientenPage = PatientenPage;
window.KarrierePage = KarrierePage;
window.KontaktPage = KontaktPage;