CalloutBox Sections

---
/**
 * CalloutBox
 * Opvallend kader/highlight box. Ideaal voor belangrijke aankondigingen,
 * tips, waarschuwingen of een sterke USP-statement.
 */
interface Props {
  icon?: string;
  headline: string;
  body: string;
  cta?: { label: string; href: string };
  variant?: 'info' | 'success' | 'warning' | 'brand' | 'dark';
}
const { icon, headline, body, cta, variant = 'brand' } = Astro.props;
const colors: Record<string, string> = {
  info:    '#eff6ff::#2563eb::#dbeafe',
  success: '#f0fdf4::#16a34a::#dcfce7',
  warning: '#fffbeb::#d97706::#fef3c7',
  brand:   '#f5f3ff::#6366f1::#ede9fe',
  dark:    '#0f172a::#6366f1::#1e293b',
};
const [bg, accent, border] = (colors[variant] ?? colors.brand).split('::');
---
<section class="cb">
  <div class="cb-inner">
    <div class="cb-box" style={`background:${bg};border-color:${border};`}>
      <div class="cb-top">
        {icon && <span class="cb-icon">{icon}</span>}
        <div>
          <h2 class="cb-headline" style={`color:${variant === 'dark' ? '#fff' : '#0a0a0a'}`}>{headline}</h2>
          <p class="cb-body" style={`color:${variant === 'dark' ? 'rgba(255,255,255,0.65)' : '#4b5563'}`}>{body}</p>
        </div>
      </div>
      {cta && <a href={cta.href} class="cb-cta" style={`background:${accent}`}>{cta.label} →</a>}
    </div>
  </div>
</section>
<style>
  .cb { padding: 3rem 2rem; }
  .cb-inner { max-width: 900px; margin: 0 auto; }
  .cb-box { border-radius: 1rem; border: 1.5px solid; padding: 2.5rem; }
  .cb-top { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 1.5rem; }
  .cb-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
  .cb-headline { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
  .cb-body { font-size: 1rem; line-height: 1.65; margin: 0; }
  .cb-cta { display: inline-flex; align-items: center; padding: 0.75rem 1.5rem; color: #fff; font-weight: 600; font-size: 0.9375rem; border-radius: 0.5rem; text-decoration: none; transition: opacity 0.2s; }
  .cb-cta:hover { opacity: 0.88; }
</style>