IconGradient icon

---
type GradientVariant = 0 | 1 | 2 | 3;

interface GradientCard {
  icon?: string;
  title: string;
  desc?: string;
  variant?: GradientVariant;
}

interface Props {
  cards?: GradientCard[];
}

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

<section class:list={['bl-section', 'igrad-section']}>
  <div class="bl-inner">
    <div class="igrad-grid">
      {cards.map((card, i) => (
        <div class:list={['igrad-card', `igrad-card--${card.variant ?? (i % 4)}`]}>
          {card.icon && (
            <div class="igrad-icon-box">
              <span class="igrad-icon" aria-hidden="true">{card.icon}</span>
            </div>
          )}
          <h3 class="igrad-title">{card.title}</h3>
          {card.desc && <p class="igrad-desc">{card.desc}</p>}
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .igrad-section { background: var(--color-bg, #fff); }
  .igrad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
  }
  .igrad-card {
    padding: 28px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .igrad-card--0 { background: linear-gradient(135deg,#667eea20,#764ba220); border: 1px solid #6366f130; }
  .igrad-card--1 { background: linear-gradient(135deg,#f09b2820,#f72d7220); border: 1px solid #ec489930; }
  .igrad-card--2 { background: linear-gradient(135deg,#11998e20,#38ef7d20); border: 1px solid #10b98130; }
  .igrad-card--3 { background: linear-gradient(135deg,#4facfe20,#00f2fe20); border: 1px solid #3b82f630; }
  .igrad-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px #00000014;
  }
  .igrad-icon { font-size: 1.5rem; }
  .igrad-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--color-primary, #0a0a0a); }
  .igrad-desc { margin: 0; font-size: 1rem; line-height: 1.6; color: #374151; }
</style>