import { Button } from './ui/button';
import { Check } from 'lucide-react';

interface Pass {
  id: string;
  name: string;
  description: string;
  price: string;
  period: string;
  originalPrice?: string;
  popular?: boolean;
  features: string[];
  forText: string;
}

const passes: Pass[] = [
  {
    id: 'selective',
    name: 'Selective Card',
    description: 'Ideal for first-time visitors. Enjoy access to a curated selection of attractions and basic customization options to get your journey started.',
    price: '$39',
    period: '/24 hours',
    originalPrice: '$65',
    forText: 'For first-time visitors',
    features: [
      'Access to 5+ top attractions',
      'Skip-the-line at selected venues',
      'Valid for 24 consecutive hours',
      'Mobile ticket delivery',
      'Free cancellation up to 24h',
      'Basic audio guide access'
    ]
  },
  {
    id: 'unlimited',
    name: 'Unlimited Card',
    description: 'Perfect for adventure seekers, providing unlimited access to all attractions, an extensive library of experiences and integration with popular travel tools.',
    price: '$79',
    period: '/48 hours',
    originalPrice: '$150',
    popular: true,
    forText: 'For adventure seekers',
    features: [
      'Unlimited access to all attractions',
      'Skip-the-line at every venue', 
      'Valid for 48 consecutive hours',
      'Free public transport included',
      'Priority customer support',
      'Enhanced regular updates',
      'Perfect for exploring teams',
      'Integration with 25+ travel tool including Maps, Reviews, and Local Guides'
    ]
  }
];

export function PassComparison() {
  return (
    <section className="py-16 md:py-24 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center space-y-4 mb-12">
          <p className="text-purple-600 font-medium">Pricing Plans</p>
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900">
            Choose the perfect plan for your needs
          </h2>
        </div>

        <div className="grid md:grid-cols-2 gap-6 max-w-5xl mx-auto">
          {passes.map((pass) => (
            <div
              key={pass.id}
              className={`relative bg-white rounded-3xl p-8 transition-all duration-300 ${
                pass.popular 
                  ? 'border-2 border-purple-500 shadow-xl transform scale-105' 
                  : 'border border-gray-200 shadow-lg hover:shadow-xl'
              }`}
            >
              {pass.popular && (
                <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                  <span className="bg-yellow-400 text-black px-4 py-1 rounded-full text-sm font-medium">
                    Most Popular
                  </span>
                </div>
              )}
              
              <div className="text-center mb-8">
                <h3 className="text-2xl font-bold text-gray-900 mb-3">{pass.name}</h3>
                <p className="text-gray-600 text-sm mb-6 leading-relaxed">
                  {pass.description}
                </p>
                
                <div className="mb-2">
                  <span className="text-4xl font-bold text-gray-900">{pass.price}</span>
                  <span className="text-lg text-gray-500">{pass.period}</span>
                </div>
                {pass.originalPrice && (
                  <div className="text-sm text-gray-500">
                    <span className="line-through">{pass.originalPrice}</span> billed annually
                  </div>
                )}

                <Button 
                  className={`w-full mt-6 h-12 rounded-xl font-medium ${
                    pass.popular 
                      ? 'bg-primary hover:bg-primary/90 text-white' 
                      : 'bg-primary hover:bg-primary/90 text-white'
                  }`}
                >
                  Choose plan
                </Button>
              </div>

              <div className="space-y-6">
                <div>
                  <h4 className="font-semibold text-gray-900 mb-4">{pass.forText}</h4>
                  <ul className="space-y-3">
                    {pass.features.map((feature, index) => (
                      <li key={index} className="flex items-start space-x-3">
                        <div className="mt-0.5">
                          <Check className="w-5 h-5 text-gray-400" />
                        </div>
                        <span className="text-sm text-gray-700 leading-relaxed">{feature}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="text-center mt-12">
          <p className="text-gray-600 mb-4">
            Not sure which pass is right for you?
          </p>
          <Button variant="outline" size="lg" className="h-12 px-8">
            Compare All Features
          </Button>
        </div>
      </div>
    </section>
  );
}