/* Seite KI-Schulungen (ki-schulungen.html). Lädt dieselben gemeinsamen Skripte wie alle Seiten plus
   diese Datei und meldet ihre Komponente über window.SAWORA_SEITEN an (siehe app.jsx).

   Aufbau: Kopf, klebende Ankerleiste, dann acht Abschnitte von „Was lernt mein Team?“ bis zur Anfrage.
   Verdichtet, damit die lange Seite schnell erfassbar bleibt: Nutzen als Zeilenliste, Module als
   Akkordeon, Formate als Vergleichstabelle, Fragen als Liste mit Antwortbereich, Anfrage zweispaltig.

   Bewusst ohne Preis-, Dauer-, Zertifikats-, Förder- oder Ergebnisversprechen: Preise, Termine und
   Umfang klärt das Erstgespräch. Angebunden an die vorhandenen Bausteine (components.jsx: PageHero,
   SectionHead, Lernpfad; funnel.jsx: Field) — keine eigene Routing- oder Designlogik. */

// Auswahlfeld im Stil von Field (funnel.jsx); jede Auswahl hat „Noch offen“ als Vorgabe
function SchulungAuswahl({ id, label, value, onChange, optionen }) {
  return (
    <div>
      <label htmlFor={id} className="block text-[13px] font-semibold mb-1.5" style={{ color: "var(--text-secondary)" }}>{label}</label>
      <select id={id} value={value} onChange={(e) => onChange(e.target.value)} className="field-input field-select">
        {optionen.map((o) => <option key={o} value={o}>{o}</option>)}
      </select>
    </div>
  );
}

// Mehrzeiliges Feld im Stil von Field (funnel.jsx); maxLength hält den Freitext knapp
function SchulungText({ id, label, value, onChange, error, hint, placeholder, maxLength = 1200, rows = 5 }) {
  const errId = id + "-fehler";
  return (
    <div>
      <label htmlFor={id} className="block text-[13px] font-semibold mb-1.5" style={{ color: "var(--text-secondary)" }}>{label}</label>
      <textarea id={id} rows={rows} value={value} maxLength={maxLength} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
        className="field-input field-textarea" aria-invalid={error ? "true" : "false"} aria-describedby={error ? errId : undefined} />
      {hint && <div className="text-[12.5px] mt-1.5" style={{ color: "var(--text-muted)" }}>{hint}</div>}
      {error && <div id={errId} role="alert" className="text-[12.5px] mt-1.5" style={{ color: "var(--danger)" }}>{error}</div>}
    </div>
  );
}

/* ---------------- Inhalte der Seite ---------------- */

// Ankerleiste: Nummern und Namen der acht Abschnitte, damit die lange Seite springbar bleibt
const SCHULUNG_NAV = [
  ["01", "Warum", "warum"],
  ["02", "Für wen", "fuer-wen"],
  ["03", "Inhalte", "inhalte"],
  ["04", "Formate", "formate"],
  ["05", "Kurse", "kurse"],
  ["06", "Ablauf", "ablauf"],
  ["07", "Ergebnis", "ergebnis"],
  ["08", "Fragen", "fragen"],
  ["09", "Buchung", "anfrage"],
];

const SCHULUNG_NUTZEN = [
  { Icon: BookOpen, titel: "Verstehen, was KI leisten kann.", text: "Wir ordnen ein, wofür sich KI-Werkzeuge eignen und wofür nicht — sachlich, ohne Hype und ohne Fachchinesisch." },
  { Icon: Zap, titel: "An eigenen Aufgaben üben.", text: "Wir arbeiten mit typischen Aufgaben aus Ihrem Betrieb, damit das Gelernte direkt im Alltag anwendbar ist." },
  { Icon: ShieldCheck, titel: "Grenzen und Datenrisiken erkennen.", text: "Ihr Team lernt, Ergebnisse zu prüfen, vertrauliche Daten zu schützen und Entscheidungen selbst zu treffen." },
];

const SCHULUNG_ZIELGRUPPEN = [
  { Icon: Users, titel: "Teams, die starten", text: "Wenn KI-Werkzeuge bisher kaum genutzt werden und ein gemeinsamer, verlässlicher Einstieg fehlt." },
  { Icon: TrendingUp, titel: "Führungskräfte", text: "Wenn Sie einschätzen möchten, wo sich KI lohnt, welcher Aufwand entsteht und was Ihr Team dafür braucht." },
  { Icon: Settings, titel: "Mitarbeitende", text: "Wenn bestehende Aufgaben leichter werden sollen — etwa bei Texten, Recherche oder Zusammenfassungen." },
];

// Module als Zeilen: kurz und überprüfbar, Details erst auf Klick
const SCHULUNG_MODULE = [
  { nr: "01", titel: "Grundlagen und Grenzen", text: "Wie KI-Werkzeuge arbeiten, was sie zuverlässig können und wo sie sich irren.",
    punkte: ["Was ein Sprachmodell tut — und was nicht", "Typische Fehler erkennen, bevor sie Arbeit kosten"] },
  { nr: "02", titel: "Gute Anweisungen (Prompts)", text: "Wie aus einer vagen Aufgabe eine brauchbare Anweisung wird — und warum Kontext alles ist.",
    punkte: ["Rolle, Ziel, Kontext und Format vorgeben", "Eine Anweisung schrittweise verbessern"] },
  { nr: "03", titel: "Recherche, Texte, Zusammenfassungen prüfen", text: "Wie Sie Ergebnisse kontrollieren, Quellen hinterfragen und Fehler früh erkennen.",
    punkte: ["Ergebnisse gegen die Quelle prüfen", "Wann ein Ergebnis nicht verwendbar ist"] },
  { nr: "04", titel: "Anwendungsfälle im eigenen Betrieb", text: "Wir sammeln Aufgaben aus Ihrem Alltag und probieren passende Werkzeuge direkt daran aus.",
    punkte: ["Aufgaben sammeln und sortieren", "Passende Werkzeuge an Beispielen testen"] },
  { nr: "05", titel: "Daten und Freigaben im Team", text: "Welche Daten genutzt werden dürfen, was im Haus bleibt und welche Regeln Ihr Team braucht.",
    punkte: ["Welche Angaben gehören nicht in ein Werkzeug", "Einfache Regeln für den Arbeitsalltag"] },
];

