IconCallout icon

---
interface Props {
  icon?: string;
  title?: string;
  body?: string;
  cta?: string;
  ctaHref?: string;
  variant?: 'default' | 'accent' | 'dark';
}

const {
  icon = '🚀',
  title = 'Klaar voor serieuze groei?',
  body = 'Plan een gratis strategiegesprek van 45 minuten. Geen verplichtingen, wel concrete inzichten voor jouw merk.',
  cta = 'Gesprek inplannen',
  ctaHref = '#',
  variant = 'accent',
} = Astro.props;
---

<div class:list={['icall', `icall--${variant}`]}>
  <span class="icall__icon" aria-hidden="true">{icon}</span>
  <div class="icall__content">
    <h3 class="icall__title">{title}</h3>
    <p class="icall__body">{body}</p>
    {cta && (
      <a class="icall__cta" href={ctaHref}>{cta}</a>
    )}
  </div>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .icall {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 2rem 2.5rem;
    border-radius: 14px;
    border-left: 4px solid;
  }
  .icall--default { background: #f8f8f8; border-color: #ddd; }
  .icall--accent { background: rgba(99,102,241,0.06); border-color: var(--color-accent, #6366f1); }
  .icall--dark { background: var(--color-primary, #0a0a0a); border-color: var(--color-accent, #6366f1); }
  .icall__icon { font-size: 2.5rem; flex-shrink: 0; margin-top: 0.2rem; }
  .icall__content { flex: 1; }
  .icall__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
  }
  .icall--default .icall__title,
  .icall--accent .icall__title { color: var(--color-primary, #0a0a0a); }
  .icall--dark .icall__title { color: #fff; }
  .icall__body {
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0 0 1.25rem;
  }
  .icall--default .icall__body,
  .icall--accent .icall__body { color: #666; }
  .icall--dark .icall__body { color: rgba(255,255,255,0.75); }
  .icall__cta {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    background: var(--color-accent, #6366f1);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: opacity 0.2s;
  }
  .icall__cta:hover { opacity: 0.85; }
</style>