function Benefits() {
  const items = [
    {
      num: '/01',
      title: 'Assistant marketing IA',
      desc: "Ciblage intelligent des propriétaires prêts à lancer des travaux grâce à des campagnes Meta Ads couplées à un agent conversationnel qui qualifie les prospects et les accompagne jusqu'à la prise de rendez-vous.",
    },
    {
      num: '/02',
      title: 'Application interne de pilotage',
      desc: "Un tableau de bord sur mesure pour suivre vos prospects en temps réel, analyser les performances et garder une visibilité totale sur votre pipeline commercial et vos opportunités de travaux.",
    },
    {
      num: '/03',
      title: 'Assistant commercial IA',
      desc: "Un agent disponible 24/7 qui répond aux appels et messages, qualifie les prospects et envoie directement les devis pour garantir une conversion maximale sans perte de lead.",
    },
    {
      num: '/04',
      title: 'Assistant financier IA',
      desc: "Un système intelligent qui structure vos données financières, génère vos rapports de gestion, bilans et KPI, et vous donne une lecture claire et exploitable de votre performance.",
    },
  ];

  return (
    <section className="section" data-screen-label="04 Bénéfices" id="benefices">
      <div className="reveal">
        <div className="eyebrow"><span className="num">/03</span><span className="bar"></span>Bénéfices</div>
        <h2 className="section-title">Une approche innovante pour <span className="italic">une croissance prévisible.</span></h2>
      </div>

      <div className="benefits-grid">
        {items.map((b, i) => (
          <div key={i} className="benefit-card reveal" style={{transitionDelay:`${i*80}ms`}}>
            <div className="benefit-num">{b.num}</div>
            <h3 className="benefit-title">{b.title}</h3>
            <p className="benefit-desc">{b.desc}</p>
            <div className="benefit-arrow">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M5 15L15 5M15 5H7M15 5V13" stroke="currentColor" strokeWidth="1.3"/>
              </svg>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Metrics() {
  return (
    <section className="section-metrics" data-screen-label="05 Métriques">
      <div className="metrics-strip">
        <div className="metric">
          <div className="metric-value"><span className="accent">94</span>%</div>
          <div className="metric-label"><span>Taux de qualification</span><span>/01</span></div>
        </div>
        <div className="metric">
          <div className="metric-value">14<span style={{color:'var(--text-dim)', fontSize:'0.5em'}}>j</span></div>
          <div className="metric-label"><span>Délai de déploiement</span><span>/02</span></div>
        </div>
        <div className="metric">
          <div className="metric-value">{'<'}5<span style={{color:'var(--text-dim)', fontSize:'0.5em'}}>min</span></div>
          <div className="metric-label"><span>Premier contact</span><span>/03</span></div>
        </div>
        <div className="metric">
          <div className="metric-value">3<span style={{color:'var(--accent)'}}>.2</span>x</div>
          <div className="metric-label"><span>+ de RDV qualifiés</span><span>/04</span></div>
        </div>
      </div>
    </section>
  );
}

window.Benefits = Benefits;
window.Metrics = Metrics;