IconTimeline icon

---
interface TimelineStep {
  icon: string;
  date: string;
  title: string;
  body: string;
  current?: boolean;
}

interface Props {
  steps?: TimelineStep[];
  title?: string;
}

const {
  steps = [
    { icon: '💬', date: 'Week 1', title: 'Intake & briefing', body: 'We begrijpen jouw merk, doelen en doelgroep.' },
    { icon: '🗺', date: 'Week 2', title: 'Strategie', body: 'Groeiplan op maat met KPIs en budget verdeling.' },
    { icon: '🎨', date: 'Week 3', title: 'Creatie', body: 'Campagne-creatives, landingspagina en teksten.' },
    { icon: '🚀', date: 'Week 4', title: 'Live', body: 'Campagnes gelanceerd, tracking ingericht.', current: true },
    { icon: '📈', date: 'Ongoing', title: 'Groei', body: 'Wekelijkse optimalisaties en maandrapportages.' },
  ],
  title = 'Van intake tot resultaat',
} = Astro.props;
---

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

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .itlc { padding: 2rem 0; }
  .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,0.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__line {
    display: block;
    width: 2px;
    flex: 1;
    background: #e8e8f8;
    margin: 4px 0;
  }
  .itlc__content { padding-bottom: 1.75rem; }
  .itlc__date {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent, #6366f1);
    margin: 0.5rem 0 0.2rem;
  }
  .itlc__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.3rem;
  }
  .itlc__body { font-size: 0.88rem; color: #777; line-height: 1.6; margin: 0; }
</style>