IconEmoji icon

---
interface EmojiItem {
  emoji: string;
  title: string;
  body?: string;
}

interface Props {
  items?: EmojiItem[];
  title?: string;
  subtitle?: string;
  layout?: 'grid' | 'list';
}

const {
  items = [
    { emoji: '🚀', title: 'Snel van start', body: 'Live binnen 5 werkdagen, gegarandeerd.' },
    { emoji: '🎯', title: 'Doel voor ogen', body: 'Elk project begint met heldere KPIs.' },
    { emoji: '💡', title: 'Creatief en slim', body: 'Frisse ideeën met een solide strategie.' },
    { emoji: '🤝', title: 'Echte samenwerking', body: 'Jij bent de baas, wij zijn de experts.' },
    { emoji: '📈', title: 'Groei centraal', body: 'Alles draait om meetbaar resultaat.' },
    { emoji: '🔒', title: 'Volledig transparant', body: 'Realtime inzicht in alles wat we doen.' },
  ],
  title = 'De BLURR belofte',
  subtitle = 'Dit is waar wij elke dag voor staan.',
  layout = 'grid',
} = Astro.props;
---

<section class="iem">
  <div class="iem__header">
    {title && <h2 class="iem__title">{title}</h2>}
    {subtitle && <p class="iem__subtitle">{subtitle}</p>}
  </div>
  <div class:list={['iem__items', `iem__items--${layout}`]}>
    {items.map((item) => (
      <div class="iem__item">
        <span class="iem__emoji" role="img" aria-label={item.title}>{item.emoji}</span>
        <div class="iem__text">
          <p class="iem__name">{item.title}</p>
          {item.body && <p class="iem__body">{item.body}</p>}
        </div>
      </div>
    ))}
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .iem { padding: 3rem 0; }
  .iem__header { text-align: center; margin-bottom: 3rem; }
  .iem__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.5rem;
  }
  .iem__subtitle { font-size: 1rem; color: #777; margin: 0; }
  .iem__items--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  .iem__items--list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .iem__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }
  .iem__items--grid .iem__item {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
  }
  .iem__emoji { font-size: 2rem; flex-shrink: 0; }
  .iem__items--list .iem__emoji { font-size: 1.5rem; margin-top: 0.1rem; }
  .iem__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.3rem;
  }
  .iem__body {
    font-size: 0.875rem;
    color: #777;
    line-height: 1.55;
    margin: 0;
  }
  @media (max-width: 768px) { .iem__items--grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .iem__items--grid { grid-template-columns: 1fr; } }
</style>