"use client" import React, { useRef, useState } from 'react' import { motion, useMotionValue, useSpring, useTransform, animate } from 'framer-motion' import { cn } from '@/lib/utils'; interface PricingProps { title?: string; plans: PricingPlan[]; className?: string; } // Counter Component const Counter = ({ from, to }: { from: number; to: number }) => { const nodeRef = useRef(null); React.useEffect(() => { const node = nodeRef.current; if (!node) return; const controls = animate(from, to, { duration: 1, onUpdate(value) { node.textContent = value.toFixed(0); }, }); return () => controls.stop(); }, [from, to]); return ; }; // Header Component const PricingHeader = ({ title }: { title: string }) => (

{title}

); // Toggle Component const PricingToggle = ({ isYearly, onToggle }: { isYearly: boolean; onToggle: () => void }) => (

Monthly Yearly {isYearly && ( Save 20% )}

); // Background Effects Component const BackgroundEffects = () => ( <>

{[...Array(30)].map((_, i) => ( ))}

); // Pricing Card Component const PricingCard = ({ plan, isYearly, index }: { plan: PricingPlan; isYearly: boolean; index: number }) => { const cardRef = useRef(null); const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const springConfig = { damping: 15, stiffness: 150 }; const rotateX = useSpring(useTransform(mouseY, [-0.5, 0.5], [7, -7]), springConfig); const rotateY = useSpring(useTransform(mouseX, [-0.5, 0.5], [-7, 7]), springConfig); const currentPrice = isYearly ? plan.yearlyPrice : plan.monthlyPrice; const previousPrice = !isYearly ? plan.yearlyPrice : plan.monthlyPrice; // Card JSX remains the same as original, just destructured from props return ( { if (!cardRef.current) return; const rect = cardRef.current.getBoundingClientRect(); const centerX = rect.x + rect.width / 2; const centerY = rect.y + rect.height / 2; mouseX.set((e.clientX - centerX) / rect.width); mouseY.set((e.clientY - centerY) / rect.height); }} onMouseLeave={() => { mouseX.set(0); mouseY.set(0); }} className={`relative w-full bg-white rounded-xl p-6 border-3 border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,0.9)] hover:shadow-[8px_8px_0px_0px_rgba(0,0,0,0.9)] transition-all duration-200`} > {/* Price Badge */}

/{isYearly ? 'yr' : 'mo'}

{/* Plan Name and Popular Badge */}

{plan.name}

{plan.isPopular && ( POPULAR )}

{/* Features List */}

{plan.features.map((feature, i) => ( ✓ {feature} ))}

{/* CTA Button */} GET STARTED → ); }; // Main Container Component export const PricingContainer = ({ title = "Pricing Plans", plans, className = "" }: PricingProps) => { const [isYearly, setIsYearly] = useState(false); return (

setIsYearly(!isYearly)} />

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

); };