// Sitar — Gallery page

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

const tiles = [
  { de: 'Sitar — Innenraum', en: 'Sitar — Interior',  img: 'galleryInterior' },
  { de: 'Sitar — Innenraum', en: 'Sitar — Interior',  img: 'galleryInterior2' },
  { de: 'Sitar — Terrasse',  en: 'Sitar — Terrace',   img: 'galleryTerasse' },
  { de: 'Sitar — Terrasse',  en: 'Sitar — Terrace',   img: 'galleryTerasse2' },
  { de: 'Sitar — Terrasse',  en: 'Sitar — Terrace',   img: 'galleryTerasse3' },
  { de: 'Sitar — Terrasse',  en: 'Sitar — Terrace',   img: 'galleryTerasse4' },
  { de: 'Tandoori',          en: 'Tandoori',           img: 'galleryFood' },
  { de: 'Naan Brot',         en: 'Naan Bread',         img: 'galleryNaan' },
];

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

  const [lightbox, setLightbox] = React.useState(null);

  React.useEffect(() => {
    if (lightbox === null) return;
    const onKey = (e) => {
      if (e.key === 'Escape')     setLightbox(null);
      if (e.key === 'ArrowRight') setLightbox(i => Math.min(i + 1, tiles.length - 1));
      if (e.key === 'ArrowLeft')  setLightbox(i => Math.max(i - 1, 0));
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [lightbox]);

  return (
    <div style={{ background: gc.night, color: gc.bone, fontFamily: gf.sans, paddingBottom: 80 }}>

      {/* Header */}
      <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>

      {/* Grid — uniform 4/3 cards with label overlay */}
      <div style={{ padding: `0 ${px}px`, display: 'grid', gridTemplateColumns: cols, gap: mobile ? 8 : 12 }}>
        {tiles.map((tile, i) => (
          <div
            key={i}
            onClick={() => setLightbox(i)}
            style={{ position: 'relative', cursor: 'pointer', overflow: 'hidden', aspectRatio: '4/3', background: gc.nightSoft }}
          >
            <img
              src={window.SITAR_IMAGES[tile.img]}
              alt={lang === 'de' ? tile.de : tile.en}
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform .4s ease' }}
              onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.04)'}
              onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
            />
            {/* Label strip */}
            <div style={{
              position: 'absolute', bottom: 0, left: 0, right: 0,
              background: 'linear-gradient(transparent, rgba(7,32,32,0.82))',
              padding: mobile ? '20px 12px 10px' : '28px 16px 12px',
              pointerEvents: 'none',
            }}>
              <div style={{ fontFamily: gf.mono, fontSize: mobile ? 9 : 10, letterSpacing: 2, color: gc.bone, opacity: 0.9, textTransform: 'uppercase' }}>
                {lang === 'de' ? tile.de : tile.en}
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Quote */}
      <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>

      {/* Lightbox */}
      {lightbox !== null && (
        <div
          onClick={() => setLightbox(null)}
          style={{
            position: 'fixed', inset: 0, zIndex: 200,
            background: 'rgba(7,32,32,0.97)',
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            padding: mobile ? '60px 16px 24px' : '40px 80px 32px',
          }}
        >
          {/* Close */}
          <div
            onClick={() => setLightbox(null)}
            style={{ position: 'absolute', top: 20, right: 24, fontFamily: gf.serif, fontSize: 36, lineHeight: 1, cursor: 'pointer', opacity: 0.6, color: gc.bone, transition: 'opacity .15s' }}
            onMouseEnter={e => e.currentTarget.style.opacity = 1}
            onMouseLeave={e => e.currentTarget.style.opacity = 0.6}
          >×</div>

          {/* Image + arrows */}
          <div
            onClick={e => e.stopPropagation()}
            style={{ display: 'flex', alignItems: 'center', gap: mobile ? 12 : 32, width: '100%', justifyContent: 'center' }}
          >
            <div
              onClick={() => setLightbox(i => Math.max(i - 1, 0))}
              style={{ fontFamily: gf.serif, fontSize: mobile ? 32 : 48, lineHeight: 1, cursor: lightbox > 0 ? 'pointer' : 'default', opacity: lightbox > 0 ? 0.7 : 0.15, color: gc.bone, flexShrink: 0, userSelect: 'none', transition: 'opacity .15s' }}
              onMouseEnter={e => { if (lightbox > 0) e.currentTarget.style.opacity = 1; }}
              onMouseLeave={e => { if (lightbox > 0) e.currentTarget.style.opacity = 0.7; }}
            >‹</div>

            <img
              src={window.SITAR_IMAGES[tiles[lightbox].img]}
              alt={lang === 'de' ? tiles[lightbox].de : tiles[lightbox].en}
              style={{ maxWidth: mobile ? 'calc(100vw - 100px)' : 'calc(100vw - 240px)', maxHeight: mobile ? '70vh' : '78vh', objectFit: 'contain', display: 'block' }}
            />

            <div
              onClick={() => setLightbox(i => Math.min(i + 1, tiles.length - 1))}
              style={{ fontFamily: gf.serif, fontSize: mobile ? 32 : 48, lineHeight: 1, cursor: lightbox < tiles.length - 1 ? 'pointer' : 'default', opacity: lightbox < tiles.length - 1 ? 0.7 : 0.15, color: gc.bone, flexShrink: 0, userSelect: 'none', transition: 'opacity .15s' }}
              onMouseEnter={e => { if (lightbox < tiles.length - 1) e.currentTarget.style.opacity = 1; }}
              onMouseLeave={e => { if (lightbox < tiles.length - 1) e.currentTarget.style.opacity = 0.7; }}
            >›</div>
          </div>

          {/* Caption + counter */}
          <div style={{ marginTop: 20, display: 'flex', gap: 20, alignItems: 'center' }}>
            <div style={{ fontFamily: gf.mono, fontSize: 11, letterSpacing: 2, color: gc.bone, opacity: 0.65, textTransform: 'uppercase' }}>
              {lang === 'de' ? tiles[lightbox].de : tiles[lightbox].en}
            </div>
            <div style={{ fontFamily: gf.mono, fontSize: 10, letterSpacing: 1.5, color: gc.tandoor, opacity: 0.7 }}>
              {lightbox + 1} / {tiles.length}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { Gallery });