function knotDots() {
  const N = 300;
  const R = 175;
  const r = 74;
  return Array.from({ length: N }, (_, i) => {
    const t = (i / N) * Math.PI * 2;
    const x = (R + r * Math.cos(2 * t)) * Math.cos(3 * t);
    const y = (R + r * Math.cos(2 * t)) * Math.sin(3 * t);
    const z = r * Math.sin(2 * t);
    const depth = (z + r) / (2 * r); // 0 far → 1 near
    return {
      cx: +(400 + x).toFixed(3),
      cy: +(400 + y).toFixed(3),
      rad: +(1.2 + depth * 3.6).toFixed(3),
      hue: Math.round((i / N) * 320),
      op: +(0.28 + depth * 0.72).toFixed(3),
    };
  });
}

function Knot() {
  const dots = knotDots();
  return (
    <svg viewBox="0 0 800 800" className="h-full w-full">
      {dots.map((d, i) => (
        <circle key={i} cx={d.cx} cy={d.cy} r={d.rad} fill={`hsl(${d.hue} 92% 66%)`} opacity={d.op} />
      ))}
    </svg>
  );
}

export function SpiralGlowHero() {
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#04030a] text-white antialiased grid place-items-center px-6">
      {/* nebula */}
      <div
        aria-hidden
        className="absolute inset-0"
        style={{
          background:
            "radial-gradient(40% 45% at 50% 50%, rgba(124,58,237,0.22), transparent 70%), radial-gradient(35% 40% at 30% 70%, rgba(236,72,153,0.16), transparent 70%), radial-gradient(35% 40% at 72% 32%, rgba(34,211,238,0.16), transparent 70%)",
        }}
      />

      {/* rotating knot — hue-cycles as a whole; bloom copy sits behind */}
      <div
        aria-hidden
        className="absolute left-1/2 top-1/2 h-[820px] w-[820px] -translate-x-1/2 -translate-y-1/2"
        style={{ animation: "weave-spin 52s linear infinite, weave-hue 26s linear infinite" }}
      >
        <div className="absolute inset-0 opacity-60" style={{ filter: "blur(14px)" }}>
          <Knot />
        </div>
        <div className="absolute inset-0" style={{ filter: "drop-shadow(0 0 6px rgba(165,180,252,0.5))", animation: "weave-breathe 9s ease-in-out infinite" }}>
          <Knot />
        </div>
      </div>

      {/* pulsing bright core */}
      <div
        aria-hidden
        className="absolute left-1/2 top-1/2 h-40 w-40 -translate-x-1/2 -translate-y-1/2 rounded-full"
        style={{
          background: "radial-gradient(closest-side, rgba(255,255,255,0.9), rgba(167,139,250,0.5) 40%, transparent 70%)",
          filter: "blur(6px)",
          animation: "core-pulse 4.5s ease-in-out infinite",
        }}
      />

      {/* legibility wash */}
      <div
        aria-hidden
        className="absolute left-1/2 top-1/2 h-[360px] w-[640px] -translate-x-1/2 -translate-y-1/2 rounded-full"
        style={{ background: "radial-gradient(closest-side, rgba(4,3,10,0.86), rgba(4,3,10,0.35) 60%, transparent)" }}
      />

      <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-fuchsia-400">.</span>
        </span>
        <a href="#" className="text-[12.5px] text-white/55 hover:text-white transition-colors">Gallery ↗</a>
      </div>

      <div className="relative z-10 max-w-xl text-center">
        <p className="mb-6 font-mono text-[11px] uppercase tracking-[0.34em] text-white/45">
          Generative · WebGL-free
        </p>
        <h1
          className="font-normal italic leading-[0.95] tracking-[-0.01em]"
          style={{
            fontSize: "clamp(52px, 9vw, 120px)",
            fontFamily: "'Instrument Serif', Georgia, serif",
            textShadow: "0 0 40px rgba(167,139,250,0.45)",
          }}
        >
          Woven by Light
        </h1>
        <p className="mx-auto mt-6 max-w-sm text-[15px] leading-relaxed text-white/60">
          An interactive tapestry of light and motion, crafted entirely with
          code and a little curiosity.
        </p>
        <a
          href="#"
          className="mt-9 inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/[0.05] px-6 py-3 text-[13px] text-white/90 backdrop-blur transition-colors hover:bg-white/10"
        >
          Explore the Weave →
        </a>
      </div>

      <style>{`
        @keyframes weave-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
        @keyframes weave-hue { to { filter: hue-rotate(360deg); } }
        @keyframes weave-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
        @keyframes core-pulse { 0%,100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.25); } }
      `}</style>
    </div>
  );
}
Woven by Light Hero

Woven by Light
