import image_bc70aef6686e5f4d059b5ef3380fd4f44bb9f4c6 from '../assets/bc70aef6686e5f4d059b5ef3380fd4f44bb9f4c6.png';
import { motion } from 'motion/react';
import { Apple, Play } from 'lucide-react';
import { ImageWithFallback } from './figma/ImageWithFallback';
import cityCardsLogo from '../assets/cit-logo.png';
import { Link } from 'react-router-dom';

export function FooterBrand() {
  return (
    <motion.div 
      className="lg:col-span-4 space-y-4"
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
    >
      <div className="flex items-center">
        <Link to="/">
        <img
          src={cityCardsLogo}
          alt="CityCards Logo"
          className="h-12 w-auto"
        />
        </Link>
      </div>
      <p className="font-poppins text-white/80 text-sm leading-relaxed font-normal max-w-xs">
        Discover the best of every city with our curated experiences and attractions. 
        Your gateway to unforgettable urban adventures.
      </p>
      
      {/* Get Application Section */}
      <div className="pt-4">
        <div className="flex items-center space-x-4">
          <p className="font-poppins text-white/80 text-sm font-normal whitespace-nowrap">Get Application:</p>
          
          <div className="flex space-x-3">
            {/* iOS App Store Button */}
            <motion.a 
              href="#" 
              className="flex items-center justify-center w-12 h-12 bg-white/15 rounded-full hover:bg-white/25 transition-all duration-300 border border-white/20 hover:border-white/40 relative group"
              whileHover={{ scale: 1.1, y: -2 }}
              whileTap={{ scale: 0.95 }}
              transition={{ duration: 0.2, ease: "easeOut" }}
              title="Download for iOS"
            >
              <Apple className="w-6 h-6 text-white fill-current" />
              <div className="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-black/80 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
                iOS
              </div>
            </motion.a>
            
            {/* Android App Store Button */}
            <motion.a 
              href="#" 
              className="flex items-center justify-center w-12 h-12 bg-white/15 rounded-full hover:bg-white/25 transition-all duration-300 border border-white/20 hover:border-white/40 relative group"
              whileHover={{ scale: 1.1, y: -2 }}
              whileTap={{ scale: 0.95 }}
              transition={{ duration: 0.2, ease: "easeOut" }}
              title="Download for Android"
            >
              <Play className="w-6 h-6 text-white fill-current" />
              <div className="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-black/80 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">
                Android
              </div>
            </motion.a>
          </div>
        </div>
      </div>
    </motion.div>
  );
}