// Sitar — Gallery page

const { c: gc, f: gf } = window.SITAR;

const tiles = [
  { l:'INTERIOR · DINING ROOM',     r:'4/3', span: 2, img: 'interior' },
  { l:'TANDOOR · CHARCOAL',         r:'1/1',          img: 'tandoor' },
  { l:'FOOD · LAMB CHOPS',          r:'1/1',          img: 'lambChops' },
  { l:'KITCHEN · CHEF AT PASS',     r:'3/4',          img: 'kitchen' },
  { l:'FOOD · BUTTER CHICKEN',      r:'1/1',          img: 'butterChicken' },
  { l:'INTERIOR · BAR',             r:'4/5',          img: 'bar' },
  { l:'FOOD · BIRYANI COPPER POT',  r:'1/1',          img: 'biryani' },
  { l:'PORTRAIT · KITCHEN BRIGADE', r:'4/3', span: 2, img: 'brigade' },
];

const Gallery = () => {
  const { t } = useLang();
  const { mobile, tablet } = useBreakpoint();
  const px = mobile ? 20 : 56;
  const cols = mobile ? '1fr' : tablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)';

  return (
    <div style={{ background: gc.night, color: gc.bone, fontFamily: gf.sans, paddingBottom: 80 }}>
      <div style={{ padding: `${mobile ? 48 : 80}px ${px}px ${mobile ? 32 : 60}px` }}>
        <div style={{ fontFamily: gf.mono, fontSize: 11, letterSpacing: 2.5, color: gc.tandoor, textTransform: 'uppercase', marginBottom: 24 }}>
          —— {t('Galerie', 'Gallery')}
        </div>
        <h1 style={{ fontFamily: gf.serif, fontSize: mobile ? 64 : tablet ? 100 : 144, fontWeight: 400, margin: 0, letterSpacing: mobile ? -1 : -3, lineHeight: 0.92 }}>
          {t('Ein Blick ins', 'Inside the')} <span style={{ fontStyle: 'italic', color: gc.rose }}>{t('Restaurant.', 'room.')}</span>
        </h1>
      </div>

      <div style={{ padding: `0 ${px}px`, display: 'grid', gridTemplateColumns: cols, gap: 16 }}>
        {tiles.map((tile, i) => (
          <div key={i} style={{ gridColumn: (tile.span === 2 && !mobile && !tablet) ? 'span 2' : 'span 1' }}>
            <Placeholder label={tile.l} ratio={tile.r} src={window.SITAR_IMAGES[tile.img]} />
          </div>
        ))}
      </div>

      <div style={{ padding: `${mobile ? 48 : 100}px ${px}px 0`, maxWidth: 800 }}>
        <div style={{ fontFamily: gf.serif, fontSize: mobile ? 22 : 32, fontStyle: 'italic', lineHeight: 1.4, opacity: 0.85 }}>
          {t(
            '"Wir wollten nie, dass sich Sitar wie ein Ziel anfühlt. Wir wollten, dass es sich anfühlt wie das Zimmer, in dem die Großmutter gekocht hat."',
            '"We never wanted Sitar to feel like a destination. We wanted it to feel like the room your grandmother cooked in."'
          )}
        </div>
        <div style={{ fontFamily: gf.mono, fontSize: 11, letterSpacing: 2, color: gc.tandoor, textTransform: 'uppercase', marginTop: 24 }}>—— Chef</div>
      </div>
    </div>
  );
};

Object.assign(window, { Gallery });