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

type Props = {
  className?: string;
};

/**
 * Curved green / white bands like the GRV logo topography.
 * Overlaps the top of the footer — no straight stripe bar.
 */
export function FooterTopographicBand({ className }: Props) {
  const contour = "rgba(255,255,255,0.35)";

  return (
    <div
      className={cn(
        "pointer-events-none absolute inset-x-0 top-0 z-0 h-44 -translate-y-[38%] md:h-52 md:-translate-y-[42%]",
        className
      )}
      aria-hidden
    >
      <svg
        viewBox="0 0 1440 220"
        className="h-full w-full"
        preserveAspectRatio="none"
      >
        {/* Alternating curved bands (logo-style flow, not vertical stripes) */}
        <path
          d="M0 0 H1440 V32
            C1180 48 980 12 720 28
            S380 52 0 36 Z"
          fill="#ffffff"
        />
        <path
          d="M0 36
            C220 54 480 22 720 40
            S1180 58 1440 44
            V76
            C1120 92 860 58 600 74
            S240 98 0 82 Z"
          fill="#1a5c38"
        />
        <path
          d="M0 82
            C300 64 520 96 760 78
            S1240 62 1440 86
            V118
            C1080 102 820 128 560 110
            S200 94 0 112 Z"
          fill="#ffffff"
        />
        <path
          d="M0 112
            C180 128 420 96 680 114
            S1220 132 1440 108
            V148
            C1000 164 740 136 480 152
            S160 172 0 156 Z"
          fill="#1a5c38"
        />
        <path
          d="M0 156
            C260 140 500 168 760 150
            S1280 134 1440 158
            V220
            H0 Z"
          fill="#1a5c38"
        />

        {/* Logo-like contour strokes */}
        <path
          d="M0 28 C240 8 480 44 720 26 S1200 12 1440 32"
          fill="none"
          stroke={contour}
          strokeWidth="1"
          strokeLinecap="round"
        />
        <path
          d="M0 58 C320 78 640 42 960 62 S1280 48 1440 68"
          fill="none"
          stroke={contour}
          strokeWidth="1"
          strokeLinecap="round"
          opacity="0.7"
        />
        <path
          d="M0 96 C200 76 520 108 800 88 S1180 72 1440 94"
          fill="none"
          stroke={contour}
          strokeWidth="1"
          strokeLinecap="round"
          opacity="0.5"
        />
        <path
          d="M0 134 C400 152 720 118 1040 138 S1320 124 1440 142"
          fill="none"
          stroke={contour}
          strokeWidth="1"
          strokeLinecap="round"
          opacity="0.4"
        />
      </svg>

      {/* Fade into solid footer green */}
      <div className="absolute inset-x-0 bottom-0 h-16 bg-gradient-to-b from-transparent to-[#1a5c38]" />
    </div>
  );
}