/* Seite Personalvermittlung (personalvermittlung.html): Fachkräfte für Handwerk und Technik.
   Erst der Weg für Unternehmen (Suche, Ablauf, Konditionen, Anfrage), dann der für Bewerber
   (offene Stellen aus stellen.js, Bewerbung mit optionalem Lebenslauf an api-bewerbung.php).
   Spec: docs/superpowers/specs/2026-10-08-neue-leistungsseiten-design.md, Abschnitt 6 */

const BEWERBUNG_MAX_MB = 5;
const BEWERBUNG_ENDUNGEN = ["pdf", "docx", "jpg", "jpeg", "png"];

const PERSONAL_SUCHE = [
  { Icon: UserPlus, titel: "Direktansprache", text: "Wir sprechen passende Fachkräfte gezielt an – auch die, die gerade nicht aktiv suchen." },
  { Icon: Globe, titel: "Anzeigen auf allen Kanälen", text: "Indeed, XING, LinkedIn und die Jobbörse der Bundesagentur für Arbeit – wir schalten und betreuen die Anzeigen." },
  { Icon: Workflow, titel: "Bewerber-Funnel", text: "Bewerben in zwei Minuten, auch ohne Lebenslauf – so erreichen wir Handwerker, die kein Anschreiben schreiben wollen.", link: ["leistungen.html#funnel-systeme", "Mehr zu Funnel-Systemen"] },
  { Icon: Phone, titel: "Vorauswahl am Telefon", text: "Wir führen die ersten Gespräche und stellen Ihnen nur Kandidaten vor, die wirklich passen." },
];

const PERSONAL_SCHRITTE = [
  { when: "Schritt 01 · kostenlos", title: "Bedarf aufnehmen", body: "Wir klären Aufgaben, Qualifikation, Gehaltsrahmen und Start – und ob die Suche realistisch ist.", cta: "#anfrage", ctaLabel: "Suchauftrag besprechen" },
  { when: "Schritt 02 · ab Tag 1", title: "Suche & Ansprache", body: "Direktansprache, Anzeigen und Bewerber-Funnel laufen parallel. Sie müssen nichts tun." },
  { when: "Schritt 03 · Shortlist", title: "Geprüfte Kandidaten", body: "Sie bekommen eine kurze Liste mit Kandidaten, die wir vorher am Telefon geprüft haben." },
  { when: "Schritt 04 · Einstellung", title: "Einstellung & Nachbetreuung", body: "Sie entscheiden und stellen ein. In der Probezeit bleiben wir Ansprechpartner – mit Nachbesetzungsgarantie." },
];

function personalFaq(k) {
  return [
    { q: "Was kostet die Vermittlung?", a: `${k.honorarProzent} % des Brutto-Jahresgehalts der eingestellten Person, zuzüglich Umsatzsteuer. Es gibt keine Grundgebühr und keine Vorkasse.` },
    { q: "Wann zahle ich?", a: "Erst wenn der Arbeitsvertrag unterschrieben ist. Kommt keine Einstellung zustande, kostet Sie die Suche nichts." },
    { q: "Was passiert, wenn die Person in der Probezeit geht?", a: `Verlässt die vermittelte Person Ihr Unternehmen in den ersten ${k.garantieMonate} Monaten, suchen wir kostenlos nach. Die Einzelheiten stehen im Vermittlungsvertrag.` },
    { q: "Zahlen Bewerber etwas?", a: "Nein, nie. Für Bewerberinnen und Bewerber ist unsere Vermittlung immer kostenlos." },
    { q: "Ist das Leiharbeit?", a: "Nein. Wir vermitteln nur – angestellt wird direkt bei Ihnen. Eine Erlaubnis zur Arbeitnehmerüberlassung ist dafür nicht nötig." },
  ];
}

