// Contact page — direct calendar booking.

function ContactHero() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <section style={{ padding: isMobile ? '56px 22px 24px' : '96px 56px 24px' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <Eyebrow>Contact</Eyebrow>
        <h1
          style={{
            fontFamily: FONT_SERIF,
            fontWeight: 500,
            fontSize: isMobile ? 36 : 'clamp(40px, 5vw, 60px)',
            lineHeight: isMobile ? 1.08 : 1.05,
            letterSpacing: '-0.02em',
            margin: 0,
            maxWidth: 920,
          }}
        >
          Schedule a call with us
        </h1>
      </div>
    </section>
  );
}

function ContactPage() {
  const isMobile = useMediaQuery('(max-width: 760px)');
  return (
    <PageShell active="contact">
      <ContactHero />
      <section
        style={{
          padding: isMobile ? '24px 22px 72px' : '32px 56px 104px',
        }}
      >
        <div style={{ maxWidth: 960, margin: '0 auto' }}>
          <CalendarWidget />
          <div
            style={{
              marginTop: 22,
              fontFamily: FONT_MONO,
              fontSize: 12,
              letterSpacing: '0.06em',
              color: GREGIS_MUTED,
            }}
          >
            EMAIL · {GREGIS_CONTACT.email}
          </div>
        </div>
      </section>
    </PageShell>
  );
}

window.ContactPage = ContactPage;