IconServices icon

---
/**
 * IconServices
 * Sectie-header + grid van dienst-kaarten. Elke kaart: icoon, naam, beschrijving
 * en optionele prijsregel.
 *
 * Props:
 * - title?: string
 * - subtitle?: string
 * - columns?: 2 | 3
 * - items?: Array<{ icon?: string; name: string; desc: string; price?: string }>
 */
interface Props {
  title?: string;
  subtitle?: string;
  columns?: 2 | 3;
  items?: { icon?: string; name: string; desc: string; price?: string }[];
}

const {
  title = 'Onze diensten',
  subtitle = 'Alles wat een groeiend merk nodig heeft, onder één dak.',
  columns = 3,
  items = [
    { icon: '→', name: 'Search advertising', desc: 'Search-, shopping- en performance-campagnes.', price: 'Vanaf €750/maand' },
    { icon: '→', name: 'Social advertising', desc: 'Sociale campagnes met bewezen creatives.', price: 'Vanaf €750/maand' },
    { icon: '→', name: 'Brand identity', desc: 'Logo, huisstijl en complete merkgids.', price: 'Vanaf €2.500' },
    { icon: '→', name: 'Website', desc: 'Snel, mooi en gebouwd voor conversie.', price: 'Vanaf €3.500' },
    { icon: '→', name: 'SEO', desc: 'Organische groei met content en techniek.', price: 'Vanaf €850/maand' },
    { icon: '→', name: 'Social media', desc: 'Contentkalender, creatives en community.', price: 'Vanaf €650/maand' },
  ],
} = Astro.props;
---

<section class="bl-section isv">
  <div class="bl-inner isv__inner">
    {(title || subtitle) && (
      <div class="isv__header">
        {title && <h2 class="isv__title">{title}</h2>}
        {subtitle && <p class="isv__subtitle">{subtitle}</p>}
      </div>
    )}
    <div class={`isv__grid isv__grid--cols-${columns}`}>
      {items.map(item => (
        <div class="isv__item">
          {item.icon && <span class="isv__emoji" aria-hidden="true">{item.icon}</span>}
          <div class="isv__content">
            <h3 class="isv__name">{item.name}</h3>
            <p class="isv__desc">{item.desc}</p>
            {item.price && <p class="isv__price">{item.price}</p>}
          </div>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
.isv__header{margin-bottom:3rem}
.isv__title{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .5rem}
.isv__subtitle{font-size:1.05rem;color:var(--color-muted, #555);margin:0}
.isv__grid{display:grid;gap:1.5rem}
.isv__grid--cols-3{grid-template-columns:repeat(3,1fr)}
.isv__grid--cols-2{grid-template-columns:repeat(2,1fr)}
.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 .2s,box-shadow .2s}
.isv__item:hover{border-color:#6366f14d;box-shadow:0 4px 16px #6366f114}
.isv__emoji{font-size:1.75rem;flex-shrink:0;margin-top:.1rem}
.isv__name{font-size:1.0625rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .35rem}
.isv__desc{font-size:1rem;color:var(--color-muted, #555);line-height:1.55;margin:0 0 .5rem}
.isv__price{font-size:.9375rem;font-weight:700;color:var(--color-accent, #6366f1);margin:0}
@media (max-width: 900px){.isv__grid--cols-3{grid-template-columns:1fr 1fr}}
@media (max-width: 600px){.isv__grid{grid-template-columns:1fr}}
</style>