/* Contact — meeting invite + email + form */

function Contact() {
  return (
    <section id="contact">
      <div className="container">
        <div className="contact">
          <Reveal>
            <div>
              <div className="eyebrow" style={{ marginBottom: 24 }}>Let's talk</div>
              <div className="contact-lead">
                Tell us what you're trying to become — and we'll tell you if we can help.
              </div>
              <p style={{ color: "var(--fg-dim)", fontSize: 17, lineHeight: 1.55, marginTop: 28, maxWidth: "48ch" }}>
                Most calls end in 20 minutes with a clear yes or no. If it's a yes, you'll have a scoping
                doc in your inbox within 48 hours.
              </p>
              <div className="contact-availability" role="status" aria-label="1 of 2 client seats open this quarter">
                <span className="dot" aria-hidden="true" />
                <span style={{ color: "var(--fg-dim)" }}>We take only 2 clients at a time.</span>{" "}<span style={{ color: "#0047AB", fontWeight: 600 }}>One seat left.</span>
              </div>
            </div>
          </Reveal>

          <Reveal delay={1}>
            <div className="contact-side">
              <div className="contact-card">
                <h4>Book a 30-min intro call</h4>
                <p>A live conversation with both founders. We'll talk through your team, your stack, and whether we're a fit.</p>
                <a href="https://cal.com/foundersnurtureaxis/30min" target="_blank" rel="noopener noreferrer">
                  Pick a time <Arrow/>
                </a>
              </div>
              <div className="contact-card">
                <h4>Or email us directly</h4>
                <p>Short note is fine. We read every message and reply within one business day.</p>
                <a href="mailto:founders@nurtureaxis.com">
                  founders@nurtureaxis.com <Arrow/>
                </a>
              </div>
            </div>
          </Reveal>
        </div>

        <Reveal delay={2}>
          <div style={{ marginTop: 72, maxWidth: 820 }}>
            <ContactForm/>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Contact });