const Benefices = () => {
  const items = [
    {
      n: '01', title: "Décide à ta place",
      body: "Prompts qui transforment tes 15 idées parallèles en 1 priorité claire. Fini la paralysie du choix.",
      tag: "DÉCISION", meta: "7 prompts",
      illu: (
        <svg viewBox="0 0 60 60">
          <circle cx="30" cy="30" r="24" fill="none" stroke="currentColor" strokeWidth="2"/>
          <path d="M30 12 L30 30 L44 36" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
          <circle cx="30" cy="30" r="3" fill="currentColor"/>
        </svg>
      )
    },
    {
      n: '03', title: "Rédige en 30 secondes",
      body: "Posts TikTok, épingles Pinterest, emails clients, descriptions produit. Copier, ajuster, publier 🚀",
      tag: "CRÉATION", meta: "15 prompts",
      illu: (
        <svg viewBox="0 0 60 60">
          <path d="M12 48 L12 14 L36 14 L48 26 L48 48 Z" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
          <path d="M36 14 L36 26 L48 26" fill="none" stroke="currentColor" strokeWidth="2"/>
          <path d="M18 34 L42 34 M18 40 L36 40" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
        </svg>
      )
    },
    {
      n: '04', title: "Te ramène à l'argent",
      body: "Prompts anti-dispersion qui raccrochent chaque nouvelle idée à un euro réel. Stop les projets orphelins.",
      tag: "BUSINESS", meta: "8 prompts",
      illu: (
        <svg viewBox="0 0 60 60">
          <path d="M30 8 L30 52" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
          <path d="M40 16 C40 12, 36 10, 30 10 C24 10, 20 12, 20 16 C20 20, 24 21, 30 22 C36 23, 40 24, 40 28 C40 32, 36 34, 30 34 C24 34, 20 32, 20 28" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
        </svg>
      )
    },
    {
      n: '02', title: "Absorbe l'admin que tu fuis",
      body: "Reporting hebdo, emails de relance, résumés de réunion, plans de travail. L'IA le fait, tu valides ✨",
      tag: "ADMIN", meta: "13 prompts", wide2: true,
      illu: (
        <svg viewBox="0 0 60 60">
          <rect x="10" y="10" width="40" height="44" fill="none" stroke="currentColor" strokeWidth="2" rx="3"/>
          <path d="M16 22 L44 22 M16 30 L44 30 M16 38 L34 38 M16 46 L30 46" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          <path d="M42 42 L52 32 L48 28 L38 38 Z" fill="currentColor"/>
        </svg>
      )
    },
    {
      n: '05', title: "Compatible tout LLM",
      body: "Claude, ChatGPT, Mistral, Gemini, Perplexity. Copier-coller dans ton outil préféré — ça marche partout.",
      tag: "UNIVERSEL", meta: "50/50 prompts",
      wide: true,
      illu: (
        <svg viewBox="0 0 60 60">
          <circle cx="20" cy="20" r="7" fill="none" stroke="currentColor" strokeWidth="2"/>
          <circle cx="40" cy="20" r="7" fill="none" stroke="currentColor" strokeWidth="2"/>
          <circle cx="20" cy="40" r="7" fill="none" stroke="currentColor" strokeWidth="2"/>
          <circle cx="40" cy="40" r="7" fill="none" stroke="currentColor" strokeWidth="2"/>
          <path d="M27 20 L33 20 M20 27 L20 33 M27 40 L33 40 M40 27 L40 33" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
        </svg>
      )
    },
  ];

  return (
    <section className="benefices" data-screen-label="03 Bénéfices">
      <div className="shell">
        <div className="section-label"><span className="num">§ 02</span><span>la solution</span></div>
        <div className="benefices-head reveal">
          <h2>
            Arrête de chercher<br/>
            une <em>méthode.</em><br/>
            Prends une <span className="highlight">équipe IA.</span>
          </h2>
          <p className="benefices-sub">
            50 prompts conçus par un entrepreneur TDAH (moi), testés sur un vrai cerveau neuroatypique.
            L'IA fait le boulot que tu procrastines depuis 3 mois.
          </p>
        </div>

        <div className="benefices-grid">
          {items.map((x, i) => (
            <div
              className={`benefice reveal ${x.wide ? 'wide' : ''} ${x.wide2 ? 'wide-2' : ''}`}
              key={i}
              style={{transitionDelay: `${i*70}ms`}}
            >
              <div className="benefice-illu">{x.illu}</div>
              <div className="benefice-num">{x.n}</div>
              <h3>{x.title}</h3>
              <p>{x.body}</p>
              <div className="benefice-tag">
                <span>{x.tag}</span>
                <span>{x.meta}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Benefices = Benefices;