---
import { experiences, formation } from "../data/content";
---
<section class="section container" id="parcours">
  <div class="reveal" style="margin-bottom:40px;">
    <div class="eyebrow">03 / parcours</div>
    <h2 class="h2">Expériences</h2>
  </div>

  <div class="reveal timeline">
    <div class="timeline-line"></div>
    {experiences.map((e) => (
      <div class="exp">
        <div class="exp-logo"><img src={e.logo} alt={e.company} loading="lazy" /></div>
        <div class="exp-card">
          <div class="exp-head">
            <h3 class="exp-role">{e.role}</h3>
            <span class="exp-company">
              {e.current && <span class="badge-dot"></span>}
              {e.company}
            </span>
          </div>
          <div class="exp-period">{e.period} · {e.duration}</div>
          <p class="exp-desc">{e.desc}</p>
          {e.missions.length > 0 && (
            <ul class="exp-missions">
              {e.missions.map((m) => <li>{m}</li>)}
            </ul>
          )}
          {e.stack.length > 0 && (
            <div class="chips">
              {e.stack.map((s) => <span class="chip">{s}</span>)}
            </div>
          )}
        </div>
      </div>
    ))}
  </div>

  <div class="reveal label-mono" style="margin:14px 0 16px;">// formation</div>
  <div class="reveal formation-grid">
    {formation.map((f) => (
      <div class="formation-card">
        <div class="formation-period">{f.period}</div>
        <h4 class="formation-title">{f.title}</h4>
        <div class="formation-school">{f.school}</div>
        {f.desc && <p class="formation-desc">{f.desc}</p>}
      </div>
    ))}
  </div>
</section>
