IconTechnology icon

---
/**
 * IconTechnology
 * Tech-stack blok: gecentreerde header (titel + subtitel) boven een grid van
 * tool-tegels met icoon, naam en categorie. Prop-driven.
 *
 * Props:
 * - title?: string
 * - subtitle?: string
 * - items: { icon?: string; name: string; category?: string }[]
 */
interface Item {
  icon?: string;
  name: string;
  category?: string;
}
interface Props {
  title?: string;
  subtitle?: string;
  items?: Item[];
}
const { title, subtitle, items = [] } = Astro.props;
---

<section class="bl-section itech">
  <div class="bl-inner itech-inner">
    {(title || subtitle) && (
      <div class="itech__header">
        {title && <h2 class="itech__title">{title}</h2>}
        {subtitle && <p class="itech__subtitle">{subtitle}</p>}
      </div>
    )}
    <div class="itech__grid">
      {items.map((it) => (
        <div class="itech__item">
          {it.icon && <span class="itech__icon" aria-hidden="true">{it.icon}</span>}
          <p class="itech__name">{it.name}</p>
          {it.category && <p class="itech__category">{it.category}</p>}
        </div>
      ))}
    </div>
  </div>
</section>

<style>
.itech__header{text-align:center;margin-bottom:2.5rem}
.itech__title{font-size:2rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .5rem}
.itech__subtitle{font-size:1.125rem;color:#52525b;margin:0}
.itech__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.itech__item{display:flex;flex-direction:column;align-items:center;padding:1.25rem 1rem;background:#fff;border:1px solid #eee;border-radius:10px;text-align:center;gap:.35rem;transition:border-color .2s,transform .2s}
.itech__item:hover{border-color:#6366f14d;transform:translateY(-2px)}
.itech__icon{font-size:1.75rem}
.itech__name{font-size:1rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0}
.itech__category{font-size:.78rem;color:#71717a;margin:0;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
@media (max-width:900px){.itech__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.itech__grid{grid-template-columns:repeat(2,1fr)}}
</style>