function Capabilities() {
  const caps = [
    {
      title: 'Multilingue FR / DE / IT',
      desc: 'Vos clients alémaniques et tessinois reçoivent leurs relances dans leur langue, automatiquement.',
      tag: 'Pertinent en Suisse',
      icon: (
        <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.4">
          <circle cx="20" cy="20" r="14" />
          <path d="M6 20 H 34 M20 6 C 26 12 26 28 20 34 C 14 28 14 12 20 6" />
        </svg>
      ),
      mock: <CapLang />,
    },
    {
      title: 'Digest hebdomadaire direction',
      desc: 'Chaque lundi 8h, un rapport IA des relances, réponses et escalades de la semaine, directement au directeur.',
      tag: 'Lundi · 08h00',
      icon: (
        <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.4">
          <rect x="6" y="8" width="28" height="24" rx="2" />
          <path d="M6 14 H 34 M10 20 H 22 M10 25 H 28" />
        </svg>
      ),
      mock: <CapDigest />,
    },
    {
      title: 'Audit log complet',
      desc: 'Chaque action tracée (qui, quoi, quand). Exportable. Conformité nLPD.',
      tag: 'nLPD',
      icon: (
        <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.4">
          <path d="M10 6 H 26 L32 12 V 34 H 10 Z M26 6 V 12 H 32" />
          <path d="M14 18 H 28 M14 23 H 24 M14 28 H 26" />
        </svg>
      ),
      mock: <CapAudit />,
    },
    {
      title: 'Courriers PDF formels',
      desc: 'Les relances importantes partent avec un courrier officiel en pièce jointe.',
      tag: 'PDF · A4',
      icon: (
        <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.4">
          <rect x="10" y="6" width="22" height="28" rx="2" />
          <path d="M14 14 H 28 M14 19 H 28 M14 24 H 22" />
        </svg>
      ),
    },
    {
      title: 'Accusés de réception',
      desc: 'Suivez qui a vu chaque relance et qui s\'engage.',
      tag: 'Tracking',
      icon: (
        <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="1.4">
          <path d="M4 20 C 12 10 28 10 36 20 C 28 30 12 30 4 20 Z" />
          <circle cx="20" cy="20" r="5" />
        </svg>
      ),
    },
  ];
  return (
    <Section id="capacites" className="relative py-28 sm:py-36 overflow-hidden">
      <div className="absolute inset-0 tech-grid opacity-30 [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]"></div>
      <div className="absolute -top-20 left-1/3 w-[600px] h-[600px] rounded-full bg-violet-600/15 blur-[120px]"></div>

      <div className="relative mx-auto max-w-7xl px-5 sm:px-8">
        <div className="text-center max-w-3xl mx-auto">
          <Reveal><SectionEyebrow className="mx-auto justify-center inline-flex">05 · Capacités avancées</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">Et ce n'est que le début.</h2></Reveal>
          <Reveal delay={140}><p className="mt-5 text-paper-100/65 text-[17px]">Les fiduciaires les plus exigeantes débloquent ces capacités premium.</p></Reveal>
        </div>

        <div className="mt-16 grid lg:grid-cols-12 gap-5">
          {/* Hero card — multilingue */}
          <Reveal className="lg:col-span-7">
            <BigCap cap={caps[0]} />
          </Reveal>
          <Reveal delay={100} className="lg:col-span-5">
            <BigCap cap={caps[1]} compact />
          </Reveal>
          <Reveal delay={200} className="lg:col-span-5">
            <BigCap cap={caps[2]} compact />
          </Reveal>
          <Reveal delay={300} className="lg:col-span-7">
            <div className="gborder p-6 sm:p-7 h-full grid sm:grid-cols-2 gap-5">
              {[caps[3], caps[4]].map((c) => (
                <div key={c.title} className="flex flex-col">
                  <div className="w-10 h-10 rounded-lg bg-paper-300/5 grid place-items-center text-violet-500 mb-4">{c.icon}</div>
                  <h3 className="font-display text-[19px] font-medium text-paper-50 tracking-tight">{c.title}</h3>
                  <p className="mt-2 text-[13.5px] text-paper-100/65 leading-relaxed flex-1">{c.desc}</p>
                  <div className="mt-4 font-mono text-[10px] tracking-[0.22em] uppercase text-cy-400">{c.tag}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </Section>
  );
}

function BigCap({ cap, compact = false }) {
  return (
    <div className="gborder p-6 sm:p-7 h-full flex flex-col">
      <div className="flex items-start justify-between gap-3 mb-5">
        <div className="w-11 h-11 rounded-lg bg-violet-600/10 border border-violet-600/15 grid place-items-center text-violet-500">{cap.icon}</div>
        <span className="font-mono text-[10px] tracking-[0.22em] uppercase text-cy-400">{cap.tag}</span>
      </div>
      <h3 className={`font-display ${compact ? 'text-[20px]' : 'text-[22px] sm:text-[26px]'} font-medium text-paper-50 tracking-tight text-balance`}>{cap.title}</h3>
      <p className="mt-2.5 text-[14px] text-paper-100/65 leading-relaxed">{cap.desc}</p>
      {cap.mock && <div className="mt-6 flex-1 rounded-lg overflow-hidden bg-ink-800/40 border border-paper-300/5 min-h-[160px]">{cap.mock}</div>}
    </div>
  );
}

function CapLang() {
  const langs = [
    { code: 'FR', t: 'Bonjour, il nous manque…', sub: 'Genève · Lausanne' },
    { code: 'DE', t: 'Guten Tag, uns fehlen noch…', sub: 'Zürich · Bern' },
    { code: 'IT', t: 'Buongiorno, ci mancano…', sub: 'Lugano · Bellinzona' },
  ];
  const [i, setI] = useState(0);
  useEffect(() => { const id = setInterval(() => setI((v) => (v + 1) % 3), 1800); return () => clearInterval(id); }, []);
  return (
    <div className="p-5 h-full grid grid-cols-3 gap-3">
      {langs.map((l, idx) => {
        const active = idx === i;
        return (
          <div key={l.code} className={`rounded-lg border p-3 transition-all ${active ? 'border-violet-600 bg-violet-600/5 -translate-y-0.5' : 'border-paper-300/8 bg-ink-900/40 opacity-60'}`}>
            <div className="flex items-center justify-between">
              <span className={`font-mono text-[11px] font-semibold ${active ? 'text-violet-500' : 'text-paper-300/50'}`}>{l.code}</span>
              {active && <span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>}
            </div>
            <div className="mt-3 text-[11.5px] text-paper-50 leading-snug min-h-[2.5em]">{l.t}</div>
            <div className="mt-2 font-mono text-[9px] text-paper-300/40">{l.sub}</div>
          </div>
        );
      })}
    </div>
  );
}

function CapDigest() {
  return (
    <div className="p-5 h-full">
      <div className="flex items-center gap-2 text-[10px] font-mono text-paper-300/50 mb-3">
        <span className="w-1.5 h-1.5 rounded-full bg-cy-400"></span> LUN 03 NOV · 08:00 · contact@fiduciaire.ch
      </div>
      <div className="text-[13px] text-paper-50 font-medium mb-2">Semaine #44 — synthèse</div>
      <ul className="space-y-1.5 text-[12px] text-paper-100/70">
        <li className="flex justify-between"><span>Relances envoyées</span><span className="font-mono text-paper-50">247</span></li>
        <li className="flex justify-between"><span>Réponses reçues</span><span className="font-mono text-emerald-400">68%</span></li>
        <li className="flex justify-between"><span>À escalader</span><span className="font-mono text-amber-400">3 dossiers</span></li>
        <li className="flex justify-between"><span>Temps gagné estimé</span><span className="font-mono text-cy-400">~ 9h</span></li>
      </ul>
    </div>
  );
}

function CapAudit() {
  const rows = [
    { t: '14:32', who: 'workflow#07', what: 'send_email · dossier#2847', ok: true },
    { t: '14:31', who: 'ai/gpt-4', what: 'generate_reminder', ok: true },
    { t: '14:30', who: 'system', what: 'read_sheet · row#42', ok: true },
    { t: '13:58', who: 'operator', what: 'escalate · dossier#2853', ok: false },
  ];
  return (
    <div className="p-3 h-full font-mono text-[10.5px]">
      {rows.map((r, i) => (
        <div key={i} className="flex items-center gap-2 py-1.5 border-b border-paper-300/5 last:border-0">
          <span className="text-paper-300/40 w-10">{r.t}</span>
          <span className="text-violet-500 w-20 truncate">{r.who}</span>
          <span className="text-paper-100/80 flex-1 truncate">{r.what}</span>
          <span className={r.ok ? 'text-emerald-400' : 'text-amber-400'}>{r.ok ? '✓ ok' : '↑ esc'}</span>
        </div>
      ))}
    </div>
  );
}

window.Capabilities = Capabilities;