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

type Props = {
  className?: string;
};

/**
 * Curvy contour lines extending from white pattern sections into the green band below.
 */
export function TopoCurvyExtend({ className }: Props) {
  return (
    <div
      className={cn(
        "topo-curvy-extend pointer-events-none absolute right-0 bottom-0 left-0 z-[6] h-16 translate-y-[45%] md:h-24 md:translate-y-[40%]",
        className
      )}
      aria-hidden
    >
      <svg
        className="h-full w-full"
        viewBox="0 0 1440 96"
        preserveAspectRatio="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M-40 52 C 180 8, 420 88, 720 44 S 1180 12, 1480 56"
          fill="none"
          stroke="#1a5c38"
          strokeWidth="1.25"
          strokeOpacity="0.42"
          strokeLinecap="round"
        />
        <path
          d="M-20 68 C 260 92, 520 28, 800 72 S 1220 88, 1500 38"
          fill="none"
          stroke="#1a5c38"
          strokeWidth="1"
          strokeOpacity="0.32"
          strokeLinecap="round"
        />
        <path
          d="M0 36 C 320 64, 640 16, 960 48 S 1320 76, 1480 28"
          fill="none"
          stroke="#1a5c38"
          strokeWidth="1.5"
          strokeOpacity="0.28"
          strokeLinecap="round"
        />
        <path
          d="M80 82 C 400 58, 700 94, 1040 62 S 1280 42, 1460 78"
          fill="none"
          stroke="#2d7a52"
          strokeWidth="0.9"
          strokeOpacity="0.38"
          strokeLinecap="round"
        />
      </svg>
    </div>
  );
}