/* global React, ContactForm */

function ContactHero() {
  return (
    <section className="page-hero surface-bg motif motif-ripple" aria-labelledby="ct-h">
      <span className="section-num-bg" aria-hidden="true">01</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">01 / Contact</div></div>
        <h1 id="ct-h">Let’s talk.</h1>
        <p className="lede">
          Best starting point is a 30-minute call. You tell me what you’re working on, I’ll tell you honestly whether I can help.
        </p>
        <p style={{ marginTop: 'var(--space-3)', fontStyle: 'italic', color: 'var(--fg-muted)' }}>
          No pitch. Just a conversation.
        </p>
      </div>
    </section>
  );
}

function ContactPanel() {
  return (
    <section className="surface-cream" aria-labelledby="ct-form-h">
      <span className="section-num-bg" aria-hidden="true">02</span>
      <div className="container">
        <div className="section-tag"><div className="eyebrow">02 / Send a note</div></div>
        <h2 id="ct-form-h">Tell me what you are working on.</h2>
        <p style={{ maxWidth: '52ch' }}>
          Short is fine. I read every enquiry myself and reply within 24 hours.
        </p>
        <ContactForm idPrefix="contact" />
        <div style={{ marginTop: 'var(--space-7)', borderTop: '1px solid var(--border)', paddingTop: 'var(--space-5)', maxWidth: '560px' }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '20px', margin: '0 0 var(--space-3)' }}>Prefer email or a call?</h3>
          <p style={{ marginBottom: 'var(--space-2)' }}>
            <a href="mailto:michael@behaving.co">michael@behaving.co</a>
          </p>
          <p style={{ fontSize: '14px', color: 'var(--fg-muted)' }}>
            If you’d rather book a call directly, mention it in your message and I’ll send a few times that work.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ContactHero, ContactPanel });