import { motion } from 'motion/react';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { Download, Apple, Play } from 'lucide-react';

export function MobileAppPromotion() {
  return (
    <section className="py-20 bg-gradient-to-br from-gray-50 to-white relative overflow-hidden">
      <div className="container mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-8 items-center">
          {/* Left Content */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="space-y-8"
          >
            {/* Badge */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.1 }}
              viewport={{ once: true }}
              className="inline-flex items-center gap-2 bg-gradient-to-r from-primary/10 to-secondary/10 px-4 py-2 rounded-full"
            >
              <div className="w-2 h-2 bg-gradient-to-r from-primary to-secondary rounded-full"></div>
              <span className="text-sm font-medium bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                Mobile App
              </span>
            </motion.div>

            {/* Heading */}
            <motion.h2
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              viewport={{ once: true }}
              className="font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 leading-tight"
            >
              <span className="font-light">Access all your</span>{' '}
              <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                city cards
              </span>{' '}
              <span className="font-light">on your phone.</span>
            </motion.h2>

            {/* Description */}
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.3 }}
              viewport={{ once: true }}
              className="text-xl text-gray-600 leading-relaxed"
            >
              Download the app to manage your city cards, keep track of attractions visited, and complete your urban adventures without missing a beat. Stay on track and make the most of every destination!
            </motion.p>

            {/* Get the App Section */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.4 }}
              viewport={{ once: true }}
              className="space-y-4"
            >
              <h3 className="font-merchant text-xl font-semibold text-gray-900">
                Get the App
              </h3>
              
              {/* Download Buttons */}
              <div className="flex flex-col sm:flex-row gap-4">
                {/* Google Play Button */}
                <motion.a
                  whileHover={{ scale: 1.02, y: -2 }}
                  whileTap={{ scale: 0.98 }}
                  href="#"
                  className="group relative bg-black text-white rounded-lg px-6 py-3 flex items-center gap-3 transition-all duration-300 hover:shadow-xl overflow-hidden"
                >
                  <div className="relative z-10 flex items-center gap-3">
                    <Play className="w-8 h-8 text-white fill-current" />
                    <div className="text-left">
                      <div className="text-xs opacity-80">GET IT ON</div>
                      <div className="text-lg font-semibold">Google Play</div>
                    </div>
                  </div>
                  
                  {/* Shine effect */}
                  <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-300">
                    <div className="h-full bg-gradient-to-r from-transparent via-white to-transparent animate-shine"></div>
                  </div>
                </motion.a>

                {/* App Store Button */}
                <motion.a
                  whileHover={{ scale: 1.02, y: -2 }}
                  whileTap={{ scale: 0.98 }}
                  href="#"
                  className="group relative bg-black text-white rounded-lg px-6 py-3 flex items-center gap-3 transition-all duration-300 hover:shadow-xl overflow-hidden"
                >
                  <div className="relative z-10 flex items-center gap-3">
                    <Apple className="w-8 h-8 text-white" />
                    <div className="text-left">
                      <div className="text-xs opacity-80">Download on the</div>
                      <div className="text-lg font-semibold">App Store</div>
                    </div>
                  </div>
                  
                  {/* Shine effect */}
                  <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-300">
                    <div className="h-full bg-gradient-to-r from-transparent via-white to-transparent animate-shine"></div>
                  </div>
                </motion.a>
              </div>
            </motion.div>

            {/* Features List */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.5 }}
              viewport={{ once: true }}
              className="grid sm:grid-cols-2 gap-4 pt-4"
            >
              {[
                { icon: '📱', text: 'Offline access to all cards' },
                { icon: '📍', text: 'GPS-enabled attraction finder' },
                { icon: '🎫', text: 'Digital ticket storage' },
                { icon: '📊', text: 'Track your adventures' }
              ].map((feature, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: -20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.5, delay: 0.6 + (index * 0.1) }}
                  viewport={{ once: true }}
                  className="flex items-center gap-3 p-2"
                >
                  <span className="text-2xl">{feature.icon}</span>
                  <span className="text-sm font-medium text-gray-700">{feature.text}</span>
                </motion.div>
              ))}
            </motion.div>
          </motion.div>

          {/* Right Content - Phone Mockup */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            viewport={{ once: true }}
            className="relative flex justify-center lg:justify-end"
          >
            {/* Phone Frame */}
            <div className="relative">
              {/* Phone Shadow */}
              <div className="absolute inset-0 bg-black/20 blur-3xl transform translate-y-8 scale-95 rounded-3xl"></div>
              
              {/* Phone Container */}
              <motion.div
                initial={{ y: 20, scale: 0.9 }}
                whileInView={{ y: 0, scale: 1 }}
                transition={{ duration: 0.8, delay: 0.4 }}
                viewport={{ once: true }}
                className="relative bg-black rounded-[3rem] p-3 shadow-2xl"
              >
                {/* Screen */}
                <div className="bg-white rounded-[2.5rem] overflow-hidden w-72 h-[600px] relative">
                  {/* Status Bar */}
                  <div className="bg-black h-8 rounded-t-[2.5rem] relative">
                    <div className="absolute inset-x-0 top-0 h-6 bg-black rounded-t-[2.5rem]"></div>
                    <div className="absolute left-1/2 transform -translate-x-1/2 top-2 w-20 h-2 bg-black rounded-full"></div>
                  </div>
                  
                  {/* App Content */}
                  <div className="h-full bg-gray-50 relative overflow-hidden">
                    {/* App Header */}
                    <div className="bg-gradient-to-r from-primary to-secondary px-4 py-3 text-white">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="font-merchant font-semibold text-sm">Melbourne CityCards</h3>
                          <p className="text-xs opacity-90">5 attractions unlocked</p>
                        </div>
                        <div className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
                          <span className="text-xs">👤</span>
                        </div>
                      </div>
                    </div>

                    {/* Card Balance Banner */}
                    <div className="bg-yellow-100 border-l-4 border-yellow-400 px-4 py-2">
                      <p className="text-xs text-yellow-800">
                        <span className="font-semibold">$89 saved</span> • 3 more attractions available
                      </p>
                    </div>

                    {/* Attractions List */}
                    <div className="flex-1 p-3 space-y-2 overflow-y-auto">
                      {/* Attraction 1 */}
                      <motion.div
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.5, delay: 0.2 }}
                        className="bg-white rounded-lg p-3 shadow-sm border border-gray-100"
                      >
                        <div className="flex items-center gap-3">
                          <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
                            <ImageWithFallback
                              src="https://images.unsplash.com/photo-1512220567447-9ff58da12d87?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBtdXNldW0lMjBhdHRyYWN0aW9ufGVufDF8fHx8MTc1NzM5OTMyMnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
                              alt="Melbourne Museum"
                              className="w-full h-full object-cover"
                            />
                          </div>
                          <div className="flex-1 min-w-0">
                            <h4 className="font-medium text-xs text-gray-900 truncate">Melbourne Museum</h4>
                            <p className="text-xs text-gray-500">Natural History</p>
                            <div className="flex items-center gap-2 mt-1">
                              <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded">Save $8</span>
                              <span className="text-xs text-gray-400">✓ Added</span>
                            </div>
                          </div>
                        </div>
                      </motion.div>

                      {/* Attraction 2 */}
                      <motion.div
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.5, delay: 0.3 }}
                        className="bg-white rounded-lg p-3 shadow-sm border border-gray-100"
                      >
                        <div className="flex items-center gap-3">
                          <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
                            <ImageWithFallback
                              src="https://images.unsplash.com/photo-1610186356191-880ceaa884f3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjB6b28lMjB3aWxkbGlmZXxlbnwxfHx8fDE3NTczOTkzMjV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
                              alt="Melbourne Zoo"
                              className="w-full h-full object-cover"
                            />
                          </div>
                          <div className="flex-1 min-w-0">
                            <h4 className="font-medium text-xs text-gray-900 truncate">Melbourne Zoo</h4>
                            <p className="text-xs text-gray-500">Wildlife & Animals</p>
                            <div className="flex items-center gap-2 mt-1">
                              <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded">Save $12</span>
                              <span className="text-xs text-gray-400">✓ Added</span>
                            </div>
                          </div>
                        </div>
                      </motion.div>

                      {/* Attraction 3 */}
                      <motion.div
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.5, delay: 0.4 }}
                        className="bg-white rounded-lg p-3 shadow-sm border border-gray-100"
                      >
                        <div className="flex items-center gap-3">
                          <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
                            <ImageWithFallback
                              src="https://images.unsplash.com/photo-1735605918618-0193db0a30af?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBnYXJkZW5zJTIwYm90YW5pY2FsfGVufDF8fHx8MTc1NzM5OTMyOXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
                              alt="Botanic Gardens"
                              className="w-full h-full object-cover"
                            />
                          </div>
                          <div className="flex-1 min-w-0">
                            <h4 className="font-medium text-xs text-gray-900 truncate">Royal Botanic Gardens</h4>
                            <p className="text-xs text-gray-500">Gardens & Nature</p>
                            <div className="flex items-center gap-2 mt-1">
                              <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded">Save $5</span>
                              <span className="text-xs text-gray-400">✓ Added</span>
                            </div>
                          </div>
                        </div>
                      </motion.div>

                      {/* Attraction 4 - Available to Add */}
                      <motion.div
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.5, delay: 0.5 }}
                        className="bg-white rounded-lg p-3 shadow-sm border border-gray-100"
                      >
                        <div className="flex items-center gap-3">
                          <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
                            <ImageWithFallback
                              src="https://images.unsplash.com/photo-1554050640-3f0b16d9c7bd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBhcXVhcml1bSUyMG9jZWFufGVufDF8fHx8MTc1NzM5OTMzMXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
                              alt="SEA LIFE Aquarium"
                              className="w-full h-full object-cover"
                            />
                          </div>
                          <div className="flex-1 min-w-0">
                            <h4 className="font-medium text-xs text-gray-900 truncate">SEA LIFE Aquarium</h4>
                            <p className="text-xs text-gray-500">Marine Life</p>
                            <div className="flex items-center gap-2 mt-1">
                              <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded">Save $15</span>
                              <motion.button
                                whileHover={{ scale: 1.05 }}
                                whileTap={{ scale: 0.95 }}
                                className="text-xs bg-gradient-to-r from-primary to-secondary text-white px-2 py-0.5 rounded font-medium"
                              >
                                + Add
                              </motion.button>
                            </div>
                          </div>
                        </div>
                      </motion.div>

                      {/* Progress Section */}
                      <motion.div
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.5, delay: 0.6 }}
                        className="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-lg p-3 mt-4"
                      >
                        <div className="flex items-center justify-between mb-2">
                          <span className="text-xs font-medium text-gray-700">Progress</span>
                          <span className="text-xs text-gray-500">3 of 8 visited</span>
                        </div>
                        <div className="w-full bg-gray-200 rounded-full h-1.5">
                          <motion.div
                            initial={{ width: 0 }}
                            animate={{ width: '37.5%' }}
                            transition={{ duration: 1, delay: 0.8 }}
                            className="bg-gradient-to-r from-primary to-secondary h-1.5 rounded-full"
                          ></motion.div>
                        </div>
                      </motion.div>
                    </div>

                    {/* Bottom Navigation */}
                    <div className="bg-white border-t border-gray-100 px-4 py-2">
                      <div className="flex justify-around">
                        <button className="flex flex-col items-center gap-1">
                          <span className="text-primary">🏛️</span>
                          <span className="text-xs text-primary font-medium">Cards</span>
                        </button>
                        <button className="flex flex-col items-center gap-1">
                          <span className="text-gray-400">📍</span>
                          <span className="text-xs text-gray-400">Map</span>
                        </button>
                        <button className="flex flex-col items-center gap-1">
                          <span className="text-gray-400">⭐</span>
                          <span className="text-xs text-gray-400">Saved</span>
                        </button>
                        <button className="flex flex-col items-center gap-1">
                          <span className="text-gray-400">👤</span>
                          <span className="text-xs text-gray-400">Profile</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </motion.div>
            </div>

            {/* Floating Elements */}
            <motion.div
              animate={{ 
                y: [20, -20, 20],
                rotate: [0, -5, 0, 5, 0]
              }}
              transition={{ 
                duration: 5, 
                repeat: Infinity, 
                ease: "easeInOut",
                delay: 2
              }}
              className="absolute -bottom-8 -right-8 w-14 h-14 bg-gradient-to-br from-green-400 to-blue-500 rounded-xl shadow-lg flex items-center justify-center text-white text-xl"
            >
              📍
            </motion.div>
          </motion.div>
        </div>
      </div>

      {/* Background Decorations */}
      <div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-primary/5 to-secondary/5 rounded-full blur-3xl transform translate-x-1/2 -translate-y-1/2"></div>
      <div className="absolute bottom-0 left-0 w-64 h-64 bg-gradient-to-tr from-secondary/5 to-primary/5 rounded-full blur-3xl transform -translate-x-1/2 translate-y-1/2"></div>
    </section>
  );
}