import { cn } from "@/lib/utils";

/**
 * Continuous valley lines from top to bottom of the page.
 * Sits behind content; sections use lighter accents on top.
 */
export function RiftPageFlow() {
  return (
    <div
      className="pointer-events-none absolute inset-0 z-0 overflow-hidden"
      aria-hidden
    >
      {/* Primary spine — left */}
      <svg
        className="absolute left-[4%] top-0 hidden h-full w-16 opacity-[0.14] md:block lg:left-[6%] lg:w-20"
        viewBox="0 0 80 2000"
        preserveAspectRatio="none"
        fill="none"
      >
        <path
          d="M40 0 C22 280, 58 520, 38 780 S18 1180, 42 1520 S62 1780, 40 2000"
          stroke="#1a5c38"
          strokeWidth="1.5"
          strokeLinecap="round"
        />
        <path
          d="M44 0 C60 320, 28 640, 48 960 S32 1340, 46 1680, 42 2000"
          stroke="#1a5c38"
          strokeWidth="1"
          strokeLinecap="round"
          opacity="0.5"
        />
      </svg>

      {/* Secondary thread — right (different rhythm) */}
      <svg
        className="absolute right-[5%] top-0 hidden h-full w-14 opacity-[0.1] lg:block lg:right-[8%] lg:w-16"
        viewBox="0 0 60 2000"
        preserveAspectRatio="none"
        fill="none"
      >
        <path
          d="M30 0 C48 400, 12 800, 34 1200 S50 1600, 28 2000"
          stroke="#1a5c38"
          strokeWidth="1.25"
          strokeLinecap="round"
        />
        <path
          d="M26 120 Q40 600, 22 1000 T30 2000"
          stroke="#ffb300"
          strokeWidth="0.75"
          strokeLinecap="round"
          opacity="0.35"
        />
      </svg>

      {/* Center whisper — only on xl, very faint */}
      <svg
        className={cn(
          "absolute left-1/2 top-0 hidden h-full w-px -translate-x-1/2",
          "opacity-[0.06] xl:block"
        )}
        viewBox="0 0 2 2000"
        preserveAspectRatio="none"
      >
        <line x1="1" y1="0" x2="1" y2="2000" stroke="#1a5c38" strokeWidth="1" />
      </svg>
    </div>
  );
}