// L'Aqua Fure — Galerie (6 photo slots) + Avis (real Google reviews)
function Galerie() {
  // One real photo + placeholders to be filled before publication.
  const slots = [
    { real: 'assets/photos/salon-interior.png', span: 2 },
    { real: 'assets/photos/salon-storefront.png' },
    {}, {}, {}, {},
  ];
  return (
    <section style={{ background: 'var(--surface-page)', padding: 'clamp(64px, 11vh, 130px) var(--gutter-page)' }}>
      <div style={{ maxWidth: 'var(--container-lg)', margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginBottom: 'clamp(28px,4vh,44px)' }}>
          <div>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--brand-accent)', margin: '0 0 14px' }}>Galerie</p>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(32px, 5vw, 50px)', lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: 0 }}>
              L'ambiance du salon
            </h2>
          </div>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text-subtle)' }}>À compléter : vraies photos</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gridAutoRows: '210px', gap: 14 }}>
          {slots.map((s, i) => (
            <div key={i} style={{
              gridColumn: s.span ? 'span 2' : 'span 1', gridRow: s.span ? 'span 1' : 'span 1',
              borderRadius: 'var(--radius-lg)', overflow: 'hidden', position: 'relative',
              background: s.real ? 'transparent' : 'var(--bone-100)',
              border: s.real ? 'none' : '1px dashed var(--border-default)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {s.real ? (
                <img src={s.real} alt="Salon L'Aqua fure" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              ) : (
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'var(--text-subtle)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>
                  Photo {i + 1}
                </span>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Galerie = Galerie;