function Contact() {
  return (
    <section id="contact" style={{
      padding: "120px 0 80px",
      background: "var(--paper)",
    }}>
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "1.1fr 0.9fr",
          gap: 64, alignItems: "stretch",
        }} className="contact-grid">
          <div>
            <p className="eyebrow" style={{ marginBottom: 20 }}>Get in touch</p>
            <h2 className="serif" style={{
              fontSize: "clamp(36px, 4.4vw, 52px)",
              lineHeight: 1.05, color: "var(--forest)",
              letterSpacing: "-0.015em", marginBottom: 28,
            }}>
              Reach out when<br/>
              <em style={{ fontStyle: "italic", color: "var(--terracotta)" }}>
                you're ready.
              </em>
            </h2>
            <p style={{
              fontSize: 16.5, lineHeight: 1.65, color: "var(--ink-2)",
              marginBottom: 40, maxWidth: 480,
            }}>
              The easiest way to begin is to book a free consult above. If
              you'd rather call, email, or just say hi first — that's lovely too.
            </p>

            <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              {[
                { icon: IconPhone, label: "Call", value: "(555) 123-4567", href: "tel:+15551234567" },
                { icon: IconMail, label: "Email", value: "hello@example.therapy", href: "mailto:hello@example.therapy" },
                { icon: IconPin, label: "Office", value: "123 Main St, Suite 100\nSan Francisco, CA 94100" },
                { icon: IconLeaf, label: "Walking sessions", value: "Green Park\n100 Park Ave, San Francisco CA" },
              ].map((c, i) => (
                <a key={i} href={c.href || undefined} style={{
                  display: "flex", gap: 18, alignItems: "start",
                  textDecoration: "none", color: "var(--forest)",
                  paddingBottom: 22, borderBottom: i < 3 ? "1px solid var(--line)" : "none",
                }}>
                  <span style={{
                    flexShrink: 0,
                    width: 44, height: 44, borderRadius: "50%",
                    background: "var(--cream)",
                    display: "grid", placeItems: "center",
                    color: "var(--moss)",
                  }}>
                    <c.icon size={20} />
                  </span>
                  <div>
                    <div style={{
                      fontSize: 12, textTransform: "uppercase",
                      letterSpacing: "0.16em", color: "var(--moss)",
                      marginBottom: 4,
                    }}>{c.label}</div>
                    <div style={{
                      fontSize: 17, fontWeight: 500, lineHeight: 1.4,
                      whiteSpace: "pre-line", color: "var(--forest)",
                    }}>{c.value}</div>
                  </div>
                </a>
              ))}
            </div>
          </div>

          {/* Crisis card */}
          <aside style={{
            background: "linear-gradient(160deg, #1f3a2e 0%, #2d4a3a 100%)",
            color: "var(--cream)",
            padding: "40px 36px",
            borderRadius: 12,
            position: "relative",
            overflow: "hidden",
            display: "flex", flexDirection: "column",
          }}>
            <div style={{
              position: "absolute", top: -40, right: -40,
              width: 220, height: 220,
              background: "radial-gradient(circle, rgba(240, 193, 120, 0.25), transparent 70%)",
            }} />
            <div style={{
              width: 48, height: 48, borderRadius: "50%",
              background: "rgba(240, 193, 120, 0.18)",
              display: "grid", placeItems: "center",
              marginBottom: 24, color: "var(--sun)",
            }}>
              <IconHeart size={24} />
            </div>
            <h3 className="serif" style={{ fontSize: 28, lineHeight: 1.15, marginBottom: 16 }}>
              In crisis right now?
            </h3>
            <p style={{
              fontSize: 15, lineHeight: 1.65, color: "rgba(245, 239, 225, 0.8)",
              marginBottom: 28,
            }}>
              Zeezoo isn't an emergency service. If you or someone you love is
              in immediate danger, please reach one of these now — they are
              free, 24/7, and staffed by humans who can help.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                { name: "988 Suicide & Crisis Lifeline", action: "Call or text 988", href: "tel:988" },
                { name: "Crisis Text Line", action: "Text HOME to 741741", href: "sms:741741" },
                { name: "Alameda County Crisis Support", action: "(800) 309-2131", href: "tel:8003092131" },
                { name: "If life is at risk", action: "Call 911 or go to your nearest ER", href: "tel:911" },
              ].map((c, i) => (
                <a key={i} href={c.href} style={{
                  padding: "14px 18px",
                  background: "rgba(245, 239, 225, 0.08)",
                  border: "1px solid rgba(245, 239, 225, 0.15)",
                  borderRadius: 8,
                  textDecoration: "none", color: "var(--cream)",
                  display: "flex", justifyContent: "space-between",
                  alignItems: "center", gap: 12,
                  transition: "background .15s ease",
                }} onMouseEnter={(e) => e.currentTarget.style.background = "rgba(245, 239, 225, 0.14)"}
                   onMouseLeave={(e) => e.currentTarget.style.background = "rgba(245, 239, 225, 0.08)"}>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{c.name}</div>
                    <div style={{ fontSize: 13, color: "var(--sun)" }}>{c.action}</div>
                  </div>
                  <IconArrow size={18} stroke="var(--sun)" />
                </a>
              ))}
            </div>
          </aside>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
        @media (max-width: 640px) {
          .contact-grid > div:first-child { gap: 16px !important; }
          .contact-grid a { gap: 12px !important; padding-bottom: 16px !important; }
          .contact-grid aside { padding: 28px 20px !important; }
          .contact-grid h3 { font-size: 22px !important; }
          .contact-grid [style*="flex-direction: column"] { gap: 10px !important; }
          .contact-grid [style*="gap: 14"] { gap: 10px !important; }
        }
      `}</style>
    </section>
  );
}

window.Contact = Contact;