"use client";

import { TopographicPattern } from "@/components/brand/TopographicPattern";
import { SITE_TOPO_PATTERN } from "@/content/topo-patterns";
import { cn } from "@/lib/utils";

type Props = {
  introPhase: "intro" | "settled" | "static";
  className?: string;
};

export function HeroTopographyBackground({ introPhase, className }: Props) {
  return (
    <div
      className={cn(
        "group/topo-section absolute inset-0 isolate overflow-hidden bg-white",
        introPhase === "intro" && "rift-hero-intro",
        introPhase === "settled" && "rift-hero-settled",
        introPhase === "static" && "rift-hero-static",
        className
      )}
      aria-hidden
    >
      <TopographicPattern
        pattern={SITE_TOPO_PATTERN}
        tone="light"
        className="topo-hero-layer"
      />
    </div>
  );
}