/* Contact */
function ContactScreen({ onNavigate }) {
  const { Eyebrow, Ornament, Button, Card } = window.LoncinDesignSystem_6f2c51;
  const { PageHead, MapEmbed, LINKS } = window;

  const rows = [
    ['Adres', 'Markgravelei 127\n2018 Antwerpen', null],
    ['Telefoon', '+32 3 248 29 89', LINKS.tel],
    ['E-mail', 'info@loncinrestaurant.be', LINKS.mail],
    ['BTW', 'BE0430 932 396', null],
  ];

  return (
    <main>
      <PageHead
        eyebrow="Contact"
        title="Ons vinden & reserveren"
        intro="Een herenhuis anno 1902 aan de Markgravelei in Antwerpen, met privéparking. Wij ontvangen u graag — reserveer telefonisch of online."
      />

      <section
        style={{
          maxWidth: 'var(--container-max)',
          margin: '0 auto',
          padding: 'var(--space-6) var(--gutter) var(--space-section)',
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: 'clamp(2rem, 5vw, 4rem)',
          alignItems: 'start',
        }}
      >
        {/* Details */}
        <div>
          <Card variant="surface" padding="xl">
            <Eyebrow>Restaurant Loncin</Eyebrow>
            <div style={{ marginTop: '1.4rem', display: 'flex', flexDirection: 'column' }}>
              {rows.map(([label, value, href], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '7rem 1fr', gap: '1rem', padding: '1rem 0', borderTop: i === 0 ? 'none' : '1px solid var(--line-on-dark)' }}>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-caption)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--text-muted)', paddingTop: '0.2rem' }}>{label}</span>
                  {href ? (
                    <a href={href} style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-body-lg)', color: 'var(--text-primary)', whiteSpace: 'pre-line' }}>{value}</a>
                  ) : (
                    <span style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-body-lg)', color: 'var(--text-primary)', whiteSpace: 'pre-line', lineHeight: 'var(--leading-snug)' }}>{value}</span>
                  )}
                </div>
              ))}
            </div>

            <div style={{ marginTop: '1.6rem', display: 'flex', gap: '1.2rem', flexWrap: 'wrap' }}>
              <a href={LINKS.facebook} target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-eyebrow)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>Facebook</a>
              <a href={LINKS.instagram} target="_blank" rel="noopener noreferrer" style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-eyebrow)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>Instagram</a>
            </div>
          </Card>

          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--text-muted)', lineHeight: 'var(--leading-relaxed)', marginTop: '1.4rem' }}>
            Er is privéparking, afgesloten met een bareel — vraag bij uw reservatie naar een kaartje.
          </p>

          <div style={{ marginTop: '1.6rem', display: 'flex', gap: '0.8rem', flexWrap: 'wrap' }}>
            <Button variant="primary" onClick={() => onNavigate('reserve')}>Reserveren</Button>
            <Button variant="ghost" onClick={() => onNavigate('cadeaubon')}>Cadeaubon</Button>
          </div>
        </div>

        {/* Map */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.2rem' }}>
          <MapEmbed height={420} />
        </div>
      </section>

      <div style={{ maxWidth: 460, margin: '0 auto var(--space-9)' }}><Ornament variant="diamond" /></div>
    </main>
  );
}
Object.assign(window, { ContactScreen });