import type { RiftPattern } from "@/components/brand/rift-patterns";
import { cn } from "@/lib/utils";

type Props = {
  pattern: RiftPattern;
  inverse?: boolean;
};

/** Light section-local accent — does not compete with page spine */
export function RiftSectionAccent({ pattern, inverse }: Props) {
  if (pattern === "none") return null;

  const mainStroke = inverse ? "rgba(255,255,255,0.25)" : "rgba(26,92,56,0.2)";
  const softStroke = inverse ? "rgba(255,255,255,0.12)" : "rgba(26,92,56,0.1)";

  if (pattern === "whisper") {
    return (
      <div
        className={cn(
          "pointer-events-none absolute inset-x-0 top-0 z-0 mx-auto h-px max-w-4xl",
          inverse
            ? "bg-gradient-to-r from-transparent via-white/25 to-transparent"
            : "bg-gradient-to-r from-transparent via-[#1a5c38]/15 to-transparent"
        )}
        aria-hidden
      />
    );
  }

  if (pattern === "vein-left") {
    return (
      <svg
        className="pointer-events-none absolute bottom-0 left-2 top-12 z-0 w-10 md:left-6 md:w-14"
        viewBox="0 0 64 400"
        preserveAspectRatio="none"
        aria-hidden
      >
        <path
          d="M32 0 C20 80, 44 160, 30 240 S16 320, 34 400"
          fill="none"
          stroke={mainStroke}
          strokeWidth="1"
          strokeLinecap="round"
        />
      </svg>
    );
  }

  if (pattern === "vein-right") {
    return (
      <svg
        className="pointer-events-none absolute bottom-0 right-2 top-12 z-0 w-10 md:right-6 md:w-14"
        viewBox="0 0 64 400"
        preserveAspectRatio="none"
        aria-hidden
      >
        <path
          d="M32 0 C44 100, 18 200, 36 300 S48 360, 30 400"
          fill="none"
          stroke={mainStroke}
          strokeWidth="1"
          strokeLinecap="round"
        />
      </svg>
    );
  }

  if (pattern === "arc-top") {
    return (
      <svg
        className="pointer-events-none absolute inset-x-0 top-0 z-0 h-12 w-full md:h-16"
        viewBox="0 0 1200 64"
        preserveAspectRatio="none"
        aria-hidden
      >
        <path
          d="M0 48 Q300 8 600 32 T1200 40"
          fill="none"
          stroke={mainStroke}
          strokeWidth="1"
          strokeLinecap="round"
        />
        <path
          d="M0 56 Q400 24 800 44 T1200 52"
          fill="none"
          stroke={softStroke}
          strokeWidth="1"
          strokeLinecap="round"
        />
      </svg>
    );
  }

  if (pattern === "arc-bottom") {
    return (
      <svg
        className="pointer-events-none absolute inset-x-0 bottom-0 z-0 h-12 w-full md:h-16"
        viewBox="0 0 1200 64"
        preserveAspectRatio="none"
        aria-hidden
      >
        <path
          d="M0 16 Q350 52 700 28 T1200 24"
          fill="none"
          stroke={mainStroke}
          strokeWidth="1"
          strokeLinecap="round"
        />
      </svg>
    );
  }

  if (pattern === "fork") {
    return (
      <svg
        className="pointer-events-none absolute left-1/2 top-0 z-0 h-20 w-full max-w-2xl -translate-x-1/2 opacity-90"
        viewBox="0 0 600 80"
        preserveAspectRatio="xMidYMin meet"
        aria-hidden
      >
        <path
          d="M300 0 L300 36 M300 36 Q220 50 140 64 M300 36 Q380 50 460 64"
          fill="none"
          stroke={mainStroke}
          strokeWidth="1"
          strokeLinecap="round"
        />
      </svg>
    );
  }

  return null;
}