import { cn } from "../../utils/cn.mjs";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/Pattern/SpotLight.tsx
/**
* Spotlight Component
*
* A dramatic animated SVG spotlight effect that creates a soft, glowing light beam
* perfect for hero sections, landing pages, and attention-grabbing areas. Features
* a sophisticated blur filter and smooth animation entrance.
*
* Features:
* - Animated entrance with opacity fade-in effect
* - Gaussian blur filter for realistic light diffusion
* - Customizable positioning, size, and color
* - Full-screen coverage with responsive scaling
* - Performance optimized with CSS animations
* - Pointer events disabled to preserve interactivity
* - Theme-aware with currentColor support
*
* Technical Implementation:
* - Uses SVG ellipse with advanced filter effects
* - Gaussian blur with 151px standard deviation for soft edges
* - Matrix transformation for realistic light angle (-0.822377, -0.568943)
* - ViewBox coordinates optimized for screen coverage (3787x2842)
* - Animation class `animate-spotlight` handles entrance effect
* - Filter definition with unique ID prevents conflicts
*
* Visual Characteristics:
* - Default: Large elliptical light beam (1924.71px radius)
* - Positioned at (1924.71, 273.501) with soft vertical spread
* - 21% opacity for subtle but noticeable effect
* - Rotated and scaled for natural spotlight angle
* - Soft gaussian blur creates realistic light falloff
*
* Animation Behavior:
* - Starts with opacity: 0 (invisible)
* - Animates to full visibility with smooth transition
* - Animation timing and easing handled by CSS class
* - Can be triggered on scroll or interaction events
*
* @example
* Basic hero section spotlight:
* ```tsx
* <div className="relative min-h-screen bg-dark">
*   <Spotlight className="top-0 left-0" />
*   <div className="relative z-10 flex items-center justify-center h-screen">
*     <h1 className="text-6xl font-bold text-white">
*       Welcome to the Future
*     </h1>
*   </div>
* </div>
* ```
*
* @example
* Custom colored spotlight:
* ```tsx
* <Spotlight
*   fill="#3b82f6"
*   opacity={0.3}
*   className="top-10 -left-20"
* />
* ```
*
* @example
* Multiple spotlights for complex lighting:
* ```tsx
* <div className="relative">
*   <Spotlight
*     cx={1000}
*     cy={300}
*     fill="rgb(59, 130, 246)"
*     opacity={0.15}
*   />
*   <Spotlight
*     cx={2500}
*     cy={800}
*     fill="rgb(236, 72, 153)"
*     opacity={0.15}
*     className="scale-75"
*   />
* </div>
* ```
*
* @example
* Responsive positioning:
* ```tsx
* <Spotlight
*   className="top-0 left-1/2 transform -translate-x-1/2 lg:left-0 lg:transform-none"
*   opacity={0.25}
* />
* ```
*
* Styling Guidelines:
* - Use low opacity (0.1-0.3) for subtle background effects
* - Higher opacity (0.3-0.5) for dramatic focal points
* - Consider theme colors when using custom fill values
* - Position absolute with z-index management for layering
*
* Performance Considerations:
* - SVG filter effects are GPU accelerated when possible
* - Animation handled by CSS transforms for optimal performance
* - Large viewBox size cached by browser for efficiency
* - Pointer events disabled prevents layout recalculation
*
* Accessibility:
* - Purely decorative - doesn't interfere with screen readers
* - High contrast maintained with overlaid content
* - Animation respects user's reduced motion preferences
* - No semantic meaning - safe to hide from assistive tech
*
* CSS Requirements:
* - Requires `animate-spotlight` animation class in Tailwind config
* - Should define entrance animation timing and easing
* - Consider defining custom animations for different effects
*
* @param props - Spotlight component props
* @returns Animated SVG spotlight effect with blur filters
*/
const Spotlight = ({ fill = "currentColor", cy = 273.501, rx = 1924.71, ry = 273.501, cx = 1924.71, opacity = .21, className, ...props }) => /* @__PURE__ */ jsxs("svg", {
	className: cn("pointer-events-none absolute size-screen animate-spotlight opacity-0", className),
	xmlns: "http://www.w3.org/2000/svg",
	viewBox: "0 0 3787 2842",
	fill: "none",
	role: "img",
	"aria-label": "Spotlight",
	...props,
	children: [/* @__PURE__ */ jsx("g", {
		filter: "url(#filter)",
		transform: "scale (-1, 1)",
		children: /* @__PURE__ */ jsx("ellipse", {
			cx,
			cy,
			rx,
			ry,
			fill,
			fillOpacity: opacity,
			transform: "matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
		})
	}), /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
		id: "filter",
		x: "0.860352",
		y: "0.838989",
		width: "3785.16",
		height: "2840.26",
		filterUnits: "userSpaceOnUse",
		colorInterpolationFilters: "sRGB",
		children: [
			/* @__PURE__ */ jsx("feFlood", {
				floodOpacity: "0",
				result: "BackgroundImageFix"
			}),
			/* @__PURE__ */ jsx("feBlend", {
				mode: "normal",
				in: "SourceGraphic",
				in2: "BackgroundImageFix",
				result: "shape"
			}),
			/* @__PURE__ */ jsx("feGaussianBlur", {
				stdDeviation: "151",
				result: "effect1_foregroundBlur_1065_8"
			})
		]
	}) })]
});

//#endregion
export { Spotlight };
//# sourceMappingURL=SpotLight.mjs.map