---
import T from '../content/T.astro';
import { t } from '../../lib/content';
const stages = [1, 2, 3];
---
<section class="section">
  <div class="container">
    <div class="section-heading">
      <T tag="about.storylab.title" as="h2" />
      <T tag="about.storylab.body" as="p" />
    </div>
    <div class="tl">
      <T tag="about.timeline.label" as="h3" class="tl__label" />
      <T tag="about.timeline.open-text" as="p" />
      {stages.map((n) => (
        <details class="tl__stage">
          <summary>+ {t(`about.timeline.stage${n}.label`)}</summary>
          <T tag={`about.timeline.stage${n}.text`} as="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>