function Automations() {
  const items = [
    {
      title: 'Relances Documents Clients',
      desc: 'Plus jamais à courir après les bilans et justificatifs. Relance auto à 3 / 7 / 14 jours, ton adapté, alerte si mécontentement.',
      modes: ['base', 'ia'],
      illus: 'mail',
    },
    {
      title: 'Tri & Classification Emails',
      desc: 'Chaque email entrant est lu, classé (urgent / dossier / facture / spam) et attribué au bon collaborateur. 1–2h/jour économisées par personne.',
      modes: ['base', 'ia'],
      illus: 'sort',
    },
    {
      title: 'Suivi Échéances Fiscales',
      desc: 'Tableau de bord temps réel TVA / AVS / comptes annuels. Rappels intelligents, alertes équipe, prévisions de charge.',
      modes: ['base', 'ia'],
      illus: 'cal',
    },
    {
      title: 'Onboarding Nouveau Client',
      desc: 'KYC, demande de documents, signature électronique, ouverture des dossiers. Le client onboardé sans intervention humaine.',
      modes: ['base', 'ia'],
      illus: 'onb',
    },
    {
      title: 'Génération Courriers Auto',
      desc: 'Courriers générés depuis vos données. Templates fixes, ou rédaction personnalisée par l\'IA, signature électronique, envoi automatique.',
      modes: ['base', 'ia'],
      illus: 'doc',
    },
  ];
  return (
    <Section id="solutions" className="relative py-28 sm:py-36 bg-paper-50 text-ink-900 overflow-hidden border-t border-ink-900/5">
      <div className="absolute inset-0 tech-grid-light opacity-40 [mask-image:radial-gradient(ellipse_at_top,black_20%,transparent_75%)]"></div>
      <div className="relative mx-auto max-w-7xl px-5 sm:px-8">
        <div className="grid lg:grid-cols-2 gap-8 lg:items-end mb-14">
          <div>
            <div className="inline-flex items-center gap-2 font-mono text-[10px] tracking-[0.28em] uppercase text-ink-900/60">
              <span className="w-6 h-px bg-ink-900/30"></span>04 · Catalogue
            </div>
            <h2 className="mt-5 font-display text-4xl sm:text-5xl md:text-[56px] font-medium tracking-tight text-balance">Quelques automatisations que nous construisons pour les fiduciaires.</h2>
          </div>
          <p className="text-ink-900/65 text-[16px] max-w-md lg:justify-self-end">Ce ne sont pas des produits sur étagère. Chacune est calibrée à vos process, vos outils, votre équipe.</p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {items.map((it, i) => (
            <Reveal key={it.title} delay={(i % 3) * 80}>
              <AutomationCard {...it} />
            </Reveal>
          ))}
          <Reveal delay={160}>
            <a href="mailto:contact@helloflowo.ch?subject=Autre%20besoin%20d'automatisation" className="relative block h-full rounded-2xl overflow-hidden group">
              <div className="absolute inset-0 bg-gradient-to-br from-violet-600 via-violet-700 to-cy-500"></div>
              <div className="absolute inset-0 opacity-30 [background-image:radial-gradient(rgba(255,255,255,0.5)_1px,transparent_1px)] [background-size:18px_18px]"></div>
              <div className="absolute -top-20 -right-20 w-60 h-60 rounded-full bg-mag-400/40 blur-3xl group-hover:scale-110 transition-transform"></div>
              <div className="relative p-7 sm:p-8 h-full flex flex-col text-white min-h-[280px]">
                <div className="flex-1">
                  <div className="font-mono text-[10.5px] tracking-[0.22em] uppercase text-white/75">Sur-mesure</div>
                  <h3 className="mt-3 font-display text-[24px] font-medium tracking-tight">Vous avez un autre besoin ?</h3>
                  <p className="mt-3 text-[14.5px] text-white/85 leading-relaxed">Toute tâche répétitive est automatisable. Parlons-en — 30 min suffisent à savoir si Flowo est fait pour vous.</p>
                </div>
                <div className="mt-6 inline-flex items-center gap-2 font-medium text-[14px]">
                  Écrivez-nous <Icon.Arrow className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                </div>
              </div>
            </a>
          </Reveal>
        </div>
      </div>
    </Section>
  );
}

function AutomationCard({ title, desc, modes = [], illus }) {
  return (
    <div className="relative rounded-2xl bg-white border border-ink-900/8 hover:border-ink-900/20 transition-all duration-500 overflow-hidden group hover:-translate-y-1 hover:shadow-[0_20px_50px_-25px_rgba(10,10,15,0.25)]">
      {/* hover gradient */}
      <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
        <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-violet-600/10 blur-3xl"></div>
      </div>
      <div className="relative p-6 sm:p-7 h-full flex flex-col min-h-[280px]">
        <div className="h-16 mb-5"><AutoIllustration kind={illus} /></div>
        <h3 className="font-display text-[20px] font-medium tracking-tight text-ink-900 text-balance">{title}</h3>
        <p className="mt-2.5 text-[14px] text-ink-900/65 leading-relaxed flex-1">{desc}</p>
        <div className="mt-5 pt-5 border-t border-ink-900/8 flex items-center justify-between">
          <div className="flex items-center gap-1.5">
            {modes.includes('base') && (
              <span className="text-[10.5px] font-mono px-2 py-0.5 rounded bg-ink-900/5 text-ink-900/70 border border-ink-900/10">Sans IA</span>
            )}
            {modes.includes('ia') && (
              <span className="inline-flex items-center gap-1 text-[10.5px] font-mono px-2 py-0.5 rounded bg-violet-600/10 text-violet-700 border border-violet-600/20">
                <Icon.Spark className="w-2.5 h-2.5" /> Avec IA
              </span>
            )}
          </div>
          <Icon.Arrow className="w-4 h-4 text-ink-900/40 group-hover:text-violet-600 group-hover:translate-x-1 transition" />
        </div>
      </div>
    </div>
  );
}

