IconCta icon

---
interface IconItem {
  icon: string;
  label: string;
}

interface Props {
  icons?: IconItem[];
  title?: string;
  subtitle?: string;
  cta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
}

const {
  icons = [],
  title,
  subtitle,
  cta,
  secondaryCta,
} = Astro.props;
---

<section class:list={['bl-section', 'ictac-section']}>
  <div class="bl-inner">
    <div class="ictac">
      {icons.length > 0 && (
        <div class="ictac__icons" aria-hidden="true">
          {icons.map(item => (
            <div class="ictac__icon-item">
              <span class="ictac__icon">{item.icon}</span>
              <span class="ictac__icon-label">{item.label}</span>
            </div>
          ))}
        </div>
      )}
      {title && <h2 class="ictac__title">{title}</h2>}
      {subtitle && <p class="ictac__subtitle">{subtitle}</p>}
      {(cta || secondaryCta) && (
        <div class="ictac__actions">
          {cta && <a class="ictac__cta" href={cta.href}>{cta.label}</a>}
          {secondaryCta && <a class="ictac__secondary" href={secondaryCta.href}>{secondaryCta.label}</a>}
        </div>
      )}
    </div>
  </div>
</section>

<style>
  .ictac-section { background: var(--color-bg, #fff); }
  .ictac { text-align: center; }
  .ictac__icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
  }
  .ictac__icon-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
  .ictac__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #f0f0ff;
    border-radius: 14px;
    font-size: 1.5rem;
    border: 1px solid rgba(99,102,241,.15);
  }
  .ictac__icon-label {
    font-size: .75rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .ictac__title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1rem;
    line-height: 1.2;
  }
  .ictac__subtitle {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.65;
    margin: 0 0 2.5rem;
  }
  .ictac__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
  .ictac__cta {
    display: inline-block;
    padding: .9rem 2.25rem;
    background: var(--color-accent, #6366f1);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    transition: opacity .2s, transform .2s;
  }
  .ictac__cta:hover { opacity: .9; transform: translateY(-2px); }
  .ictac__secondary {
    display: inline-block;
    padding: .9rem 2.25rem;
    background: transparent;
    color: var(--color-primary, #0a0a0a);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid #ddd;
    transition: border-color .2s;
  }
  .ictac__secondary:hover { border-color: var(--color-accent, #6366f1); }
</style>