function Comparison() {
  const pains = [
    {
      title: 'Vous subissez votre acquisition.',
      body: "Le bouche-à-oreille est qualitatif mais imprévisible. Vous ne contrôlez ni le volume, ni le timing, ni vos performances. Sans données claires, votre activité dépend du hasard.",
      img: "https://images.unsplash.com/photo-1541888946425-d81bb19240f5?w=900&q=80&auto=format&fit=crop",
    },
    {
      title: 'Votre expertise ne se voit pas en ligne.',
      body: "Vous êtes compétent, mais si on ne vous trouve pas facilement, on ne vous choisit pas. Aujourd'hui, la visibilité digitale influence directement la décision du client.",
      img: "https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=900&q=80&auto=format&fit=crop",
    },
    {
      title: "Vous n'avez pas été formé pour utiliser l'IA.",
      body: "Vous êtes entrepreneur, artisan, dirigeant. Pas spécialiste de l'acquisition, du ciblage ou de l'automatisation. Pourtant, la croissance moderne repose sur ces leviers.",
      img: "https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1200&q=80&auto=format&fit=crop",
    },
    {
      title: 'Votre croissance est limitée par votre temps.',
      body: "Relances, devis, suivi… tout repose sur vous. Tant que ces tâches restent manuelles, votre développement reste plafonné à votre capacité d'exécution.",
      img: "https://images.unsplash.com/photo-1506784365847-bbad939e9335?w=1200&q=80&auto=format&fit=crop",
    },
  ];

  const rows = [
    {
      portal: 'Relances manuelles et chronophages',
      qorpo: 'Agents IA autonomes',
      icon: (
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <path d="M13 4v3h-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M3 12v-3h3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M12.5 6.5A5 5 0 0 0 4.2 5.5M3.5 9.5A5 5 0 0 0 11.8 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      ),
    },
    {
      portal: "Dépendance aux apporteurs d'affaires",
      qorpo: 'Sans intermédiaires',
      icon: (
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <path d="M8 14s4.5-4.2 4.5-7.5a4.5 4.5 0 0 0-9 0C3.5 9.8 8 14 8 14z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
          <circle cx="8" cy="6.5" r="1.6" stroke="currentColor" strokeWidth="1.5"/>
        </svg>
      ),
    },
    {
      portal: 'Ciblage client approximatif',
      qorpo: 'Infrastructure agentique',
      icon: (
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M9.5 0.5c0 2.8 1.7 4.5 4.5 4.5-2.8 0-4.5 1.7-4.5 4.5 0-2.8-1.7-4.5-4.5-4.5 2.8 0 4.5-1.7 4.5-4.5z" fill="currentColor"/>
          <path d="M4 9.5c0 1.7 1 2.7 2.7 2.7C5 12.2 4 13.2 4 14.9c0-1.7-1-2.7-2.7-2.7 1.7 0 2.7-1 2.7-2.7z" fill="currentColor"/>
        </svg>
      ),
    },
    {
      portal: 'Peu de visibilité sur les projets futurs',
      qorpo: 'Suivi intelligent des devis',
      icon: (
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <rect x="3.5" y="2.5" width="9" height="11" rx="1.2" stroke="currentColor" strokeWidth="1.4"/>
          <path d="M5.5 6h5M5.5 8.5h5M5.5 11h3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
      ),
    },
    {
      portal: 'Résultats irréguliers',
      qorpo: 'Partenariat long-terme',
      icon: (
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <path d="M8 13.5s-4.2-2.4-5.2-5.1C2 6.4 3.4 4.5 5.2 4.5c1 0 2 .5 2.8 1.5.8-1 1.8-1.5 2.8-1.5 1.8 0 3.2 1.9 2.4 3.9-1 2.7-5.2 5.1-5.2 5.1z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
        </svg>
      ),
    },
  ];

  return (
    <section className="section compare-section" data-screen-label="02 Comparaison" id="offre">
      <div className="reveal">
        <div className="eyebrow"><span className="num">/01</span><span className="bar"></span>Le constat</div>
        <h2 className="section-title">Ce que personne ne vous dit sur <span className="italic">la croissance de votre entreprise.</span></h2>
      </div>

      <div className="pain-grid reveal">
        {pains.map((p, i) => (
          <article key={i} className="pain-card">
            <div className="pain-img-wrap">
              <img src={p.img} alt="" className="pain-img" />
              <span className="pain-num">{String(i + 1).padStart(2, '0')}</span>
            </div>
            <div className="pain-body-wrap">
              <h3 className="pain-title">{p.title}</h3>
              <p className="pain-body">{p.body}</p>
            </div>
          </article>
        ))}
      </div>

      <div className="reveal compare-header">
        <div className="eyebrow"><span className="num">/02</span><span className="bar"></span>La différence</div>
        <h2 className="section-title">Pourquoi notre <span className="italic">Infrastructure ?</span></h2>
      </div>

      <div className="compare-grid reveal">
        <div className="compare-col compare-portal">
          <div className="compare-head">
            <span className="compare-label">Méthodes traditionnelles</span>
            <span className="compare-tag-bad">Classique</span>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="compare-row compare-row-bad">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M3 3L11 11M11 3L3 11" stroke="#71717a" strokeWidth="1.5" strokeLinecap="round"/>
              </svg>
              <span>{r.portal}</span>
            </div>
          ))}
        </div>

        <div className="compare-col compare-qorpo">
          <div className="compare-head">
            <span className="compare-label">
              <img src="assets/logo.png" alt="" className="compare-brand-logo" />
              <span style={{color:'var(--accent)'}}>Qorpo</span>
            </span>
            <span className="compare-tag-good">Recommandé</span>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="compare-row compare-row-good">
              <span className="compare-icon">{r.icon}</span>
              <span>{r.qorpo}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Comparison = Comparison;