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

type Props = {
  className?: string;
};

/**
 * Curvy contours from the white section edge, extending downward into the green section.
 */
export function TopoCurvyExtend({ className }: Props) {
  return (
    <div
      className={cn(
        "topo-curvy-extend pointer-events-none absolute top-full right-0 left-0 z-[6] h-28 w-full translate-y-[52%] md:h-40",
        className
      )}
      aria-hidden
    >
      <svg
        className="h-full w-full"
        viewBox="0 0 1440 160"
        preserveAspectRatio="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        {/* Upper curves — sit on the white/green boundary */}
        <path
          d="M-40 24 C 200 2, 480 44, 720 14 S 1180 4, 1480 28"
          fill="none"
          stroke="#37a47a"
          strokeWidth="1.25"
          strokeOpacity="0.45"
          strokeLinecap="round"
        />
        <path
          d="M0 8 C 280 32, 560 4, 880 28 S 1240 42, 1480 12"
          fill="none"
          stroke="#37a47a"
          strokeWidth="1"
          strokeOpacity="0.32"
          strokeLinecap="round"
        />
        {/* Mid curves — dip into green */}
        <path
          d="M120 42 C 320 64, 520 34, 720 78 S 980 46, 1240 88, 1480 52"
          fill="none"
          stroke="#37a47a"
          strokeWidth="1.2"
          strokeOpacity="0.38"
          strokeLinecap="round"
        />
        <path
          d="M-20 54 C 240 86, 460 58, 700 104 S 1020 68, 1320 112, 1500 76"
          fill="none"
          stroke="#2d7a52"
          strokeWidth="1"
          strokeOpacity="0.35"
          strokeLinecap="round"
        />
        {/* Lower curves — deep in green */}
        <path
          d="M80 68 C 360 96, 600 72, 840 118 S 1100 86, 1380 128"
          fill="none"
          stroke="#37a47a"
          strokeWidth="0.9"
          strokeOpacity="0.28"
          strokeLinecap="round"
        />
        <path
          d="M200 92 C 440 118, 640 98, 880 138 S 1080 108, 1320 148"
          fill="none"
          stroke="#2d7a52"
          strokeWidth="0.85"
          strokeOpacity="0.26"
          strokeLinecap="round"
        />
        {/* Vertical strokes — continue downward into green */}
        <path
          d="M360 38 L360 132"
          fill="none"
          stroke="#37a47a"
          strokeWidth="0.75"
          strokeOpacity="0.3"
          strokeLinecap="round"
        />
        <path
          d="M720 14 L720 148"
          fill="none"
          stroke="#37a47a"
          strokeWidth="0.9"
          strokeOpacity="0.35"
          strokeLinecap="round"
        />
        <path
          d="M1080 46 L1080 138"
          fill="none"
          stroke="#2d7a52"
          strokeWidth="0.7"
          strokeOpacity="0.28"
          strokeLinecap="round"
        />
        <path
          d="M520 34 L520 118"
          fill="none"
          stroke="#37a47a"
          strokeWidth="0.65"
          strokeOpacity="0.25"
          strokeLinecap="round"
        />
        <path
          d="M920 28 L920 124"
          fill="none"
          stroke="#2d7a52"
          strokeWidth="0.65"
          strokeOpacity="0.22"
          strokeLinecap="round"
        />
      </svg>
    </div>
  );
}