function Timeline() {
  const events = [
    { year: '2001', color: '#537EBE', title: 'Nasce NEXT',
      copy: 'Consulenza sistemistica per i grandi player bancari e assicurativi. ICT come mestiere artigiano.' },
    { year: '2007', color: '#E3AC21', title: 'Partnership TeamSystem',
      copy: 'Entriamo nel mondo legale con LEXTEAM e Legal System. Inizia il nostro percorso con Avvocati e Studi.' },
    { year: '2013', color: '#D3482F', title: 'Formazione con gli Ordini',
      copy: 'Prima linea con gli Avvocati: 35+ corsi PCT con gli Ordini di Piemonte e Liguria.' },
    { year: '2017', color: '#009458', title: '1\u00B0 Partner TeamSystem Legal',
      copy: 'Premiati per due anni consecutivi come miglior Software Partner su 70+ partner in Italia.' },
  ];
  return (
    <section id="timeline" className="timeline">
      <div className="container">
        <div className="section-head">
          <h2>La nostra storia, in quattro tempi.</h2>
          <span className="hash"># dal 2001</span>
        </div>
        <div className="timeline-track">
          {events.map((e, i) => (
            <div key={i} className="tl-event">
              <div className="tl-year" style={{color: e.color}}>{e.year}</div>
              <div className="tl-dot" style={{background: e.color}}></div>
              <div className="tl-line"></div>
              <h3>{e.title}</h3>
              <p>{e.copy}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Timeline = Timeline;