ImageWithStats image

---
/**
 * ImageWithStats
 * Beeld met een overlay-balk van 2–4 statistieken onderaan.
 * Ideaal als visueel bewijs-blok (results, social proof).
 *
 * Props:
 * - image?: { src: string; alt?: string }   achtergrondafbeelding
 * - stats: { value: string; label: string }[]  2–4 getallen met label
 * - heading?: string                         optionele sectie-kop erboven
 * - theme?: 'light' | 'dark'                default 'light'
 */
interface Stat {
  value: string;
  label: string;
}

interface Props {
  image?: { src: string; alt?: string };
  stats: Stat[];
  heading?: string;
  theme?: 'light' | 'dark';
}

const {
  image,
  stats,
  heading,
  theme = 'light',
} = Astro.props;
---

<section class:list={['bl-section', 'iws', `iws--${theme}`]}>
  <div class="bl-inner iws-inner">
    {heading && <h2 class="iws-heading">{heading}</h2>}
    <div class="iws-card">
      <div class="iws-media">
        {image
          ? <img src={image.src} alt={image.alt ?? ''} class="iws-img" loading="lazy" decoding="async" />
          : <div class="iws-placeholder" aria-hidden="true"></div>
        }
      </div>
      <div class="iws-stats" style={`--iws-cols: ${Math.min(stats.length, 4)}`}>
        {stats.map((s) => (
          <div class="iws-stat">
            <span class="iws-value">{s.value}</span>
            <span class="iws-label">{s.label}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
</section>

<style>
  .iws--light { background: var(--color-bg, #fff); color: var(--color-text, #0a0a0a); }
  .iws--dark  { background: #0a0a0a; color: #e8e8e8; }

  .iws-heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 2rem;
  }

  .iws-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
  }

  .iws-media { aspect-ratio: 16 / 9; }

  .iws-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .iws-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a2a4a, #2a3a6a);
  }

  .iws-stats {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(var(--iws-cols, 4), 1fr);
    background: rgba(10, 10, 10, .85);
    backdrop-filter: blur(8px);
    padding: 1.5rem;
    gap: 1rem;
  }

  .iws-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .3rem;
  }

  .iws-value {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 800;
    color: var(--color-accent, #6366f1);
    line-height: 1;
  }

  .iws-label {
    font-size: .8125rem;
    font-weight: 600;
    color: #d0d0d0;
    text-transform: uppercase;
    letter-spacing: .07em;
    line-height: 1.3;
  }

  @media (max-width: 600px) {
    .iws-stats {
      position: static;
      grid-template-columns: repeat(2, 1fr);
      background: #111;
    }

    .iws-stat { padding: .75rem; }
  }
</style>