// Shift10 Landingpage — Kontakt + Footer
function KontaktSection() {
  const lp = useSanityLP();
  const [sent, setSent] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const [topic, setTopic] = React.useState("Workshop");

  async function handleSubmit(e) {
    e.preventDefault();
    setError(null);
    setLoading(true);
    const form = e.currentTarget;
    try {
      const res = await fetch('https://shift10-contact.williams-pesic.workers.dev', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: form.querySelector('#name').value,
          email: form.querySelector('#email').value,
          topic,
          message: form.querySelector('#msg').value,
        }),
      });
      const data = await res.json();
      if (data.ok) {
        setSent(true);
      } else {
        setError('Senden fehlgeschlagen. Bitte versuche es erneut oder schreib direkt an mike@shift10.ch.');
      }
    } catch {
      setError('Netzwerkfehler. Bitte schreib direkt an mike@shift10.ch.');
    } finally {
      setLoading(false);
    }
  }

  return (
    <section id="kontakt" className="section section--dark" style={{ paddingBottom: 0 }}>
      <div className="dotgrid" style={{ color: "var(--color-white)" }} />
      <div className="container" style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
          {/* Left: pitch */}
          <div>
            <span className="eyebrow">Kontakt</span>
            <h2 className="display" style={{
              marginTop: 32,
              fontWeight: 500,
              fontSize: "clamp(48px, 6vw, 88px)"
            }}>
              Reden wir.<br />
              <span className="accent">Konkret.</span>
            </h2>
            <p className="lead" style={{ marginTop: 32, fontSize: 18 }}>{lp?.kontaktIntro || "Schreib uns, was du im Kopf hast. Wir antworten innert einer Woche und prüfen die Möglichkeiten mit euch."}</p>

            <div style={{
              marginTop: 56,
              display: "flex", flexDirection: "column", gap: 18,
              fontFamily: "var(--font-mono)", fontSize: 13
            }}>
              {[
              ["E-Mail", lp?.kontaktEmail || "mike@shift10.ch"],
              ["Region", lp?.kontaktRegion || "Thurgau · Schweizweit"]].
              map(([k, v]) =>
              <div key={k} style={{
                display: "grid", gridTemplateColumns: "140px 1fr", gap: 24,
                padding: "14px 0",
                borderTop: "1px solid var(--color-neutral-800)"
              }}>
                  <span style={{ color: "var(--color-neutral-500)", letterSpacing: "0.14em", textTransform: "uppercase", fontSize: 11 }}>
                    {k}
                  </span>
                  <span style={{ color: "var(--color-white)" }}>{v}</span>
                </div>
              )}
            </div>
          </div>

          {/* Right: form */}
          <form
            onSubmit={handleSubmit}
            style={{
              background: "var(--color-neutral-950)",
              border: "1px solid var(--color-neutral-800)",
              padding: 40,
              alignSelf: "start"
            }}>

            {sent ?
            <div style={{ padding: "60px 0", textAlign: "center" }}>
                <div style={{
                width: 56, height: 56, borderRadius: "50%",
                background: "var(--color-accent)", margin: "0 auto",
                display: "flex", alignItems: "center", justifyContent: "center"
              }}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                    <path d="M5 12l4.5 4.5L19 7" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </div>
                <h3 style={{ marginTop: 24, fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 500, letterSpacing: "-0.02em" }}>
                  Nachricht ist bei uns.
                </h3>
                <p style={{ marginTop: 12, color: "var(--color-neutral-400)", fontSize: 15 }}>
                  Mike meldet sich innert 24h direkt bei dir.
                </p>
              </div> :

            <>
                <div className="mono" style={{ color: "var(--color-neutral-500)", letterSpacing: "0.16em", marginBottom: 28 }}>
                  ANFRAGE / NEU
                </div>

                {/* Topic chips */}
                <div className="form-field" style={{ marginBottom: 28 }}>
                  <label className="form-label" style={{ color: "var(--color-neutral-500)" }}>Ich interessiere mich für</label>
                  <div className="row" style={{ marginTop: 8, gap: 8, flexWrap: "wrap" }}>
                    {["Vortrag", "Workshop", "Konzepte & Enabling", "Sonstiges"].map((t) =>
                  <button key={t} type="button" onClick={() => setTopic(t)} style={{
                    padding: "8px 14px",
                    background: topic === t ? "var(--color-accent)" : "transparent",
                    color: topic === t ? "var(--color-white)" : "var(--color-neutral-300)",
                    border: "1px solid " + (topic === t ? "var(--color-accent)" : "var(--color-neutral-800)"),
                    borderRadius: 6,
                    fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 500,
                    transition: "all 150ms"
                  }}>
                        {t}
                      </button>
                  )}
                  </div>
                </div>

                <div className="form-field" style={{ marginBottom: 24 }}>
                  <label className="form-label" htmlFor="name">Name</label>
                  <input id="name" required className="input" placeholder="Vor- und Nachname" style={{ color: "#fff" }} />
                </div>
                <div className="form-field" style={{ marginBottom: 24 }}>
                  <label className="form-label" htmlFor="email">E-Mail</label>
                  <input id="email" type="email" required className="input" placeholder="name@firma.ch" style={{ color: "#fff" }} />
                </div>
                <div className="form-field" style={{ marginBottom: 32 }}>
                  <label className="form-label" htmlFor="msg">Nachricht</label>
                  <textarea id="msg" required className="textarea" placeholder="Was schwebt dir vor? Wie viele Personen? Wann?" style={{ color: "#fff" }} />
                </div>

                {error && (
                  <p style={{ marginBottom: 16, fontSize: 13, color: "#ff6b6b", lineHeight: 1.5 }}>
                    {error}
                  </p>
                )}

                <button type="submit" disabled={loading} className="btn btn--accent" style={{ width: "100%", justifyContent: "center", padding: "16px", opacity: loading ? 0.7 : 1 }}>
                  {loading ? "Wird gesendet…" : "Anfrage senden"} {!loading && <span className="btn-arrow">→</span>}
                </button>
                <p style={{ marginTop: 16, fontSize: 12, color: "var(--color-neutral-500)", lineHeight: 1.5 }}>
                  Mit dem Absenden erklärst du dich mit unserer <a href="datenschutz.html" style={{ color: "var(--color-neutral-400)", textDecoration: "underline" }}>Datenschutzerklärung</a> einverstanden. Daten werden ausschliesslich zur Beantwortung deiner Anfrage verwendet.
                </p>
              </>
            }
          </form>
        </div>

        {/* Footer */}
        <footer style={{
          marginTop: 120,
          paddingTop: 40, paddingBottom: 40,
          borderTop: "1px solid var(--color-neutral-800)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          flexWrap: "wrap", gap: 24
        }}>
          <div className="row" style={{ gap: 24 }}>
            <Shift10Mark size={20} inverted={true} />
            <span style={{ fontSize: 13, color: "var(--color-neutral-500)" }}>
              © 2026 Shift10 · Mike Bänziger · Zürich
            </span>
          </div>
          <div className="row" style={{ gap: 28 }}>
            {[["Impressum", "impressum.html"], ["Datenschutz", "datenschutz.html"], ["AGB", "agb.html"]].map(([l, href]) =>
            <a key={l} href={href} style={{ fontSize: 13, color: "var(--color-neutral-500)", textDecoration: "none" }}>
                {l}
              </a>
            )}

            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-neutral-700)", letterSpacing: "0.1em" }}>
              v.2026.05
            </span>
          </div>
        </footer>
      </div>
    </section>);

}

Object.assign(window, { KontaktSection });