CityCards-Website/src/components/NewsletterSection.tsx

import { Button } from './ui/button';
import { Input } from './ui/input';
import { Mail } from 'lucide-react';
import { motion } from 'motion/react';
import { ImageWithFallback } from './figma/ImageWithFallback';

export function NewsletterSection() {
  return (
    <section className="relative min-h-screen overflow-hidden bg-gradient-to-br from-primary/5 via-white to-secondary/5">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-30">
        <div className="absolute top-20 left-20 w-32 h-32 bg-primary/10 rounded-full blur-3xl animate-float"></div>
        <div className="absolute bottom-32 right-16 w-40 h-40 bg-secondary/10 rounded-full blur-3xl animate-float animate-delay-1000"></div>
        <div className="absolute top-1/2 left-1/4 w-24 h-24 bg-primary/5 rounded-full blur-2xl"></div>
        <div className="absolute bottom-1/4 right-1/3 w-36 h-36 bg-secondary/5 rounded-full blur-3xl"></div>
      </div>

      {/* Subtle Grid Pattern */}
      <div className="absolute inset-0 opacity-5">
        <div className="w-full h-1/2" style={{
          backgroundImage: `
            linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px)
          `,
          backgroundSize: '50px 50px'
        }}></div>
      </div>

      {/* Floating Email Icons */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <motion.div
          className="absolute top-1/4 left-10 text-primary/20"
          animate={{
            y: [0, -20, 0],
            rotate: [0, 5, 0]
          }}
          transition={{
            duration: 6,
            repeat: Infinity,
            ease: "easeInOut"
          }}
        >
          <Mail className="w-8 h-8" />
        </motion.div>
        
        <motion.div
          className="absolute top-1/3 right-16 text-secondary/20"
          animate={{
            y: [0, 15, 0],
            rotate: [0, -5, 0]
          }}
          transition={{
            duration: 8,
            repeat: Infinity,
            ease: "easeInOut",
            delay: 2
          }}
        >
          <Mail className="w-6 h-6" />
        </motion.div>
        
        <motion.div
          className="absolute bottom-1/3 left-1/4 text-primary/15"
          animate={{
            y: [0, -10, 0],
            rotate: [0, 3, 0]
          }}
          transition={{
            duration: 7,
            repeat: Infinity,
            ease: "easeInOut",
            delay: 4
          }}
        >
          <Mail className="w-5 h-5" />
        </motion.div>
      </div>

      {/* Main Content */}
      <div className="relative z-10 py-20 lg:py-28 text-center space-y-8 px-4">
        {/* Main Heading with Typography Guidelines */}
        <motion.div 
          className="space-y-4"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, ease: [0.25, 0.1, 0.25, 1] }}
        >
          <h2 className="font-merchant text-5xl md:text-6xl lg:text-7xl tracking-tight leading-tight">
            <div className="font-light">Get</div>
            <div>
              <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">
                travel tips
              </span>
              <span className="font-light"> &</span>
            </div>
            <div className="font-semibold">exclusive offers.</div>
          </h2>
          <motion.p 
            className="font-poppins text-lg lg:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed font-normal"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            We recommend you to subscribe, drop your email below to get daily update about us
          </motion.p>
        </motion.div>
        
        {/* Newsletter Subscription Interface */}
        <motion.div 
          className="max-w-2xl mx-auto space-y-6"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.3 }}
        >
          {/* Email Subscription Bar */}
          <div className="relative">
            <div className="flex items-center space-x-3 bg-white rounded-full p-2 shadow-xl border border-gray-100/50">
              <div className="flex-1 relative">
                <Mail className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
                <Input 
                  type="email" 
                  placeholder="Enter your email address"
                  className="pl-12 pr-4 h-14 text-base border-0 focus:ring-0 focus:border-0 bg-transparent"
                />
              </div>
              <motion.div
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
              >
                <Button className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 py-6 px-12 rounded-full text-lg shadow-lg">
                  Subscribe Now
                </Button>
              </motion.div>
            </div>
          </div>

          {/* Trust Indicators */}
          <motion.div 
            className="flex flex-wrap justify-center items-center gap-4 text-sm text-gray-500"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.5 }}
          >
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
              <span>No spam, unsubscribe anytime</span>
            </div>
            <div className="hidden md:block">•</div>
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
              <span>Read our Privacy Policy</span>
            </div>
            <div className="hidden md:block">•</div>
            <div className="flex items-center space-x-2">
              <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
              <span>Join 10,000+ subscribers</span>
            </div>
          </motion.div>

          {/* Additional Info */}
          <motion.p 
            className="text-sm text-gray-500 mt-4"
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.4, delay: 0.8 }}
          >
            Get exclusive travel tips, destination guides, and special offers delivered to your inbox
          </motion.p>
        </motion.div>
      </div>

      {/* Bottom Decorative Elements */}
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white/50 to-transparent pointer-events-none"></div>
    </section>
  );
}