// Contact page: the channel cards, then the map. There is no contact form,
// because the site is static with no backend to receive one; the page hands
// over real ways to reach the shop instead of a box that silently drops
// messages. There is no mail button either, for the same reason the email
// card is gone: nothing would answer it.
function ContactScreen({ t, lang }) {
  return (
    <section style={{ padding: '56px var(--page-gutter) 80px', background: 'var(--surface-page)' }}>
      <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto' }}>
        <h1 className="c-page-title" style={{ font: 'var(--text-h1)', color: 'var(--text-primary)', margin: '0 0 12px' }}>
          {t.contact.title}
        </h1>
        <p style={{ font: 'var(--text-body-l)', color: 'var(--text-secondary)', margin: '0 0 32px', maxWidth: 520 }}>
          {t.contact.lead}
        </p>

        <ContactChannels t={t} lang={lang} />

        <div style={{ marginTop: 48 }}>
          <h2 style={{ font: 'var(--text-h2)', color: 'var(--text-primary)', margin: '0 0 20px' }}>
            {t.location.title}
          </h2>
          <div style={{
            borderRadius: 'var(--radius-md)', overflow: 'hidden',
            border: '1px solid var(--line-200)', boxShadow: 'var(--shadow-stamp-sm)',
          }}>
            <iframe
              title={t.location.title}
              src={window.CORNER_MAPS_EMBED_SRC(lang)}
              width="100%"
              height="360"
              style={{ border: 0, display: 'block' }}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>
        </div>
      </div>
    </section>
  );
}
window.ContactScreen = ContactScreen;