IconBento icon

---
interface BentoCard {
  icon?: string;
  title: string;
  desc: string;
  wide?: boolean;
  dark?: boolean;
  accent?: boolean;
  delay?: number;
}

interface Props {
  eyebrow?: string;
  headline?: string;
  cards?: BentoCard[];
}

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

<section class:list={['bl-section', 'ib__section']}>
  <div class="bl-inner">
    {(eyebrow || headline) && (
      <div class="ib__header">
        {eyebrow && <p class="ib__eyebrow">{eyebrow}</p>}
        {headline && <h2 class="ib__headline">{headline}</h2>}
      </div>
    )}
    <div class="ib__grid">
      {cards.map((card, i) => (
        <div
          class:list={[
            'ib__card',
            card.wide && 'ib__card--wide',
            card.dark && 'ib__card--dark',
            card.accent && 'ib__card--accent',
          ]}
          style={`--delay: ${card.delay ?? i * 90}ms`}
        >
          {card.icon && (
            <span class="ib__icon-wrap" aria-hidden="true">
              <span class="ib__icon-char">{card.icon}</span>
            </span>
          )}
          <p class="ib__title">{card.title}</p>
          <p class="ib__desc">{card.desc}</p>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .ib__section { background: var(--color-bg, #fff); }
  .ib__header { text-align: center; margin-bottom: 2.5rem; }
  .ib__eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent, #6366f1);
    margin: 0 0 .75rem;
  }
  .ib__headline {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0;
    line-height: 1.15;
  }
  .ib__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: start;
  }
  @media (max-width: 768px) {
    .ib__grid { grid-template-columns: 1fr; }
    .ib__card--wide { grid-column: 1; }
  }
  @media (min-width: 769px) and (max-width: 1023px) {
    .ib__grid { grid-template-columns: 1fr 1fr; }
  }
  .ib__card {
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(0,0,0,.08);
    background: var(--color-bg, #fff);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    transition: box-shadow .22s ease;
  }
  .ib__card:hover { box-shadow: 0 6px 20px #00000012; }
  .ib__card--wide { grid-column: span 2; }
  .ib__card--accent { background: #6366f10f; border-color: #6366f126; }
  .ib__card--dark { background: #0a0a0a; border-color: transparent; }
  .ib__card--dark .ib__title { color: #e8e8e8; }
  .ib__card--dark .ib__desc { color: #aaa; }
  .ib__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--color-accent, #6366f1);
  }
  .ib__card--accent .ib__icon-wrap { color: var(--color-accent, #6366f1); }
  .ib__icon-char { font-size: 2rem; line-height: 1; }
  .ib__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0;
    line-height: 1.3;
  }
  .ib__desc {
    font-size: 1rem;
    color: var(--color-muted, #6b7280);
    margin: 0;
    line-height: 1.65;
  }
</style>