IconServices icon

---
interface Service {
  emoji: string;
  title: string;
  description: string;
  price?: string;
}

interface Props {
  services?: Service[];
  title?: string;
  subtitle?: string;
}

const {
  services = [
    { emoji: '🎯', title: 'Google Ads', description: 'Search, Shopping en Performance Max campagnes.', price: 'Vanaf €750/maand' },
    { emoji: '📘', title: 'Meta Ads', description: 'Facebook en Instagram campagnes met bewezen creatives.', price: 'Vanaf €750/maand' },
    { emoji: '✏️', title: 'Brand Identity', description: 'Logo, huisstijl en complete merkgids.', price: 'Vanaf €2.500' },
    { emoji: '🌐', title: 'Website', description: 'Snel, mooi en gebouwd voor conversie.', price: 'Vanaf €3.500' },
    { emoji: '🔍', title: 'SEO', description: 'Organische groei met content en technische optimalisatie.', price: 'Vanaf €850/maand' },
    { emoji: '📱', title: 'Social Media', description: 'Contentkalender, creatives en community management.', price: 'Vanaf €650/maand' },
  ],
  title = 'Onze diensten',
  subtitle = 'Alles wat een groeiend merk nodig heeft, onder één dak.',
} = Astro.props;
---

<section class="isv">
  <div class="isv__header">
    {title && <h2 class="isv__title">{title}</h2>}
    {subtitle && <p class="isv__subtitle">{subtitle}</p>}
  </div>
  <div class="isv__grid">
    {services.map((s) => (
      <div class="isv__item">
        <span class="isv__emoji" aria-hidden="true">{s.emoji}</span>
        <div class="isv__content">
          <h3 class="isv__name">{s.title}</h3>
          <p class="isv__desc">{s.description}</p>
          {s.price && <p class="isv__price">{s.price}</p>}
        </div>
      </div>
    ))}
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .isv { padding: 3rem 0; }
  .isv__header { text-align: center; margin-bottom: 3rem; }
  .isv__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.5rem;
  }
  .isv__subtitle { font-size: 1.05rem; color: #666; margin: 0; }
  .isv__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .isv__item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    align-items: flex-start;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .isv__item:hover {
    border-color: rgba(99,102,241,0.3);
    box-shadow: 0 4px 16px rgba(99,102,241,0.08);
  }
  .isv__emoji { font-size: 1.75rem; flex-shrink: 0; margin-top: 0.1rem; }
  .isv__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.35rem;
  }
  .isv__desc { font-size: 0.875rem; color: #777; line-height: 1.55; margin: 0 0 0.5rem; }
  .isv__price { font-size: 0.8rem; font-weight: 700; color: var(--color-accent, #6366f1); margin: 0; }
  @media (max-width: 768px) { .isv__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .isv__grid { grid-template-columns: 1fr; } }
</style>