Gradient Lime Background

"use client";

import type { ReactNode } from "react";
import { cn, useReducedMotion } from "@pax-sh/blocks";

export interface GradientLimeBackgroundProps {
  /** Multiplier on the breathing loop speed. 1 is the tuned default. */
  speed?: number;
  className?: string;
  children?: ReactNode;
}

/**
 * A saturated lime-to-acid sweep with a soft ink floor, breathing on a long
 * transform-only loop. The loudest surface in the set; ink text stays
 * readable across the whole ramp. Under reduced motion the gradient holds
 * its resting frame.
 */
export function GradientLimeBackground({
  speed = 1,
  className,
  children,
}: GradientLimeBackgroundProps) {
  const reduced = useReducedMotion();
  const duration = 18 / Math.max(0.1, speed);

  return (
    <div
      className={cn(
        "relative isolate overflow-hidden rounded-2xl border border-[var(--pax-border,rgba(18,17,15,0.12))]",
        "bg-[var(--pax-acid,#c8ff00)] text-[var(--pax-ink,#12110f)]",
        className,
      )}
      data-pax-asset="component-backgrounds-gradient-lime"
    >
      <style>{`
        @keyframes pax-gradient-lime-breathe {
          from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
          to { transform: translate3d(2.5%, 1.5%, 0) scale(1.08); }
        }
      `}</style>
      <div
        aria-hidden="true"
        className="pointer-events-none absolute -inset-[24%] will-change-transform"
        style={{
          background:
            "linear-gradient(118deg, color-mix(in srgb, var(--pax-acid,#c8ff00) 55%, white) 0%, var(--pax-acid,#c8ff00) 46%, color-mix(in srgb, var(--pax-acid,#c8ff00) 78%, var(--pax-ink,#12110f)) 100%)",
          animation: reduced
            ? "none"
            : `pax-gradient-lime-breathe ${duration}s ease-in-out infinite alternate`,
        }}
      />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0"
        style={{
          background:
            "linear-gradient(to top, color-mix(in srgb, var(--pax-ink,#12110f) 30%, transparent) 0%, transparent 46%)",
        }}
      />
      <div className="relative z-[1]">{children}</div>
    </div>
  );
}