ImageMasonry image

---
interface MasonryImage {
  src: string;
  alt?: string;
}

interface Props {
  eyebrow?: string;
  headline?: string;
  images?: MasonryImage[];
  columns?: number;
}

const {
  eyebrow = 'Impressie',
  headline = 'Beelden zeggen meer dan woorden',
  images = [
    { src: '/img/ext/photo-1460925895917-afdab827c52f-w600-18aff0.jpg', alt: '' },
    { src: '/img/ext/photo-1542744173-8e7e53415bb0-w600-d54003.jpg', alt: '' },
    { src: '/img/ext/photo-1551434678-e076c223a692-w600-4c2995.jpg', alt: '' },
    { src: '/img/ext/photo-1504868584819-f8e8b4b6d7e3-w600-1cf55b.jpg', alt: '' },
    { src: '/img/ext/photo-1522071820081-009f0129c71c-w600-72da8c.jpg', alt: '' },
    { src: '/img/ext/photo-1611532736597-de2d4265fba3-w600-3b3713.jpg', alt: '' },
    { src: '/img/ext/photo-1507003211169-0a1dd7228f2d-w600-8954f7.jpg', alt: '' },
  ],
  columns = 3,
} = Astro.props;
---

<section class="bl-section imn">
  <div class="bl-inner imn__inner">
    {(eyebrow || headline) && (
      <div class="imn__header">
        {eyebrow && <p class="imn__eyebrow">{eyebrow}</p>}
        {headline && <h2 class="imn__headline">{headline}</h2>}
      </div>
    )}
    <div class="imn__grid js-imn-grid" style={`--imn-columns: ${columns}`}>
      {images.map((img) => (
        <div class="imn__item">
          <img data-allow-img src={img.src} alt={img.alt ?? ''} class="imn__img" loading="lazy" decoding="async" />
        </div>
      ))}
    </div>
  </div>
</section>

<script>
  const grid = document.querySelector('.js-imn-grid');
  if (grid) {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          grid.classList.add('imn__grid--visible');
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );
    observer.observe(grid);
  }
</script>

<style>
  .imn__header {
    text-align: center;
    margin-bottom: 2.5rem;
  }
  .imn__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 0.5rem;
  }
  .imn__headline {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.15;
  }
  .imn__grid {
    columns: var(--imn-columns, 3);
    column-gap: 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .imn__grid--visible {
    opacity: 1;
    transform: translateY(0);
  }
  .imn__item {
    break-inside: avoid;
    margin-bottom: 1rem;
    border-radius: var(--radius, 8px);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .imn__item:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }
  .imn__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius, 8px);
  }
  @media (max-width: 640px) {
    .imn__grid {
      columns: 1;
    }
  }
</style>