// Kontakt — split info + enquiry form.
function JHContact({ prefill }) {
  const { SectionLabel, Input, Textarea, Button, IconButton } = window.JasminHaasDesignSystem_416321;
  const Reveal = window.JHReveal;
  const [sent, setSent] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const S = window.JH_SETTINGS || {};

  const submit = async (e) => {
    e.preventDefault();
    const f = e.target;
    setBusy(true); setError(null);
    try {
      const r = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: f.elements.name.value, phone: f.elements.phone.value, email: f.elements.email.value, message: f.elements.message.value, website: f.elements.website.value }),
      });
      if (!r.ok) throw new Error((await r.json()).error || "Fehler");
      setSent(true);
    } catch (err) {
      setError("Senden fehlgeschlagen — bitte schreiben Sie direkt an " + (S.email || "mich") + ".");
    } finally { setBusy(false); }
  };

  return (
    <div style={{ background: "var(--bg-canvas)", paddingTop: "calc(86px + var(--space-12))", minHeight: "100vh" }}>
      <div style={{ maxWidth: "var(--content-max)", margin: "0 auto", padding: "0 var(--gutter) var(--section-y)", display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: "clamp(40px, 7vw, 100px)" }}>
        {/* Info */}
        <Reveal>
          <SectionLabel eyebrow="Kontakt" title="Interesse an einem einzigartigen Werk?" />
          <p style={{ margin: "24px 0 0", maxWidth: "42ch", fontFamily: "var(--font-sans)", fontSize: "1.06rem", lineHeight: 1.7, color: "var(--text-secondary)" }}>
            {S.contact_intro || "Schreiben Sie mir gerne per Mail oder über das Formular."}
          </p>
          <div style={{ marginTop: "40px", display: "flex", flexDirection: "column", gap: "24px" }}>
            {[["mail","E-Mail",S.email],["instagram","Instagram",S.instagram],["map-pin","Atelier",S.location]].map(([ic,k,v]) => (
              <div key={k} style={{ display: "flex", alignItems: "center", gap: "16px" }}>
                <span style={{ width: "46px", height: "46px", borderRadius: "50%", border: "1px solid var(--line-gold)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-gold)", flexShrink: 0 }}>
                  <i data-lucide={ic} style={{ width: 18, height: 18 }}></i>
                </span>
                <div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "0.62rem", fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-muted)" }}>{k}</div>
                  <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "1.3rem", color: "var(--text-primary)" }}>{v}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>

        {/* Form */}
        <Reveal delay={120} style={{ background: "var(--bg-paper)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-md)", padding: "clamp(28px, 3.5vw, 48px)" }}>
          {sent ? (
            <div style={{ height: "100%", minHeight: "360px", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", gap: "16px" }}>
              <span style={{ width: "60px", height: "60px", borderRadius: "50%", background: "var(--gold-leaf)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff" }}>
                <i data-lucide="check" style={{ width: 26, height: 26 }}></i>
              </span>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "2rem", margin: 0 }}>Vielen Dank!</h3>
              <p style={{ fontFamily: "var(--font-sans)", color: "var(--text-secondary)", maxWidth: "32ch", margin: 0 }}>Ihre Nachricht ist angekommen. Ich melde mich in Kürze bei Ihnen.</p>
              <Button variant="outline" onClick={() => setSent(false)}>Neue Nachricht</Button>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "26px 22px" }}>
              <input type="text" name="website" tabIndex={-1} autoComplete="off" style={{ position: "absolute", left: "-9999px", width: "1px", height: "1px", opacity: 0 }} />
              <Input label="Name" name="name" required placeholder="Ihr Name" />
              <Input label="Telefonnr." name="phone" type="tel" placeholder="Optional" />
              <Input style={{ gridColumn: "1 / -1" }} label="E-Mail" name="email" type="email" required placeholder="sie@beispiel.de" />
              <Textarea style={{ gridColumn: "1 / -1" }} label="Nachricht" name="message" required rows={5} defaultValue={prefill || ""} placeholder="Erzählen Sie mir von Ihrer Idee …" />
              <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "space-between", alignItems: "center", gap: "16px", flexWrap: "wrap" }}>
                <span style={{ fontFamily: "var(--font-sans)", fontSize: "0.74rem", color: error ? "var(--text-gold)" : "var(--text-muted)" }}>{error || "* Pflichtfelder"}</span>
                <Button variant="gold" size="lg" type="submit" iconRight={<i data-lucide="arrow-up-right" style={{ width: 16, height: 16 }}></i>} disabled={busy}>{busy ? "Wird gesendet …" : "Absenden"}</Button>
              </div>
            </form>
          )}
        </Reveal>
      </div>
    </div>
  );
}
window.JHContact = JHContact;