import { buildWavyTessellationMesh } from "@/components/brand/WavyTessellationMesh";
import { cn } from "@/lib/utils";

type Props = {
  className?: string;
};

/** Wavy interlocking tessellation across the green footer (GRV palette). */
const FOOTER_MESH = buildWavyTessellationMesh(20, 38, 100, 100, {
  diagonalSkew: 0.85,
  amplitude: 0.68,
});

export function FooterTopoPattern({ className }: Props) {
  return (
    <div
      className={cn(
        "pointer-events-none absolute inset-0 z-0 overflow-hidden bg-[#1a5c38]",
        className
      )}
      aria-hidden
    >
      <svg
        className="absolute left-1/2 top-1/2 h-[135%] w-[135%] -translate-x-1/2 -translate-y-1/2 -rotate-[14deg] scale-110"
        viewBox="0 0 100 100"
        preserveAspectRatio="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        {FOOTER_MESH.map((cell, i) => (
          <path
            key={i}
            d={cell.d}
            fill={cell.fill}
            stroke="rgba(255,255,255,0.05)"
            strokeWidth={0.12}
          />
        ))}
      </svg>
      <div
        className="absolute inset-0 bg-gradient-to-t from-[#0d3d26]/18 via-transparent to-transparent"
        aria-hidden
      />
    </div>
  );
}