// Sitar — Visit page

const { c: vc, f: vf } = window.SITAR;

const Visit = ({ onReserve }) => {
  const { t } = useLang();
  const { mobile } = useBreakpoint();
  const px = mobile ? 20 : 56;

  const hours = [
    [t('Mo – Fr', 'Mon – Fri'), t('Mittagstisch', 'Lunch'),  '11:30 – 14:30'],
    [t('Mo – Fr', 'Mon – Fri'), t('Abendessen',   'Dinner'), '17:30 – 24:00'],
    [t('Samstag',  'Saturday'), t('Abendessen',   'Dinner'), '17:30 – 24:00'],
    [t('Sonntag',  'Sunday'),   t('Mittagstisch', 'Lunch'),  '11:30 – 14:30'],
    [t('Sonntag',  'Sunday'),   t('Abendessen',   'Dinner'), '17:30 – 24:00'],
  ];

  return (
    <div style={{ background: vc.bone, color: vc.night, fontFamily: vf.sans, paddingBottom: 100 }}>
      <div style={{ padding: `${mobile ? 48 : 80}px ${px}px ${mobile ? 32 : 60}px` }}>
        <div style={{ fontFamily: vf.mono, fontSize: 11, letterSpacing: 2.5, color: vc.tandoor, textTransform: 'uppercase', marginBottom: 24 }}>
          —— {t('Anfahrt', 'Visit')}
        </div>
        <h1 style={{ fontFamily: vf.serif, fontSize: mobile ? 56 : 144, fontWeight: 400, margin: 0, letterSpacing: mobile ? -1 : -3, lineHeight: 0.92 }}>
          {t('Finden Sie uns in', 'Find us in')} <span style={{ fontStyle: 'italic' }}>Lehel.</span>
        </h1>
      </div>

      <div style={{
        padding: `0 ${px}px`,
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1.2fr 1fr',
        gap: mobile ? 40 : 56,
      }}>
        <div>
          <iframe
            title="Sitar München auf Google Maps"
            src="https://maps.google.com/maps?q=Robert-Koch-Stra%C3%9Fe+4%2C+80538+M%C3%BCnchen&output=embed"
            style={{ border: 0, display: 'block', aspectRatio: '4/3', width: '100%' }}
            allowFullScreen
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          />
          <div style={{ marginTop: 12, textAlign: 'right' }}>
            <a
              href="https://maps.google.com/maps?q=Robert-Koch-Stra%C3%9Fe+4%2C+80538+M%C3%BCnchen"
              target="_blank"
              rel="noopener noreferrer"
              style={{ fontFamily: vf.mono, fontSize: 10, letterSpacing: 1.5, color: vc.tandoor, textDecoration: 'none', textTransform: 'uppercase' }}
            >{t('In Google Maps öffnen ↗', 'Open in Google Maps ↗')}</a>
          </div>
        </div>

        <div>
          <div style={{ fontFamily: vf.mono, fontSize: 11, letterSpacing: 2.5, color: vc.tandoor, textTransform: 'uppercase', marginBottom: 12 }}>
            {t('Adresse', 'Address')}
          </div>
          <div style={{ fontFamily: vf.serif, fontSize: mobile ? 22 : 32, fontWeight: 500, lineHeight: 1.2 }}>
            Robert-Koch-Straße 4<br/>
            <span style={{ fontStyle: 'italic' }}>80538 München · Lehel</span>
          </div>

          <div style={{ marginTop: 40, fontFamily: vf.mono, fontSize: 11, letterSpacing: 2.5, color: vc.tandoor, textTransform: 'uppercase', marginBottom: 16 }}>
            {t('Öffnungszeiten', 'Opening Hours')}
          </div>
          <table style={{ borderCollapse: 'collapse', fontFamily: vf.serif, fontSize: mobile ? 15 : 17, width: '100%' }}>
            <tbody>
              {hours.map((r, i) => (
                <tr key={i} style={{ borderBottom: `1px solid ${vc.lineDark}` }}>
                  <td style={{ padding: '10px 16px 10px 0', opacity: 0.6, fontStyle: 'italic', whiteSpace: 'nowrap' }}>{r[0]}</td>
                  <td style={{ padding: '10px 16px 10px 0', opacity: 0.75 }}>{r[1]}</td>
                  <td style={{ padding: '10px 0', fontWeight: 500 }}>{r[2]}</td>
                </tr>
              ))}
            </tbody>
          </table>

          <div style={{ marginTop: 40, fontFamily: vf.mono, fontSize: 11, letterSpacing: 2.5, color: vc.tandoor, textTransform: 'uppercase', marginBottom: 12 }}>
            {t('Kontakt', 'Contact')}
          </div>
          <div style={{ fontFamily: vf.serif, fontSize: mobile ? 16 : 19, lineHeight: 1.6 }}>
            +49 89 21112361<br/>
            hallo@sitar-muenchen.de
          </div>

          <div style={{ marginTop: 40, fontFamily: vf.mono, fontSize: 11, letterSpacing: 2.5, color: vc.tandoor, textTransform: 'uppercase', marginBottom: 12 }}>
            {t('Anreise', 'Getting here')}
          </div>
          <div style={{ fontFamily: vf.serif, fontSize: mobile ? 15 : 17, lineHeight: 1.5, opacity: 0.8, maxWidth: 460 }}>
            {t(
              'U-Bahn Lehel (U4 / U5) · 2 Min. Fußweg. Straßenbahn 16 bis Tivolistraße. Begrenzte Parkmöglichkeiten; wir empfehlen die Anreise mit öffentlichen Verkehrsmitteln.',
              'U-Bahn Lehel (U4 / U5) · 2 min walk. Tram 16 to Tivolistraße. Limited street parking; we recommend public transport.'
            )}
          </div>

          <button
            onClick={onReserve}
            style={{
              marginTop: 48, background: vc.tandoor, color: vc.bone, border: 'none',
              padding: mobile ? '14px 24px' : '18px 32px',
              fontFamily: vf.sans, fontSize: 13, fontWeight: 600,
              letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer',
              width: mobile ? '100%' : 'auto',
            }}
          >{t('Tisch reservieren →', 'Reserve a table →')}</button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Visit });