// ============================================
// HERO — 3D parallax dashboard + QR scan + isometric scene + magnetic cursor
// ============================================

const { useState, useEffect, useRef } = React;

function MagneticCursor() {
  const dotRef = useRef(null);
  const ringRef = useRef(null);
  const particlesRef = useRef([]);

  useEffect(() => {
    if (window.innerWidth < 900) return;
    let mx = window.innerWidth / 2, my = window.innerHeight / 2;
    let rx = mx, ry = my;
    let dx = mx, dy = my;

    const move = (e) => {
      mx = e.clientX; my = e.clientY;
      if (dotRef.current) {
        dotRef.current.style.transform = `translate(${mx - 3}px, ${my - 3}px)`;
      }
      // spawn particle occasionally
      if (Math.random() > 0.85) {
        spawnParticle(mx, my);
      }
    };
    const tick = () => {
      rx += (mx - rx) * 0.15;
      ry += (my - ry) * 0.15;
      if (ringRef.current) {
        ringRef.current.style.transform = `translate(${rx - 16}px, ${ry - 16}px)`;
      }
      requestAnimationFrame(tick);
    };
    tick();

    const onEnter = () => ringRef.current?.classList.add('hover');
    const onLeave = () => ringRef.current?.classList.remove('hover');
    window.addEventListener('mousemove', move);
    document.querySelectorAll('a, button, .hover-target').forEach(el => {
      el.addEventListener('mouseenter', onEnter);
      el.addEventListener('mouseleave', onLeave);
    });

    return () => window.removeEventListener('mousemove', move);
  }, []);

  const spawnParticle = (x, y) => {
    const p = document.createElement('div');
    p.className = 'cursor-particle';
    p.style.cssText = `position:fixed;left:${x}px;top:${y}px;width:3px;height:3px;background:var(--cyan);border-radius:50%;pointer-events:none;z-index:9998;box-shadow:0 0 6px var(--cyan);transition:transform 0.8s ease-out,opacity 0.8s;`;
    document.body.appendChild(p);
    requestAnimationFrame(() => {
      const dx = (Math.random() - 0.5) * 40;
      const dy = (Math.random() - 0.5) * 40;
      p.style.transform = `translate(${dx}px, ${dy}px) scale(0)`;
      p.style.opacity = '0';
    });
    setTimeout(() => p.remove(), 800);
  };

  return (
    <>
      <div ref={dotRef} className="cursor cursor-dot"></div>
      <div ref={ringRef} className="cursor cursor-ring"></div>
    </>
  );
}

