/* global React, Reveal, Icon */
// גלריה — public masonry-ish grid with a lightbox. Add/remove happens in the admin area.
const { useState: useStateGal } = React;

const GallerySection = ({ gallery }) => {
  const [active, setActive] = useStateGal(null);
  return (
    <section id="gallery" style={{ background: 'var(--cream)', padding: 'var(--section-y) 28px' }}>
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto' }}>
        <Reveal as="div" style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="mln-eyebrow">גלריה</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(1.9rem, 3.4vw, 2.8rem)', margin: 0, color: 'var(--ink-900)' }}>רגעים מהדרך</h2>
        </Reveal>

        {gallery.length === 0 ? (
          <div style={{ textAlign: 'center', color: 'var(--ink-500)', fontFamily: 'var(--font-body)', padding: '40px 0' }}>הגלריה תתמלא בקרוב בתמונות.</div>
        ) : (
          <div className="mln-gallery-grid" style={{ columnCount: 3, columnGap: 18 }}>
            {gallery.map((g, i) => (
              <Reveal key={g.id} delay={(i % 3) * 90} style={{ breakInside: 'avoid', marginBottom: 18 }}>
                <button onClick={() => setActive(g)} style={{
                  display: 'block', width: '100%', padding: 0, border: 'none', cursor: 'pointer',
                  borderRadius: 'var(--radius-lg)', overflow: 'hidden', position: 'relative',
                  background: 'var(--red-100)', boxShadow: 'var(--shadow-sm)',
                }} className="mln-gal-item">
                  <img src={g.src} alt={g.caption || ''} loading="lazy" style={{ display: 'block', width: '100%', height: 'auto', transition: 'transform 600ms var(--ease-soft)' }} />
                  {g.caption && <span style={{
                    position: 'absolute', right: 0, bottom: 0, left: 0, padding: '28px 16px 14px',
                    background: 'linear-gradient(to top, rgba(36,8,14,0.7), transparent)',
                    color: '#FFF6F2', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14.5, textAlign: 'right',
                  }}>{g.caption}</span>}
                </button>
              </Reveal>
            ))}
          </div>
        )}
      </div>

      {active && (
        <div onClick={() => setActive(null)} style={{
          position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(36,8,14,0.82)',
          backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', display: 'flex',
          alignItems: 'center', justifyContent: 'center', padding: 28, animation: 'mlnFade 240ms var(--ease-out)',
        }}>
          <button onClick={() => setActive(null)} aria-label="סגירה" style={{
            position: 'absolute', top: 22, left: 22, width: 46, height: 46, borderRadius: '50%',
            border: '1px solid rgba(255,246,242,0.3)', background: 'rgba(255,246,242,0.1)', color: '#FFF6F2',
            cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><Icon name="x" size={22} /></button>
          <figure onClick={e => e.stopPropagation()} style={{ margin: 0, maxWidth: 'min(900px, 92vw)', maxHeight: '88vh', animation: 'mlnPop 320ms var(--ease-out)' }}>
            <img src={active.src} alt={active.caption || ''} style={{ display: 'block', maxWidth: '100%', maxHeight: '78vh', borderRadius: 'var(--radius-lg)', boxShadow: '0 40px 90px rgba(0,0,0,0.5)' }} />
            {active.caption && <figcaption style={{ textAlign: 'center', color: 'var(--text-on-red-soft)', fontFamily: 'var(--font-body)', fontSize: 16, marginTop: 16 }}>{active.caption}</figcaption>}
          </figure>
        </div>
      )}
    </section>
  );
};
window.GallerySection = GallerySection;