function AutoIllustration({ kind }) {
  if (kind === 'mail') return (
    <svg viewBox="0 0 120 60" className="h-full">
      <rect x="4" y="6" width="60" height="40" rx="4" fill="none" stroke="#0a0a0f" strokeOpacity=".15" />
      <path d="M4 14 L34 30 L64 14" fill="none" stroke="#0a0a0f" strokeOpacity=".25" />
      <rect x="20" y="20" width="60" height="40" rx="4" fill="#fafaf7" stroke="#7c3aed" />
      <path d="M20 28 L50 44 L80 28" fill="none" stroke="#7c3aed" />
      <circle cx="92" cy="42" r="9" fill="#0a0a0f" />
      <path d="M88 42l3 3 5-5" stroke="#22d3ee" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
  if (kind === 'sort') return (
    <svg viewBox="0 0 120 60" className="h-full">
      <rect x="2" y="20" width="34" height="20" rx="3" fill="none" stroke="#0a0a0f" strokeOpacity=".25" />
      <path d="M36 30 L60 18" stroke="#10b981" />
      <path d="M36 30 L60 30" stroke="#f59e0b" />
      <path d="M36 30 L60 42" stroke="#ef4444" />
      <rect x="62" y="10" width="32" height="14" rx="3" fill="#fafaf7" stroke="#10b981" />
      <rect x="62" y="24" width="32" height="14" rx="3" fill="#fafaf7" stroke="#f59e0b" />
      <rect x="62" y="38" width="32" height="14" rx="3" fill="#fafaf7" stroke="#ef4444" />
      <text x="78" y="20" textAnchor="middle" fontSize="7" fontFamily="JetBrains Mono" fill="#10b981">Urgent</text>
      <text x="78" y="34" textAnchor="middle" fontSize="7" fontFamily="JetBrains Mono" fill="#f59e0b">Dossier</text>
      <text x="78" y="48" textAnchor="middle" fontSize="7" fontFamily="JetBrains Mono" fill="#ef4444">Spam</text>
    </svg>
  );
  if (kind === 'cal') return (
    <svg viewBox="0 0 120 60" className="h-full">
      <rect x="6" y="4" width="60" height="50" rx="4" fill="#fafaf7" stroke="#0a0a0f" strokeOpacity=".2" />
      <path d="M6 16 H 66" stroke="#0a0a0f" strokeOpacity=".2" />
      <path d="M20 2 V 10 M52 2 V 10" stroke="#0a0a0f" strokeOpacity=".4" strokeLinecap="round" />
      {[0,1,2,3].map((r) => [0,1,2,3,4].map((c) => (
        <circle key={`${r}-${c}`} cx={14 + c*12} cy={24 + r*8} r="2" fill={c === 2 && r === 1 ? '#7c3aed' : '#0a0a0f'} opacity={c === 2 && r === 1 ? 1 : 0.15} />
      )))}
      <rect x="76" y="14" width="40" height="28" rx="3" fill="#0a0a0f" />
      <text x="96" y="26" textAnchor="middle" fontSize="7" fontFamily="JetBrains Mono" fill="#22d3ee">TVA Q3</text>
      <text x="96" y="36" textAnchor="middle" fontSize="7" fontFamily="JetBrains Mono" fill="#fafaf7">15 oct.</text>
    </svg>
  );
  if (kind === 'onb') return (
    <svg viewBox="0 0 120 60" className="h-full">
      {[0,1,2,3].map((i) => (
        <g key={i}>
          <circle cx={12 + i*32} cy="30" r="8" fill="#fafaf7" stroke="#7c3aed" />
          <text x={12 + i*32} y="33" textAnchor="middle" fontSize="9" fontFamily="Space Grotesk" fontWeight="600" fill="#0a0a0f">{i+1}</text>
          {i < 3 && <path d={`M ${20 + i*32} 30 H ${32 + i*32}`} stroke="#7c3aed" strokeDasharray="2 2" />}
        </g>
      ))}
      <text x="12" y="50" textAnchor="middle" fontSize="6" fontFamily="JetBrains Mono" fill="#0a0a0f" opacity=".5">KYC</text>
      <text x="44" y="50" textAnchor="middle" fontSize="6" fontFamily="JetBrains Mono" fill="#0a0a0f" opacity=".5">Docs</text>
      <text x="76" y="50" textAnchor="middle" fontSize="6" fontFamily="JetBrains Mono" fill="#0a0a0f" opacity=".5">Sign.</text>
      <text x="108" y="50" textAnchor="middle" fontSize="6" fontFamily="JetBrains Mono" fill="#0a0a0f" opacity=".5">Ouverture</text>
    </svg>
  );
  if (kind === 'doc') return (
    <svg viewBox="0 0 120 60" className="h-full">
      <rect x="40" y="6" width="44" height="50" rx="3" fill="#fafaf7" stroke="#0a0a0f" strokeOpacity=".25" />
      <path d="M48 18 H 76 M48 26 H 76 M48 34 H 70 M48 42 H 64" stroke="#0a0a0f" strokeOpacity=".2" />
      <path d="M64 48 q 6 -6 12 0" stroke="#7c3aed" fill="none" strokeWidth="1.5" />
      <circle cx="20" cy="30" r="10" fill="#0a0a0f" />
      <path d="M20 25 v6 M17 28 h6" stroke="#22d3ee" strokeLinecap="round" />
      <path d="M30 30 H 40" stroke="#0a0a0f" strokeOpacity=".4" strokeDasharray="2 2" />
    </svg>
  );
  return null;
}

window.Automations = Automations;