function Hero() {
  const [tilt, setTilt] = useState({ x: 0, y: 0 });
  const [scanPos, setScanPos] = useState(0);
  const [qrRevealed, setQrRevealed] = useState(false);
  const [screenIdx, setScreenIdx] = useState(0);
  const [kpi, setKpi] = useState({ total: 248, value: 4.2, maint: 12, alerts: 5 });
  const heroRef = useRef(null);

  // Mouse parallax for dashboard
  useEffect(() => {
    const el = heroRef.current;
    if (!el) return;
    const move = (e) => {
      const r = el.getBoundingClientRect();
      const px = (e.clientX - r.left) / r.width - 0.5;
      const py = (e.clientY - r.top) / r.height - 0.5;
      setTilt({ x: px * 10, y: -py * 10 });
    };
    el.addEventListener('mousemove', move);
    return () => el.removeEventListener('mousemove', move);
  }, []);

  // QR scan loop
  useEffect(() => {
    let t = 0;
    const id = setInterval(() => {
      t += 2;
      setScanPos(t % 110);
      if (t % 110 > 95 && !qrRevealed) setQrRevealed(true);
      if (t % 110 < 5) setQrRevealed(false);
    }, 40);
    return () => clearInterval(id);
  }, [qrRevealed]);

  // Screen cycling
  useEffect(() => {
    const id = setInterval(() => setScreenIdx(i => (i + 1) % 3), 3200);
    return () => clearInterval(id);
  }, []);

  // Live KPI ticker
  useEffect(() => {
    const id = setInterval(() => {
      setKpi(k => ({
        total: k.total + (Math.random() > 0.55 ? 1 : 0),
        value: +(k.value + (Math.random() - 0.45) * 0.05).toFixed(2),
        maint: Math.max(4, Math.min(18, k.maint + (Math.random() > 0.5 ? 1 : -1))),
        alerts: Math.max(0, Math.min(9, k.alerts + (Math.random() > 0.65 ? 1 : -1))),
      }));
    }, 1800);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero" ref={heroRef}>
      {/* Hero-local ambience */}
      <div className="hero-glow-a"></div>
      <div className="hero-glow-b"></div>

      <div className="container hero-grid">
        {/* LEFT: Copy */}
        <div className="hero-copy">
          <div className="reveal eyebrow">
            <span className="dot"></span>
            <span>SAAS · COLOMBIA · v4.2</span>
          </div>
          <h1 className="reveal hero-title">
            Gestión total de<br/>
            <span className="glow">activos fijos</span><br/>
            <span className="outline">en tiempo real</span>
          </h1>
          <p className="reveal hero-sub">
            Controla inventarios, deprecia automáticamente y gestiona mantenimientos
            y consumibles desde una sola plataforma. Hecho para empresas que necesitan orden, trazabilidad
            y reportes en segundos.
          </p>
          <div className="reveal hero-actions">
            <a className="btn btn-primary" href="https://wa.me/573017287922?text=Estoy%20interesado%20en%20Mi%20Activo%20360...">
              Solicitar demo
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                <path d="M5 12h14M13 6l6 6-6 6"/>
              </svg>
            </a>
            <a className="btn btn-ghost" href="#sistema">
              Ver el sistema
            </a>
          </div>

          {/* Trust row */}
          <div className="reveal hero-trust">
            <div className="hero-stat">
              <div className="hero-stat-v">16<span>+</span></div>
              <div className="hero-stat-l">Modulos</div>
            </div>
            <div className="hero-stat">
              <div className="hero-stat-v">180K<span>+</span></div>
              <div className="hero-stat-l">activos</div>
            </div>
            <div className="hero-stat">
              <div className="hero-stat-v">99.9<span>%</span></div>
              <div className="hero-stat-l">uptime</div>
            </div>
          </div>
        </div>

        {/* RIGHT: 3D parallax dashboard stage */}
        <div className="hero-stage reveal">
          <div
            className="stage-inner"
            style={{ transform: `perspective(1600px) rotateY(${tilt.x}deg) rotateX(${tilt.y}deg)` }}
          >
            {/* HUD crosshair */}
            <svg className="stage-crosshair" viewBox="0 0 400 300">
              <defs>
                <pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse">
                  <circle cx="1" cy="1" r="0.5" fill="rgba(6,182,212,0.5)"/>
                </pattern>
              </defs>
              <rect width="400" height="300" fill="url(#dots)" opacity="0.5"/>
              <line x1="0" y1="150" x2="400" y2="150" stroke="rgba(6,182,212,0.2)" strokeDasharray="4 4"/>
              <line x1="200" y1="0" x2="200" y2="300" stroke="rgba(6,182,212,0.2)" strokeDasharray="4 4"/>
            </svg>

            {/* Main dashboard card */}
            <div className="stage-dash" style={{ transform: 'translateZ(40px)' }}>
              <div className="dash-header">
                <div className="dash-tabs">
                  <span className={screenIdx === 0 ? 'active' : ''}>Dashboard</span>
                  <span className={screenIdx === 1 ? 'active' : ''}>Activos</span>
                  <span className={screenIdx === 2 ? 'active' : ''}>Depreciación</span>
                </div>
                <div className="dash-dots">
                  <span></span><span></span><span></span>
                </div>
              </div>

              {screenIdx === 0 && (
                <div className="dash-screen">
                  <div className="dash-kpis">
                    <div className="dash-kpi">
                      <div className="dash-kpi-l">Total Activos</div>
                      <div className="dash-kpi-v">{kpi.total}</div>
                      <div className="dash-kpi-delta up">↑ +3 hoy</div>
                    </div>
                    <div className="dash-kpi">
                      <div className="dash-kpi-l">Valor libros</div>
                      <div className="dash-kpi-v">${kpi.value.toFixed(1)}B</div>
                      <div className="dash-kpi-delta">COP</div>
                    </div>
                    <div className="dash-kpi">
                      <div className="dash-kpi-l">En mant.</div>
                      <div className="dash-kpi-v amber">{kpi.maint}</div>
                      <div className="dash-kpi-delta">activos</div>
                    </div>
                    <div className="dash-kpi">
                      <div className="dash-kpi-l">Alertas</div>
                      <div className="dash-kpi-v magenta">{kpi.alerts}</div>
                      <div className="dash-kpi-delta">pendientes</div>
                    </div>
                  </div>
                  <div className="dash-chart-wrap">
                    <div className="dash-chart-title">Depreciación · últimos 12 meses</div>
                    <LiveSparkline />
                  </div>
                </div>
              )}

              {screenIdx === 1 && (
                <div className="dash-screen">
                  <div className="dash-list">
                    {[
                      { id: 'ACT-2021-048', name: 'Servidor Dell R-740', loc: 'Data Center', val: '$380M', state: 'activo' },
                      { id: 'ACT-2022-012', name: 'Planta Eléctrica 250kVA', loc: 'Sede Principal', val: '$1.2B', state: 'alquilado' },
                      { id: 'ACT-2020-033', name: 'Montacargas Toyota', loc: 'Bodega Norte', val: '$220M', state: 'mant' },
                      { id: 'ACT-2023-007', name: 'Compresor Atlas', loc: 'Taller', val: '$45M', state: 'activo' },
                      { id: 'ACT-2024-091', name: 'Impresora HP LaserJet', loc: 'Oficina 3', val: '$18M', state: 'activo' },
                    ].map((a, i) => (
                      <div className="dash-row" key={a.id} style={{ animationDelay: `${i * 0.05}s` }}>
                        <div className="dash-row-id">{a.id}</div>
                        <div className="dash-row-name">{a.name}<span>{a.loc}</span></div>
                        <div className="dash-row-val">{a.val}</div>
                        <div className={`dash-row-state ${a.state}`}>●</div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {screenIdx === 2 && (
                <div className="dash-screen">
                  <div className="dash-chart-title">Depreciación por método</div>
                  <div className="dash-bars">
                    {[
                      { lab: 'Línea Recta', h: 85, c: 'var(--cyan)' },
                      { lab: 'Saldo Dec.', h: 68, c: 'var(--violet)' },
                      { lab: 'Suma Dígitos', h: 52, c: 'var(--lime)' },
                      { lab: 'Unidades Prod.', h: 40, c: 'var(--amber)' },
                      { lab: 'No dep.', h: 15, c: 'var(--magenta)' },
                    ].map((b, i) => (
                      <div key={b.lab} className="dash-bar-col">
                        <div className="dash-bar-fill" style={{ height: `${b.h}%`, background: b.c, animationDelay: `${i * 0.08}s` }}></div>
                        <div className="dash-bar-lab">{b.lab}</div>
                      </div>
                    ))}
                  </div>
                  <div className="dash-summary">
                    <span>Total dep. anual</span>
                    <span className="mono">$148.2M COP</span>
                  </div>
                </div>
              )}
            </div>

            {/* Floating QR scan card */}
            <div className="stage-qr hover-target" style={{ transform: 'translateZ(90px)' }}>
              <div className="qr-head">
                <span className="mono">QR·SCAN</span>
                <span className="qr-ping"></span>
              </div>
              <div className="qr-frame">
                <QRPattern />
                <div className="qr-scanline" style={{ top: `${scanPos}%` }}></div>
                <div className="qr-brackets">
                  <span></span><span></span><span></span><span></span>
                </div>
              </div>
              {qrRevealed ? (
                <div className="qr-result">
                  <div className="qr-result-id mono">ACT-2021-048</div>
                  <div className="qr-result-name">Servidor Dell R-740</div>
                  <div className="qr-result-meta">
                    <span className="text-lime">● Activo</span>
                    <span>· Sede Principal</span>
                  </div>
                </div>
              ) : (
                <div className="qr-result">
                  <div className="qr-result-id mono">Escaneando…</div>
                  <div className="qr-result-name"> </div>
                  <div className="qr-result-meta"><span>Identificando activo</span></div>
                </div>
              )}
            </div>

            {/* Floating isometric site card */}
            <div className="stage-iso" style={{ transform: 'translateZ(70px)' }}>
              <IsoSite />
            </div>

            {/* Floating status chips */}
            <div className="stage-chip chip-a" style={{ transform: 'translateZ(100px)' }}>
              <span className="chip-icon">⚙</span>
              <div>
                <div className="chip-l">Valor</div>
                <div className="chip-v mono">$4.23B</div>
              </div>
            </div>
            <div className="stage-chip chip-b" style={{ transform: 'translateZ(110px)' }}>
              <span className="chip-icon">●</span>
              <div>
                <div className="chip-l">Próximo mant.</div>
                <div className="chip-v mono">3 días</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom ticker */}
      <div className="hero-ticker">
        <div className="ticker-track">
          {[
            '◆ DEPRECIACIÓN AUTOMÁTICA',
            '◆ MANTENIMIENTOS',
            '◆ CÓDIGOS QR',
            '◆ CONSUMIBLES',
            '◆ CARGA MASIVA EXCEL',
            '◆ REPORTES PDF',
            '◆ ALERTAS TIEMPO REAL',
            '◆ MULTI-EMPRESA',
            '◆ DEPRECIACIÓN AUTOMÁTICA',
            '◆ MANTENIMIENTOS',
            '◆ CÓDIGOS QR',
            '◆ CONSUMIBLES',
            '◆ CARGA MASIVA EXCEL',
            '◆ REPORTES PDF',
            '◆ ALERTAS TIEMPO REAL',
            '◆ MULTI-EMPRESA',
          ].map((t, i) => <span key={i}>{t}</span>)}
        </div>
      </div>
    </section>
  );
}

// ----- Hero helper components -----

function QRPattern() {
  // Deterministic QR-like pattern
  const cells = [];
  const size = 13;
  const seed = [
    '1111111001111111',
    '1000001010100001',
    '1011101011011101',
    '1011101001011101',
    '1011101011011101',
    '1000001010100001',
    '1111111010111111',
    '0000000011000000',
    '1001011110110011',
    '1110010001001101',
    '0101110011110010',
    '1011001100011011',
    '1111111010011011',
  ];
  return (
    <svg viewBox="0 0 130 130" className="qr-svg">
      {seed.map((row, y) =>
        [...row].slice(0, size).map((c, x) =>
          c === '1' ? <rect key={`${x}-${y}`} x={x*10} y={y*10} width="9" height="9" fill="var(--cyan)" rx="1"/> : null
        )
      )}
    </svg>
  );
}

function LiveSparkline() {
  const [points, setPoints] = useState(() => Array.from({length: 32}, (_, i) => 30 + Math.sin(i*0.4)*12 + Math.random()*10));

  useEffect(() => {
    const id = setInterval(() => {
      setPoints(p => {
        const next = [...p.slice(1)];
        const last = p[p.length-1];
        next.push(Math.max(10, Math.min(60, last + (Math.random()-0.48)*8)));
        return next;
      });
    }, 900);
    return () => clearInterval(id);
  }, []);

  const W = 280, H = 70;
  const stepX = W / (points.length-1);
  const path = points.map((y,i) => `${i===0?'M':'L'} ${i*stepX} ${H-y}`).join(' ');
  const fill = `${path} L ${W} ${H} L 0 ${H} Z`;

  return (
    <svg viewBox={`0 0 ${W} ${H}`} className="sparkline">
      <defs>
        <linearGradient id="sparkFill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--cyan)" stopOpacity="0.35"/>
          <stop offset="100%" stopColor="var(--cyan)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d={fill} fill="url(#sparkFill)"/>
      <path d={path} fill="none" stroke="var(--cyan)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" style={{filter: 'drop-shadow(0 0 4px var(--cyan))'}}/>
      {points.map((y,i) => i === points.length-1 && (
        <circle key={i} cx={i*stepX} cy={H-y} r="3" fill="var(--cyan)" style={{filter: 'drop-shadow(0 0 6px var(--cyan))'}}>
          <animate attributeName="r" values="3;5;3" dur="1.2s" repeatCount="indefinite"/>
        </circle>
      ))}
    </svg>
  );
}

function IsoSite() {
  // Isometric scene: fixed-asset office inventory — server rack, monitor+CPU, printer, QR-tagged asset
  return (
    <svg viewBox="0 0 200 160" className="iso-svg">
      <defs>
        <linearGradient id="isoGrid" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="rgba(6,182,212,0.4)"/>
          <stop offset="1" stopColor="rgba(6,182,212,0.05)"/>
        </linearGradient>
      </defs>
      {/* Isometric grid floor */}
      <g opacity="0.55">
        {[-2,-1,0,1,2,3,4,5].map(i => (
          <line key={'h'+i} x1={40+i*18} y1={40+i*9} x2={190+i*18} y2={115+i*9} stroke="url(#isoGrid)" strokeWidth="0.5"/>
        ))}
        {[0,1,2,3,4,5,6,7,8].map(i => (
          <line key={'v'+i} x1={10+i*18} y1={85-i*9} x2={95+i*18} y2={170-i*9} stroke="url(#isoGrid)" strokeWidth="0.5"/>
        ))}
      </g>

      {/* Server rack (left) — tall, cyan */}
      <g transform="translate(40, 55)">
        {/* top */}
        <polygon points="0,10 16,2 32,10 16,18" fill="rgba(6,182,212,0.35)" stroke="var(--cyan)" strokeWidth="0.8"/>
        {/* left face */}
        <polygon points="0,10 0,60 16,68 16,18" fill="rgba(6,182,212,0.2)" stroke="var(--cyan)" strokeWidth="0.8"/>
        {/* right face */}
        <polygon points="32,10 32,60 16,68 16,18" fill="rgba(6,182,212,0.3)" stroke="var(--cyan)" strokeWidth="0.8"/>
        {/* rack units — blinking LEDs */}
        {[0,1,2,3,4].map(i => (
          <g key={i}>
            <line x1="16" y1={22+i*9} x2="32" y2={30+i*9} stroke="var(--cyan)" strokeWidth="0.4" opacity="0.6"/>
            <circle cx={29} cy={26+i*9} r="0.9" fill="var(--lime)">
              <animate attributeName="opacity" values="1;0.2;1" dur={`${1.2+i*0.3}s`} repeatCount="indefinite"/>
            </circle>
            <circle cx={26} cy={26+i*9} r="0.7" fill="var(--cyan)" opacity="0.7"/>
          </g>
        ))}
        {/* QR tag on rack */}
        <g transform="translate(18, 54)">
          <rect width="6" height="6" fill="#fff" stroke="var(--ink)" strokeWidth="0.3"/>
          <rect x="0.8" y="0.8" width="1.2" height="1.2" fill="var(--ink)"/>
          <rect x="4" y="0.8" width="1.2" height="1.2" fill="var(--ink)"/>
          <rect x="0.8" y="4" width="1.2" height="1.2" fill="var(--ink)"/>
          <rect x="2.4" y="2.4" width="0.8" height="0.8" fill="var(--ink)"/>
        </g>
      </g>

      {/* Desk with monitor + CPU (center) */}
      <g transform="translate(92, 78)">
        {/* desk top */}
        <polygon points="0,18 28,4 56,18 28,32" fill="rgba(167,139,250,0.25)" stroke="var(--violet)" strokeWidth="0.8"/>
        {/* desk leg */}
        <line x1="28" y1="32" x2="28" y2="50" stroke="var(--violet)" strokeWidth="0.8" opacity="0.6"/>
        {/* monitor base */}
        <polygon points="16,14 26,9 36,14 26,19" fill="rgba(8,15,28,0.4)" stroke="var(--ink)" strokeWidth="0.5"/>
        {/* monitor screen — left face */}
        <polygon points="14,14 14,-10 26,-16 26,8" fill="rgba(6,182,212,0.35)" stroke="var(--cyan)" strokeWidth="0.8"/>
        <polygon points="26,-16 26,8 38,14 38,-10" fill="rgba(6,182,212,0.2)" stroke="var(--cyan)" strokeWidth="0.8"/>
        {/* scan-line on screen */}
        <line x1="15" y1="-4" x2="26" y2="1" stroke="var(--lime)" strokeWidth="0.6" opacity="0.9">
          <animate attributeName="y1" values="-14;6;-14" dur="3s" repeatCount="indefinite"/>
          <animate attributeName="y2" values="-20;0;-20" dur="3s" repeatCount="indefinite"/>
        </line>
        {/* CPU tower on desk */}
        <polygon points="38,18 46,14 52,17 44,21" fill="rgba(6,182,212,0.3)" stroke="var(--cyan)" strokeWidth="0.6"/>
        <polygon points="38,18 38,26 44,29 44,21" fill="rgba(6,182,212,0.2)" stroke="var(--cyan)" strokeWidth="0.6"/>
        <polygon points="52,17 52,25 44,29 44,21" fill="rgba(6,182,212,0.35)" stroke="var(--cyan)" strokeWidth="0.6"/>
        <circle cx="49" cy="22" r="0.7" fill="var(--lime)">
          <animate attributeName="opacity" values="1;0.3;1" dur="1.5s" repeatCount="indefinite"/>
        </circle>
      </g>

      {/* Printer (right foreground) */}
      <g transform="translate(138, 105)">
        <polygon points="0,10 14,4 28,10 14,16" fill="rgba(245,158,11,0.35)" stroke="var(--amber)" strokeWidth="0.7"/>
        <polygon points="0,10 0,20 14,26 14,16" fill="rgba(245,158,11,0.2)" stroke="var(--amber)" strokeWidth="0.7"/>
        <polygon points="28,10 28,20 14,26 14,16" fill="rgba(245,158,11,0.28)" stroke="var(--amber)" strokeWidth="0.7"/>
        {/* paper tray */}
        <polygon points="4,9 14,4.5 24,9 14,13.5" fill="rgba(255,255,255,0.6)" stroke="var(--amber)" strokeWidth="0.4"/>
        {/* ejected sheet */}
        <polygon points="6,8 14,4 22,8 14,12" fill="#fff" stroke="var(--ink)" strokeWidth="0.3" opacity="0.85">
          <animateTransform attributeName="transform" type="translate" values="0 0;0 -4;0 0" dur="3s" repeatCount="indefinite"/>
        </polygon>
      </g>

      {/* Floating asset tag with ID (top right) */}
      <g transform="translate(138, 40)">
        <rect width="48" height="22" rx="3" fill="rgba(255,255,255,0.95)" stroke="var(--cyan)" strokeWidth="0.8" style={{filter:'drop-shadow(0 2px 6px rgba(6,182,212,0.35))'}}/>
        {/* QR */}
        <g transform="translate(3, 3)">
          <rect width="16" height="16" fill="#fff" stroke="var(--ink)" strokeWidth="0.3"/>
          <rect x="1.5" y="1.5" width="3.5" height="3.5" fill="var(--ink)"/>
          <rect x="11" y="1.5" width="3.5" height="3.5" fill="var(--ink)"/>
          <rect x="1.5" y="11" width="3.5" height="3.5" fill="var(--ink)"/>
          <rect x="6.5" y="6.5" width="3" height="3" fill="var(--ink)"/>
          <rect x="11" y="8.5" width="1.5" height="1.5" fill="var(--ink)"/>
          <rect x="8.5" y="11" width="1.5" height="1.5" fill="var(--ink)"/>
        </g>
        <text x="22" y="9" fontSize="4.5" fill="var(--ink)" fontFamily="ui-monospace,monospace" fontWeight="700">ACT-048</text>
        <text x="22" y="14" fontSize="3.2" fill="var(--muted)" fontFamily="ui-monospace,monospace">Servidor R-740</text>
        <circle cx="44" cy="5" r="1.5" fill="var(--lime)">
          <animate attributeName="opacity" values="1;0.3;1" dur="1.4s" repeatCount="indefinite"/>
        </circle>
      </g>

      {/* Geolocation ping on desk area */}
      <circle cx="120" cy="88" r="3" fill="var(--lime)">
        <animate attributeName="r" values="3;9;3" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.9;0;0.9" dur="2s" repeatCount="indefinite"/>
      </circle>
      <circle cx="120" cy="88" r="2" fill="var(--lime)"/>
    </svg>
  );
}

window.Hero = Hero;
window.MagneticCursor = MagneticCursor;