import { buildWavyContourPaths } from "@/lib/wavy-contour-lines";
import { cn } from "@/lib/utils";

const VIEW_W = 160;
const VIEW_H = 100;

const CONTOUR_PRIMARY = buildWavyContourPaths(28, VIEW_W, VIEW_H, 0x8a3c21);
const CONTOUR_SECONDARY = buildWavyContourPaths(22, VIEW_W, VIEW_H, 0x5c2e18);

type Props = {
  className?: string;
};

const frameClass =
  "absolute left-1/2 top-1/2 h-[118%] w-[118%] min-h-full min-w-full -translate-x-1/2 -translate-y-1/2";

/**
 * Topographic waves on white sections — visible hairlines with slow drift.
 * Not used on the home hero (keeps existing topography art).
 */
export function WavyContourLinesBackground({ className }: Props) {
  return (
    <div
      className={cn(
        "wavy-contour-lines pointer-events-none absolute inset-0 z-0 overflow-hidden bg-white",
        className
      )}
      aria-hidden
    >
      <div className={frameClass}>
        <div className="wavy-contour-layer wavy-contour-layer--primary h-full w-full">
        <svg
          className="h-full w-full"
          viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
          preserveAspectRatio="xMidYMid slice"
          xmlns="http://www.w3.org/2000/svg"
        >
          {CONTOUR_PRIMARY.map((d, i) => (
            <path
              key={`a-${i}`}
              d={d}
              fill="none"
              stroke="rgba(26, 92, 56, 0.2)"
              strokeWidth={0.34}
              strokeLinecap="round"
              strokeLinejoin="round"
              vectorEffect="non-scaling-stroke"
            />
          ))}
        </svg>
        </div>
      </div>
      <div className={frameClass}>
        <div className="wavy-contour-layer wavy-contour-layer--secondary h-full w-full">
        <svg
          className="h-full w-full"
          viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
          preserveAspectRatio="xMidYMid slice"
          xmlns="http://www.w3.org/2000/svg"
        >
          {CONTOUR_SECONDARY.map((d, i) => (
            <path
              key={`b-${i}`}
              d={d}
              fill="none"
              stroke="rgba(26, 92, 56, 0.11)"
              strokeWidth={0.26}
              strokeLinecap="round"
              strokeLinejoin="round"
              vectorEffect="non-scaling-stroke"
            />
          ))}
        </svg>
        </div>
      </div>
    </div>
  );
}