"use client"; import React, { useMemo, useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"; import { Check, Sparkles, Zap } from "lucide-react"; // --- LOGIC: STARFIELD GENERATION --- const useStarfield = (count: number) => { return useMemo(() => { return Array.from({ length: count }).map((_, i) => ({ id: i, left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`, size: Math.random() * 1.6 + 0.4, opacity: Math.random() * 0.7 + 0.3, duration: Math.random() * 3 + 2, })); }, [count]); }; // --- COMPONENT: COSMOS CARD --- const CosmosPricingCard = ({ plan, index }: { plan: any, index: number }) => { const cardRef = useRef(null); const stars = useStarfield(35); const x = useMotionValue(0); const y = useMotionValue(0); const springConfig = { damping: 25, stiffness: 150 }; const rotateX = useSpring(useTransform(y, [-0.5, 0.5], [10, -10]), springConfig); const rotateY = useSpring(useTransform(x, [-0.5, 0.5], [-10, 10]), springConfig); const glowX = useSpring(useTransform(x, [-0.5, 0.5], ["-15%", "15%"]), springConfig); const glowY = useSpring(useTransform(y, [-0.5, 0.5], ["-15%", "15%"]), springConfig); const handleMouseMove = (e: React.MouseEvent) => { if (!cardRef.current) return; const rect = cardRef.current.getBoundingClientRect(); x.set((e.clientX - rect.left) / rect.width - 0.5); y.set((e.clientY - rect.top) / rect.height - 0.5); }; const handleMouseLeave = () => { x.set(0); y.set(0); }; return ( {/* 1. ADAPTIVE STARFIELD */}

{stars.map((star) => ( 1.2 && plan.premium ? "0 0 6px rgba(255,255,255,0.6)" : "none", }} /> ))}

{/* 2. INTERACTIVE MOUSE GLOW */} {/* 3. COMPACT CONTENT WITH DEPTH */}

{plan.name}

{plan.tagline}

{plan.premium && }

$ {plan.price} /mo

{plan.features.map((feature: string, i: number) => (

{feature}

))}

); }; export default function CosmosPricingStarfield() { const plans = [ { name: "Nebula", price: "29", tagline: "Explorer", features: ["10 Project Slots", "Standard Assets", "Email Support"], premium: false }, { name: "Supernova", price: "89", tagline: "Orbit Pro", features: ["Unlimited Assets", "Priority Rendering", "Full License", "V3 Source"], premium: true }, { name: "Void", price: "199", tagline: "Enterprise", features: ["Team Access (10)", "Custom Integration", "SLA Guarantee"], premium: false }, ]; return (

{plans.map((plan, index) => ( ))}

); }