Pricing Section

'use client';
import React from 'react';
import { 
  Sparkles, 
  Zap, 
  Shield, 
  Crown, 
  Star,
  Users,
  Lock,
  Phone,
  MessageCircle,
  Mail
} from 'lucide-react';
import { GlassPricingSectionimport,
  GlassPricingSection, 
  type PricingTier,
  type PricingSectionProps } from "@/components/ui/pricing-section";


// ============================================================================
// Demo Data
// ============================================================================

const pricingTiers: PricingTier[] = [
  {
    id: 'starter',
    name: 'Starter',
    description: 'Perfect for trying out our service',
    monthlyPrice: 0,
    yearlyPrice: 0,
    icon: Sparkles,
    features: [
      { id: 'projects', text: 'Up to 3 projects', included: true },
      { id: 'api', text: '1,000 API calls/month', included: true },
      { id: 'support', text: 'Community support', included: true },
      { id: 'analytics', text: 'Basic analytics', included: true },
      { id: 'ssl', text: 'SSL certificate', included: true },
      { id: 'domain', text: 'Custom domain', included: false },
      { id: 'team', text: 'Team collaboration', included: false },
      { id: 'priority', text: 'Priority support', included: false },
    ],
    cta: {
      text: 'Get Started Free',
      variant: 'secondary',
      onClick: () => console.log('Starter plan selected')
    }
  },
  {
    id: 'professional',
    name: 'Professional',
    description: 'Best for growing businesses',
    monthlyPrice: 29,
    yearlyPrice: 290,
    icon: Zap,
    featured: true,
    featuredBadge: 'MOST POPULAR',
    savings: 'Save $58/year',
    iconClassName: 'from-purple-500/20 to-pink-500/20',
    features: [
      { id: 'projects', text: 'Unlimited projects', included: true, highlight: true },
      { id: 'api', text: '100,000 API calls/month', included: true },
      { id: 'support', text: 'Priority email support', included: true },
      { id: 'analytics', text: 'Advanced analytics', included: true },
      { id: 'ssl', text: 'SSL certificate', included: true },
      { id: 'domain', text: '5 Custom domains', included: true, highlight: true },
      { id: 'team', text: 'Up to 10 team members', included: true },
      { id: 'priority', text: 'Priority support', included: true },
    ],
    cta: {
      text: 'Start Free Trial',
      variant: 'primary',
      onClick: () => console.log('Professional plan selected')
    }
  },
  {
    id: 'enterprise',
    name: 'Enterprise',
    description: 'For large scale operations',
    monthlyPrice: -1,
    yearlyPrice: -1,
    customPrice: true,
    customPriceText: 'Let\'s Talk',
    icon: Crown,
    iconClassName: 'from-amber-500/20 to-orange-500/20',
    features: [
      { id: 'projects', text: 'Unlimited everything', included: true, highlight: true },
      { id: 'api', text: 'Unlimited API calls', included: true },
      { id: 'support', text: '24/7 Phone & email support', included: true, highlight: true },
      { id: 'analytics', text: 'Custom analytics & reports', included: true },
      { id: 'ssl', text: 'Advanced SSL options', included: true },
      { id: 'domain', text: 'Unlimited custom domains', included: true },
      { id: 'team', text: 'Unlimited team members', included: true },
      { id: 'sla', text: '99.99% SLA guarantee', included: true, highlight: true },
    ],
    cta: {
      text: 'Contact Sales',
      variant: 'secondary',
      onClick: () => console.log('Enterprise plan - contact sales')
    }
  },
];

const TrustBadges = () => {
  const badges = [
    { icon: Shield, label: 'SOC 2 Certified' },
    { icon: Lock, label: 'End-to-end Encryption' },
    { icon: Users, label: '50,000+ Users' },
    { icon: Star, label: '4.9/5 Rating' },
  ];
  
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 @lg:gap-6">
      {badges.map((badge, idx) => (
        <div
          key={idx}
          className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50"
        >
          <badge.icon className="w-4 h-4 text-gray-600 dark:text-gray-400" />
          <span className="text-sm text-gray-700 dark:text-gray-300">
            {badge.label}
          </span>
        </div>
      ))}
    </div>
  );
};

const PricingFooter = () => {
  return (
    <div className="space-y-6">
      <div className="text-center">
        <p className="text-gray-600 dark:text-gray-400 mb-4">
          All plans include a 14-day free trial. No credit card required.
        </p>
        <div className="flex flex-wrap items-center justify-center gap-4">
          <button className="inline-flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
            <MessageCircle className="w-4 h-4" />
            Chat with us
          </button>
          <button className="inline-flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
            <Phone className="w-4 h-4" />
            Schedule a call
          </button>
          <button className="inline-flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
            <Mail className="w-4 h-4" />
            Email sales
          </button>
        </div>
      </div>
      
      <div className="pt-8 border-t border-gray-200 dark:border-gray-800">
        <p className="text-center text-xs text-gray-500 dark:text-gray-400">
          * Prices shown are in USD. Taxes may apply. 
          Enterprise pricing is customized based on requirements.
        </p>
      </div>
    </div>
  );
};

export default function DemoOne() {
  const handleBillingChange = (billing: 'monthly' | 'yearly') => {
    console.log('Billing changed to:', billing);
    // You could track this with analytics, update URL params, etc.
  };
  
  return (
    <main className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-950 dark:to-gray-900">
      {/* Hero Section */}
      <div className="px-4 pt-20 pb-12 text-center">
        <h1 className="text-5xl @lg:text-6xl font-bold mb-4 bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
          Simple, Transparent Pricing
        </h1>
        <p className="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
          Choose the perfect plan for your needs. Always flexible to scale.
        </p>
      </div>
      
      {/* Pricing Section */}
      <GlassPricingSection
        tiers={pricingTiers}
        defaultBilling="yearly"
        onBillingChange={handleBillingChange}
        showBillingToggle={true}
        billingToggleLabels={{
          monthly: 'Monthly billing',
          yearly: 'Annual billing',
          discount: '2 months free'
        }}
        animated={true}
        animationDelay={100}
        glassEffect={true}
        backgroundEffects={true}
        columns={3}
        gap="lg"
        trustBadges={<TrustBadges />}
        footer={<PricingFooter />}
        className="pb-20"
      />
      
      {/* Optional: FAQ Section */}
      <section className="max-w-4xl mx-auto px-4 py-20">
        <h2 className="text-3xl font-bold text-center mb-12 text-gray-900 dark:text-white">
          Frequently Asked Questions
        </h2>
        <div className="space-y-6">
          {[
            {
              q: 'Can I change plans later?',
              a: 'Yes, you can upgrade or downgrade your plan at any time. Changes take effect immediately.'
            },
            {
              q: 'What payment methods do you accept?',
              a: 'We accept all major credit cards, PayPal, and wire transfers for enterprise customers.'
            },
            {
              q: 'Is there a setup fee?',
              a: 'No, there are no setup fees for any of our plans. You only pay the subscription fee.'
            },
            {
              q: 'Can I cancel anytime?',
              a: 'Yes, you can cancel your subscription at any time. No questions asked.'
            },
          ].map((faq, idx) => (
            <div 
              key={idx}
              className="p-6 rounded-xl bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50"
            >
              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
                {faq.q}
              </h3>
              <p className="text-gray-600 dark:text-gray-400">
                {faq.a}
              </p>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}