ImageTimeline image

---
interface TimelineItem {
  src?: string;
  alt: string;
  year: string;
  title: string;
  body: string;
}

interface Props {
  items?: TimelineItem[];
  title?: string;
}

const {
  items = [
    { alt: '2016', year: '2016', title: 'Oprichting BLURR', body: 'Gestart als tweemansbureau vanuit een zolderkamer in Amsterdam.' },
    { alt: '2018', year: '2018', title: 'Eerste grote klant', body: 'Samenwerking met nationaal retailmerk levert eerste €1M campagnebudget op.' },
    { alt: '2020', year: '2020', title: 'Team van 12', body: 'Uitbreiding naar full-service bureau met eigen developers en designers.' },
    { alt: '2023', year: '2023', title: 'Bureau van het jaar', body: 'Genomineerd door Adformatie voor beste digital bureau Nederland.' },
  ],
  title = 'Onze geschiedenis',
} = Astro.props;
---

<section class="itl">
  {title && <h2 class="itl__title">{title}</h2>}
  <div class="itl__list">
    {items.map((item, i) => (
      <div class:list={['itl__item', i % 2 === 1 && 'itl__item--right']}>
        <div class="itl__media">
          {item.src ? (
            <img class="itl__img" src={item.src} alt={item.alt} />
          ) : (
            <div class="itl__placeholder" aria-label={item.alt}></div>
          )}
        </div>
        <div class="itl__dot" aria-hidden="true"></div>
        <div class="itl__content">
          <span class="itl__year">{item.year}</span>
          <h3 class="itl__name">{item.title}</h3>
          <p class="itl__body">{item.body}</p>
        </div>
      </div>
    ))}
    <div class="itl__line" aria-hidden="true"></div>
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .itl { padding: 3rem 0; }
  .itl__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    text-align: center;
    margin: 0 0 3rem;
  }
  .itl__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  .itl__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: #e0e0e0;
    z-index: 0;
  }
  .itl__item {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
  }
  .itl__item--right .itl__media { order: 3; }
  .itl__item--right .itl__content { order: 1; text-align: right; }
  .itl__media {
    aspect-ratio: 4/3;
    border-radius: 8px;
    overflow: hidden;
  }
  .itl__img { width: 100%; height: 100%; object-fit: cover; }
  .itl__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e0e0f0 0%, #c8c8e8 100%);
  }
  .itl__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent, #6366f1);
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
    flex-shrink: 0;
  }
  .itl__content { padding: 0.5rem; }
  .itl__year {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent, #6366f1);
    display: block;
    margin-bottom: 0.25rem;
  }
  .itl__name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 0.5rem;
  }
  .itl__body {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
  }
  @media (max-width: 768px) {
    .itl__line { left: 1.5rem; }
    .itl__item, .itl__item--right {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      padding-left: 3.5rem;
    }
    .itl__item--right .itl__media { order: 0; }
    .itl__item--right .itl__content { order: 2; text-align: left; }
    .itl__dot { position: absolute; left: 1rem; }
    .itl__media { max-height: 200px; }
  }
</style>