const Echecs = () => {
  const items = [
    { t: "Notion avec 47 templates que tu n'ouvres plus", tag: "abandonné en 3 sem." },
    { t: "Todoist, Trello, ClickUp, Motion — tous désinstallés", tag: "abandonné en 2 mois" },
    { t: "Pomodoro qui marche 4 jours puis tu lâches", tag: "abandonné en 4 jours" },
    { t: "Bullet journal cramé au bout d'une semaine", tag: "abandonné en 9 jours" },
    { t: "15 formations productivité achetées, 2 finies", tag: "abandonné en 6 mois" },
    { t: "Claude ouvert en permanence, mais tu tapes toujours la même chose", tag: "frustré depuis 4 mois" },
  ];

  return (
    <section className="echecs" data-screen-label="02 Échecs">
      <div className="shell">
        <div className="section-label"><span className="num">§ 01</span><span>le constat</span></div>

        <div className="echecs-head reveal">
          <h2 className="display">
            Tu as déjà<br/>
            essayé <em>tout ça.</em>
          </h2>
          <p className="echecs-sub">
            <span className="hand">et ton cerveau</span><br/>
            les a recrachés un par un, en moins de 3 semaines.
            Pas parce que tu manques de volonté — parce que l'outil n'est pas fait pour toi.
          </p>
        </div>

        <ul className="echecs-list">
          {items.map((x, i) => (
            <li className="echec reveal" key={i} style={{transitionDelay: `${i*60}ms`}}>
              <div className="echec-num">{String(i+1).padStart(2,'0')}</div>
              <div className="echec-text crossed">{x.t}</div>
              <div className="echec-tag">{x.tag}</div>
            </li>
          ))}
        </ul>

        <div className="diagnostic reveal">
          <div className="diagnostic-stamp">DIAGNOSTIC<br/>POSÉ ✦</div>
          <p>
            Le problème n'est <em>pas ton cerveau.</em><br/>
            Le problème est que tes outils ont été pensés pour cerveaux <em>neurotypiques.</em>
          </p>
        </div>
      </div>
    </section>
  );
};

window.Echecs = Echecs;