function Problem() {
  const cards = [
    {
      title: 'Relances chronophages',
      desc: 'Des dizaines de relances rédigées à la main chaque semaine. Répétitif, démotivant, coûteux.',
      stat: '~12h',
      sub: '/sem perdues en relances',
      glyph: (
        <svg viewBox="0 0 64 64" className="w-9 h-9" fill="none" stroke="currentColor" strokeWidth="1.4">
          <rect x="8" y="14" width="48" height="32" rx="4" />
          <path d="M8 18 L32 34 L56 18" />
          <circle cx="50" cy="48" r="8" fill="#0a0a0f" />
          <path d="M50 44v5l3 2" strokeLinecap="round" />
        </svg>
      ),
    },
    {
      title: 'Boîtes mail saturées',
      desc: '100 à 300 emails/jour. Le tri prend des heures, les vrais urgents passent inaperçus.',
      stat: '300',
      sub: 'emails/jour à trier',
      glyph: (
        <svg viewBox="0 0 64 64" className="w-9 h-9" fill="none" stroke="currentColor" strokeWidth="1.4">
          <rect x="6" y="18" width="38" height="28" rx="3" />
          <rect x="14" y="12" width="38" height="28" rx="3" />
          <rect x="22" y="6" width="38" height="28" rx="3" fill="#0a0a0f" />
          <path d="M22 12 L41 26 L60 12" />
        </svg>
      ),
    },
    {
      title: 'Échéances ratées',
      desc: 'TVA, AVS, comptes annuels — une échéance oubliée = pénalités AFC, stress, clients mécontents.',
      stat: '4×/an',
      sub: 'risques de pénalités',
      glyph: (
        <svg viewBox="0 0 64 64" className="w-9 h-9" fill="none" stroke="currentColor" strokeWidth="1.4">
          <rect x="10" y="14" width="44" height="40" rx="4" />
          <path d="M10 24 H 54" />
          <path d="M20 10 V 18 M44 10 V 18" strokeLinecap="round" />
          <circle cx="32" cy="38" r="9" />
          <path d="M32 32v7l4 3" strokeLinecap="round" />
        </svg>
      ),
    },
  ];
  return (
    <Section id="problem" className="relative py-28 sm:py-36 overflow-hidden">
      <div className="absolute inset-0 tech-grid opacity-30 [mask-image:radial-gradient(ellipse_at_top,black_30%,transparent_70%)]"></div>
      <div className="relative mx-auto max-w-7xl px-5 sm:px-8">
        <div className="max-w-3xl">
          <Reveal><SectionEyebrow>01 · Le constat</SectionEyebrow></Reveal>
          <Reveal delay={80}><h2 className="mt-5 font-display text-4xl sm:text-5xl md:text-6xl font-medium tracking-tight text-paper-50 text-balance">Vos équipes passent leur temps sur des tâches qui devraient être <span className="italic font-serif text-violet-500/95">automatiques</span>.</h2></Reveal>
        </div>

        <div className="mt-14 grid md:grid-cols-3 gap-5">
          {cards.map((c, i) => (
            <Reveal key={c.title} delay={i * 120}>
              <div className="gborder p-7 h-full group transition hover:-translate-y-1 duration-500">
                <div className="text-paper-100/40 group-hover:text-violet-500 transition-colors">{c.glyph}</div>
                <h3 className="mt-6 font-display text-[22px] text-paper-50 font-medium tracking-tight">{c.title}</h3>
                <p className="mt-3 text-[14.5px] leading-relaxed text-paper-100/65">{c.desc}</p>
                <div className="mt-7 pt-5 border-t border-paper-300/8 flex items-end justify-between">
                  <div>
                    <div className="font-display text-2xl text-paper-50">{c.stat}</div>
                    <div className="text-[11px] uppercase tracking-wider font-mono text-paper-300/40 mt-1">{c.sub}</div>
                  </div>
                  <div className="font-mono text-[10px] text-paper-300/30">0{i + 1}/03</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </Section>
  );
}

window.Problem = Problem;