function Hero() {
  const cursorRef = useRef(null);
  useEffect(() => {
    const el = cursorRef.current; if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = ((e.clientX - r.left) / r.width) * 100;
      const y = ((e.clientY - r.top) / r.height) * 100;
      el.style.setProperty('--mx', x + '%');
      el.style.setProperty('--my', y + '%');
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <section id="top" ref={cursorRef} className="relative isolate overflow-hidden pt-32 pb-24 sm:pt-40 sm:pb-28 grain"
      style={{ background: 'radial-gradient(120% 80% at var(--mx,50%) var(--my,30%), rgba(124,58,237,0.18), transparent 50%), #0a0a0f' }}>
      {/* Aurora mesh */}
      <div className="absolute inset-0 aurora opacity-70"></div>
      {/* Technical grid */}
      <div className="absolute inset-0 tech-grid opacity-60 [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]"></div>
      {/* particles */}
      <div className="absolute inset-0 particles opacity-50"></div>
      {/* giant logo watermark */}
      <div className="absolute left-1/2 top-[18%] -translate-x-1/2 w-[460px] h-[460px] sm:w-[640px] sm:h-[640px] opacity-[0.06] pointer-events-none select-none">
        <img src={window.__resources.flowoLogo} alt="" aria-hidden="true" className="w-full h-full object-contain animate-float" />
      </div>
      {/* horizon glow */}
      <div className="absolute -bottom-32 left-1/2 -translate-x-1/2 w-[120%] h-64 rounded-[50%] bg-violet-600/40 blur-[110px]"></div>

      <div className="relative mx-auto max-w-7xl px-5 sm:px-8">
        <Reveal>
          <div className="flex justify-center">
            <Chip tone="violet" className="!py-1.5 !px-3 backdrop-blur-md">
              <span className="relative inline-flex w-1.5 h-1.5">
                <span className="absolute inset-0 rounded-full bg-violet-500"></span>
                <span className="absolute inset-0 rounded-full bg-violet-500 animate-ping opacity-70"></span>
              </span>
              <span className="text-paper-100/90">Hébergé 100% en Suisse · Setup en 2–4 semaines</span>
            </Chip>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <h1 className="mt-7 font-display text-[44px] leading-[1.02] sm:text-7xl sm:leading-[0.98] md:text-[88px] md:leading-[0.95] font-semibold text-center text-paper-50 tracking-[-0.025em] text-balance">
            Automatisations <span className="gtext">sur-mesure</span><br className="hidden sm:block" />
            pour fiduciaires suisses.
          </h1>
        </Reveal>

        <Reveal delay={220}>
          <p className="mt-7 max-w-2xl mx-auto text-center text-[16.5px] sm:text-[18px] leading-relaxed text-paper-100/65">
            Vous choisissez vos résultats, le prix se compose. IA optionnelle. Hébergement 100% suisse.
            Nous comprenons vos besoins, nous construisons, nous livrons.
          </p>
        </Reveal>

        <Reveal delay={320}>
          <div className="mt-9 flex flex-col sm:flex-row items-center justify-center gap-3">
            <Magnetic><a href="/configurateur" className="btn-primary">Construire mon devis en 3 minutes <Icon.Arrow className="w-4 h-4" /></a></Magnetic>
            <Magnetic strength={8}><a href="mailto:contact@helloflowo.ch?subject=Appel%20découverte%20Flowo" className="btn-ghost">Réserver un appel découverte</a></Magnetic>
          </div>
        </Reveal>

        {/* hero device — mini OS/dashboard frame */}
        <Reveal delay={420}>
          <HeroDevice />
        </Reveal>

        {/* Stats row */}
        <Reveal delay={520}>
          <div className="mt-20 grid grid-cols-2 lg:grid-cols-4 gap-px bg-paper-300/10 rounded-2xl overflow-hidden border border-paper-300/10">
            {[
              { v: <><CountUp to={10} />h</>, sub: 'visées par semaine', hint: '5–10h selon vos résultats' },
              { v: '100%', sub: 'hébergé en Suisse', hint: 'Infomaniak Genève · ISO 27001' },
              { v: <><CountUp to={4} />sem.</>, sub: 'signature → production', hint: '2 à 4 selon la complexité' },
              { v: '24/7', sub: 'surveillance auto', hint: 'Monitoring + alertes' },
            ].map((s, i) => (
              <div key={i} className="bg-ink-900/80 backdrop-blur p-6 sm:p-7 group hover:bg-ink-800 transition-colors">
                <div className="font-display text-3xl sm:text-4xl font-medium text-paper-50 tracking-tight">{s.v}</div>
                <div className="mt-1.5 text-[13px] text-paper-100/70">{s.sub}</div>
                <div className="mt-3 text-[11px] font-mono uppercase tracking-wider text-paper-300/40">{s.hint}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HeroDevice() {
  return (
    <div className="relative mt-16 mx-auto max-w-5xl">
      {/* glow shadow */}
      <div className="absolute inset-x-10 -bottom-10 h-24 rounded-[40%] bg-violet-600/40 blur-3xl"></div>

      <div className="gborder p-2 sm:p-3 backdrop-blur-xl">
        <div className="rounded-[14px] bg-ink-900/90 overflow-hidden border border-paper-300/5">
          {/* mock chrome */}
          <div className="flex items-center justify-between px-4 py-2.5 border-b border-paper-300/5 bg-ink-800/80">
            <div className="flex items-center gap-1.5">
              <span className="w-2.5 h-2.5 rounded-full bg-paper-300/20"></span>
              <span className="w-2.5 h-2.5 rounded-full bg-paper-300/20"></span>
              <span className="w-2.5 h-2.5 rounded-full bg-paper-300/20"></span>
            </div>
            <div className="font-mono text-[10.5px] tracking-wider text-paper-300/50">flowo / orchestrateur · live</div>
            <div className="flex items-center gap-1.5 text-[10.5px] font-mono text-emerald-400">
              <span className="relative inline-flex"><span className="w-1.5 h-1.5 rounded-full bg-emerald-400 live-dot"></span></span>
              OPÉRATIONNEL
            </div>
          </div>

          <div className="grid grid-cols-12 gap-3 p-3 sm:p-5 min-h-[260px] sm:min-h-[300px]">
            {/* sidebar */}
            <div className="col-span-3 hidden sm:flex flex-col gap-1.5">
              {['Dashboard', 'Workflows', 'Inbox IA', 'Échéances', 'Audit'].map((x, i) => (
                <div key={x} className={`text-[12px] px-3 py-2 rounded-md ${i === 1 ? 'bg-violet-600/15 text-violet-500 border border-violet-600/20' : 'text-paper-100/55 hover:bg-paper-300/5'}`}>{x}</div>
              ))}
              <div className="mt-auto p-3 rounded-lg bg-gradient-to-br from-violet-600/15 to-cy-400/10 border border-violet-600/15 text-[11px] text-paper-100/70">
                <div className="font-medium text-paper-50 mb-0.5">5 workflows actifs</div>
                <div>Dernière exécution: il y a 24s</div>
              </div>
            </div>
            {/* main canvas */}
            <div className="col-span-12 sm:col-span-9 relative rounded-md bg-[radial-gradient(circle_at_30%_20%,rgba(124,58,237,0.10),transparent_60%)] border border-paper-300/5 overflow-hidden">
              <MiniFlow />
            </div>
          </div>
        </div>
      </div>

      {/* floating ‘ping’ badges */}
      <div className="absolute -left-3 sm:-left-8 top-12 hidden md:block">
        <div className="gborder p-3 pr-4 text-[12px] flex items-center gap-2 backdrop-blur animate-float">
          <span className="text-cy-400 font-mono">→</span> Email envoyé · 11h42
        </div>
      </div>
      <div className="absolute -right-3 sm:-right-6 bottom-16 hidden md:block">
        <div className="gborder p-3 pr-4 text-[12px] flex items-center gap-2 backdrop-blur animate-float" style={{ animationDelay: '1.4s' }}>
          <span className="text-emerald-400">●</span> Coopératif · routé au pôle
        </div>
      </div>
    </div>
  );
}

function MiniFlow() {
  const [step, setStep] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setStep((s) => (s + 1) % 5), 1100);
    return () => clearInterval(id);
  }, []);
  const nodes = [
    { x: 60, y: 80, label: 'Trigger', tag: 'Sheets' },
    { x: 200, y: 50, label: 'Read', tag: 'Dossiers' },
    { x: 340, y: 100, label: 'IA', tag: 'GPT · FR' },
    { x: 470, y: 60, label: 'Envoi', tag: 'Email' },
    { x: 580, y: 130, label: 'Update', tag: 'Sheets' },
  ];
  return (
    <svg viewBox="0 0 640 230" className="w-full h-full" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="ln" x1="0" x2="1">
          <stop offset="0" stopColor="#7c3aed" />
          <stop offset="1" stopColor="#22d3ee" />
        </linearGradient>
        <filter id="glow"><feGaussianBlur stdDeviation="2.4" /></filter>
      </defs>
      {nodes.slice(0, -1).map((n, i) => {
        const next = nodes[i + 1];
        const active = i < step;
        return (
          <g key={i}>
            <path d={`M ${n.x + 38} ${n.y} C ${(n.x + next.x) / 2} ${n.y}, ${(n.x + next.x) / 2} ${next.y}, ${next.x - 38} ${next.y}`} stroke={active ? 'url(#ln)' : 'rgba(255,255,255,0.08)'} strokeWidth="1.5" fill="none" />
            {active && (
              <circle r="3.5" fill="#22d3ee" filter="url(#glow)">
                <animateMotion dur="1.1s" repeatCount="indefinite" path={`M ${n.x + 38} ${n.y} C ${(n.x + next.x) / 2} ${n.y}, ${(n.x + next.x) / 2} ${next.y}, ${next.x - 38} ${next.y}`} />
              </circle>
            )}
          </g>
        );
      })}
      {nodes.map((n, i) => {
        const active = i <= step;
        return (
          <g key={n.label} transform={`translate(${n.x - 38} ${n.y - 22})`}>
            <rect width="76" height="44" rx="9" fill={active ? '#0a0a0f' : '#0a0a0f'} stroke={active ? '#7c3aed' : 'rgba(255,255,255,0.10)'} strokeWidth="1" />
            {active && <rect width="76" height="44" rx="9" fill="none" stroke="#22d3ee" strokeWidth="1" opacity="0.6" filter="url(#glow)" />}
            <text x="38" y="19" textAnchor="middle" fill="#fafaf7" fontSize="10.5" fontFamily="Space Grotesk" fontWeight="500">{n.label}</text>
            <text x="38" y="32" textAnchor="middle" fill={active ? '#22d3ee' : '#cfceca'} opacity="0.8" fontSize="8.5" fontFamily="JetBrains Mono">{n.tag}</text>
          </g>
        );
      })}
    </svg>
  );
}

window.Hero = Hero;