const AvantApres = () => {
  return (
    <section className="avap" data-screen-label="05 Avant/Après">
      <div className="shell">
        <div className="section-label"><span className="num">§ 04</span><span>avant / après</span></div>

        <h2 className="reveal">
          <em>Lundi 8h47</em> vs. <span className="lime">Lundi 8h49</span>.<br/>
          Mêmes 15 tâches. Pas la même vie.
        </h2>

        <div className="avap-grid">
          <div className="todo reveal">
            <div className="todo-header">
              <div className="todo-title">Ma to-do — chaos</div>
              <div className="todo-date">lun · 8:47</div>
            </div>
            <div className="todo-item">
              <div className="todo-check"/><span>Refaire le pitch investisseur</span>
              <span className="todo-tag">3 sem.</span>
            </div>
            <div className="todo-item">
              <div className="todo-check"/><span>Relancer les 4 factures en retard</span>
              <span className="todo-tag">10 j.</span>
            </div>
            <div className="todo-item">
              <div className="todo-check"/><span>Écrire 5 posts TikTok de la semaine</span>
              <span className="todo-tag">URGENT</span>
            </div>
            <div className="todo-item">
              <div className="todo-check"/><span className="todo-text scratched">idée nouvelle plateforme ??</span>
              <span className="todo-tag">8 j.</span>
            </div>
            <div className="todo-item">
              <div className="todo-check"/><span>Reporting Q1 pour l'asso</span>
              <span className="todo-tag">2 sem.</span>
            </div>
            <div className="todo-item">
              <div className="todo-check"/><span>Répondre à Paul (encore)</span>
              <span className="todo-tag">!!</span>
            </div>
            <div className="todo-item">
              <div className="todo-check"/><span>Mails clients — 47 non lus</span>
              <span className="todo-tag">fuite</span>
            </div>
            <div className="todo-scribble" style={{bottom:14, right:28}}>help 😭</div>
          </div>

          <div className="avap-arrow">→</div>

          <div className="todo after reveal reveal-delay-2">
            <div className="todo-header">
              <div className="todo-title">Ma to-do — pilotée IA</div>
              <div className="todo-date">lun · 8:49</div>
            </div>
            <div className="todo-item">
              <div className="todo-check done-lime done"/><span>Pitch investisseur <em>(prompt #12)</em></span>
              <span className="todo-tag ia">IA · 4 min</span>
            </div>
            <div className="todo-item">
              <div className="todo-check done-lime done"/><span>4 relances facture <em>(prompt #07)</em></span>
              <span className="todo-tag ia">IA · 2 min</span>
            </div>
            <div className="todo-item">
              <div className="todo-check done-lime done"/><span>5 posts TikTok <em>(prompt #23)</em></span>
              <span className="todo-tag ia">IA · 3 min</span>
            </div>
            <div className="todo-item">
              <div className="todo-check done-lime done"/><span>Reporting Q1 <em>(prompt #31)</em></span>
              <span className="todo-tag ia">IA · 5 min</span>
            </div>
            <div className="todo-item">
              <div className="todo-check done-lime done"/><span>Résumé des 47 mails <em>(prompt #02)</em></span>
              <span className="todo-tag ia">IA · 1 min</span>
            </div>
            <div className="todo-item">
              <div className="todo-check"/><span>Je <em>valide</em> et j'envoie</span>
              <span className="todo-tag">toi · 15 min</span>
            </div>
            <div className="todo-item">
              <div className="todo-check"/><span>Café ☕ (sérieux)</span>
              <span className="todo-tag">toi · 20 min</span>
            </div>
            <div className="todo-scribble" style={{top:-18, right:12, color:'var(--ink)', background:'var(--mint)', padding:'6px 14px', borderRadius:999, fontSize:22, border:'2.5px solid var(--ink)'}}>
              −4h de boulot
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.AvantApres = AvantApres;