import { motion } from 'motion/react';
import { ImageWithFallback } from './figma/ImageWithFallback';

export function LandingWhyChooseCityCards() {
  return (
    <section className="py-20 bg-gradient-to-b from-white to-gray-50/30 overflow-hidden">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 bg-primary/10 px-4 py-2 rounded-full mb-6">
            <div className="w-2 h-2 bg-primary rounded-full"></div>
            <span className="font-poppins text-sm font-medium text-primary">
              Smart Savings
            </span>
          </div>
          <h2 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight text-foreground mb-4">
            <span className="font-light">Save</span>{' '}
            <span className="font-bold text-primary italic">Big</span>{' '}
            <span className="font-normal">on attractions</span>
          </h2>
          <p className="font-poppins text-xl leading-relaxed font-normal text-gray-700 max-w-3xl mx-auto">
            Why pay $350+ buying tickets individually when Melbourne City Card gives you 40+ attractions for as little as $199?
          </p>
        </div>

        {/* Main Content */}
        <div className="max-w-5xl mx-auto">
          {/* Polaroid Cards Layout */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
            
            {/* Melbourne Card */}
            <motion.div
              className="relative"
              initial={{ opacity: 0, y: 30, rotate: -2 }}
              whileInView={{ opacity: 1, y: 0, rotate: -1 }}
              transition={{ duration: 0.6, ease: "easeOut" }}
              viewport={{ once: true }}
            >
              <div className="bg-white p-4 shadow-xl transform rotate-1 hover:rotate-0 transition-transform duration-300">
                {/* Image */}
                <div className="aspect-[4/3] overflow-hidden mb-4">
                  <ImageWithFallback
                    src="https://images.unsplash.com/photo-1514395462725-fb4566210144?w=600&h=400&fit=crop"
                    alt="Melbourne cityscape"
                    className="w-full h-full object-cover"
                  />
                </div>
                
                {/* Polaroid Caption */}
                <div className="text-center">
                  <h3 className="font-poppins text-xl md:text-2xl leading-snug font-semibold text-foreground mb-2">Melbourne</h3>
                  <div className="space-y-2 font-poppins">
                    <div className="flex justify-between items-center">
                      <span className="text-base font-normal text-gray-700">Individual tickets:</span>
                      <span className="text-base font-normal text-foreground line-through">$350+</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-base font-normal text-gray-700">City Card:</span>
                      <span className="text-2xl font-bold text-primary">$199</span>
                    </div>
                    <div className="text-center pt-2">
                      <span className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-poppins font-medium">
                        Save $151+
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              
              {/* Decorative elements */}
              <div className="absolute -top-2 -right-2 w-6 h-6 bg-yellow-400 rounded-full shadow-lg transform rotate-12"></div>
              <div className="absolute -bottom-3 -left-3 w-4 h-4 bg-blue-400 rounded-full shadow-lg"></div>
            </motion.div>

            {/* Sydney Card */}
            <motion.div
              className="relative"
              initial={{ opacity: 0, y: 30, rotate: 2 }}
              whileInView={{ opacity: 1, y: 0, rotate: 1 }}
              transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
              viewport={{ once: true }}
            >
              <div className="bg-white p-4 shadow-xl transform -rotate-1 hover:rotate-0 transition-transform duration-300">
                {/* Image */}
                <div className="aspect-[4/3] overflow-hidden mb-4">
                  <ImageWithFallback
                    src="https://images.unsplash.com/photo-1624138784614-87fd1b6528f8?w=600&h=400&fit=crop"
                    alt="Sydney Opera House and Harbour Bridge"
                    className="w-full h-full object-cover"
                  />
                </div>
                
                {/* Polaroid Caption */}
                <div className="text-center">
                  <h3 className="font-poppins text-xl md:text-2xl leading-snug font-semibold text-foreground mb-2">Sydney</h3>
                  <div className="space-y-2 font-poppins">
                    <div className="flex justify-between items-center">
                      <span className="text-base font-normal text-gray-700">Individual tickets:</span>
                      <span className="text-base font-normal text-foreground line-through">$420+</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span className="text-base font-normal text-gray-700">City Card:</span>
                      <span className="text-2xl font-bold text-primary">$249</span>
                    </div>
                    <div className="text-center pt-2">
                      <span className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-poppins font-medium">
                        Save $171+
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              
              {/* Decorative elements */}
              <div className="absolute -top-3 -left-2 w-5 h-5 bg-pink-400 rounded-full shadow-lg transform -rotate-12"></div>
              <div className="absolute -bottom-2 -right-3 w-3 h-3 bg-green-400 rounded-full shadow-lg"></div>
            </motion.div>
          </div>

          {/* Bottom Features */}
          <motion.div
            className="mt-16 text-center"
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
            viewport={{ once: true }}
          >
            <div className="bg-primary/5 rounded-3xl p-8 border border-gray-100">
              <h3 className="font-poppins text-xl md:text-2xl leading-snug font-semibold text-foreground mb-6">
                <span className="font-normal">Why</span>{' '}
                <span className="text-primary">CityCards</span>?
              </h3>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="text-center">
                  <div className="w-16 h-16 bg-gradient-to-br from-green-100 to-green-50 rounded-xl flex items-center justify-center mx-auto mb-3 shadow-lg border border-green-200/50">
                    <span className="text-3xl filter drop-shadow-sm">💰</span>
                  </div>
                  <h4 className="font-poppins text-lg leading-snug font-medium text-foreground mb-2">Massive Savings</h4>
                  <p className="font-poppins text-sm leading-relaxed font-normal text-gray-500">Save up to 50% compared to individual attraction tickets</p>
                </div>
                
                <div className="text-center">
                  <div className="w-16 h-16 bg-gradient-to-br from-yellow-100 to-orange-50 rounded-xl flex items-center justify-center mx-auto mb-3 shadow-lg border border-yellow-200/50">
                    <span className="text-3xl filter drop-shadow-sm">⚡</span>
                  </div>
                  <h4 className="font-poppins text-lg leading-snug font-medium text-foreground mb-2">Skip the Lines</h4>
                  <p className="font-poppins text-sm leading-relaxed font-normal text-gray-500">Fast-track entry to popular attractions and experiences</p>
                </div>
                
                <div className="text-center">
                  <div className="w-16 h-16 bg-gradient-to-br from-blue-100 to-indigo-50 rounded-xl flex items-center justify-center mx-auto mb-3 shadow-lg border border-blue-200/50">
                    <span className="text-3xl filter drop-shadow-sm">📱</span>
                  </div>
                  <h4 className="font-poppins text-lg leading-snug font-medium text-foreground mb-2">Digital Convenience</h4>
                  <p className="font-poppins text-sm leading-relaxed font-normal text-gray-500">Everything on your phone - no physical tickets needed</p>
                </div>
              </div>
              
              <motion.button 
                className="mt-8 bg-primary text-white py-4 px-12 rounded-full font-poppins font-semibold text-base hover:shadow-lg hover:shadow-primary/25 transition-all duration-200"
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
              >
                Start Saving Today
              </motion.button>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}