import { cn } from "@/lib/utils";
import Image from "next/image";

type HeroPatternBackgroundProps = {
  className?: string;
  segment?: "standalone" | "header" | "hero";
  priority?: boolean;
};

const segmentStyles = {
  standalone: {
    top: 0,
    height: "100%",
  },
  header: {
    top: 0,
    height: "calc(var(--website-header-height, 96px) + var(--website-hero-height, 644px))",
  },
  hero: {
    top: "calc(-1 * var(--website-header-height, 96px))",
    height: "calc(var(--website-header-height, 96px) + var(--website-hero-height, 644px))",
  },
} as const;

const patternFrameStyle = {
  width: "349.066%",
  height: "217.449%",
  insetInlineStart: "-101.597%",
  top: "-56.081%",
} as const;

const patternGridAssetUrl =
  "https://www.figma.com/api/mcp/asset/1b97713a-3c70-436f-9b8e-190c046e0423";
const patternDotsAssetUrl =
  "https://www.figma.com/api/mcp/asset/c58c07e2-70cb-40f7-a2f2-b21c121645ac";

export default function HeroPatternBackground({
  className,
  segment = "standalone",
  priority = false,
}: HeroPatternBackgroundProps) {
  return (
    <div
      aria-hidden
      className={cn("pointer-events-none absolute inset-0 overflow-hidden", className)}
    >
      <div
        className="absolute inset-0"
        style={segmentStyles[segment]}
      >
        <div className="absolute" style={patternFrameStyle}>
          <div className="absolute inset-[10.38%_0_11.55%_0.53%]">
            <Image
              src={patternGridAssetUrl}
              alt=""
              fill
              className="object-fill"
              priority={priority}
              unoptimized
              sizes="100vw"
            />
          </div>

          <div className="absolute inset-[19.65%_13.02%_20.43%_13.55%]">
            <Image
              src={patternDotsAssetUrl}
              alt=""
              fill
              className="object-fill"
              priority={priority}
              unoptimized
              sizes="100vw"
            />
          </div>
        </div>
      </div>
    </div>
  );
}