---
const openText = `Il percorso di crescita di InsanityLab si è sviluppato attraverso tappe precise e coerenti con la visione iniziale. Nato nel 2021 con un piccolo team e grandi ambizioni, il progetto ha conosciuto una forte evoluzione nel 2024, anno in cui il servizio si è ampliato attraverso nuovi format come gli small group e una sempre maggiore specializzazione nella profilazione fisica del cliente, grazie a sistemi avanzati di valutazione e monitoraggio. Parallelamente, anche l'area dedicata alla riabilitazione e all'esercizio preventivo si è consolidata, ponendo le basi per un importante salto di qualità.`;
const stages = [
  { label: 'INSANITYLAB 2025', text: 'Contenuto in arrivo: il cliente fornirà il testo di questa tappa.' },
  { label: 'INSANITYLAB 2026', text: 'Contenuto in arrivo: il cliente fornirà il testo di questa tappa.' },
  { label: 'INSANITYLAB OGGI', text: 'Contenuto in arrivo: il cliente fornirà il testo di questa tappa.' },
];
---
<section class="section">
  <div class="container">
    <div class="section-heading">
      <h2>Storylab</h2>
      <p>Scopri la nostra storia: come nasce InsanityLab, perché abbiamo deciso di creare qualcosa di diverso e chi sono i visionari che hanno trasformato questa idea in un nuovo modo di vivere benessere, movimento e salute.</p>
    </div>
    <div class="tl">
      <h3 class="tl__label">INSANITYLAB 2021-2024</h3>
      <p>{openText}</p>
      {stages.map((s) => (
        <details class="tl__stage">
          <summary>+ {s.label}</summary>
          <p>{s.text}</p>
        </details>
      ))}
    </div>
  </div>
</section>

<style>
  .tl { max-width: 720px; margin-inline: auto; }
  .tl__label { text-transform: uppercase; letter-spacing: .16em; font-size: .9rem; }
  .tl__stage { border-top: 1px solid #e4ded6; padding-block: 14px; }
  .tl__stage summary { cursor: pointer; font-family: var(--font-heading); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-heading); list-style: none; }
  .tl__stage summary::-webkit-details-marker { display: none; }
</style>
