/* global React, T, Eyebrow, H2, Italic */
const { useState: useS4 } = React;

// =============== Atmospheric photo gallery (mosaic) ===============
// Curated selection of the most impactful frames — full halls, party, stage, crowd
function PhotoGallery() {
  const all = window.MW_PHOTOS || [];
  // hand-picked indexes leaning toward stage / crowd / party / atmosphere shots,
  // skipping the emptier-room frames
  const picks = [4, 7, 11, 16, 20, 22, 25, 29, 33, 38, 42, 47, 50, 54, 58, 62, 65, 66];
  const photos = picks.map(i => all[i]).filter(Boolean);
  if (!photos.length) return null;

  return (
    <section style={{
      background: T.ink, padding: '0', position: 'relative', overflow: 'hidden',
    }}>
      {/* Section header — big and clear */}
      <div style={{ padding: '100px 56px 48px', maxWidth: 1240, margin: '0 auto' }}>
        <Eyebrow accent={T.green}>// Archivio MW · 2018—2025</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'flex-end' }}>
          <h2 style={{
            fontFamily: T.serif, fontWeight: 900,
            fontSize: 'clamp(40px, 5.5vw, 80px)',
            lineHeight: 0.95, letterSpacing: '-0.035em',
            color: '#fff', margin: 0, textWrap: 'balance',
          }}>
            Per 3 giorni Rimini diventa la <Italic color={T.green}>città dei Marketers.</Italic>
          </h2>
          <div>
            <p style={{
              fontFamily: T.sans, fontSize: 16, color: 'rgba(255,255,255,0.65)',
              lineHeight: 1.6, margin: '0 0 18px', maxWidth: 380,
            }}>
              Sala piena, palco vivo, party che invade la città. Un assaggio di cosa significa
              essere dentro al Marketers World — dalla prima edizione del 2018 a oggi.
            </p>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12,
              fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: T.violet,
            }}>
              <span>●</span> {photos.length} momenti selezionati
            </div>
          </div>
        </div>
      </div>

      {/* Mosaic — varied aspect ratios, larger grid */}
      <div style={{
        padding: '0 0',
        display: 'grid',
        gridTemplateColumns: 'repeat(6, 1fr)',
        gridAutoRows: '200px',
        gap: 3,
        background: 'rgba(255,255,255,0.04)',
      }}>
        {photos.map((src, i) => {
          // Varied layouts — bigger feature cells
          const layouts = [
            { c: 'span 3', r: 'span 2' },  // hero feature
            { c: 'span 2', r: 'span 1' },
            { c: 'span 1', r: 'span 1' },
            { c: 'span 1', r: 'span 2' },
            { c: 'span 1', r: 'span 1' },
            { c: 'span 1', r: 'span 1' },
            { c: 'span 2', r: 'span 2' },  // feature
            { c: 'span 1', r: 'span 1' },
            { c: 'span 1', r: 'span 2' },
            { c: 'span 1', r: 'span 1' },
            { c: 'span 1', r: 'span 1' },
            { c: 'span 2', r: 'span 1' },
            { c: 'span 1', r: 'span 1' },
            { c: 'span 1', r: 'span 1' },
            { c: 'span 2', r: 'span 2' },  // feature
            { c: 'span 2', r: 'span 1' },
            { c: 'span 1', r: 'span 1' },
            { c: 'span 1', r: 'span 1' },
          ];
          const L = layouts[i] || { c: 'span 1', r: 'span 1' };
          return (
            <div key={i} style={{
              gridColumn: L.c, gridRow: L.r,
              background: T.ink2, position: 'relative', overflow: 'hidden',
            }}>
              <img src={src} alt="" loading="lazy"
                style={{
                  width: '100%', height: '100%', objectFit: 'cover',
                  filter: 'brightness(0.92) saturate(1.08)',
                  transition: 'filter 0.5s, transform 0.5s',
                }}
                onMouseEnter={e => { e.currentTarget.style.filter = 'brightness(1.05) saturate(1.15)'; e.currentTarget.style.transform = 'scale(1.04)'; }}
                onMouseLeave={e => { e.currentTarget.style.filter = 'brightness(0.92) saturate(1.08)'; e.currentTarget.style.transform = 'scale(1)'; }}
              />
            </div>
          );
        })}
      </div>

      {/* Caption strip */}
      <div style={{
        padding: '40px 56px',
        background: T.ink, borderTop: '1px solid rgba(255,255,255,0.06)',
        display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center',
        maxWidth: 1240, margin: '0 auto',
      }}>
        <div style={{
          fontFamily: T.mono, fontSize: 11, letterSpacing: '0.18em',
          color: T.green, textTransform: 'uppercase',
        }}>
          <span style={{ marginRight: 8 }}>●</span> MW · 2018—2025 · Palacongressi di Rimini
        </div>
        <a href="https://marketersworld.net/galleria" style={{
          fontFamily: T.mono, fontSize: 11, letterSpacing: '0.14em',
          color: T.violet, textTransform: 'uppercase',
          textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8,
        }}>
          → Archivio fotografico completo
        </a>
      </div>
    </section>
  );
}

window.PhotoGallery = PhotoGallery;