// Konditionen auf einen Blick: großer Prozentwert links, Bedingungen rechts
function Konditionen({ k }) {
  return (
    <Abschnitt
      id="konditionen"
      index="03"
      eyebrow="Konditionen"
      title={<>Sie zahlen nur bei <AccentWord>Erfolg.</AccentWord></>}
      lead="Keine Grundgebühr, keine Vorkasse, kein Risiko: Das Honorar wird erst fällig, wenn jemand bei Ihnen anfängt."
    >
      <div className="ri d2 price-card is-match mt-12 lg:mt-14 max-w-4xl grid gap-8 md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)] md:items-center">
        <div>
          <MicroLabel>Honorar</MicroLabel>
          <div className="mt-4 tabular text-[64px] font-bold tracking-tight leading-none" style={{ color: "var(--accent)" }}>{k.honorarProzent}&nbsp;%</div>
          <p className="mt-3 text-[14px] body-muted">des Brutto-Jahresgehalts, zzgl. USt</p>
        </div>
        <ul className="space-y-3">
          {[
            "Fällig erst mit Unterschrift unter den Arbeitsvertrag",
            "Keine Vorkasse, keine Grundgebühr",
            `${k.garantieMonate} Monate Nachbesetzungsgarantie: Verlässt die Person Ihr Unternehmen in dieser Zeit, suchen wir kostenlos nach`,
            "Für Bewerber immer kostenlos",
          ].map((t) => (
            <li key={t} className="flex gap-3 items-start text-[15px]" style={{ color: "var(--text-secondary)" }}>
              <Check size={16} strokeWidth={2.6} className="mt-1 flex-shrink-0" style={{ color: "var(--accent)" }} />{t}
            </li>
          ))}
          <li className="pt-2 text-[13px] body-muted">Details im Vermittlungsvertrag.</li>
        </ul>
      </div>
    </Abschnitt>
  );
}

