ImageComparison image

---
interface ComparisonItem {
  label: string;
  note: string;
  src?: string;
  alt?: string;
  featured?: boolean;
}

interface Props {
  title?: string;
  items?: ComparisonItem[];
}

const {
  title = 'Vergelijk het verschil',
  items = [
    { label: 'Aanpak A', note: 'Traditioneel bureau', alt: 'Optie A' },
    { label: 'Aanpak B', note: 'Data-driven methode', alt: 'Optie B', featured: true },
  ],
} = Astro.props;
---

<section class="bl-section icmp">
  <div class="bl-inner icmp__inner">
    <h2 class="icmp__title">{title}</h2>
    <div class="icmp__grid" style={`--icmp-cols: ${items.length}`}>
      {items.map((item) => (
        <div class:list={['icmp__item', { 'icmp__item--featured': item.featured }]}>
          <div class="icmp__media">
            {item.src
              ? <img data-allow-img class="icmp__img" src={item.src} alt={item.alt ?? item.label} loading="lazy" decoding="async" />
              : <div class="icmp__placeholder" aria-label={item.alt ?? item.label}></div>
            }
          </div>
          <div class="icmp__meta">
            <p class="icmp__label">{item.label}</p>
            <p class="icmp__note">{item.note}</p>
          </div>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .icmp__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    text-align: center;
    margin: 0 0 2rem;
  }
  .icmp__grid {
    display: grid;
    grid-template-columns: repeat(var(--icmp-cols, 2), 1fr);
    gap: 1.5rem;
  }
  .icmp__item {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
  }
  .icmp__item--featured {
    border-color: var(--color-accent, #6366f1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
  }
  .icmp__media {
    aspect-ratio: 4/3;
  }
  .icmp__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .icmp__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8e8f8, #d0d0f0);
  }
  .icmp__item--featured .icmp__placeholder {
    background: linear-gradient(135deg, #c8ccf8, #a8acf0);
  }
  .icmp__meta {
    padding: 1rem 1.25rem;
  }
  .icmp__label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.25rem;
  }
  .icmp__item--featured .icmp__label {
    color: var(--color-accent, #6366f1);
  }
  .icmp__note {
    font-size: 0.875rem;
    color: #666;
    margin: 0;
  }
  @media (max-width: 640px) {
    .icmp__grid {
      grid-template-columns: 1fr;
    }
  }
</style>