"use client";
import { MouseEvent, useRef } from "react";

const THRESHOLD = 140;
const MAX_DISP = 14;
const ARRAY_LENGTH = 17;

export default function MomentumLines() {
  const containerRef = useRef<HTMLDivElement>(null);

  const onMouseMove = (e: MouseEvent) => {
    if (!containerRef.current) return;
    const rect = containerRef.current.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const lines = containerRef.current.querySelectorAll(".line");

    lines.forEach((line) => {
      const lineDiv = line as HTMLDivElement;
      const lineCenter = lineDiv.offsetLeft + lineDiv.offsetWidth / 2;
      const dist = mouseX - lineCenter;
      const absDist = Math.abs(dist);

      if (absDist > THRESHOLD) {
        lineDiv.style.setProperty("--x-position", "0px");
        lineDiv.style.setProperty("--opacity-value", "0.35");
        return;
      }

      // smooth falloff: 1 at cursor, 0 at threshold (cubic out)
      const t = 1 - absDist / THRESHOLD;
      const falloff = 1 - Math.pow(1 - t, 3);
      // displace TOWARD cursor but capped — creates gentle attraction without collapse
      const direction = Math.sign(dist);
      const disp = direction * falloff * MAX_DISP;

      lineDiv.style.setProperty("--x-position", `${disp}px`);
      // subtle opacity boost near cursor instead of harsh 1-gap mapping
      lineDiv.style.setProperty("--opacity-value", `${0.35 + falloff * 0.65}`);
    });
  };

  const onMouseOut = () => {
    const lines = containerRef.current?.querySelectorAll(".line");
    lines?.forEach((line) => {
      const lineDiv = line as HTMLDivElement;
      lineDiv.style.setProperty("--x-position", "0px");
      lineDiv.style.setProperty("--opacity-value", "1");
    });
  };

  return (
    <article className="relative w-full max-w-2xl overflow-hidden rounded-xl">
      <style>{`
        .line {
          transform: translateX(var(--x-position, 0px));
          opacity: var(--opacity-value, 1);
          transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1), opacity 420ms cubic-bezier(0.32, 0.72, 0, 1);
          will-change: transform;
        }
        @media (prefers-reduced-motion: reduce) {
          .line {
            transition: opacity 150ms ease-out;
            transform: none !important;
          }
        }
      `}</style>
      <div
        onMouseMove={onMouseMove}
        onMouseOut={onMouseOut}
        onFocus={onMouseOut}
        onBlur={onMouseOut}
        className="flex h-64 w-full justify-between p-10"
        ref={containerRef}
      >
        {[...new Array(ARRAY_LENGTH).fill(0)].map((_, index) => (
          <div
            key={index}
            className="line pointer-events-none h-full w-px bg-white"
          />
        ))}
      </div>
    </article>
  );
}
Momentum Lines
