/* Berlin Döner Rauma — gallery page */
const THEME_URL = (document.getElementById('berlin-doner-gallery-js')?.src.replace('/assets/gallery-app.jsx', '').split('?')[0])
  || 'https://berlin2.demowpsite.com/wp-content/themes/berlin-doner-rauma';

const { useState, useEffect, useCallback } = React;

const IMAGES = Array.from({ length: 20 }, (_, i) => ({
  src: `${THEME_URL}/assets/gallery/gallery-${i + 1}.png`,
  alt: `Berlin Döner Rauma gallery image ${i + 1}`,
}));

function Lightbox({ images, index, onClose, onPrev, onNext }) {
  useEffect(() => {
    function onKey(e) {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft') onPrev();
      if (e.key === 'ArrowRight') onNext();
    }
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [onClose, onPrev, onNext]);

  const btnBase = {
    position: 'absolute', top: '50%', transform: 'translateY(-50%)',
    background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)',
    color: '#fff', fontSize: 28, width: 52, height: 52, borderRadius: '50%',
    cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
    zIndex: 10,
  };

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.92)', zIndex: 9000,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}
    >
      <button
        onClick={e => { e.stopPropagation(); onClose(); }}
        style={{ position: 'absolute', top: 20, right: 20, background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)', color: '#fff', fontSize: 20, width: 44, height: 44, borderRadius: '50%', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 10 }}
        aria-label="Close"
      >✕</button>

      <button onClick={e => { e.stopPropagation(); onPrev(); }} style={{ ...btnBase, left: 20 }} disabled={index === 0} aria-label="Previous">‹</button>

      <img
        src={images[index].src}
        alt={images[index].alt}
        onClick={e => e.stopPropagation()}
        style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: 4, display: 'block' }}
      />

      <button onClick={e => { e.stopPropagation(); onNext(); }} style={{ ...btnBase, right: 20 }} disabled={index === images.length - 1} aria-label="Next">›</button>

      <div style={{ position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)', color: 'rgba(255,255,255,0.5)', fontFamily: 'JetBrains Mono, monospace', fontSize: 12 }}>
        {index + 1} / {images.length}
      </div>
    </div>
  );
}

function GalleryPage() {
  const [lightboxIndex, setLightboxIndex] = useState(null);

  const openLightbox = useCallback((i) => setLightboxIndex(i), []);
  const closeLightbox = useCallback(() => setLightboxIndex(null), []);
  const prevImage = useCallback(() => setLightboxIndex(i => Math.max(0, i - 1)), []);
  const nextImage = useCallback(() => setLightboxIndex(i => Math.min(IMAGES.length - 1, i + 1)), []);

  return (
    <div style={{ background: '#0a0a0a', minHeight: '100vh', paddingBottom: '4rem' }}>
      {/* Hero */}
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '4rem 2rem 3rem' }}>
        <p style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '0.7rem', letterSpacing: '0.18em', color: '#7dddd8', textTransform: 'uppercase', marginBottom: '1.2rem' }}>
          Our Restaurant
        </p>
        <h1 style={{ fontFamily: 'Anton, Bebas Neue, Impact, sans-serif', fontWeight: 400, fontSize: 'clamp(3rem,7vw,6rem)', lineHeight: 0.95, textTransform: 'uppercase', letterSpacing: '0.005em' }}>
          <span style={{ color: '#f5f1e8' }}>A Taste of</span><br />
          <span style={{ color: '#f5e6a8' }}>Berlin in Rauma.</span>
        </h1>
      </div>

      {/* Masonry grid */}
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 2rem' }}>
        <style>{`@media(max-width:768px){.gallery-masonry{columns:2!important}}`}</style>
        <div className="gallery-masonry" style={{ columns: 3, columnGap: '12px' }}>
          {IMAGES.map((img, i) => (
            <div
              key={i}
              onClick={() => openLightbox(i)}
              style={{ breakInside: 'avoid', marginBottom: '12px', cursor: 'pointer', borderRadius: 4, overflow: 'hidden' }}
            >
              <img
                src={img.src}
                alt={img.alt}
                style={{ width: '100%', objectFit: 'cover', borderRadius: 4, display: 'block', transition: 'opacity 0.2s' }}
                loading="lazy"
                onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
                onMouseLeave={e => e.currentTarget.style.opacity = '1'}
              />
            </div>
          ))}
        </div>
      </div>

      {lightboxIndex !== null && (
        <Lightbox
          images={IMAGES}
          index={lightboxIndex}
          onClose={closeLightbox}
          onPrev={prevImage}
          onNext={nextImage}
        />
      )}
    </div>
  );
}

const galleryEl = document.getElementById('gallery-root');
if (galleryEl) ReactDOM.createRoot(galleryEl).render(<GalleryPage />);