// Contact page sections — expandAI

// ----- Hero -----
const ContactHero = () =>
<section style={{ padding: "120px 0 48px", position: "relative", overflow: "hidden" }}>
    <div aria-hidden style={{
    position: "absolute", left: "50%", top: -200,
    width: 900, height: 600, transform: "translateX(-50%)",
    background: "radial-gradient(ellipse at center, rgba(167,139,250,0.18), rgba(167,139,250,0) 60%)",
    pointerEvents: "none"
  }} />
    <div className="container" style={{ textAlign: "center", position: "relative" }}>
      <div className="eyebrow" style={{ marginBottom: 28 }}>
        <span className="dot" />
        Kontakt
      </div>
      <h1 className="h1 gradient-text" style={{ marginBottom: 24 }}>
        Sprechen wir<br />über Ihr Projekt.
      </h1>
      <p className="lead" style={{ maxWidth: 620, margin: "0 auto" }}>
        Ob Pilotprojekt, Demo, Forschungskooperation oder eine konkrete Frage zu
        einer Inspektion — wir melden uns in der Regel innerhalb eines Werktags.
      </p>
    </div>
  </section>;


// ----- Quick contact methods -----
const ContactMethods = () => {
  const items = [
  {
    label: "E-Mail",
    value: "kontakt@expandai.de",
    href: "mailto:kontakt@expandai.de",
    sub: "Für alle Anfragen — wir antworten meist binnen 24 h.",
    icon: <path d="M3 7l9 6 9-6M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z" />
  },
  {
    label: "Standort",
    value: "München, Deutschland",
    href: "https://maps.google.com/?q=München",
    sub: "Persönliche Termine nach Vereinbarung.",
    icon:
    <>
        <path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z" />
        <circle cx="12" cy="10" r="3" />
      </>

  }];


  return (
    <section style={{ padding: "16px 0 40px" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {items.map((it, i) =>
          <a key={i} href={it.href}
          target={it.href.startsWith("http") ? "_blank" : undefined}
          rel={it.href.startsWith("http") ? "noopener noreferrer" : undefined}
          className="card"
          style={{
            padding: 28, textDecoration: "none",
            display: "flex", flexDirection: "column", gap: 14,
            transition: "border-color 0.15s ease, transform 0.15s ease",
            cursor: "pointer"
          }}
          onMouseEnter={(e) => {e.currentTarget.style.borderColor = "var(--border-strong)";}}
          onMouseLeave={(e) => {e.currentTarget.style.borderColor = "var(--border)";}}>

              <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: "var(--accent-soft)",
              border: "1px solid var(--accent-ring)",
              color: "var(--accent)",
              display: "grid", placeItems: "center"
            }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  {it.icon}
                </svg>
              </div>
              <div>
                <div style={{
                fontSize: 11, color: "var(--text-3)",
                textTransform: "uppercase", letterSpacing: "0.14em",
                marginBottom: 6, fontWeight: 500
              }}>{it.label}</div>
                <div style={{ fontSize: 17, color: "var(--text)", fontWeight: 500, marginBottom: 6 }}>
                  {it.value}
                </div>
                <div style={{ fontSize: 13, color: "var(--text-3)", lineHeight: 1.5 }}>{it.sub}</div>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

};


// ----- Form + sidebar -----
const ContactForm = () => {
  const topics = [
  "Allgemeine Anfrage",
  "Demo / Testzugang",
  "Pilotprojekt",
  "Forschungskooperation",
  "Technischer Support",
  "Presse"];


  const [form, setForm] = React.useState({
    name: "", email: "", company: "",
    topic: topics[0], message: "", consent: false,
    website: "" // honeypot — must stay empty
  });
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error

  const update = (k) => (e) => {
    const v = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    setForm((s) => ({ ...s, [k]: v }));
  };

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message || !form.consent) return;
    setStatus("sending");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form)
      });
      if (!res.ok) throw new Error("send failed");
      setStatus("sent");
    } catch (err) {
      setStatus("error");
    }
  };

  const inputStyle = {
    width: "100%",
    background: "var(--bg-2)",
    border: "1px solid var(--border)",
    borderRadius: 10,
    padding: "12px 14px",
    color: "var(--text)",
    fontSize: 14,
    fontFamily: "inherit",
    outline: "none",
    transition: "border-color 0.15s ease, box-shadow 0.15s ease"
  };

  const labelStyle = {
    display: "block",
    fontSize: 12,
    color: "var(--text-2)",
    marginBottom: 8,
    fontWeight: 500,
    letterSpacing: "0.02em"
  };

  const onFocus = (e) => {
    e.target.style.borderColor = "var(--accent-ring)";
    e.target.style.boxShadow = "0 0 0 3px var(--accent-soft)";
  };
  const onBlur = (e) => {
    e.target.style.borderColor = "var(--border)";
    e.target.style.boxShadow = "none";
  };

  return (
    <section className="section section-divider">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "start" }}>
          {/* Form */}
          <form onSubmit={submit} className="card" style={{ padding: 36 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>
              <span className="dot" />
              Anfrage senden
            </div>
            <h2 className="h3" style={{ marginBottom: 8, fontSize: 26, letterSpacing: "-0.02em" }}>
              Schreib uns.
            </h2>
            <p style={{ color: "var(--text-3)", fontSize: 14, marginTop: 0, marginBottom: 28 }}>
              Pflichtfelder sind mit <span style={{ color: "var(--accent)" }}>*</span> markiert.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 18 }}>
              <div>
                <label style={labelStyle}>Name <span style={{ color: "var(--accent)" }}>*</span></label>
                <input required type="text" value={form.name} onChange={update("name")}
                onFocus={onFocus} onBlur={onBlur}
                placeholder="Vor- und Nachname"
                style={inputStyle} />
              </div>
              <div>
                <label style={labelStyle}>E-Mail <span style={{ color: "var(--accent)" }}>*</span></label>
                <input required type="email" value={form.email} onChange={update("email")}
                onFocus={onFocus} onBlur={onBlur}
                placeholder="name@firma.de"
                style={inputStyle} />
              </div>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 18 }}>
              <div>
                <label style={labelStyle}>Unternehmen</label>
                <input type="text" value={form.company} onChange={update("company")}
                onFocus={onFocus} onBlur={onBlur}
                placeholder="Optional"
                style={inputStyle} />
              </div>
              <div>
                <label style={labelStyle}>Thema</label>
                <select value={form.topic} onChange={update("topic")}
                onFocus={onFocus} onBlur={onBlur}
                style={{ ...inputStyle, appearance: "none",
                  backgroundImage:
                  "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>\")",
                  backgroundRepeat: "no-repeat",
                  backgroundPosition: "right 14px center",
                  paddingRight: 38
                }}>
                  {topics.map((t) => <option key={t} value={t}>{t}</option>)}
                </select>
              </div>
            </div>

            <div style={{ marginBottom: 18 }}>
              <label style={labelStyle}>Nachricht <span style={{ color: "var(--accent)" }}>*</span></label>
              <textarea required rows={6} value={form.message} onChange={update("message")}
              onFocus={onFocus} onBlur={onBlur}
              placeholder="Worum geht es? Je konkreter, desto besser können wir dir helfen."
              style={{ ...inputStyle, resize: "vertical", lineHeight: 1.5, minHeight: 140 }} />
            </div>

            {/* Honeypot — hidden from people, catches bots. Must stay empty. */}
            <input
              type="text" name="website" tabIndex={-1} autoComplete="off"
              value={form.website} onChange={update("website")}
              aria-hidden="true"
              style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} />

            <label style={{ display: "flex", gap: 12, alignItems: "flex-start", marginBottom: 24, cursor: "pointer" }}>
              <input required type="checkbox" checked={form.consent} onChange={update("consent")}
              style={{
                marginTop: 3, width: 16, height: 16,
                accentColor: "var(--accent)",
                cursor: "pointer", flexShrink: 0
              }} />
              <span style={{ fontSize: 13, color: "var(--text-3)", lineHeight: 1.5 }}>
                Ich willige ein, dass meine Angaben zur Beantwortung meiner Anfrage
                gespeichert und verarbeitet werden. <a href="datenschutz.html" style={{ color: "var(--text-2)", textDecoration: "underline" }}>Datenschutz</a>.
              </span>
            </label>

            <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
              <button type="submit" className="btn btn-accent btn-lg" disabled={status === "sending"}>
                {status === "sending" ? "Wird gesendet…" :
                status === "sent" ? "Gesendet ✓" : "Nachricht senden"}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path d="M5 12h14M13 5l7 7-7 7" />
                </svg>
              </button>
              <span style={{ fontSize: 13, color: "var(--text-4)" }}>
                Antwort üblicherweise binnen 24 h
              </span>
            </div>

            {status === "sent" &&
            <p role="status" style={{ marginTop: 18, marginBottom: 0, fontSize: 14, color: "var(--success)", lineHeight: 1.5 }}>
                Danke! Deine Nachricht ist bei uns eingegangen — wir melden uns in der Regel binnen 24 h.
              </p>
            }
            {status === "error" &&
            <p role="alert" style={{ marginTop: 18, marginBottom: 0, fontSize: 14, color: "var(--danger)", lineHeight: 1.5 }}>
                Das hat leider nicht geklappt. Bitte versuche es erneut oder schreib uns direkt an{" "}
                <a href="mailto:kontakt@expandai.de" style={{ color: "var(--accent)" }}>kontakt@expandai.de</a>.
              </p>
            }
          </form>

          {/* Sidebar */}
          <aside style={{ display: "grid", gap: 16 }}>
            <div className="card" style={{ padding: 24 }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>
                <span className="dot" />
                Erreichbarkeit
              </div>
              <div style={{ display: "grid", gap: 10, fontSize: 14, color: "var(--text-2)" }}>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <span>Montag – Freitag</span>
                  <span style={{ color: "var(--text)", fontFamily: "JetBrains Mono, monospace", fontSize: 13 }}>08:00 – 18:00</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <span>Samstag &amp; Sonntag</span>
                  <span style={{ color: "var(--text-4)", fontFamily: "JetBrains Mono, monospace", fontSize: 13 }}>geschlossen</span>
                </div>
              </div>
              <div style={{
                marginTop: 16, paddingTop: 16,
                borderTop: "1px solid var(--border)",
                display: "flex", alignItems: "center", gap: 10,
                fontSize: 13, color: "var(--text-3)"
              }}>
                <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--success)", boxShadow: "0 0 0 4px rgba(52,211,153,0.18)" }} />
                Aktuell erreichbar
              </div>
            </div>

            <div className="card" style={{ padding: 0, overflow: "hidden" }}>
              <div style={{
                padding: "24px 24px 20px",
                borderBottom: "1px solid var(--border)"
              }}>
                <div className="eyebrow" style={{ marginBottom: 16 }}>
                  <span className="dot" />
                  Hauptsitz
                </div>
                <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 15, color: "var(--text)", fontWeight: 500, marginBottom: 4, letterSpacing: "-0.01em" }}>
                      expandAI GmbH
                    </div>
                    <div style={{ color: "var(--text-3)", fontSize: 13, lineHeight: 1.55 }}>
                      Maria-Goeppert-Str. 1<br />
                      23562 Lübeck, Deutschland
                    </div>
                  </div>
                </div>
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
                <a
                  href="https://calendly.com/expandai/eai"
                  target="_blank" rel="noopener noreferrer"
                  style={{
                    display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
                    padding: "14px 12px",
                    background: "transparent",
                    color: "var(--accent)",
                    fontSize: 13, fontWeight: 500,
                    textDecoration: "none",
                    borderRight: "1px solid var(--border)",
                    transition: "background 0.15s ease"
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.background = "var(--accent-soft)"}
                  onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="3" y="4" width="18" height="18" rx="2" />
                    <path d="M16 2v4M8 2v4M3 10h18" />
                  </svg>
                  Termin vereinbaren
                </a>
                <a
                  href="https://maps.app.goo.gl/S2mKYcThtFbY55Mh8"
                  target="_blank" rel="noopener noreferrer"
                  style={{
                    display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
                    padding: "14px 12px",
                    background: "transparent",
                    color: "var(--text-2)",
                    fontSize: 13, fontWeight: 500,
                    textDecoration: "none",
                    transition: "background 0.15s ease, color 0.15s ease"
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-2)"; e.currentTarget.style.color = "var(--text)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--text-2)"; }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21 3 6" />
                    <line x1="9" y1="3" x2="9" y2="18" />
                    <line x1="15" y1="6" x2="15" y2="21" />
                  </svg>
                  Route
                </a>
              </div>
            </div>

            <div className="card" style={{ padding: 24 }}>
              <div className="eyebrow" style={{ marginBottom: 14 }}>
                <span className="dot" />
                Folgen
              </div>
              <div style={{ display: "flex", gap: 10 }}>
                <a href="https://www.linkedin.com/company/expandaide" target="_blank" rel="noopener noreferrer"
                aria-label="LinkedIn"
                style={{ width: 40, height: 40, borderRadius: 10, background: "var(--bg-2)", border: "1px solid var(--border)", display: "grid", placeItems: "center", color: "var(--text-2)" }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.56v15H.22V8zm7.5 0h4.37v2.05h.06c.61-1.16 2.1-2.39 4.32-2.39 4.62 0 5.47 3.04 5.47 7v8.34h-4.56v-7.4c0-1.77-.03-4.05-2.47-4.05-2.47 0-2.85 1.93-2.85 3.92V23h-4.55V8z" /></svg>
                </a>
                <a href="https://www.youtube.com/@expandAI-GmbH" target="_blank" rel="noopener noreferrer"
                aria-label="YouTube"
                style={{ width: 40, height: 40, borderRadius: 10, background: "var(--bg-2)", border: "1px solid var(--border)", display: "grid", placeItems: "center", color: "var(--text-2)" }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 6.2a3.02 3.02 0 0 0-2.13-2.14C19.46 3.5 12 3.5 12 3.5s-7.46 0-9.37.56A3.02 3.02 0 0 0 .5 6.2C0 8.13 0 12 0 12s0 3.87.5 5.8a3.02 3.02 0 0 0 2.13 2.14c1.91.56 9.37.56 9.37.56s7.46 0 9.37-.56a3.02 3.02 0 0 0 2.13-2.14c.5-1.93.5-5.8.5-5.8s0-3.87-.5-5.8zM9.6 15.6V8.4l6.24 3.6-6.24 3.6z" /></svg>
                </a>
                <a href="https://github.com/expandAI-GmbH" target="_blank" rel="noopener noreferrer"
                aria-label="GitHub"
                style={{ width: 40, height: 40, borderRadius: 10, background: "var(--bg-2)", border: "1px solid var(--border)", display: "grid", placeItems: "center", color: "var(--text-2)" }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.2 2.8.1 3.2.8.8 1.3 1.9 1.3 3.1 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1.1.9 2.3v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3" /></svg>
                </a>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>);

};


// ----- FAQ -----
const ContactFAQ = () => {
  const faqs = [
  {
    q: "Wie schnell erhalte ich eine Antwort?",
    a: "In der Regel innerhalb eines Werktags. Bei dringenden technischen Anfragen empfiehlt sich der Support-Kanal — wir priorisieren laufende Inspektionen."
  },
  {
    q: "Kann ich eine Live-Demo bekommen?",
    a: "Ja. Wir zeigen Ihnen das Tool entlang Ihrer eigenen Inspektionsaufnahmen — Sie können dafür einfach eine XML-Datei sowie Bilder oder Video mitbringen."
  },
  {
    q: "Bieten Sie Pilotprojekte an?",
    a: "Ja. Wir starten mit einem klar definierten Pilotumfang (z. B. 500 m Kanal), prüfen Qualität und Effizienzgewinn gemeinsam und entscheiden danach über den Rollout."
  },
  {
    q: "Ist meine Anfrage vertraulich?",
    a: "Alle Anfragen und übermittelten Daten werden DSGVO-konform verarbeitet und ausschließlich für die Bearbeitung Ihres Anliegens verwendet."
  }];


  const [open, setOpen] = React.useState(0);

  return (
    <section className="section section-divider">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "start" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>
              <span className="dot" />
              Häufige Fragen
            </div>
            <h2 className="h2 gradient-text" style={{ marginBottom: 16 }}>Vor der Anfrage.</h2>
            <p className="lead" style={{ marginTop: 0 }}>
              Antworten auf die Fragen, die am häufigsten in unserem Postfach landen.
            </p>
          </div>
          <div style={{ display: "grid", gap: 12 }}>
            {faqs.map((f, i) => {
              const isOpen = open === i;
              return (
                <div key={i} className="card" style={{ padding: 0, overflow: "hidden" }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: "100%", textAlign: "left",
                      background: "transparent", border: "none", color: "var(--text)",
                      padding: "20px 24px",
                      display: "flex", alignItems: "center", justifyContent: "space-between",
                      gap: 16, fontSize: 16, fontWeight: 500
                    }}>
                    <span style={{ flex: 1 }}>{f.q}</span>
                    <span style={{
                      width: 28, height: 28, borderRadius: 999,
                      background: isOpen ? "var(--accent-soft)" : "var(--bg-2)",
                      color: isOpen ? "var(--accent)" : "var(--text-3)",
                      display: "grid", placeItems: "center",
                      transition: "all 0.2s ease",
                      transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                      flexShrink: 0
                    }}>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                        <path d="M12 5v14M5 12h14" />
                      </svg>
                    </span>
                  </button>
                  {isOpen &&
                  <div style={{
                    padding: "0 24px 22px",
                    color: "var(--text-2)",
                    fontSize: 14, lineHeight: 1.6,
                    textWrap: "pretty"
                  }}>
                      {f.a}
                    </div>
                  }
                </div>);

            })}
          </div>
        </div>
      </div>
    </section>);

};


// ----- Office strip -----
const ContactOffice = () =>
<section className="section section-divider">
    <div className="container">
      <div style={{
      display: "grid", gridTemplateColumns: "1fr 1fr",
      borderRadius: "var(--radius-xl)",
      overflow: "hidden",
      border: "1px solid var(--border)",
      background: "var(--surface)"
    }}>
        {/* Office image */}
        <div style={{ position: "relative", minHeight: 320 }}>
          <img
          src="assets/office.jpg"
          alt="Hauptsitz der expandAI GmbH in Lübeck – Entwicklungsstandort der KI Kanalinspektion"
          loading="lazy"
          decoding="async"
          style={{
            position: "absolute", inset: 0,
            width: "100%", height: "100%",
            objectFit: "cover", objectPosition: "center 40%",
            display: "block",
            imageRendering: "auto"
          }} />
        
        </div>

        {/* Address + handle */}
        <div style={{ padding: "48px 48px", display: "grid", alignContent: "center", gap: 20 }}>
          <div className="eyebrow">
            <span className="dot" />
            Hauptsitz
          </div>
          <h3 className="h2 gradient-text" style={{ fontSize: 36 }}>
            expandAI GmbH
          </h3>
          <div style={{ display: "grid", gap: 4, color: "var(--text-2)", fontSize: 15, lineHeight: 1.6 }}>
            <div>Maria-Goeppert-Str. 1</div>
            <div>23562 Lübeck</div>
            <div>Deutschland</div>
          </div>
          <div style={{ display: "flex", gap: 12, marginTop: 8, flexWrap: "wrap" }}>
            <a href="https://maps.google.com/?q=München" target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
              Route planen
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M7 17L17 7M7 7h10v10" />
              </svg>
            </a>
            <a href="mailto:kontakt@expandai.de" className="btn btn-primary">Termin vereinbaren</a>
          </div>
        </div>
      </div>
    </div>
  </section>;


Object.assign(window, { ContactHero, ContactMethods, ContactForm, ContactFAQ, ContactOffice });