IconCTA icon

---
interface IconCTAItem {
  icon: string;
  label: string;
}

interface Props {
  icons?: IconCTAItem[];
  title?: string;
  subtitle?: string;
  cta?: string;
  ctaHref?: string;
  ctaSecondary?: string;
  ctaSecondaryHref?: string;
}

const {
  icons = [
    { icon: '🎯', label: 'Ads' },
    { icon: '✏️', label: 'Design' },
    { icon: '🔍', label: 'SEO' },
    { icon: '📱', label: 'Social' },
    { icon: '🌐', label: 'Web' },
  ],
  title = 'Alles voor jouw groei in één team',
  subtitle = 'Geen losse leveranciers. Geen miscommunicatie. Één bureau dat het hele plaatje ziet.',
  cta = 'Start jouw groei',
  ctaHref = '#',
  ctaSecondary = 'Bekijk cases',
  ctaSecondaryHref = '#',
} = Astro.props;
---

<section class="ictac">
  <div class="ictac__icons">
    {icons.map((item) => (
      <div class="ictac__icon-item" aria-hidden="true">
        <span class="ictac__icon">{item.icon}</span>
        <span class="ictac__icon-label">{item.label}</span>
      </div>
    ))}
  </div>
  <h2 class="ictac__title">{title}</h2>
  <p class="ictac__subtitle">{subtitle}</p>
  <div class="ictac__actions">
    {cta && <a class="ictac__cta" href={ctaHref}>{cta}</a>}
    {ctaSecondary && <a class="ictac__secondary" href={ctaSecondaryHref}>{ctaSecondary}</a>}
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .ictac {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 700px;
    margin: 0 auto;
  }
  .ictac__icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
  }
  .ictac__icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }
  .ictac__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #f0f0ff;
    border-radius: 14px;
    font-size: 1.5rem;
    border: 1px solid rgba(99,102,241,0.15);
  }
  .ictac__icon-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .ictac__title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1rem;
    line-height: 1.2;
  }
  .ictac__subtitle {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.65;
    margin: 0 0 2.5rem;
  }
  .ictac__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }
  .ictac__cta {
    display: inline-block;
    padding: 0.9rem 2.25rem;
    background: var(--color-accent, #6366f1);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    transition: opacity 0.2s, transform 0.2s;
  }
  .ictac__cta:hover { opacity: 0.9; transform: translateY(-2px); }
  .ictac__secondary {
    display: inline-block;
    padding: 0.9rem 2.25rem;
    background: transparent;
    color: var(--color-primary, #0a0a0a);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid #ddd;
    transition: border-color 0.2s;
  }
  .ictac__secondary:hover { border-color: var(--color-accent, #6366f1); }
</style>