ImageComparison image

---
interface CompareItem {
  src?: string;
  alt: string;
  label: string;
  note?: string;
}

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

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

<section class="icmp">
  {title && <h2 class="icmp__title">{title}</h2>}
  <div class="icmp__grid" style={`grid-template-columns: repeat(${items.length}, 1fr)`}>
    {items.map((item, i) => (
      <div class:list={['icmp__item', i === items.length - 1 && 'icmp__item--featured']}>
        <div class="icmp__media">
          {item.src ? (
            <img class="icmp__img" src={item.src} alt={item.alt} />
          ) : (
            <div class="icmp__placeholder" aria-label={item.alt}></div>
          )}
        </div>
        <div class="icmp__meta">
          <p class="icmp__label">{item.label}</p>
          {item.note && <p class="icmp__note">{item.note}</p>}
        </div>
      </div>
    ))}
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .icmp { padding: 2rem 0; }
  .icmp__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    text-align: center;
    margin: 0 0 2rem;
  }
  .icmp__grid {
    display: grid;
    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 0%, #d0d0f0 100%);
  }
  .icmp__item--featured .icmp__placeholder {
    background: linear-gradient(135deg, #c8ccf8 0%, #a8acf0 100%);
  }
  .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__note {
    font-size: 0.85rem;
    color: #777;
    margin: 0;
  }
  .icmp__item--featured .icmp__label {
    color: var(--color-accent, #6366f1);
  }
  @media (max-width: 640px) {
    .icmp__grid { grid-template-columns: 1fr !important; }
  }
</style>