/* Kontaktseite */

function KontaktInfo() {
  return (
    <div>
      <div style={{ display: "flex", gap: 20, alignItems: "center", margin: "0 0 24px" }}>
        <img src="assets/pierre.jpg" alt="Pierre-Frederik Augustiny" width="96" height="96" style={{ borderRadius: "50%", flex: "none" }} />
        <div style={{ fontSize: 18 }}>
          <strong style={{ color: "var(--text-heading)" }}>Seevetal-Digital</strong><br />
          Inhaber Pierre-Frederik Augustiny
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 14, fontSize: 18 }}>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <i data-lucide="smartphone" style={{ width: 22, height: 22, color: "var(--blue-600)", flex: "none" }}></i>
          <a href="tel:+4915146388214">0151 46388214</a>
        </div>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <i data-lucide="mail" style={{ width: 22, height: 22, color: "var(--blue-600)", flex: "none" }}></i>
          <a href="mailto:kontakt@seevetal-digital.de">kontakt@seevetal-digital.de</a>
        </div>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <i data-lucide="map-pin" style={{ width: 22, height: 22, color: "var(--blue-600)", flex: "none" }}></i>
          <span>Helmsweg 2a, 21218 Seevetal</span>
        </div>
      </div>
    </div>
  );
}

function KontaktForm() {
  const { Input, Select, Checkbox, Button, Toast, Card } = window.SeevetalDigitalDesignSystem_7a23a1;
  const [vorname, setVorname] = React.useState("");
  const [nachname, setNachname] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [telefon, setTelefon] = React.useState("");
  const [thema, setThema] = React.useState("Allgemeine Frage");
  const [nachricht, setNachricht] = React.useState("");
  const [sent, setSent] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    const subject = "Anfrage über die Website: " + thema;
    const body =
      "Name: " + vorname + " " + nachname + "\n" +
      "E-Mail: " + email + "\n" +
      (telefon ? "Telefon: " + telefon + "\n" : "") +
      "Thema: " + thema + "\n\n" +
      nachricht;
    window.location.href = "mailto:kontakt@seevetal-digital.de?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);
    setSent(true);
  };

  return (
    <Card padding="var(--space-6)">
      <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
        {sent ? (
          <Toast tone="success">Ihr E-Mail-Programm hat sich geöffnet — bitte senden Sie die vorbereitete Nachricht dort ab. Falls sich nichts geöffnet hat, schreiben Sie uns einfach direkt an kontakt@seevetal-digital.de.</Toast>
        ) : null}
        <div className="sd-grid-2" style={{ gap: 20 }}>
          <Input label="Vorname" autoComplete="given-name" value={vorname} onChange={(e) => setVorname(e.target.value)} />
          <Input label="Nachname" autoComplete="family-name" value={nachname} onChange={(e) => setNachname(e.target.value)} />
        </div>
        <Input label="E-Mail-Adresse" type="email" required autoComplete="email" value={email} onChange={(e) => setEmail(e.target.value)} />
        <Input label="Telefon" type="tel" hint="Falls Sie einen Rückruf wünschen" autoComplete="tel" value={telefon} onChange={(e) => setTelefon(e.target.value)} />
          <Select label="Thema" value={thema} onChange={(e) => setThema(e.target.value)} options={["Allgemeine Frage", "Sicherheit im Internet", "Passwörter & Passwort-Manager", "KI verstehen & anwenden", "Banking & Einkaufen im Internet", "Digitale Behördengänge", "Datensicherung & Cloud", "Digitalisierung von Belegen & Fotos", "Schutz für Kinder"]} />
        <div>
          <label className="sd-field-label" htmlFor="nachricht">Ihre Nachricht</label>
          <textarea id="nachricht" className="sd-textarea" required value={nachricht} onChange={(e) => setNachricht(e.target.value)} placeholder="Womit können wir Ihnen helfen?"></textarea>
        </div>
        <Checkbox label="Ich bin mit der Kontaktaufnahme einverstanden." required />
        <Button size="lg" type="submit">Nachricht absenden</Button>
        <p style={{ fontSize: 16, color: "var(--text-body)", margin: 0 }}>
          Beim Absenden öffnet sich Ihr E-Mail-Programm mit der fertigen Nachricht. Hinweise zum Umgang mit Ihren Daten finden Sie in der <a href="datenschutz.html">Datenschutzerklärung</a>.
        </p>
      </form>
    </Card>
  );
}

function KontaktSection() {
  return (
    <div>
      <div className="sd-page-hero">
        <div className="sd-container">
          <window.Eyebrow>KONTAKT</window.Eyebrow>
          <h1 style={{ fontSize: "var(--text-3xl)", margin: 0, textWrap: "pretty" }}>Sprechen Sie uns an</h1>
          <p className="sd-hero-intro">
            Ob kurze Frage oder konkreter Beratungswunsch — wir freuen uns, von Ihnen zu hören. Schreiben Sie uns einfach oder rufen Sie direkt an. Wir melden uns schnell und unkompliziert bei Ihnen.
          </p>
        </div>
      </div>
      <section>
        <div className="sd-container sd-contact-grid" style={{ padding: "56px 24px 96px" }}>
          <KontaktInfo />
          <KontaktForm />
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { KontaktSection });