// Mobbin-Pattern: Stellenliste mit aufklappbaren Karten -> MOBBIN-PATTERNS.md, Abschnitt 17
function StellenKarte({ s, offen, onToggle, onBewerben }) {
  const koerperId = "stelle-" + s.id;
  return (
    <li className="stellen-karte">
      <h3>
        <button type="button" className="stellen-kopf" aria-expanded={offen} aria-controls={koerperId} onClick={onToggle}>
          <span className="min-w-0">
            <span className="block text-[18px] font-bold tracking-tight leading-snug">{s.titel}</span>
            <span className="mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[13.5px] body-muted">
              <span className="inline-flex items-center gap-1.5"><MapPin size={13} />{s.region}</span>
              <span className="inline-flex items-center gap-1.5"><Clock size={13} />{s.arbeitszeit}</span>
              {s.gehalt && <span>{s.gehalt}</span>}
            </span>
          </span>
          <span className="stellen-plus" aria-hidden="true"><Plus size={15} strokeWidth={2.4} /></span>
        </button>
      </h3>
      <div id={koerperId} className={"accordion-body" + (offen ? " is-open" : "")} {...(offen ? {} : { inert: "" })}>
        <div>
          <div className="px-5 sm:px-6 pb-6">
            <p className="text-[15px] leading-relaxed" style={{ color: "var(--text-secondary)" }}>{s.kurz}</p>
            <div className="mt-5 grid gap-5 md:grid-cols-3">
              {[["Aufgaben", s.aufgaben], ["Profil", s.profil], ["Das bietet der Betrieb", s.vorteile]].map(([titel, liste]) => (
                <div key={titel}>
                  <MicroLabel>{titel}</MicroLabel>
                  <ul className="mt-2.5 space-y-2">
                    {(liste || []).map((t) => (
                      <li key={t} className="flex gap-2.5 items-start text-[14px]" style={{ color: "var(--text-secondary)" }}>
                        <Check size={14} strokeWidth={2.6} className="mt-1 flex-shrink-0" style={{ color: "var(--accent)" }} />{t}
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
            <div className="mt-6 flex flex-wrap items-center justify-between gap-4">
              <span className="text-[13px] body-muted">{s.arbeitgeber}</span>
              <button type="button" className="btn btn-primary btn-shine btn-sm" onClick={onBewerben}>Jetzt bewerben <ArrowRight size={14} /></button>
            </div>
          </div>
        </div>
      </div>
    </li>
  );
}

function Stellenliste({ stellen, onBewerben }) {
  const [offen, setOffen] = useState(null);
  return (
    <Abschnitt
      id="stellen"
      index="05"
      eyebrow="Für Bewerber"
      title={<>Offene <AccentWord>Stellen.</AccentWord></>}
      lead="Aktuelle Stellen bei Betrieben aus Handwerk und Technik. Für Sie ist die Vermittlung kostenlos."
    >
      {stellen.length ? (
        <>
          <ul className="ri d2 mt-12 lg:mt-14 space-y-3">
            {stellen.map((s) => (
              <StellenKarte key={s.id} s={s} offen={offen === s.id}
                onToggle={() => setOffen(offen === s.id ? null : s.id)} onBewerben={() => onBewerben(s.id)} />
            ))}
          </ul>
          {/* Initiativbewerbung als letzte Zeile der Liste, wie bei Sketch (Abschnitt 17) */}
          <p className="ri d3 mt-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-[14.5px] body-muted">
            Nichts Passendes dabei?
            <button type="button" className="link-accent" onClick={() => onBewerben("initiativ")}>Initiativ bewerben <ArrowRight size={14} /></button>
          </p>
        </>
      ) : (
        <div className="ri d2 panel mt-12 lg:mt-14 max-w-3xl p-6 sm:p-8">
          <span className="mega-icon" aria-hidden="true"><Briefcase size={17} /></span>
          <h3 className="mt-5 text-[20px] font-bold tracking-tight">Gerade keine offenen Stellen</h3>
          <p className="mt-2.5 text-[15px] leading-relaxed body-muted max-w-xl">
            Neue Stellen kommen laufend dazu. Bewerben Sie sich initiativ – wir melden uns, sobald etwas zu Ihnen passt.
          </p>
          <button type="button" className="btn btn-primary btn-shine btn-sm mt-6" onClick={() => onBewerben("initiativ")}>Initiativ bewerben <ArrowRight size={14} /></button>
        </div>
      )}
    </Abschnitt>
  );
}

// Mobbin-Pattern: Datei-Feld als beschriftete Fläche mit Dateiname, Größe, „Entfernen“ und Ablegen per Ziehen -> MOBBIN-PATTERNS.md, Abschnitt 17
function DateiFeld({ id, datei, onDatei, error }) {
  const inputRef = useRef(null);
  const [ziel, setZiel] = useState(false);
  const errId = id + "-fehler";
  const pruefen = (f) => {
    const endung = (f.name.split(".").pop() || "").toLowerCase();
    if (!BEWERBUNG_ENDUNGEN.includes(endung)) {
      onDatei(null, "Bitte als PDF, Word-Datei (DOCX), JPG oder PNG hochladen.");
    } else if (f.size > BEWERBUNG_MAX_MB * 1024 * 1024) {
      onDatei(null, `Die Datei ist zu groß (höchstens ${BEWERBUNG_MAX_MB} MB).`);
    } else {
      onDatei(f, "");
    }
  };
  const waehlen = (e) => {
    const f = e.target.files && e.target.files[0];
    if (f) pruefen(f);
    e.target.value = ""; // dieselbe Datei lässt sich nach „Entfernen“ erneut wählen
  };
  // Hineingezogene Datei annehmen – sonst öffnet der Browser sie und das Formular ist weg
  const ablegen = (e) => {
    e.preventDefault();
    setZiel(false);
    const f = e.dataTransfer.files && e.dataTransfer.files[0];
    if (f) pruefen(f);
  };
  // Das Datei-Feld bleibt immer im DOM (unsichtbar), damit der Fokus nach „Entfernen“ dorthin zurück kann;
  // sichtbar ist entweder die Auswahlfläche (Label) oder die gewählte Datei
  return (
    <div className={ziel ? "is-ziel" : undefined}
      onDragOver={(e) => { e.preventDefault(); if (!ziel) setZiel(true); }}
      onDragLeave={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setZiel(false); }}
      onDrop={ablegen}>
      <span className="block text-[13px] font-semibold mb-1.5" style={{ color: "var(--text-secondary)" }}>Lebenslauf (optional)</span>
      <input ref={inputRef} id={id} type="file" className="sr-only" accept=".pdf,.docx,.jpg,.jpeg,.png" onChange={waehlen}
        aria-label="Lebenslauf auswählen (optional)" aria-invalid={error ? "true" : "false"}
        aria-describedby={error ? errId : datei ? undefined : id + "-hinweis"} />
      {datei ? (
        <div className="datei-feld is-gewaehlt">
          <span className="mega-icon mega-icon--sm" aria-hidden="true"><FileText size={15} /></span>
          <span className="min-w-0 flex-1">
            <span className="block text-[14.5px] font-semibold truncate">{datei.name}</span>
            <span className="block text-[12.5px] body-muted">
              {datei.size < 1024 * 1024
                ? Math.max(1, Math.round(datei.size / 1024)) + " KB"
                : (datei.size / 1024 / 1024).toLocaleString("de-DE", { maximumFractionDigits: 1 }) + " MB"}
            </span>
          </span>
          <button type="button" className="btn btn-ghost btn-sm" onClick={() => { onDatei(null, ""); inputRef.current && inputRef.current.focus(); }}>Entfernen</button>
        </div>
      ) : (
        <label htmlFor={id} className="datei-feld">
          <span className="mega-icon mega-icon--sm" aria-hidden="true"><Upload size={15} /></span>
          <span className="min-w-0">
            <span className="block text-[14.5px] font-semibold">Datei auswählen<span className="hidden md:inline"> oder hierher ziehen</span></span>
            <span id={id + "-hinweis"} className="block text-[12.5px] body-muted">PDF, Word (DOCX), JPG oder PNG · höchstens {BEWERBUNG_MAX_MB} MB</span>
          </span>
        </label>
      )}
      {error && <div id={errId} role="alert" className="text-[12.5px] mt-1.5" style={{ color: "var(--danger)" }}>{error}</div>}
    </div>
  );
}

function CheckFeld({ id, checked, onChange, error, children }) {
  const errId = id + "-fehler";
  return (
    <div>
      <label htmlFor={id} className="check-feld">
        <input id={id} type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)}
          aria-invalid={error ? "true" : "false"} aria-describedby={error ? errId : undefined} />
        <span>{children}</span>
      </label>
      {error && <div id={errId} role="alert" className="text-[12.5px] mt-1.5 pl-8" style={{ color: "var(--danger)" }}>{error}</div>}
    </div>
  );
}

const BEWERBUNG_LEER = { stelle: "", vorname: "", nachname: "", email: "", telefon: "", wohnort: "", beruf: "", erfahrung: "", start: "", website: "", datenschutz: false, pool: false };

function bewerbungFehler(w, datei) {
  const e = {};
  if (!w.stelle) e.stelle = "Bitte wählen Sie eine Stelle oder „Initiativbewerbung“.";
  if (!w.vorname.trim()) e.vorname = "Bitte geben Sie Ihren Vornamen an.";
  if (!w.nachname.trim()) e.nachname = "Bitte geben Sie Ihren Nachnamen an.";
  if (!w.email.trim() || !/^\S+@\S+\.\S+$/.test(w.email)) e.email = "Bitte eine gültige E-Mail-Adresse angeben, z. B. max@web.de.";
  if (!w.telefon.trim() || w.telefon.replace(/\D/g, "").length < 6) e.telefon = "Bitte eine gültige Telefonnummer angeben (mind. 6 Ziffern).";
  if (!datei) {
    if (!w.beruf.trim()) e.beruf = "Bitte geben Sie Ihren Beruf oder Ihre Qualifikation an.";
    if (!w.erfahrung.trim()) e.erfahrung = "Bitte geben Sie Ihre Berufserfahrung an.";
    if (!w.start.trim()) e.start = "Bitte geben Sie an, ab wann Sie anfangen können.";
  }
  if (!w.datenschutz) e.datenschutz = "Bitte bestätigen Sie den Datenschutzhinweis.";
  return e;
}

function BewerbungsFormular({ stellen, gewaehlt }) {
  const [w, setW] = useState(BEWERBUNG_LEER);
  const [datei, setDatei] = useState(null);
  const [dateiFehler, setDateiFehler] = useState("");
  const [fehler, setFehler] = useState({});
  const [sending, setSending] = useState(false);
  const [sendError, setSendError] = useState("");
  const [gesendet, setGesendet] = useState(false);
  const dankRef = useRef(null);

  useEffect(() => { if (gewaehlt) setW((x) => ({ ...x, stelle: gewaehlt.id })); }, [gewaehlt]);
  useEffect(() => { if (gesendet && dankRef.current) dankRef.current.focus(); }, [gesendet]);

  const upd = (k, v) => {
    setW((x) => ({ ...x, [k]: v }));
    if (fehler[k]) setFehler((e) => ({ ...e, [k]: undefined }));
  };

  const senden = async (ev) => {
    ev.preventDefault();
    const f = bewerbungFehler(w, datei);
    setFehler(f);
    const erstes = Object.keys(f)[0];
    if (erstes) {
      const el = document.getElementById("bewerben-" + erstes);
      if (el) el.focus();
      return;
    }
    setSending(true);
    setSendError("");
    const fd = new FormData();
    Object.entries(w).forEach(([k, v]) => {
      if (k === "datenschutz" || k === "pool") { if (v) fd.append(k, "ja"); } else fd.append(k, v);
    });
    if (datei) fd.append("lebenslauf", datei);
    let meldung = "Verbindungsfehler – bitte versuchen Sie es erneut.";
    try {
      // Ohne Content-Type-Header: der Browser setzt multipart/form-data mit Boundary selbst
      const res = await fetch("/api-bewerbung.php", { method: "POST", body: fd });
      if (res.ok) { setSending(false); setGesendet(true); return; }
      meldung = (await res.json().catch(() => ({}))).error || "Die Bewerbung konnte nicht gesendet werden.";
    } catch (err) {
      console.error("Bewerbung Fehler:", err);
    }
    setSendError(meldung);
    setSending(false);
  };

  const optionen = [...stellen.map((s) => [s.id, s.titel]), ["initiativ", "Initiativbewerbung"]];

  return (
    <Abschnitt
      id="bewerben"
      index="06"
      eyebrow="Bewerbung"
      title={<>In zwei Minuten <AccentWord>beworben.</AccentWord></>}
      lead="Lebenslauf hochladen oder drei kurze Angaben machen – beides reicht. Wir melden uns persönlich bei Ihnen."
    >
      <div className="ri d2 panel panel--float mt-12 lg:mt-14 max-w-4xl">
        {!gesendet ? (
          <form noValidate onSubmit={senden} className="p-5 sm:p-8">
            <div className="grid sm:grid-cols-2 gap-4">
              <div className="sm:col-span-2">
                <AuswahlFeld id="bewerben-stelle" label="Stelle *" value={w.stelle} onChange={(v) => upd("stelle", v)} optionen={optionen} error={fehler.stelle} />
              </div>
              <Field id="bewerben-vorname" label="Vorname *" value={w.vorname} onChange={(v) => upd("vorname", v)} error={fehler.vorname} autoComplete="given-name" />
              <Field id="bewerben-nachname" label="Nachname *" value={w.nachname} onChange={(v) => upd("nachname", v)} error={fehler.nachname} autoComplete="family-name" />
              <Field id="bewerben-email" label="E-Mail *" type="email" value={w.email} onChange={(v) => upd("email", v)} error={fehler.email} autoComplete="email" inputMode="email" />
              <Field id="bewerben-telefon" label="Telefonnummer *" type="tel" value={w.telefon} onChange={(v) => upd("telefon", v)} error={fehler.telefon} autoComplete="tel" inputMode="tel" />
              <Field id="bewerben-wohnort" label="Wohnort (optional)" value={w.wohnort} onChange={(v) => upd("wohnort", v)} autoComplete="address-level2" />
              <DateiFeld id="bewerben-lebenslauf" datei={datei} error={dateiFehler}
                onDatei={(f, meldung) => { setDatei(f); setDateiFehler(meldung); }} />
            </div>

            {!datei && (
              <div className="mt-6 pt-6 hr-t">
                <p className="text-[14px]" style={{ color: "var(--text-secondary)" }}>
                  <span className="font-semibold" style={{ color: "var(--text-primary)" }}>Kein Lebenslauf? Kein Problem.</span> Dann reichen diese drei Angaben:
                </p>
                <div className="mt-4 grid sm:grid-cols-3 gap-4">
                  <Field id="bewerben-beruf" label="Beruf / Qualifikation *" value={w.beruf} onChange={(v) => upd("beruf", v)} placeholder="z. B. Elektroniker" error={fehler.beruf} />
                  <Field id="bewerben-erfahrung" label="Berufserfahrung (Jahre) *" value={w.erfahrung} onChange={(v) => upd("erfahrung", v)} placeholder="z. B. 5" error={fehler.erfahrung} inputMode="numeric" />
                  <Field id="bewerben-start" label="Frühester Start *" value={w.start} onChange={(v) => upd("start", v)} placeholder="z. B. sofort" error={fehler.start} />
                </div>
              </div>
            )}

            {/* Köderfeld gegen Bots: für Menschen unsichtbar und nicht per Tab erreichbar */}
            <div aria-hidden="true" className="absolute -left-[10000px] top-auto w-px h-px overflow-hidden">
              <label htmlFor="bewerben-website">Webseite (bitte leer lassen)</label>
              <input id="bewerben-website" type="text" tabIndex={-1} autoComplete="off" value={w.website} onChange={(e) => upd("website", e.target.value)} />
            </div>

            <div className="mt-6 pt-6 hr-t space-y-4">
              <CheckFeld id="bewerben-datenschutz" checked={w.datenschutz} onChange={(v) => upd("datenschutz", v)} error={fehler.datenschutz}>
                Ich habe die <a href="datenschutz.html#bewerbungen" className="underline underline-offset-4">Hinweise zum Datenschutz</a> gelesen. Meine Angaben werden nur für die Vermittlung genutzt und erst nach Rücksprache mit mir an ein Unternehmen weitergegeben. *
              </CheckFeld>
              <CheckFeld id="bewerben-pool" checked={w.pool} onChange={(v) => upd("pool", v)}>
                Sie dürfen mich 12 Monate lang für weitere passende Stellen kontaktieren (Bewerberpool, jederzeit widerrufbar).
              </CheckFeld>
            </div>

            {sendError && (
              <div role="alert" className="mt-6 px-4 py-3 rounded-[var(--r-sm)] text-[13.5px] font-medium" style={{ background: "var(--danger-bg)", border: "1px solid var(--danger-line)", color: "var(--danger)" }}>
                {sendError}
                {/* Die Server-Meldung bei Fehler 500 nennt die Adresse schon */}
                {!sendError.includes(CONTACT.email) && <> Sie erreichen uns auch direkt unter <a href={"mailto:" + CONTACT.email} className="underline">{CONTACT.email}</a>.</>}
              </div>
            )}

            <div className="mt-8 pt-6 hr-t flex flex-col-reverse sm:flex-row sm:items-center justify-between gap-4">
              <p className="text-[12.5px] max-w-sm" style={{ color: "var(--text-muted)" }}>* Pflichtfelder. Die Vermittlung ist für Sie kostenlos.</p>
              <PrimaryButton type="submit" disabled={sending} className="flex-shrink-0">
                {sending ? "Wird gesendet …" : <>Bewerbung senden <ArrowRight size={14} /></>}
              </PrimaryButton>
            </div>
          </form>
        ) : (
          <div className="p-6 sm:p-10" role="status">
            <span className="w-14 h-14 rounded-full flex items-center justify-center" style={{ background: "var(--accent-10)", color: "var(--accent)", border: "1px solid var(--accent-30)" }}>
              <CheckCircle2 size={28} />
            </span>
            <h3 ref={dankRef} tabIndex={-1} className="mt-6 h-section outline-none" style={{ fontSize: "clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem)" }}>
              Vielen <AccentWord>Dank!</AccentWord>
            </h3>
            <p className="mt-3 lead max-w-md">Ihre Bewerbung ist angekommen. Wir melden uns persönlich bei Ihnen – meist innerhalb von 2 Werktagen.</p>
          </div>
        )}
      </div>
    </Abschnitt>
  );
}

function PersonalPage() {
  const k = (window.SAWORA_ANGEBOTE || {}).personal;
  const stellen = window.SAWORA_STELLEN || [];
  // Neues Objekt je Klick, damit auch dieselbe Stelle erneut vorgewählt wird
  const [gewaehlt, setGewaehlt] = useState(null);
  const bewerben = (id) => {
    setGewaehlt({ id });
    scrollToId("bewerben");
  };

  return (
    <SectionCount.Provider value="07">
      <PageHero
        page="personalvermittlung"
        eyebrow="Personalvermittlung"
        title={<>Fachkräfte für Handwerk und Technik – bezahlt erst bei <AccentWord>Einstellung.</AccentWord></>}
        lead="Wir suchen per Direktansprache und Anzeigen, führen die Vorauswahl und stellen Ihnen geprüfte Kandidaten vor. Sie zahlen nur, wenn jemand bei Ihnen anfängt."
        actions={<>
          <PrimaryButton href="#anfrage" size="lg">Stelle besetzen <ArrowRight size={16} /></PrimaryButton>
          <GhostButton href="#stellen" size="lg">Offene Stellen</GhostButton>
        </>}
        facts={[
          [k ? k.honorarProzent + " % nur bei Einstellung" : "Nur bei Einstellung", "primary"],
          ["Keine Vorkasse", "secondary"],
          [k ? k.garantieMonate + " Monate Nachbesetzungsgarantie" : "Nachbesetzungsgarantie", "primary"],
          ["Für Bewerber kostenlos", "secondary", "#stellen"],
        ]}
      />

      <Abschnitt
        id="suche"
        index="01"
        eyebrow="So suchen wir"
        title={<>Wir finden die Leute, die <AccentWord>nicht suchen.</AccentWord></>}
        lead="Gute Handwerker und Techniker sind selten arbeitslos. Deshalb kombinieren wir Direktansprache, Anzeigen und einen Bewerbungsweg ohne Hürden."
      >
        <KarteListe items={PERSONAL_SUCHE} spalten={4} />
      </Abschnitt>

      <ProcessTimeline
        index="02"
        steps={PERSONAL_SCHRITTE}
        title={<>Vom Suchauftrag zur <AccentWord>Einstellung.</AccentWord></>}
        lead="Vier Etappen, ein Ansprechpartner – Sie sprechen nur mit Kandidaten, die passen."
      />

      {k && <Konditionen k={k} />}

      <KurzAnfrage
        index="04"
        typ="Personal"
        eyebrow="Für Unternehmen"
        titel={<>Welche Stelle sollen wir <AccentWord>besetzen?</AccentWord></>}
        lead="Beschreiben Sie kurz, wen Sie suchen – wir melden uns innerhalb von 24 Stunden und besprechen den Suchauftrag."
        knopf="Suchauftrag anfragen"
        felder={[
          { name: "position", label: "Gesuchte Position", art: "text", placeholder: "z. B. Elektroniker (m/w/d)" },
          { name: "anzahl", label: "Anzahl", art: "select", optionen: ["1", "2–3", "4 oder mehr"] },
          { name: "standort", label: "Einsatzort", art: "text", placeholder: "z. B. Neuss" },
          { name: "nachricht", label: "Was ist Ihnen wichtig? (optional)", art: "textarea", placeholder: "Qualifikation, Arbeitszeit, Gehaltsrahmen, Start" },
        ]}
      />

      <Stellenliste stellen={stellen} onBewerben={bewerben} />
      <BewerbungsFormular stellen={stellen} gewaehlt={gewaehlt} />

      {k && <FAQ index="07" items={personalFaq(k)} frageHref="#anfrage"
        lead="Die Fragen, die uns Unternehmen und Bewerber am häufigsten stellen. Fehlt Ihre? Schreiben Sie uns." />}

      <NextChapter to="bewertungen" />
    </SectionCount.Provider>
  );
}

window.SAWORA_SEITEN = Object.assign(window.SAWORA_SEITEN || {}, { personalvermittlung: PersonalPage });