const { Card } = window.AS || {};

function Contact() {
  return (
    <section id="contact" style={{ padding: '64px 48px 96px', background: 'var(--surface-sunken)' }}>
      <div style={{ maxWidth: 560, margin: '0 auto' }}>
        <h2 style={{ font: 'var(--text-display-lg)', color: 'var(--text-primary)', marginBottom: 8 }}>Contact</h2>
        <p style={{ font: 'var(--text-body-md)', color: 'var(--text-secondary)', marginBottom: 28 }}>
          Have a general question? Send it here and we'll get back to you.
        </p>
        <Card>
          <iframe
            src="https://forms.fillout.com/t/7V8Rp7Shm4us?embed=1"
            title="Contact form"
            style={{ width: '100%', height: 620, border: 'none', display: 'block' }}
            loading="lazy"
          />
        </Card>
      </div>
    </section>
  );
}
window.Contact = Contact;