// Eine Anweisung als Anschauung — illustrativ, keine Aussage über Ihr Unternehmen
const SCHULUNG_BEISPIEL = {
  schwach: "Schreib eine E-Mail.",
  stark: "Schreibe eine kurze E-Mail an einen Bestandskunden: kurzer Dank für den Auftrag, genannter Liefertermin, Bitte um Rückmeldung bis Freitag. Ton: sachlich, höchstens 120 Wörter.",
};

// Formate als Vergleich: gleiche Zeilen, drei Spalten — statt drei unverbundener Karten
const SCHULUNG_FORMAT_SPALTEN = ["Für wen", "Schwerpunkt", "Ablauf im Termin", "Format"];
const SCHULUNG_FORMAT_ZEILEN = [
  {
    name: "Einstieg",
    werte: ["Teams, die starten", "Grundlagen und Grenzen", "Überblick, erste Beispiele, Ihre Fragen", "Online oder vor Ort nach Absprache"],
  },
  {
    name: "Praxis-Workshop im Team",
    werte: ["Teams mit konkreten Aufgaben", "Anwendung an eigenen Aufgaben", "Üben an Beispielen aus Ihrem Betrieb", "Online oder vor Ort nach Absprache"],
  },
  {
    name: "Vertiefende Begleitung",
    werte: ["Teams mit ersten Erfahrungen", "Ausbau und Regeln im Team", "Aufbauende Termine zu einzelnen Themen", "Online oder vor Ort nach Absprache"],
  },
];

const SCHULUNG_ABLAUF = [
  { when: "Schritt 01", title: "Bedarf verstehen", body: "Im kurzen Erstgespräch klären wir, wo Ihr Team steht und welche Aufgaben im Alltag anstehen." },
  { when: "Schritt 02", title: "Inhalte abstimmen", body: "Wir schlagen Module, Format und Umfang vor — abgestimmt auf Ihr Team und Ihre Aufgaben." },
  { when: "Schritt 03", title: "Gemeinsam üben", body: "Im Termin arbeiten wir an Beispielen aus Ihrem Betrieb und halten die Ergebnisse schriftlich fest." },
  { when: "Schritt 04", title: "Nächste Schritte festhalten", body: "Zum Abschluss legen wir fest, welche Aufgaben Ihr Team eigenständig weiterführt." },
];

const SCHULUNG_ERGEBNIS = [
  "Ein gemeinsames Verständnis davon, was KI leisten kann — und was nicht.",
  "Erste erprobte Anwendungen aus Ihrem eigenen Arbeitsalltag.",
  "Klare Regeln für den Umgang mit Daten und Ergebnissen.",
  "Eine Liste nächster Schritte, die zu Ihrem Team passt.",
];

// Was wir vor dem Termin klären — hält den Rahmen transparent, ohne feste Pakete zu versprechen
const SCHULUNG_VORAB = [
  ["Format", "online oder vor Ort"],
  ["Umfang", "passend zu Ihrem Team"],
  ["Werkzeuge", "nach Ihrem Bedarf"],
  ["Daten", "welche genutzt werden dürfen"],
];

const SCHULUNG_FAQ = [
  { q: "Brauchen wir Vorkenntnisse?", a: "Nein. Wir stimmen den Einstieg auf den Kenntnisstand Ihres Teams ab." },
  { q: "Geht es um ein bestimmtes KI-Tool?", a: "Wir wählen die Beispiele nach Ihrem Bedarf. Nennen Sie vorhandene Werkzeuge gern in der Anfrage." },
  { q: "Kann die Schulung auf unsere Branche zugeschnitten werden?", a: "Ja. Im Erstgespräch besprechen wir typische Aufgaben Ihres Teams und passende Übungen." },
  { q: "Online oder vor Ort?", a: "Beides ist nach Absprache möglich. Den passenden Rahmen klären wir mit Ihnen." },
  { q: "Was kostet die Schulung?", a: "Der Preis richtet sich nach Inhalt, Format und Umfang. Sie erhalten nach dem Erstgespräch ein individuelles Angebot." },
  { q: "Wie gehen Sie mit Unternehmensdaten um?", a: "Für erste Übungen genügen Beispieldaten. Welche Werkzeuge und echten Daten verwendet werden dürfen, klären wir vorab gemeinsam." },
];

const SCHULUNG_FORMAT_OPTIONEN = ["Noch offen", "Online", "Vor Ort"];
const SCHULUNG_GRUPPE_OPTIONEN = ["Noch offen", "1–5", "6–20", "21+"];
const SCHULUNG_SCHWERPUNKT_OPTIONEN = ["Noch offen", "Einstieg", "Praxis im Team", "Führung & Einführung"];

/* ---------------- Kurse und Preise (Demo-Daten aus kurse.js) ---------------- */

// Eine Quelle für Seite, Buchung und interne Mail: kurse.js. Fehlt die Datei, bleibt die Sektion leer,
// statt mit erfundenen Kursen zu arbeiten.
const SCHULUNG_KURSE = (typeof window !== "undefined" && Array.isArray(window.SAWORA_KURSE)) ? window.SAWORA_KURSE : [];
const SCHULUNG_TERMIN_OFFEN = (typeof window !== "undefined" && window.SAWORA_KURS_TERMIN_OFFEN) || "Noch offen";

// „1490“ → „1.490 €“
const kursPreis = (n) => Number(n).toLocaleString("de-DE") + " €";

// Kennzahlen aus den vorhandenen Listen abgeleitet – keine erfundenen Zahlen
const SCHULUNG_ZAHLEN = [
  [SCHULUNG_KURSE.length, "Kurse zur Auswahl"],
  [SCHULUNG_MODULE.length, "Module"],
  [SCHULUNG_FORMAT_ZEILEN.length, "Formate"],
];

// Kurse und Preise stehen in kurse.js – die Demo-Daten sind dort als Platzhalter gekennzeichnet
const kursNach = (name) => SCHULUNG_KURSE.find((k) => k.name === name) || null;
const kursTermine = (kurs) => [SCHULUNG_TERMIN_OFFEN, ...((kurs && kurs.terme) || []), "Individueller Termin"];

/* ---------------- Bausteine ---------------- */

// Abschnitts-Hülle mit Abstand für die klebende Ankerleiste
function SchulungAbschnitt({ id, index, eyebrow, title, lead, aside, children, className = "" }) {
  const ref = useReveal();
  return (
    <section id={id} ref={ref} className={"reveal section schulung-abschnitt " + className} aria-labelledby={id + "-title"}>
      <div className="shell">
        <SectionHead index={index} eyebrow={eyebrow} titleId={id + "-title"} title={title} lead={lead} aside={aside} />
        {children}
      </div>
    </section>
  );
}

