// Contact.jsx — final invitation band, on dark, with form-like info card
function Contact() {
  return (
    <section
      id="kontakt"
      data-screen-label="Contact"
      style={{
        background: "var(--ferella-chocolate)",
        color: "var(--fg-on-dark)",
        padding: "176px 56px",
      }}
    >
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "200px 1fr",
          gap: 64, alignItems: "baseline", marginBottom: 96,
          paddingBottom: 28, borderBottom: "1px solid var(--border-on-dark)",
        }}>
          <div style={{
            fontFamily: "var(--font-sans)", fontSize: 11,
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: "var(--fg-on-dark-muted)",
          }}>VI · Kontakt</div>
          <div style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic",
            fontSize: 18, color: "var(--fg-on-dark-muted)",
          }}>Wir nehmen 4–6 neue Projekte pro Jahr an.</div>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "1.5fr 1fr",
          gap: 96, alignItems: "start",
        }}>
          <div>
            <h2 style={{
              fontFamily: "var(--font-serif)", fontWeight: 300,
              fontSize: "clamp(56px, 7vw, 116px)", lineHeight: 0.96,
              letterSpacing: "0.005em", margin: 0,
              color: "var(--fg-on-dark)",
            }}>
              Beginnen wir<br />
              mit einem <span style={{ fontStyle: "italic" }}>Gespräch.</span>
            </h2>
            <p style={{
              marginTop: 56, maxWidth: 580,
              fontFamily: "var(--font-sans)", fontSize: 16,
              lineHeight: 1.75, color: "rgba(237,231,221,0.82)",
            }}>
              Schreiben Sie uns ein paar Sätze zu Ort, Bauphase und Vorhaben.
              Wir antworten innerhalb von zehn Werktagen — persönlich, ohne
              Standardpräsentation.
            </p>
            <div style={{
              marginTop: 56, display: "flex", gap: 24, alignItems: "center",
              flexWrap: "wrap",
            }}>
              <a href="mailto:studio@ferella-interiors.de" style={{
                fontFamily: "var(--font-sans)", fontSize: 11,
                letterSpacing: "0.24em", textTransform: "uppercase",
                color: "var(--ferella-chocolate)",
                background: "var(--fg-on-dark)",
                padding: "18px 36px", textDecoration: "none", border: 0,
              }}>Anfrage per E-Mail</a>
              <a href="#" style={{
                fontFamily: "var(--font-sans)", fontSize: 11,
                letterSpacing: "0.24em", textTransform: "uppercase",
                color: "var(--fg-on-dark)",
                borderBottom: "1px solid var(--fg-on-dark)",
                paddingBottom: 4, textDecoration: "none",
              }}>Termin im Studio buchen</a>
            </div>
          </div>

          {/* Info card */}
          <div style={{
            border: "1px solid var(--border-on-dark)",
            padding: "48px 40px",
          }}>
            {[
              { k: "Studio Munich",  v: "Theatinerstraße 14\n80333 München", c: "+49 89 0000 0000" },
              { k: "Studio Zurich",  v: "Rämistrasse 22\n8001 Zürich",        c: "+41 44 000 00 00" },
              { k: "Studio Como",    v: "Via Borgovico 9\n22100 Como",         c: "+39 031 000 0000" },
            ].map((s, i) => (
              <div key={i} style={{
                paddingBottom: i < 2 ? 32 : 0,
                paddingTop: i > 0 ? 32 : 0,
                borderBottom: i < 2 ? "1px solid var(--border-on-dark)" : "0",
              }}>
                <div style={{
                  fontFamily: "var(--font-sans)", fontSize: 10,
                  letterSpacing: "0.32em", textTransform: "uppercase",
                  color: "var(--fg-on-dark-muted)", marginBottom: 14,
                }}>{s.k}</div>
                <div style={{
                  fontFamily: "var(--font-serif)", fontWeight: 300,
                  fontSize: 20, lineHeight: 1.45,
                  color: "var(--fg-on-dark)", whiteSpace: "pre-line",
                }}>{s.v}</div>
                <div style={{
                  marginTop: 10,
                  fontFamily: "var(--font-sans)", fontSize: 13,
                  color: "var(--fg-on-dark-muted)",
                }}>{s.c}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;