IconTimeline icon

---
/**
 * IconTimeline
 * Verticale tijdlijn: titel boven een lijst stappen, elk met icoon-medaillon,
 * verbindingslijn, datum/fase-label, naam en omschrijving. Prop-driven.
 *
 * Props:
 * - title?: string
 * - steps: { icon?: string; date?: string; name: string; body?: string; current?: boolean }[]
 */
interface Step {
  icon?: string;
  date?: string;
  name: string;
  body?: string;
  current?: boolean;
}
interface Props {
  title?: string;
  steps?: Step[];
}
const { title, steps = [] } = Astro.props;
---

<section class="bl-section itlc">
  <div class="bl-inner itlc-inner">
    {title && <h2 class="itlc__title">{title}</h2>}
    <div class="itlc__list">
      {steps.map((s, i) => (
        <div class:list={['itlc__item', s.current && 'itlc__item--current']}>
          <div class="itlc__icon-col">
            <div class="itlc__icon-wrap">
              {s.icon && <span class="itlc__icon" aria-hidden="true">{s.icon}</span>}
            </div>
            {i < steps.length - 1 && <span class="itlc__line" aria-hidden="true"></span>}
          </div>
          <div class="itlc__content">
            {s.date && <p class="itlc__date">{s.date}</p>}
            <h3 class="itlc__name">{s.name}</h3>
            {s.body && <p class="itlc__body">{s.body}</p>}
          </div>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
.itlc__title{font-size:2rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 2.5rem}
.itlc__list{display:flex;flex-direction:column;gap:0}
.itlc__item{display:grid;grid-template-columns:60px 1fr;gap:1.25rem;align-items:stretch}
.itlc__icon-col{display:flex;flex-direction:column;align-items:center}
.itlc__icon-wrap{width:48px;height:48px;border-radius:50%;background:#f0f0ff;border:2px solid rgba(99,102,241,.2);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
.itlc__item--current .itlc__icon-wrap{background:var(--color-accent, #6366f1);border-color:var(--color-accent, #6366f1)}
.itlc__item--current .itlc__icon{color:#fff}
.itlc__line{display:block;width:2px;flex:1;background:#e8e8f8;margin:4px 0}
.itlc__content{padding-bottom:1.75rem}
.itlc__date{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent, #6366f1);margin:.5rem 0 .2rem}
.itlc__name{font-size:1.05rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .3rem}
.itlc__body{font-size:.95rem;color:#52525b;line-height:1.6;margin:0}
</style>