import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { Check } from 'lucide-react';

export const Pricing: React.FC = () => {
  return (
    <section id="pricing" className="py-32 bg-background relative overflow-hidden scroll-mt-32">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        <div className="text-center mb-20">
           <h2 className="text-4xl md:text-6xl font-bold text-white mb-6 tracking-tighter">
            Invest in Your System.
           </h2>
           <p className="text-xl text-gray-400 max-w-xl mx-auto">
             Costs less than a single session with a personal trainer.
           </p>
        </div>

        <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {/* Monthly Plan */}
            <motion.div 
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5 }}
              className="p-8 rounded-3xl bg-surfaceHighlight/30 border border-white/5 backdrop-blur-sm flex flex-col h-full hover:bg-surfaceHighlight/50 transition-all"
            >
                <div className="mb-8">
                    <h3 className="text-xl font-medium text-gray-300 mb-2">Monthly</h3>
                    <div className="flex items-baseline gap-1">
                        <span className="text-4xl font-bold text-white">$14.99</span>
                        <span className="text-gray-500">/mo</span>
                    </div>
                </div>
                <ul className="space-y-4 mb-8 flex-1">
                    {["Full AI Co-Pilot Access", "Dynamic Macro Adjustment", "Basic Training Integration", "Community Support"].map((item, i) => (
                        <li key={i} className="flex items-center gap-3 text-gray-400">
                            <Check size={16} className="text-white" />
                            <span>{item}</span>
                        </li>
                    ))}
                </ul>
                <button 
                  onClick={() => alert('Redirecting to checkout...')}
                  className="w-full py-4 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 text-white font-bold transition-all cursor-pointer"
                >
                    Start Monthly
                </button>
            </motion.div>

            {/* Annual Plan - Highlighted */}
            <motion.div 
              initial={{ opacity: 0, x: 20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5 }}
              className="relative p-8 rounded-3xl bg-black/40 border border-primary-500/30 backdrop-blur-md flex flex-col h-full shadow-[0_0_40px_rgba(6,182,212,0.1)]"
            >
                <div className="absolute top-0 right-0 bg-primary-500 text-black text-xs font-bold px-3 py-1 rounded-bl-xl rounded-tr-2xl">
                    BEST VALUE
                </div>
                
                <div className="mb-8">
                    <h3 className="text-xl font-medium text-primary-400 mb-2">Annual</h3>
                    <div className="flex items-baseline gap-1">
                        <span className="text-4xl font-bold text-white">$9.99</span>
                        <span className="text-gray-500">/mo</span>
                    </div>
                    <div className="text-sm text-gray-500 mt-2">Billed $119.88 yearly</div>
                </div>
                
                <ul className="space-y-4 mb-8 flex-1">
                    {["Everything in Monthly", "Unlimited Strategy Changes", "Priority Support", "Advanced Trend Analytics"].map((item, i) => (
                        <li key={i} className="flex items-center gap-3 text-gray-300">
                            <div className="bg-primary-500/20 p-0.5 rounded-full">
                                <Check size={14} className="text-primary-400" />
                            </div>
                            <span>{item}</span>
                        </li>
                    ))}
                </ul>
                
                <button 
                  onClick={() => alert('Redirecting to checkout...')}
                  className="w-full py-4 rounded-xl bg-primary-500 hover:bg-primary-400 text-black font-bold transition-all shadow-[0_0_20px_rgba(6,182,212,0.2)] cursor-pointer"
                >
                    Start 14-Day Free Trial
                </button>
                <p className="text-center text-xs text-gray-500 mt-4">Cancel anytime.</p>
            </motion.div>
        </div>

      </div>
    </section>
  );
};