import pattern from "@/assets/pattern.webp.asset.json";

/**
 * Subtle topographic texture overlay for dark (bg-ink) sections.
 * Place inside a `relative` parent; sits behind content via -z-0 / pointer-events-none.
 */
export function TopoTexture({
  opacity = 0.12,
  className = "",
}: {
  opacity?: number;
  className?: string;
}) {
  return (
    <div
      aria-hidden="true"
      className={`pointer-events-none absolute inset-0 overflow-hidden ${className}`}
    >
      <img
        src={pattern.url}
        alt=""
        className="h-full w-full object-cover mix-blend-screen"
        style={{ opacity }}
        loading="lazy"
      />
      {/* soften edges so the texture fades into the ink */}
      <div className="absolute inset-0 bg-gradient-to-b from-ink/40 via-transparent to-ink/60" />
    </div>
  );
}