IconCallout icon

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

const {
  icon,
  title,
  body,
  cta,
  variant = 'accent',
} = Astro.props;
---

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

<style>
  .icall-section { background: var(--color-bg, #fff); }
  .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: #6366f10f; 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: .2rem; }
  .icall__content { flex: 1; }
  .icall__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 .5rem;
  }
  .icall--default .icall__title,
  .icall--accent .icall__title { color: var(--color-primary, #0a0a0a); }
  .icall--dark .icall__title { color: #e8e8e8; }
  .icall__body {
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 1.25rem;
  }
  .icall--default .icall__body,
  .icall--accent .icall__body { color: #555; }
  .icall--dark .icall__body { color: #aaa; }
  .icall__cta {
    display: inline-block;
    padding: .65rem 1.5rem;
    background: var(--color-accent, #6366f1);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    transition: opacity .2s;
  }
  .icall__cta:hover { opacity: .85; }
</style>