// "Contact Us" page — page hero, the shared Contact form, plus direct contact details.
function PageContact() {
  const { PageHero, Contact, Reveal, useMediaQuery } = window.JMK;
  const isMobile = useMediaQuery("(max-width: 768px)");
  const detail = { fontFamily: "var(--font-ui)", fontSize: "var(--text-lg)", color: "var(--ink-700)", textDecoration: "none" };
  const label = { fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", fontWeight: 600, letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--ink-300)", marginBottom: 8 };

  return (
    <React.Fragment>
      <PageHero eyebrow="Say Hello" title="Contact Us" tagline="Reaching out for help is the compass that guides us to new horizons." minHeight="56vh" />

      <Contact />

      <section style={{ background: "#ffffff", padding: "clamp(64px,9vw,110px) clamp(20px,5vw,64px)", borderTop: "1px solid var(--color-border)" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 40 }}>
          <Reveal distance={36}>
            <div style={label}>Email</div>
            <a href="mailto:contact@wearejmkstudios.io" data-cursor="link" style={detail}>contact@wearejmkstudios.io</a>
          </Reveal>
          <Reveal distance={36} delay={100}>
            <div style={label}>Phone &amp; WhatsApp</div>
            <a href="tel:+447784859286" data-cursor="link" style={detail}>+44 7784 859286</a>
          </Reveal>
          <Reveal distance={36} delay={200}>
            <div style={label}>Studio</div>
            <span style={detail}>London, UK</span>
          </Reveal>
        </div>
      </section>
    </React.Fragment>
  );
}
window.JMK = window.JMK || {};
window.JMK.PageContact = PageContact;