// Contact page — mailto-only for v1. Form will replace this later.
function Contact() {
  return (
    <section style={{ background: "#F1F5F5", color: "#213A2C", padding: "120px 48px 140px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 5fr) minmax(0, 7fr)", gap: 80, alignItems: "start", marginBottom: 80 }}>
          <h1 style={{ margin: 0, fontWeight: 700, fontSize: 56, lineHeight: 1.05, letterSpacing: "-0.035em" }}>
            Get in touch.
          </h1>
          <p style={{ margin: 0, fontSize: 20, lineHeight: 1.5, color: "#213A2C", letterSpacing: "-0.01em", textWrap: "pretty" }}>
            Whether you're a founder building in climate, an LP exploring the space, or a journalist covering the industry — we'd love to hear from you.
          </p>
        </div>

        {/* Three contact tiles */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          <ContactTile
            label="Founders"
            heading="Pitching us"
            body="We back founders building category-defining companies in climate, energy, mobility, water, and the built environment. Tell us what you're building."
            email="hello@rcv.vc"
            subject="Founder intro — [your company]"
          />
          <ContactTile
            label="LPs"
            heading="Partnering with us"
            body="We work with mission-aligned institutional partners and family offices building long-term climate infrastructure portfolios."
            email="hello@rcv.vc"
            subject="LP inquiry"
          />
          <ContactTile
            label="Press"
            heading="Media inquiries"
            body="For interviews, commentary, and press requests, get in touch and we'll route you to the right person."
            email="hello@rcv.vc"
            subject="Press inquiry"
          />
        </div>

        {/* Big email block */}
        <div style={{ marginTop: 96, padding: "48px 0", borderTop: "1px solid #DFE9E9", borderBottom: "1px solid #DFE9E9", textAlign: "center" }}>
          <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", color: "#4A5C50", marginBottom: 16 }}>Or just email us</div>
          <a href="mailto:hello@rcv.vc" style={{
            display: "inline-block",
            fontSize: "clamp(40px, 6vw, 72px)", fontWeight: 700,
            color: "#213A2C", textDecoration: "none",
            letterSpacing: "-0.035em", lineHeight: 1.05,
            borderBottom: "2px solid #CDF6B0",
            paddingBottom: 8,
          }}>hello@rcv.vc</a>
        </div>

        {/* Office placeholder */}
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", color: "#4A5C50", marginBottom: 12 }}>Office</div>
            <p style={{ margin: 0, fontSize: 17, lineHeight: 1.55, color: "#213A2C" }}>
              [PLACEHOLDER: Office address]<br/>
              [PLACEHOLDER: City, Region]
            </p>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", color: "#4A5C50", marginBottom: 12 }}>Follow</div>
            <p style={{ margin: 0, fontSize: 17, lineHeight: 1.55, color: "#213A2C" }}>
              [PLACEHOLDER: LinkedIn]<br/>
              [PLACEHOLDER: X / Twitter]
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactTile({ label, heading, body, email, subject }) {
  const href = `mailto:${email}?subject=${encodeURIComponent(subject)}`;
  return (
    <article style={{
      background: "#FFFFFF",
      padding: "40px 32px 32px",
      display: "flex", flexDirection: "column", gap: 20,
      border: "1px solid #DFE9E9",
      minHeight: 320,
    }}>
      <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", color: "#7B937D" }}>{label}</div>
      <h3 style={{ margin: 0, fontSize: 28, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.1 }}>{heading}</h3>
      <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: "#4A5C50", flex: 1, textWrap: "pretty" }}>{body}</p>
      <a href={href} style={{
        alignSelf: "flex-start",
        background: "#213A2C", color: "#FFFFFF",
        padding: "12px 18px",
        font: "500 13px 'Plus Jakarta Sans', sans-serif",
        textDecoration: "none", borderRadius: 2,
      }}>Email us →</a>
    </article>
  );
}

window.Contact = Contact;