export function WireframeMeshHero() {
  const paths = Array.from({ length: 34 }, (_, i) => {
    const k = i - 17;
    const y = 300 + k * 12;
    const sway = k * 7;
    return {
      id: `bp-${i}`,
      d: `M -120 ${y} C 320 ${y - 140 - sway} 720 ${y + 140 + sway} 1320 ${y - sway}`,
      accent: i % 7 === 3,
      delay: (i % 10) * 0.4,
    };
  });
  // a few paths get a glowing dot traveling along them
  const travelers = [
    { id: "bp-5", color: "#a5b4fc", dur: 5 },
    { id: "bp-12", color: "#f0abfc", dur: 6.5 },
    { id: "bp-21", color: "#67e8f9", dur: 5.5 },
    { id: "bp-28", color: "#fcd34d", dur: 7 },
  ];

  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#07060c] text-white antialiased grid place-items-center px-6">
      <svg aria-hidden viewBox="0 0 1200 600" preserveAspectRatio="none" className="absolute inset-0 h-full w-full" style={{ animation: "paths-sway 16s ease-in-out infinite" }}>
        <defs>
          <filter id="bp-glow" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur stdDeviation="3" result="b" />
            <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
          </filter>
        </defs>

        {paths.map((p) => (
          <path key={p.id} id={p.id} d={p.d} fill="none"
            stroke={p.accent ? "rgba(129,140,248,0.6)" : "rgba(255,255,255,0.14)"}
            strokeWidth={p.accent ? 1.4 : 1}
            strokeDasharray="14 340"
            style={{ animation: `path-flow ${7 + (Number(p.id.split("-")[1]) % 5)}s linear ${p.delay}s infinite` }} />
        ))}

        {/* traveling light pulses follow real paths */}
        <g filter="url(#bp-glow)">
          {travelers.map((t) => (
            <circle key={t.id} r="3.4" fill={t.color}>
              <animateMotion dur={`${t.dur}s`} repeatCount="indefinite" rotate="auto">
                <mpath href={`#${t.id}`} />
              </animateMotion>
              <animate attributeName="opacity" values="0;1;1;0" dur={`${t.dur}s`} repeatCount="indefinite" />
            </circle>
          ))}
        </g>
      </svg>

      {/* center wash + a soft color bloom */}
      <div aria-hidden className="absolute left-1/2 top-1/2 h-[460px] w-[820px] -translate-x-1/2 -translate-y-1/2 rounded-full" style={{ background: "radial-gradient(closest-side, rgba(7,6,12,0.92), transparent)" }} />
      <div aria-hidden className="absolute left-1/2 top-1/2 h-[300px] w-[560px] -translate-x-1/2 -translate-y-1/2 rounded-full" style={{ background: "radial-gradient(closest-side, rgba(99,102,241,0.18), transparent 70%)", filter: "blur(30px)" }} />

      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-8 lg:px-12 py-6">
        <span className="text-[13px] font-medium tracking-[0.22em] uppercase text-white/75">Velynkit<span className="text-indigo-400">.</span></span>
        <a href="#" className="text-[12.5px] text-white/55 hover:text-white transition-colors">Components ↗</a>
      </div>

      <div className="relative z-10 text-center">
        <h1 className="text-[clamp(52px,9vw,128px)] font-bold leading-[0.9] tracking-[-0.04em]" style={{ textShadow: "0 0 50px rgba(99,102,241,0.4)" }}>
          <span className="block text-white">Background</span>
          <span className="block text-white/35">Paths</span>
        </h1>
        <a href="#" className="group mt-10 inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 text-[13px] font-medium text-black shadow-[0_0_50px_-8px_rgba(255,255,255,0.6)] transition-transform hover:scale-[1.03]">
          Discover Excellence
          <span aria-hidden className="transition-transform group-hover:translate-x-1">→</span>
        </a>
      </div>

      <style>{`
        @keyframes path-flow { to { stroke-dashoffset: -354; } }
        @keyframes paths-sway { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-14px) scaleY(1.03); } }
      `}</style>
    </div>
  );
}
Background Paths Hero

BackgroundPaths
