/**
 * Onda orgânica entre seções — transição suave entre fundos.
 * variant: "life" (menta), "mind" (teal→azul), "gold" (dourado), "safe" (marinho).
 * flip: inverte verticalmente para encaixar topo/base.
 */
export function SectionDivider({
  variant = "life",
  flip = false,
  className = "",
}: {
  variant?: "life" | "mind" | "gold" | "safe";
  flip?: boolean;
  className?: string;
}) {
  const stopA =
    variant === "life"
      ? "var(--life)"
      : variant === "mind"
        ? "var(--mind-b)"
        : variant === "gold"
          ? "var(--safe-gold)"
          : "var(--safe)";
  const stopB =
    variant === "life"
      ? "var(--life-soft)"
      : variant === "mind"
        ? "var(--mind-a)"
        : variant === "gold"
          ? "var(--life)"
          : "var(--mind-b)";

  return (
    <div
      aria-hidden
      className={`pointer-events-none relative h-24 w-full overflow-hidden ${className}`}
      style={{ transform: flip ? "scaleY(-1)" : undefined }}
    >
      <svg
        viewBox="0 0 1440 120"
        preserveAspectRatio="none"
        className="absolute inset-0 h-full w-full"
      >
        <defs>
          <linearGradient id={`sd-${variant}-${flip ? "f" : "n"}`} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor={stopA} stopOpacity="0.18" />
            <stop offset="50%" stopColor={stopB} stopOpacity="0.32" />
            <stop offset="100%" stopColor={stopA} stopOpacity="0.16" />
          </linearGradient>
        </defs>
        <path
          d="M0,64 C240,110 420,10 720,48 C1020,86 1200,18 1440,56 L1440,120 L0,120 Z"
          fill={`url(#sd-${variant}-${flip ? "f" : "n"})`}
        />
        <path
          d="M0,84 C260,40 480,118 760,72 C1040,28 1240,96 1440,68 L1440,120 L0,120 Z"
          fill={`url(#sd-${variant}-${flip ? "f" : "n"})`}
          opacity="0.55"
        />
      </svg>
    </div>
  );
}