/* Gemeinsame Bausteine der Leistungsseiten KI-Server, Personalvermittlung und Bewertungsmanagement
   (nur von ki-server.html, personalvermittlung.html und bewertungen.html geladen, vor der jeweiligen seite-*.jsx).
   Abschnitts-Hülle, Auswahl- und Textfeld, Karten-Raster und das Kurzformular für Anfragen an api-contact.php. */

// Sektion mit Kopf wie alle übrigen Sektionen (Index, Eyebrow, Headline, Lead); Inhalt kommt als children
function Abschnitt({ id, index, eyebrow, title, lead, aside, children, className = "" }) {
  const ref = useReveal();
  return (
    <section id={id} ref={ref} className={"reveal section " + 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>
  );
}

// Auswahl im Stil von Field (funnel.jsx); leerer Wert = „Bitte wählen“.
// optionen: Texte (Wert = Text) oder Paare [wert, beschriftung]
function AuswahlFeld({ id, label, value, onChange, optionen, error }) {
  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>
      <select id={id} value={value} onChange={(e) => onChange(e.target.value)} className="field-input field-select"
        aria-invalid={error ? "true" : "false"} aria-describedby={error ? errId : undefined}>
        <option value="">Bitte wählen</option>
        {optionen.map((o) => {
          const [wert, text] = Array.isArray(o) ? o : [o, o];
          return <option key={wert} value={wert}>{text}</option>;
        })}
      </select>
      {error && <div id={errId} role="alert" className="text-[12.5px] mt-1.5" style={{ color: "var(--danger)" }}>{error}</div>}
    </div>
  );
}

// Mehrzeiliges Textfeld im Stil von Field
function TextFeld({ id, label, value, onChange, error, rows = 4, placeholder }) {
  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} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
        className="field-input field-textarea" aria-invalid={error ? "true" : "false"} aria-describedby={error ? errId : undefined} />
      {error && <div id={errId} role="alert" className="text-[12.5px] mt-1.5" style={{ color: "var(--danger)" }}>{error}</div>}
    </div>
  );
}

// Raster aus Karten mit Icon, Titel und Text (items: { Icon, titel, text, link?: [href, label] }).
// spalten: 2, 3 oder 4 ab Desktop; Klassen ausgeschrieben, damit das Tailwind-Skript sie findet.
const KARTEN_SPALTEN = { 2: "md:grid-cols-2", 3: "md:grid-cols-2 lg:grid-cols-3", 4: "md:grid-cols-2 lg:grid-cols-4" };

function KarteListe({ items, spalten = 3, className = "mt-12 lg:mt-14" }) {
  return (
    <ul className={"grid gap-4 " + KARTEN_SPALTEN[spalten] + " " + className}>
      {items.map((k, i) => (
        <li key={k.titel} className={"tile ri d" + Math.min(i + 1, 4)}>
          <span className="mega-icon" aria-hidden="true"><k.Icon size={17} /></span>
          <h3 className="mt-5 text-[19px] font-bold tracking-tight leading-snug">{k.titel}</h3>
          <p className="mt-2.5 text-[15px] leading-relaxed body-muted">{k.text}</p>
          {k.link && <a href={k.link[0]} className="link-accent mt-4 text-[14px]">{k.link[1]} <ArrowRight size={14} /></a>}
        </li>
      ))}
    </ul>
  );
}

// Kurzformular der Leistungsseiten: Kontaktdaten (Pflicht, Prüfung wie im Funnel) + eigene Felder.
// Sendet JSON mit type an api-contact.php – gleiche Mail, gleiches Postfach, gleiche Grenze wie das Kontaktformular.
// felder: [{ name, label, art: "text" | "select" | "textarea", optionen, placeholder }]
// vorauswahl: Objekt mit Feldwerten (z. B. { paket: "Team" }); jede neue Vorauswahl wird übernommen.
// datenschutzHref: Ziel des Datenschutz-Links, z. B. mit Anker auf einen eigenen Abschnitt.
function KurzAnfrage({ id = "anfrage", index, typ, eyebrow = "Anfrage", titel, lead, felder = [], vorauswahl, knopf = "Anfrage senden", datenschutzHref = "datenschutz.html", telefonOptional = false }) {
  const leer = { name: "", company: "", email: "", phone: "" };
  felder.forEach((f) => { leer[f.name] = ""; });
  const [werte, setWerte] = useState(leer);
  const [fehler, setFehler] = useState({});
  const [sending, setSending] = useState(false);
  const [sendError, setSendError] = useState("");
  const [gesendet, setGesendet] = useState(false);
  const dankRef = useRef(null);

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

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

  const senden = async (e) => {
    e.preventDefault();
    const f = contactErrors(werte);
    if (telefonOptional && !werte.phone.trim()) {
      delete f.phone;
    }
    setFehler(f);
    const erstes = Object.keys(f)[0];
    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
    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({ type: typ, ...werte }),
      });
      if (res.ok) { setSending(false); setGesendet(true); return; }
      meldung = (await res.json().catch(() => ({}))).error || "Die Anfrage konnte nicht gesendet werden.";
    } catch (err) {
      console.error("Anfrage Fehler:", err);
    }
    setSendError(meldung);
    setSending(false);
  };

  const feld = (f) => {
    const fid = id + "-" + f.name;
    if (f.art === "select") return <AuswahlFeld key={f.name} id={fid} label={f.label} value={werte[f.name]} onChange={(v) => upd(f.name, v)} optionen={f.optionen} />;
    if (f.art === "textarea") {
      return <div key={f.name} className="sm:col-span-2"><TextFeld id={fid} label={f.label} value={werte[f.name]} onChange={(v) => upd(f.name, v)} placeholder={f.placeholder} /></div>;
    }
    return <Field key={f.name} id={fid} label={f.label} value={werte[f.name]} onChange={(v) => upd(f.name, v)} placeholder={f.placeholder} />;
  };

  return (
    <Abschnitt id={id} index={index} eyebrow={eyebrow} title={titel} lead={lead}>
      <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">
              <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 *" 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={telefonOptional ? "Telefonnummer" : "Telefonnummer *"} type="tel" value={werte.phone} onChange={(v) => upd("phone", v)} placeholder="+49 176 13430400" error={fehler.phone} autoComplete="tel" inputMode="tel" />
              {felder.map(feld)}
            </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. Wir nutzen Ihre Angaben nur für diese Anfrage – <a href={datenschutzHref} className="underline underline-offset-4">Hinweise zum Datenschutz</a>.
              </p>
              <PrimaryButton type="submit" disabled={sending} className="flex-shrink-0">
                {sending ? "Wird gesendet …" : <>{knopf} <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 Anfrage ist angekommen. Wir melden uns innerhalb von 24 Stunden bei Ihnen.</p>
          </div>
        )}
      </div>
    </Abschnitt>
  );
}

Object.assign(window, { Abschnitt, AuswahlFeld, TextFeld, KarteListe, KurzAnfrage });