HeroBento Hero

---
/**
 * HeroBento
 * Bento-hero: een grote donkere hoofdtegel met eyebrow, kop, sub en CTA,
 * geflankeerd door kleine stat-tegels (waarde + label, of titel + body).
 *
 * Props: zie interface. Alle copy is prop-driven; cards is een array.
 */
interface BentoCard {
  icon?: string;
  value?: string;
  title: string;
  body?: string;
}
interface Props {
  eyebrow?: string;
  headline: string;
  sub?: string;
  cta?: { label: string; href: string };
  cards?: BentoCard[];
}

const {
  eyebrow,
  headline,
  sub,
  cta,
  cards = [],
} = Astro.props;
---

<section class:list={['bl-section', 'hbt']}>
  <div class="bl-inner hbt-grid">
    <div class="hbt-main">
      {eyebrow && <span class="hbt-eyebrow">{eyebrow}</span>}
      <h1 class="hbt-headline">{headline}</h1>
      {sub && <p class="hbt-sub">{sub}</p>}
      {cta && <a href={cta.href} class="hbt-cta">{cta.label}</a>}
    </div>
    {cards.map((card) => (
      <div class="hbt-card">
        {card.icon && <span class="hbt-card-icon">{card.icon}</span>}
        {card.value && <span class="hbt-card-value">{card.value}</span>}
        <span class="hbt-card-title">{card.title}</span>
        {card.body && <span class="hbt-card-body">{card.body}</span>}
      </div>
    ))}
  </div>
</section>

<style>
.hbt{background:#f1f5f9}
.hbt-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:1rem}
.hbt-main{grid-column:span 2;background:#0f172a;border-radius:1.25rem;padding:3rem;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;min-height:320px}
.hbt-eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#a5b4fc;margin-bottom:1rem}
.hbt-headline{font-size:clamp(2rem,3.5vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 1rem}
.hbt-sub{font-size:1rem;color:#e2e8f0;line-height:1.6;margin:0 0 2rem;max-width:400px}
.hbt-cta{display:inline-flex;align-items:center;padding:.75rem 1.5rem;background:var(--color-accent,#6366f1);color:#fff;border-radius:.5rem;font-weight:600;font-size:.9375rem;text-decoration:none;width:fit-content}
.hbt-cta:hover{opacity:.9}
.hbt-card{background:#fff;border-radius:1.25rem;padding:1.5rem;display:flex;flex-direction:column;gap:.5rem}
.hbt-card-icon{font-size:1.5rem;color:var(--color-accent,#6366f1)}
.hbt-card-value{font-size:2rem;font-weight:800;color:#0f172a;letter-spacing:-.03em}
.hbt-card-title{font-size:.9375rem;font-weight:600;color:#334155}
.hbt-card-body{font-size:.875rem;color:#64748b;line-height:1.5}
@media (max-width:768px){
  .hbt-grid{grid-template-columns:1fr}
  .hbt-main{grid-column:span 1}
}
</style>