import { useState } from 'react'; import { motion, AnimatePresence } from 'motion/react'; import { Check, Zap, Shield, Code, Cpu, Database, Lock, ArrowRight } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; import { Container } from '@/components/ui/container'; import { Separator } from '@/components/ui/separator'; interface PricingFeature { label: string; value: string; icon: React.ReactNode; } interface PricingTier { name: string; description: string; monthlyPrice: number; yearlyPrice: number; yearlyDiscount: number; features: PricingFeature[]; isPopular: boolean; tier: 'starter' | 'pro' | 'enterprise'; } const PRICING_DATA: PricingTier[] = [ { name: 'Starter', description: 'For solo developers and small projects', monthlyPrice: 29, yearlyPrice: 290, yearlyDiscount: 16, tier: 'starter', isPopular: false, features: [ { label: 'API Requests', value: '10K/month', icon:

 },
          { label: 'Storage', value: '5GB SSD', icon:  },
          { label: 'Bandwidth', value: '100GB', icon:  },
          { label: 'SSL Certificate', value: 'Auto', icon:  },
          { label: 'Email Support', value: '24/7', icon:  },
        ],
      },
      {
        name: 'Professional',
        description: 'For growing teams and production apps',
        monthlyPrice: 99,
        yearlyPrice: 990,
        yearlyDiscount: 17,
        tier: 'pro',
        isPopular: true,
        features: [
          { label: 'API Requests', value: '100K/month', icon:  },
          { label: 'Storage', value: '50GB SSD', icon:  },
          { label: 'Bandwidth', value: '1TB', icon:  },
          { label: 'SSL Certificate', value: 'Auto', icon:  },
          { label: 'Priority Support', value: '24/7', icon:  },
          { label: 'Custom Domain', value: 'Unlimited', icon:  },
          { label: 'Analytics', value: 'Advanced', icon:  },
        ],
      },
      {
        name: 'Enterprise',
        description: 'For large-scale applications',
        monthlyPrice: 299,
        yearlyPrice: 2990,
        yearlyDiscount: 17,
        tier: 'enterprise',
        isPopular: false,
        features: [
          { label: 'API Requests', value: 'Unlimited', icon:  },
          { label: 'Storage', value: '500GB SSD', icon:  },
          { label: 'Bandwidth', value: 'Unlimited', icon:  },
          { label: 'SSL Certificate', value: 'Auto', icon:  },
          { label: 'Dedicated Support', value: '24/7', icon:  },
          { label: 'Custom Domain', value: 'Unlimited', icon:  },
          { label: 'Analytics', value: 'Enterprise', icon:  },
          { label: 'SLA', value: '99.99%', icon:  },
          { label: 'Dedicated Server', value: 'Included', icon:  },
        ],
      },
    ];

    const PricingCard = ({ tier, billingPeriod }: { tier: PricingTier; billingPeriod: 'monthly' | 'yearly' }) => {
      const price = billingPeriod === 'monthly' ? tier.monthlyPrice : tier.yearlyPrice;
      const period = billingPeriod === 'monthly' ? 'month' : 'year';
      const discount = billingPeriod === 'yearly' ? tier.yearlyDiscount : 0;

      return (
        
          {/* Decorative SVG Mask */}
          
            
          

          {/* Popular Badge */}
          {tier.isPopular && (
            
               Popular
            
          )}

          
            {tier.name}
            {tier.description}

            
              ${price}
              /{period}
              {discount > 0 && (
                
                  Save {discount}%
                
              )}
            

            

            

            
              {tier.features.map((feature, index) => (
                
                  
                    {feature.icon}
                  
                  {feature.label}
                  {feature.value}
                
              ))}
            
          

          {/* Corner Decoration */}
          
        
      );
    };

    const BillingToggle = ({ period, setPeriod }: { period: 'monthly' | 'yearly'; setPeriod: (p: 'monthly' | 'yearly') => void }) => (
      
        
        
      
    );

    export default function PricingSection() {
      const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'yearly'>('monthly');

      return (
        
          
            {/* Header */}
            
              
                
                  Pricing Plans
                
                
                  Choose your power level
                
                
                  Scale from solo projects to enterprise-grade applications with transparent, predictable pricing.
                
              
            

            {/* Billing Toggle */}
            
              
            

            {/* Pricing Cards Grid */}
            
              
                {PRICING_DATA.map((tier) => (
                  
                ))}
              
            

            {/* Enterprise CTA */}
            
              
                
                  Need custom solutions?
                  Contact our enterprise team for custom SLAs, dedicated infrastructure, and volume discounts.
                
                
              
            
          
        
      );
    }

Pricing Section