// Klebende Ankerleiste (Mobbin: klebende Abschnittsleiste auf langen Seiten — Grammarly, Canva, Steep).
// Der Abschnitt im Blickfeld wird hervorgehoben, damit beim Scrollen erkennbar bleibt, wo man ist.
function SchulungAnker() {
  const [aktiv, setAktiv] = useState(SCHULUNG_NAV[0][2]);
  const listeRef = useRef(null);

  useEffect(() => {
    if (!("IntersectionObserver" in window)) return;
    const ziele = SCHULUNG_NAV.map((eintrag) => document.getElementById(eintrag[2])).filter(Boolean);
    if (!ziele.length) return;
    // Schmaler Streifen in der Bildmitte: so ist fast immer genau ein Abschnitt aktiv
    const io = new IntersectionObserver((eintraege) => {
      const sichtbar = eintraege.filter((e) => e.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
      if (sichtbar) setAktiv(sichtbar.target.id);
    }, { rootMargin: "-45% 0px -50% 0px", threshold: 0 });
    ziele.forEach((z) => io.observe(z));
    return () => io.disconnect();
  }, []);

  // Aktiven Eintrag in der waagerecht scrollenden Leiste sichtbar halten
  useEffect(() => {
    const el = listeRef.current && listeRef.current.querySelector(".is-active");
    if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest", inline: "center" });
  }, [aktiv]);

  return (
    <nav className="schulung-nav" aria-label="Abschnitte dieser Seite">
      <div className="shell">
        <ul className="schulung-nav-list" ref={listeRef}>
          {SCHULUNG_NAV.map(([nr, label, ziel]) => (
            <li key={ziel}>
              <a href={"#" + ziel} className={"schulung-nav-link" + (aktiv === ziel ? " is-active" : "")}
                aria-current={aktiv === ziel ? "true" : undefined}>
                <span className="schulung-nav-nr" aria-hidden="true">{nr}</span>{label}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </nav>
  );
}

/* ---------------- 01 Warum diese Schulung ---------------- */

function WarumSchulung() {
  return (
    <SchulungAbschnitt
      id="warum" index="01" eyebrow="Warum diese Schulung"
      title={<>KI verstehen. Im Arbeitsalltag <AccentWord>sinnvoll einsetzen.</AccentWord></>}
      lead="Die Schulung führt von den Grundlagen zu direkt anwendbaren Arbeitsweisen — an Aufgaben, die es bei Ihnen wirklich gibt."
    >
      <div className="mt-12 lg:mt-14 grid gap-6 lg:gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start">
        <ul className="hr-t" role="list">
          {SCHULUNG_NUTZEN.map((n, i) => (
            <li key={n.titel} className={"hr-b ri d" + (i + 1) + " flex items-start gap-4 py-6"}>
              <span className="mega-icon flex-shrink-0" aria-hidden="true"><n.Icon size={17} /></span>
              <div className="min-w-0">
                <h3 className="text-[17.5px] font-bold tracking-tight">{n.titel}</h3>
                <p className="mt-1.5 text-[15px] leading-relaxed body-muted">{n.text}</p>
              </div>
            </li>
          ))}
        </ul>
        <div className="ri d2">
          <Lernpfad />
        </div>
      </div>
    </SchulungAbschnitt>
  );
}

/* ---------------- 02 Für wen ---------------- */

function ZielgruppenSection() {
  return (
    <SchulungAbschnitt
      id="fuer-wen" index="02" eyebrow="Für wen"
      title={<>Für Teams, die KI <AccentWord>nutzbar</AccentWord> machen wollen.</>}
      lead="Am meisten bringt die Schulung, wenn mehrere Personen aus Ihrem Team dabei sind. Sie richtet sich an kleine und mittlere Unternehmen."
    >
      <ul className="mt-12 lg:mt-14 grid gap-3 md:grid-cols-3" role="list">
        {SCHULUNG_ZIELGRUPPEN.map((z, i) => (
          <li key={z.titel} className={"tile ri d" + (i + 1)}>
            <span className="mega-icon mega-icon--sm" aria-hidden="true"><z.Icon size={15} /></span>
            <h3 className="mt-4 text-[17.5px] font-bold tracking-tight">{z.titel}</h3>
            <p className="mt-2 text-[14.5px] leading-relaxed body-muted">{z.text}</p>
          </li>
        ))}
      </ul>
    </SchulungAbschnitt>
  );
}

/* ---------------- 03 Inhalte (Akkordeon je Modul) ---------------- */

function InhalteSection() {
  const [offen, setOffen] = useState(0);
  return (
    <SchulungAbschnitt
      id="inhalte" index="03" eyebrow="Inhalte"
      title={<>Fünf Module, die wir auf Ihr Team <AccentWord>zuschneiden.</AccentWord></>}
      lead="Die Auswahl ist ein Gesprächsanlass, kein fester Lehrplan: Wir stimmen die Schwerpunkte vorab gemeinsam ab. Ein Modul öffnet die Details."
    >
      <div className="mt-12 lg:mt-14 grid gap-6 lg:gap-10 lg:grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)] lg:items-start">
        <div className="hr-t">
          {SCHULUNG_MODULE.map((m, i) => {
            const open = offen === i;
            return (
              <div key={m.nr} className="hr-b">
                <h3>
                  <button type="button" onClick={() => setOffen(open ? -1 : i)} aria-expanded={open} aria-controls={"modul-" + m.nr} className="modul-kopf">
                    <span className="mono text-[13px] tabular pt-0.5" style={{ color: open ? "var(--accent)" : "var(--text-faint)" }}>{m.nr}</span>
                    <span className="min-w-0">
                      <span className="modul-titel block text-[17px] font-semibold tracking-tight leading-snug">{m.titel}</span>
                      <span className="block mt-1 text-[14.5px] leading-relaxed" style={{ color: "var(--text-muted)" }}>{m.text}</span>
                    </span>
                    <span className="w-8 h-8 rounded-full flex items-center justify-center justify-self-end transition-transform"
                      style={{ background: open ? "var(--accent-gradient)" : "rgba(255,255,255,0.06)", color: open ? "var(--ink-on-accent)" : "var(--text-primary)", transform: open ? "rotate(45deg)" : "none" }}>
                      <Plus size={15} strokeWidth={2.4} />
                    </span>
                  </button>
                </h3>
                <div id={"modul-" + m.nr} className={"accordion-body" + (open ? " is-open" : "")}>
                  <div>
                    <ul className="pb-6 pl-[50px] grid gap-2" role="list">
                      {m.punkte.map((p) => (
                        <li key={p} className="flex items-start gap-2.5 text-[14.5px] leading-relaxed" style={{ color: "var(--text-secondary)" }}>
                          <Check size={15} strokeWidth={2.6} className="flex-shrink-0 mt-1" style={{ color: "var(--accent)" }} />{p}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Beispiel: derselbe Auftrag, zweimal formuliert */}
        <figure className="beispiel ri d2">
          <figcaption className="beispiel-zeile">
            <MicroLabel>Beispiel</MicroLabel>
            <p className="mt-3 text-[14px] leading-relaxed" style={{ color: "var(--text-muted)" }}>
              Warum eine Anweisung mehr Kontext braucht — derselbe Auftrag, zweimal formuliert.
            </p>
          </figcaption>
          <div className="beispiel-zeile" style={{ background: "var(--danger-bg)" }}>
            <MicroLabel style={{ color: "var(--text-muted)" }}>Zu vage</MicroLabel>
            <p className="mt-2 text-[15px] leading-relaxed">{SCHULUNG_BEISPIEL.schwach}</p>
          </div>
          <div className="beispiel-zeile" style={{ background: "var(--accent-10)" }}>
            <MicroLabel style={{ color: "var(--text-secondary)" }}>Besser</MicroLabel>
            <p className="mt-2 text-[15px] leading-relaxed">{SCHULUNG_BEISPIEL.stark}</p>
          </div>
        </figure>
      </div>
    </SchulungAbschnitt>
  );
}

/* ---------------- 04 Formate (Vergleichstabelle) ---------------- */

function FormateSection() {
  return (
    <SchulungAbschnitt
      id="formate" index="04" eyebrow="Formate"
      title={<>Drei mögliche <AccentWord>Formate.</AccentWord></>}
      lead="Umfang und Inhalte passen wir an Ihr Team an. Welche Form zu Ihnen passt, klären wir im Erstgespräch."
    >
      <div className="ri d1 mt-12 lg:mt-14">
        <table className="cmp" aria-label="Vergleich der drei möglichen Formate">
          <thead>
            <tr>
              <th scope="col">Format</th>
              {SCHULUNG_FORMAT_SPALTEN.map((s) => <th key={s} scope="col">{s}</th>)}
            </tr>
          </thead>
          <tbody>
            {SCHULUNG_FORMAT_ZEILEN.map((z) => (
              <tr key={z.name}>
                <th scope="row">{z.name}</th>
                {z.werte.map((w, i) => <td key={i} data-label={SCHULUNG_FORMAT_SPALTEN[i]}>{w}</td>)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <p className="ri d2 mt-8 lg:mt-10 flex flex-wrap items-center gap-x-6 gap-y-3 text-[14px]" style={{ color: "var(--text-secondary)" }}>
        <span className="flex items-center gap-2.5"><span className="pill-dot pill-dot--accent" aria-hidden="true" />Online oder vor Ort nach Absprache</span>
        <span className="flex items-center gap-2.5"><span className="pill-dot" aria-hidden="true" />Individuelles Angebot nach einem kurzen Erstgespräch</span>
      </p>
    </SchulungAbschnitt>
  );
}

/* ---------------- 05 Kurse & Preise (Demo-Daten aus kurse.js) ---------------- */

function KursSection({ kurs, onKurs }) {
  if (!SCHULUNG_KURSE.length) return null;
  return (
    <SchulungAbschnitt
      id="kurse" index="05" eyebrow="Kurse & Preise"
      title={<>Kurse mit festen Preisen und <AccentWord>Terminen.</AccentWord></>}
      lead="Wählen Sie einen Kurs – die Buchung unten übernimmt ihn automatisch. Passt keiner, stimmen wir Umfang und Inhalt individuell ab."
      aside={<span className="demo-pill"><span className="pill-dot" aria-hidden="true" />Demo-Daten</span>}
    >
      <ul className="kurs-zahlen mt-12 lg:mt-14 ri d1" role="list">
        {SCHULUNG_ZAHLEN.map(([zahl, label]) => (
          <li key={label} className="kurs-zahl">
            <b><CountUp to={zahl} /></b>
            <span className="eyebrow mt-1 block">{label}</span>
          </li>
        ))}
      </ul>

      <ul className="mt-4 lg:mt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-3" role="list">
        {SCHULUNG_KURSE.map((k, i) => {
          const gewaehlt = kurs === k.name;
          const anteil = k.plaetze ? Math.min(1, (k.frei || 0) / k.plaetze) : 0;
          return (
            <li key={k.id} className={"fx-rise ri d" + (i + 1)} data-fx="enter" data-fx-end="0.4" data-fx-delay={(i * 0.1).toFixed(2)} data-tilt="4">
              <div className={"tile kurs-karte" + (k.beliebt ? " kurs-karte--top" : "") + (gewaehlt ? " is-gewaehlt" : "")}>
                <div className="flex items-start justify-between gap-3">
                  <span className="kurs-stufe">{k.stufe}</span>
                  {k.beliebt && <span className="pill pill--gold" style={{ padding: "3px 10px", fontSize: 10.5 }}>Empfohlen</span>}
                </div>
                <h3 className="kurs-name h-card mt-5">{k.name}</h3>
                <p className="mt-2 text-[14px] leading-relaxed body-muted">{k.fuer}</p>

                <dl className="kurs-regel">
                  <div><dt>Dauer</dt><dd>{k.dauer}</dd></div>
                  <div><dt>Format</dt><dd>{k.format}</dd></div>
                  <div><dt>Module</dt><dd>{(k.module || []).join(" · ")}</dd></div>
                  <div><dt>Termine</dt><dd>{(k.terme || []).join(", ") || "auf Anfrage"}</dd></div>
                </dl>

                <p className="kurs-preis mt-6">
                  <b>{kursPreis(k.preis)}</b>
                  <small>netto {k.einheit}</small>
                </p>

                <div className="mt-5">
                  <span className="eyebrow block mb-2">{k.frei} von {k.plaetze} Plätzen frei</span>
                  <div className="platz-bar" aria-hidden="true"><span style={{ "--frei": anteil }} /></div>
                </div>

                <button type="button" onClick={() => onKurs(k)} className="btn btn-primary btn-shine btn-block mt-6" aria-label={k.name + " buchen"}>
                  {gewaehlt ? <>Ausgewählt <Check size={14} /></> : <>Kurs buchen <ArrowRight size={14} /></>}
                </button>
              </div>
            </li>
          );
        })}
      </ul>

      <p className="ri d4 mt-8 lg:mt-10 flex flex-wrap items-center gap-x-6 gap-y-3 text-[14px]" style={{ color: "var(--text-secondary)" }}>
        <span className="flex items-center gap-2.5"><span className="pill-dot pill-dot--accent" aria-hidden="true" />Alle Preise netto, zzgl. MwSt.</span>
        <span className="flex items-center gap-2.5"><span className="pill-dot" aria-hidden="true" />Kurse, Termine und Preise sind Demo-Daten und noch nicht final</span>
      </p>
    </SchulungAbschnitt>
  );
}

/* ---------------- 06 Ablauf ---------------- */

function AblaufSection() {
  return (
    <SchulungAbschnitt
      id="ablauf" index="06" eyebrow="Ablauf"
      title={<>Vom Bedarf zu den nächsten <AccentWord>Schritten.</AccentWord></>}
      lead="Vier Etappen — vom ersten Gespräch bis zu den Aufgaben, die Ihr Team eigenständig weiterführt."
    >
      <ol className="timeline mt-14 lg:mt-16" data-fx="track" data-fx-line="0.75">
        {SCHULUNG_ABLAUF.map((s, i) => (
          <li key={s.title} className={"tl-step ri d" + (i + 1) + (i === 0 ? " is-active" : "")} style={{ "--t": i / SCHULUNG_ABLAUF.length }}>
            <span className="tl-when eyebrow" style={i === 0 ? { color: "var(--accent)" } : undefined}>{s.when}</span>
            <span className="tl-rail" aria-hidden="true"><span className="tl-dot" /></span>
            <div className="tl-card">
              <div className="flex items-start justify-between gap-3">
                <h3 className="text-[19px] font-bold tracking-tight">{s.title}</h3>
                <span className="mono text-[11px] pt-1" style={{ color: "var(--text-faint)" }}>{String(i + 1).padStart(2, "0")}</span>
              </div>
              <p className="mt-2.5 text-[14.5px] leading-relaxed body-muted">{s.body}</p>
            </div>
          </li>
        ))}
      </ol>
    </SchulungAbschnitt>
  );
}

/* ---------------- 06 Erwartetes Ergebnis ---------------- */

function ErgebnisSection() {
  return (
    <SchulungAbschnitt
      id="ergebnis" index="07" eyebrow="Erwartetes Ergebnis"
      title={<>Was am Ende <AccentWord>dasteht.</AccentWord></>}
      lead="Nach der Schulung kennt Ihr Team geeignete Einsatzfälle, kann erste Aufgaben eigenständig ausprobieren und weiß, wann menschliche Prüfung nötig ist."
    >
      <div className="mt-12 lg:mt-14 grid gap-4 lg:gap-6 lg:grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)] lg:items-start">
        <div className="panel ri d1">
          <ul className="p-6 sm:p-7 grid gap-4" role="list">
            {SCHULUNG_ERGEBNIS.map((t) => (
              <li key={t} className="flex items-start gap-3 text-[15.5px] leading-relaxed" style={{ color: "var(--text-secondary)" }}>
                <Check size={18} strokeWidth={2.4} className="flex-shrink-0 mt-0.5" style={{ color: "var(--accent)" }} />
                {t}
              </li>
            ))}
          </ul>
        </div>
        <div className="panel ri d2">
          <div className="p-6 sm:p-7">
            <MicroLabel>Vorab geklärt</MicroLabel>
            <dl className="mt-5 grid">
              {SCHULUNG_VORAB.map(([k, v]) => (
                <div key={k} className="hr-b flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 py-3 first:pt-0">
                  <dt className="text-[14px]" style={{ color: "var(--text-muted)" }}>{k}</dt>
                  <dd className="text-[14.5px] font-semibold">{v}</dd>
                </div>
              ))}
            </dl>
            <p className="mt-5 text-[13.5px] leading-relaxed" style={{ color: "var(--text-muted)" }}>
              So kennen Sie den Rahmen, bevor Sie zusagen.
            </p>
          </div>
        </div>
      </div>
    </SchulungAbschnitt>
  );
}

/* ---------------- 07 Häufige Fragen (Liste + Antwortbereich) ---------------- */

function FragenSection() {
  const [aktiv, setAktiv] = useState(0);
  const [offen, setOffen] = useState(0);
  const tabsRef = useRef([]);
  const n = SCHULUNG_FAQ.length;
  const eintrag = SCHULUNG_FAQ[aktiv];

  const onKeyDown = (e) => {
    let next = null;
    if (e.key === "ArrowDown" || e.key === "ArrowRight") next = (aktiv + 1) % n;
    if (e.key === "ArrowUp" || e.key === "ArrowLeft") next = (aktiv - 1 + n) % n;
    if (e.key === "Home") next = 0;
    if (e.key === "End") next = n - 1;
    if (next === null) return;
    e.preventDefault();
    setAktiv(next);
    tabsRef.current[next] && tabsRef.current[next].focus();
  };

  return (
    <SchulungAbschnitt
      id="fragen" index="08" eyebrow="Häufige Fragen"
      title={<>Häufige Fragen, <AccentWord>ehrlich</AccentWord> beantwortet.</>}
      lead="Kurz und konkret. Fehlt Ihre Frage, schreiben Sie sie gern in die Anfrage."
    >
      <div className="hidden lg:grid mt-14 grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)] gap-6 items-start">
        <div className="ri d1 flex flex-col gap-1" role="tablist" aria-orientation="vertical" aria-label="Häufige Fragen" onKeyDown={onKeyDown}>
          {SCHULUNG_FAQ.map((it, i) => (
            <button key={it.q} ref={(el) => (tabsRef.current[i] = el)} type="button" role="tab" id={"schulung-frage-" + i}
              aria-selected={aktiv === i} aria-controls="schulung-antwort" tabIndex={aktiv === i ? 0 : -1}
              onClick={() => setAktiv(i)} className="faq-tab">
              <span className="mono text-[12px] pt-1" style={{ color: aktiv === i ? "var(--accent)" : "var(--text-faint)" }}>{String(i + 1).padStart(2, "0")}</span>
              <span className="text-[17px] font-semibold tracking-tight leading-snug">{it.q}</span>
            </button>
          ))}
        </div>
        <div className="ri d2 sticky" style={{ top: "calc(var(--nav-h) + 96px)" }}>
          <div id="schulung-antwort" role="tabpanel" aria-labelledby={"schulung-frage-" + aktiv} className="panel panel--float">
            <div className="panel-head">
              <div className="flex items-center gap-3"><span className="pill-dot pill-dot--accent" aria-hidden="true" /><MicroLabel style={{ color: "var(--text-secondary)" }}>Antwort</MicroLabel></div>
              <span className="mono text-[11px]" style={{ color: "var(--text-muted)" }}>{String(aktiv + 1).padStart(2, "0")} / {String(n).padStart(2, "0")}</span>
            </div>
            <div className="p-7">
              <h3 className="text-[22px] font-bold tracking-tight leading-snug">{eintrag.q}</h3>
              <p key={aktiv} className="mt-4 text-[16px] leading-[1.75]" style={{ color: "var(--text-secondary)", animation: "heroUp 420ms var(--ease-out) both" }}>{eintrag.a}</p>
            </div>
            <div className="flex items-center justify-between gap-3 px-7 py-4" style={{ borderTop: "1px solid var(--line-soft)" }}>
              <a href="#anfrage" className="link-accent text-[14px]">Frage in die Anfrage schreiben <ArrowRight size={14} /></a>
              <div className="flex gap-2">
                <button type="button" className="btn btn-ghost btn-sm w-11 px-0" onClick={() => setAktiv((aktiv - 1 + n) % n)} aria-label="Vorherige Frage"><ChevronUp size={16} /></button>
                <button type="button" className="btn btn-ghost btn-sm w-11 px-0" onClick={() => setAktiv((aktiv + 1) % n)} aria-label="Nächste Frage"><ChevronDown size={16} /></button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="lg:hidden mt-12 hr-t">
        {SCHULUNG_FAQ.map((it, i) => {
          const open = offen === i;
          return (
            <div key={it.q} className="hr-b">
              <h3>
                <button type="button" onClick={() => setOffen(open ? -1 : i)} aria-expanded={open} aria-controls={"schulung-acc-" + i}
                  className="w-full grid grid-cols-[32px_minmax(0,1fr)_32px] gap-3 items-start py-5 text-left">
                  <span className="mono text-[12px] pt-1" style={{ color: open ? "var(--accent)" : "var(--text-faint)" }}>{String(i + 1).padStart(2, "0")}</span>
                  <span className="text-[16.5px] font-semibold tracking-tight leading-snug">{it.q}</span>
                  <span className="w-8 h-8 rounded-full flex items-center justify-center transition-transform"
                    style={{ background: open ? "var(--accent-gradient)" : "rgba(255,255,255,0.06)", color: open ? "var(--ink-on-accent)" : "var(--text-primary)", transform: open ? "rotate(45deg)" : "none" }}>
                    <Plus size={15} strokeWidth={2.4} />
                  </span>
                </button>
              </h3>
              <div id={"schulung-acc-" + i} className={"accordion-body" + (open ? " is-open" : "")}>
                <div><p className="pb-6 pl-[44px] text-[15px] leading-relaxed" style={{ color: "var(--text-secondary)" }}>{it.a}</p></div>
              </div>
            </div>
          );
        })}
      </div>
    </SchulungAbschnitt>
  );
}

/* ---------------- 09 Buchung (Kurs, Termin, Kontaktdaten) ---------------- */

const SCHULUNG_LEER = {
  name: "", company: "", email: "", phone: "",
  trainingFormat: SCHULUNG_FORMAT_OPTIONEN[0],
  participants: SCHULUNG_GRUPPE_OPTIONEN[0],
  trainingFocus: SCHULUNG_SCHWERPUNKT_OPTIONEN[0],
  message: "", datenschutz: false,
};

// Wie contactErrors in funnel.jsx; bei der Schulung ist Telefon freiwillig und die Datenschutz-Bestätigung Pflicht
function schulungErrors(d) {
  const e = {};
  if (!d.name.trim()) e.name = "Bitte geben Sie Ihren Namen an.";
  if (!d.company.trim()) e.company = "Bitte geben Sie Ihre Firma an.";
  if (!d.email.trim() || !/^\S+@\S+\.\S+$/.test(d.email)) e.email = "Bitte eine gültige E-Mail-Adresse angeben, z. B. max@firma.de.";
  if (d.phone.trim() && d.phone.replace(/\D/g, "").length < 6) e.phone = "Bitte eine gültige Telefonnummer angeben (mind. 6 Ziffern) — oder das Feld leer lassen.";
  if (!d.datenschutz) e.datenschutz = "Bitte bestätigen Sie den Hinweis zum Datenschutz.";
  return e;
}

// Was nach dem Absenden passiert — keine automatische Buchung, keine erfundene Bestätigung
const SCHULUNG_DANACH = [
  ["Innerhalb von 24 Stunden", "Wir melden uns per E-Mail oder Telefon bei Ihnen."],
  ["Kurzes Erstgespräch", "Wir klären Bedarf, Format und Umfang — ohne Verkaufsdruck."],
  ["Ihr Angebot", "Sie erhalten ein individuelles Angebot mit den abgestimmten Inhalten."],
];

function AnfrageSection({ kurs, onKurs }) {
  const zweistufig = SCHULUNG_KURSE.length > 0;
  const [schritt, setSchritt] = useState(zweistufig ? 1 : 2);
  const [termin, setTermin] = useState(SCHULUNG_TERMIN_OFFEN);
  const [werte, setWerte] = useState(SCHULUNG_LEER);
  const [fehler, setFehler] = useState({});
  const [sending, setSending] = useState(false);
  const [sendError, setSendError] = useState("");
  const [gesendet, setGesendet] = useState(false);
  const dankRef = useRef(null);
  const schrittRef = useRef(null);
  const id = "ki-schulungen";

  const kursDaten = kursNach(kurs);
  const termine = kursTermine(kursDaten);
  const schritt1Fertig = !!kurs;

  useEffect(() => { if (gesendet && dankRef.current) dankRef.current.focus(); }, [gesendet]);

  // Passt der gewählte Termin nicht mehr zum Kurs (etwa nach „Kurs buchen“ im Abschnitt „Kurse“),
  // fällt er auf „Noch offen“ zurück.
  useEffect(() => { if (zweistufig && termine.indexOf(termin) === -1) setTermin(SCHULUNG_TERMIN_OFFEN); }, [kurs]);

  // Nach dem Schrittwechsel den Fokus auf die Überschrift setzen (Tastatur und Screenreader)
  useEffect(() => { if (schrittRef.current) schrittRef.current.focus({ preventScroll: true }); }, [schritt]);

  const upd = (k, v) => {
    setWerte((w) => ({ ...w, [k]: v }));
    if (fehler[k]) setFehler((f) => ({ ...f, [k]: undefined }));
  };

  const senden = async (e) => {
    e.preventDefault();
    const f = schulungErrors(werte);
    setFehler(f);
    const erstes = ["name", "company", "email", "phone", "datenschutz"].find((k) => f[k]);
    if (erstes) {
      const el = document.getElementById(id + "-" + erstes);
      if (el) el.focus();
      return;
    }
    setSending(true);
    setSendError("");
    // Erfolg nur anzeigen, wenn die Anfrage wirklich angekommen ist – sonst ginge sie still verloren
    let meldung = "Verbindungsfehler — bitte versuchen Sie es erneut.";
    try {
      const res = await fetch("/api-contact.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...werte, type: "KI-Schulungen", kurs, termin, datenschutz: werte.datenschutz ? "ja" : "" }),
      });
      if (res.ok) { setSending(false); setGesendet(true); return; }
      meldung = (await res.json().catch(() => ({}))).error || "Die Anfrage konnte nicht gesendet werden.";
    } catch (err) {
      console.error("Schulungsanfrage Fehler:", err);
    }
    setSendError(meldung);
    setSending(false);
  };

  return (
    <SchulungAbschnitt
      id="anfrage" index="09" eyebrow="Buchung"
      title={<>Kurs <AccentWord>buchen.</AccentWord></>}
      lead="Kurs und Termin wählen, Kontaktdaten ergänzen — wir bestätigen den Termin per E-Mail. Im Formular wird nichts bezahlt."
    >
      <div className="mt-12 lg:mt-14 grid gap-4 lg:gap-6 lg:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)] lg:items-start">
        <div className="panel panel--float ri d1">
          {!gesendet ? (
            <form noValidate onSubmit={senden} className="p-5 sm:p-7">
              {zweistufig && (
                <div className="mb-7">
                  <div className="buchung-leiste">
                    {["Kurs & Termin", "Kontaktdaten"].map((t, i) => {
                      const n = i + 1;
                      const aktiv = schritt === n;
                      const fertig = schritt > n;
                      return (
                        <button key={t} type="button" onClick={() => setSchritt(n)} disabled={n > 1 && !schritt1Fertig}
                          className={"buchung-punkt" + (aktiv ? " is-active" : "") + (fertig ? " is-done" : "")}>
                          <span className="step-badge">{fertig ? <Check size={12} strokeWidth={3} /> : n}</span>
                          <span className="text-[13.5px] font-semibold">{t}</span>
                        </button>
                      );
                    })}
                  </div>
                  <div className="buchung-progress mt-4"><span style={{ width: schritt === 1 ? "50%" : "100%" }} /></div>
                </div>
              )}

              {/* Schritt-Überschrift: zugleich Fokusziel nach dem Wechsel (Tastatur und Screenreader) */}
              <h3 ref={schrittRef} tabIndex={-1} className="text-[20px] sm:text-[22px] font-bold tracking-tight outline-none">
                {zweistufig && schritt === 1 ? "Kurs und Termin" : "Ihre Kontaktdaten"}
              </h3>
              <p className="mt-1.5 mb-5 text-[14px] leading-relaxed body-muted">
                {zweistufig && schritt === 1
                  ? "Wählen Sie einen Kurs und, wenn Sie mögen, einen der Termine. Alles Weitere klären wir im Erstgespräch."
                  : "Damit wir Ihnen antworten können. Bitte noch keine vertraulichen Dokumente senden."}
              </p>

              {/* Schritt 1: Kurs und Termin */}
              {(!zweistufig || schritt === 1) && (
                <div className="buchung-schritt grid sm:grid-cols-2 gap-4">
                  {zweistufig && (
                    <>
                      <SchulungAuswahl id={id + "-kurs"} label="Kurs *" value={kurs} onChange={onKurs} optionen={SCHULUNG_KURSE.map((k) => k.name)} />
                      <SchulungAuswahl id={id + "-termin"} label="Termin" value={termin} onChange={setTermin} optionen={termine} />
                    </>
                  )}
                  <SchulungAuswahl id={id + "-format"} label="Gewünschtes Format" value={werte.trainingFormat} onChange={(v) => upd("trainingFormat", v)} optionen={SCHULUNG_FORMAT_OPTIONEN} />
                  <SchulungAuswahl id={id + "-gruppe"} label="Geschätzte Gruppengröße" value={werte.participants} onChange={(v) => upd("participants", v)} optionen={SCHULUNG_GRUPPE_OPTIONEN} />
                  <SchulungAuswahl id={id + "-schwerpunkt"} label="Schwerpunkt" value={werte.trainingFocus} onChange={(v) => upd("trainingFocus", v)} optionen={SCHULUNG_SCHWERPUNKT_OPTIONEN} />
                  {zweistufig && kursDaten && (
                    <div className="sm:col-span-2 panel">
                      <div className="p-4 flex flex-wrap items-center justify-between gap-3">
                        <span className="min-w-0">
                          <span className="block eyebrow">Gewählter Kurs</span>
                          <span className="block mt-1 text-[15px] font-semibold">{kursDaten.name}</span>
                        </span>
                        <span className="kurs-preis">
                          <b style={{ fontSize: 20 }}>{kursPreis(kursDaten.preis)}</b>
                          <small>netto {kursDaten.einheit}</small>
                        </span>
                      </div>
                    </div>
                  )}
                </div>
              )}

              {/* Schritt 2: Kontaktdaten */}
              {(!zweistufig || schritt === 2) && (
                <div className="buchung-schritt grid sm:grid-cols-2 gap-4">
                  <Field id={id + "-name"} label="Name *" value={werte.name} onChange={(v) => upd("name", v)} placeholder="Max Mustermann" error={fehler.name} autoComplete="name" />
                  <Field id={id + "-company"} label="Firma/Organisation *" value={werte.company} onChange={(v) => upd("company", v)} placeholder="Mustermann GmbH" error={fehler.company} autoComplete="organization" />
                  <Field id={id + "-email"} label="E-Mail *" type="email" value={werte.email} onChange={(v) => upd("email", v)} placeholder="max@firma.de" error={fehler.email} autoComplete="email" inputMode="email" />
                  <Field id={id + "-phone"} label="Telefon (freiwillig)" type="tel" value={werte.phone} onChange={(v) => upd("phone", v)} placeholder="+49 176 13430400" error={fehler.phone} autoComplete="tel" inputMode="tel" />
                  <div className="sm:col-span-2">
                    <SchulungText id={id + "-message"} label="Worum geht es?" value={werte.message} onChange={(v) => upd("message", v)}
                      placeholder="z. B. Branche, Team, vorhandene Werkzeuge, gewünschte Aufgaben"
                      hint="Bitte senden Sie noch keine vertraulichen Dokumente — dafür klären wir vorab das passende Vorgehen." />
                  </div>
                  <div className="sm:col-span-2">
                    <label htmlFor={id + "-datenschutz"} className="flex items-start gap-3 text-[13.5px] leading-relaxed cursor-pointer" style={{ color: "var(--text-secondary)" }}>
                      <input id={id + "-datenschutz"} type="checkbox" checked={werte.datenschutz} onChange={(e) => upd("datenschutz", e.target.checked)}
                        className="mt-0.5 w-5 h-5 flex-shrink-0 rounded" style={{ accentColor: "var(--accent)" }}
                        aria-invalid={fehler.datenschutz ? "true" : "false"} aria-describedby={fehler.datenschutz ? id + "-datenschutz-fehler" : undefined} />
                      <span>Ich habe die <a href="datenschutz.html#kontaktformular" className="underline underline-offset-4">Hinweise zum Datenschutz</a> gelesen. Wir nutzen Ihre Angaben nur für diese Anfrage.</span>
                    </label>
                    {fehler.datenschutz && <div id={id + "-datenschutz-fehler"} role="alert" className="text-[12.5px] mt-1.5" style={{ color: "var(--danger)" }}>{fehler.datenschutz}</div>}
                  </div>
                </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} 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 Buchung ist eine Anfrage — im Formular wird nichts bezahlt.
                </p>
                <div className="flex items-center gap-3 flex-shrink-0">
                  {zweistufig && schritt === 2 && (
                    <GhostButton type="button" size="lg" onClick={() => setSchritt(1)} icon={<ArrowLeft size={15} />}>Zurück</GhostButton>
                  )}
                  {zweistufig && schritt === 1 ? (
                    <PrimaryButton type="button" size="lg" onClick={() => setSchritt(2)}>Weiter <ArrowRight size={14} /></PrimaryButton>
                  ) : (
                    <PrimaryButton type="submit" disabled={sending} size="lg">
                      {sending ? "Wird gesendet …" : <>Buchung senden <ArrowRight size={14} /></>}
                    </PrimaryButton>
                  )}
                </div>
              </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 Buchungsanfrage ist angekommen. Wir bestätigen den Termin innerhalb von 24 Stunden per E-Mail.</p>
            </div>
          )}
        </div>

        <aside className="ri d2 grid gap-4">
          <div className="panel">
            <div className="panel-head">
              <div className="flex items-center gap-3"><span className="pill-dot pill-dot--accent" aria-hidden="true" /><MicroLabel style={{ color: "var(--text-secondary)" }}>So geht es weiter</MicroLabel></div>
            </div>
            <ol className="p-6 grid gap-4">
              {SCHULUNG_DANACH.map(([t, b], i) => (
                <li key={t} className="flex items-start gap-3">
                  <span className="step-badge flex-shrink-0">{i + 1}</span>
                  <span className="min-w-0">
                    <span className="block text-[15px] font-semibold">{t}</span>
                    <span className="block mt-1 text-[14px] leading-relaxed" style={{ color: "var(--text-muted)" }}>{b}</span>
                  </span>
                </li>
              ))}
            </ol>
          </div>
          <div className="panel">
            <div className="p-6">
              <MicroLabel>Direkt erreichen</MicroLabel>
              <ul className="mt-4 grid gap-3 text-[14.5px]" role="list">
                <li><a href={"mailto:" + CONTACT.email} className="link-accent break-all">{CONTACT.email}</a></li>
                <li><a href={CONTACT.phoneHref} className="link-accent">{CONTACT.phone}</a></li>
                <li><a href="kontakt.html" className="link-accent">Kostenloses Erstgespräch</a></li>
              </ul>
            </div>
          </div>
        </aside>
      </div>
    </SchulungAbschnitt>
  );
}

/* ---------------- Seite ---------------- */

function KiSchulungenPage() {
  // Gewählter Kurs: die Kurskarten setzen ihn, die Buchung übernimmt ihn
  const [kurs, setKurs] = useState(SCHULUNG_KURSE.length ? SCHULUNG_KURSE[0].name : "");
  const kursWaehlen = (k) => {
    setKurs(k.name);
    scrollToId("anfrage");
  };

  return (
    <SectionCount.Provider value="09">
      <PageHero
        page="ki-schulungen"
        eyebrow="KI-Schulungen"
        title={<>KI-Schulungen, die im Arbeitsalltag <AccentWord>ankommen.</AccentWord></>}
        lead="Wir zeigen Ihrem Team, wie es KI-Werkzeuge sinnvoll nutzt: von den Grundlagen bis zu konkreten Aufgaben aus Ihrem Unternehmen."
        actions={<>
          <PrimaryButton href="#anfrage" size="lg">Kurs buchen <ArrowRight size={16} /></PrimaryButton>
          <GhostButton href="#kurse" size="lg" icon={<GraduationCap size={16} />}>Kurse ansehen</GhostButton>
        </>}
        facts={[[SCHULUNG_KURSE.length + " Kurse zur Auswahl", "primary"], ["Online oder vor Ort nach Absprache", "primary"], ["Antwort in unter 24 h", "secondary"]]}
      />
      <SchulungAnker />
      <WarumSchulung />
      <ZielgruppenSection />
      <InhalteSection />
      <FormateSection />
      <KursSection kurs={kurs} onKurs={kursWaehlen} />
      <AblaufSection />
      <ErgebnisSection />
      <FragenSection />
      <AnfrageSection kurs={kurs} onKurs={setKurs} />
      <NextChapter to="kontakt" />
    </SectionCount.Provider>
  );
}

// app.jsx wählt die Seite über window.SAWORA_SEITEN (siehe App()); so bleibt eine Routinglogik
window.SAWORA_SEITEN = Object.assign(window.SAWORA_SEITEN || {}, { "ki-schulungen": KiSchulungenPage });