// AlignSpace landing — Contact
function ContactSection() {
  const { SectionLabel, Button } = window.AlignSpaceDesignSystem_d3d6d6;
  return (
    <section id="contact" style={{ background: 'var(--surface-page)', padding: 'var(--section-y) 0' }}>
      <div className="as-wrap as-contact-grid">
        <div>
          <SectionLabel>Prefer to Talk First?</SectionLabel>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h2)', color: 'var(--text-primary)', margin: '16px 0 16px' }}>Start the conversation.</h2>
          <p style={{ fontSize: 'var(--text-sm)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-muted)', maxWidth: '46ch' }}>
            You speak to Ali — the person doing the work. Send a note and we will follow up directly. No intake queue, no automated responses.
          </p>
          <div style={{ marginTop: '32px' }}>
            <Button variant="primary" href="mailto:ali@alignspace.ca" iconLeft={<i data-lucide="mail" style={{ width: 16, height: 16 }}></i>}>ali@alignspace.ca</Button>
          </div>
        </div>

        <div style={{ background: 'var(--surface-raised)', border: '1px solid var(--border-default)', padding: '32px' }}>
          <p className="as-label" style={{ marginBottom: '16px' }}>Service Area</p>
          <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: '10px' }}>
            {['Toronto', 'York Region — Aurora, Richmond Hill, Vaughan, Markham, Newmarket', 'Greater Toronto Area'].map((a) => (
              <li key={a} style={{ display: 'flex', gap: '12px', alignItems: 'flex-start', fontFamily: 'var(--font-text)', fontSize: 'var(--text-sm)', color: 'var(--text-secondary)', lineHeight: 1.5 }}>
                <i data-lucide="map-pin" style={{ width: 15, height: 15, color: 'var(--border-strong)', flexShrink: 0, marginTop: '3px' }}></i>{a}
              </li>
            ))}
          </ul>
          <div style={{ marginTop: '28px', paddingTop: '24px', borderTop: '1px solid var(--border-hairline)' }}>
            <p className="as-label" style={{ marginBottom: '12px' }}>Credentials</p>
            <p className="as-spec" style={{ lineHeight: 1.7, color: 'var(--text-muted)' }}>Fully Insured · WSIB Registered<br/>±1mm finish tolerance · Computational fabrication</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.ContactSection = ContactSection;