import { Ticket, TrendingDown, Sparkles, DollarSign, Calendar, Check } from 'lucide-react';
import { motion } from 'motion/react';

const attractions = [
  { name: 'Royal Botanic Gardens', price: 25 },
  { name: 'Eureka Skydeck', price: 32 },
  { name: 'Queen Victoria Market Tour', price: 45 },
  { name: 'Melbourne Zoo', price: 42 },
  { name: 'Street Art Tour', price: 55 },
  { name: 'Harbour Cruise', price: 38 },
  { name: 'Royal Exhibition Building', price: 25 },
  { name: 'Melbourne Museum', price: 28 }
];

export function SmartSaving() {
  const totalIndividualPrice = attractions.reduce((sum, attr) => sum + attr.price, 0);
  const cityCardPrice = 99;
  const savings = totalIndividualPrice - cityCardPrice;
  const savingsPercent = Math.round((savings / totalIndividualPrice) * 100);

  return (
    <section className="py-12 md:py-16 bg-gradient-to-br from-green-50/30 to-blue-50/30">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center mb-10">
          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-primary/10 to-secondary/10 px-4 py-2 rounded-full mb-4">
            <div className="w-2 h-2 bg-gradient-to-r from-primary to-secondary rounded-full"></div>
            <span className="font-poppins text-sm font-medium bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
              Maximum Value
            </span>
          </div>
          <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight text-gray-900 mb-3">
            <span className="font-semibold" style={{ color: '#F95F62' }}>Smart Savings</span>
          </h2>
          <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600 max-w-3xl mx-auto">
            Save up to 40% compared to buying individual tickets
          </p>
        </div>

        {/* Main Content */}
        <div className="max-w-4xl mx-auto">
          <div className="bg-white rounded-3xl p-8 border border-gray-100 shadow-lg">
            
            {/* Hero Tagline Cards */}
            <div className="mb-8">
              <div className="grid grid-cols-3 gap-4 max-w-md mx-auto">
                {/* 3 Days Card */}
                <motion.div
                  className="rounded-2xl p-4 text-center"
                  style={{ backgroundColor: 'rgba(249, 95, 98, 0.08)' }}
                  animate={{
                    boxShadow: [
                      '0 4px 6px rgba(249, 95, 98, 0.1)',
                      '0 8px 16px rgba(249, 95, 98, 0.2)',
                      '0 4px 6px rgba(249, 95, 98, 0.1)'
                    ],
                  }}
                  transition={{
                    duration: 2,
                    repeat: Infinity,
                    ease: "easeInOut"
                  }}
                >
                  <Calendar className="w-8 h-8 mx-auto mb-2" style={{ color: '#F95F62' }} />
                  <div className="font-poppins font-semibold text-2xl mb-1" style={{ color: '#F95F62' }}>3</div>
                  <div className="font-poppins text-xs font-medium text-gray-600">Days</div>
                </motion.div>

                {/* 8 Experiences Card */}
                <motion.div
                  className="rounded-2xl p-4 text-center"
                  style={{ backgroundColor: 'rgba(249, 95, 98, 0.08)' }}
                  animate={{
                    boxShadow: [
                      '0 4px 6px rgba(249, 95, 98, 0.1)',
                      '0 8px 16px rgba(249, 95, 98, 0.2)',
                      '0 4px 6px rgba(249, 95, 98, 0.1)'
                    ],
                  }}
                  transition={{
                    duration: 2,
                    repeat: Infinity,
                    delay: 0.3,
                    ease: "easeInOut"
                  }}
                >
                  <Ticket className="w-8 h-8 mx-auto mb-2" style={{ color: '#F95F62' }} />
                  <div className="font-poppins font-semibold text-2xl mb-1" style={{ color: '#F95F62' }}>8</div>
                  <div className="font-poppins text-xs font-medium text-gray-600">Experiences</div>
                </motion.div>

                {/* 1 Pass Card */}
                <motion.div
                  className="rounded-2xl p-4 text-center"
                  style={{ backgroundColor: 'rgba(249, 95, 98, 0.08)' }}
                  animate={{
                    boxShadow: [
                      '0 4px 6px rgba(249, 95, 98, 0.1)',
                      '0 8px 16px rgba(249, 95, 98, 0.2)',
                      '0 4px 6px rgba(249, 95, 98, 0.1)'
                    ],
                  }}
                  transition={{
                    duration: 2,
                    repeat: Infinity,
                    delay: 0.6,
                    ease: "easeInOut"
                  }}
                >
                  <Sparkles className="w-8 h-8 mx-auto mb-2" style={{ color: '#F95F62' }} />
                  <div className="font-poppins font-semibold text-2xl mb-1" style={{ color: '#F95F62' }}>1</div>
                  <div className="font-poppins text-xs font-medium text-gray-600">Pass</div>
                </motion.div>
              </div>
            </div>

            {/* Price Comparison */}
            <div className="max-w-md mx-auto space-y-3 mb-8">
              <div className="flex items-center justify-between py-2 border-b border-gray-100">
                <span className="font-poppins font-normal text-sm text-gray-600">Individual Tickets Total:</span>
                <span className="font-poppins font-semibold text-lg text-gray-900">${totalIndividualPrice}</span>
              </div>
              
              <div className="flex justify-center -my-1">
                <motion.div
                  animate={{ y: [0, 5, 0] }}
                  transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
                >
                  <TrendingDown className="w-5 h-5" style={{ color: '#F95F62' }} />
                </motion.div>
              </div>
              
              <div className="flex items-center justify-between py-2 border-b border-gray-100">
                <span className="font-poppins font-normal text-sm text-gray-600">CityCard Price:</span>
                <span className="font-poppins font-semibold text-lg" style={{ color: '#F95F62' }}>${cityCardPrice}</span>
              </div>
              
              <motion.div
                className="flex items-center justify-between py-3 px-4 rounded-xl"
                style={{ backgroundColor: 'rgba(249, 95, 98, 0.1)' }}
                animate={{
                  backgroundColor: ['rgba(249, 95, 98, 0.1)', 'rgba(249, 95, 98, 0.18)', 'rgba(249, 95, 98, 0.1)'],
                }}
                transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
              >
                <div className="flex items-center gap-2">
                  <DollarSign className="w-5 h-5" style={{ color: '#F95F62' }} />
                  <span className="font-poppins font-semibold text-sm text-gray-900">You Save:</span>
                </div>
                <div className="text-right">
                  <div className="font-poppins font-semibold text-xl" style={{ color: '#F95F62' }}>${savings}</div>
                  <div className="font-poppins text-xs font-medium" style={{ color: '#F95F62' }}>({savingsPercent}% off)</div>
                </div>
              </motion.div>
            </div>

            {/* Attractions Included */}
            <div className="mb-6">
              <h3 className="font-poppins font-semibold text-gray-900 mb-4 text-center">
                What's Included
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-2 max-w-2xl mx-auto">
                {attractions.map((attraction, idx) => (
                  <div
                    key={idx}
                    className="flex items-center justify-between p-2.5 rounded-lg bg-gray-50"
                  >
                    <div className="flex items-center gap-2">
                      <Ticket className="w-4 h-4 text-gray-600" />
                      <span className="font-poppins text-sm font-normal text-gray-900">{attraction.name}</span>
                    </div>
                    <div className="text-right">
                      <div className="font-poppins text-xs font-medium text-gray-400 line-through">${attraction.price}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Benefits */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-2 max-w-2xl mx-auto">
              {[
                'Skip-the-line access',
                'Flexible 3-day validity',
                'Digital pass on phone',
                'Free 24hr cancellation'
              ].map((benefit, idx) => (
                <div key={idx} className="flex items-center gap-2">
                  <div className="w-4 h-4 rounded-full flex items-center justify-center" style={{ backgroundColor: 'rgba(249, 95, 98, 0.1)' }}>
                    <Check className="w-2.5 h-2.5" style={{ color: '#F95F62' }} />
                  </div>
                  <span className="font-poppins text-sm font-normal text-gray-700">{benefit}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}