import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Phone, Mail, ChevronRight, Instagram, Twitter, Facebook, MessageCircle } from "lucide-react";

const Footer = () => {
  return (
    <footer className="bg-gray-900 text-white relative overflow-hidden pt-20">
      <div className="max-w-7xl mx-auto px-4 pt-4">
        {/* App Download Section */}
        <div className="py-12">
          <div className="bg-primary rounded-2xl">
            <div className="max-w-5xl mx-auto px-0 flex flex-col-reverse md:flex-row items-center md:items-end gap-8">
              <img 
                className="flex-shrink-0" 
                src="https://themes.easital.com/html/liston/v2.3/assets/images/phone-mpckup.png" 
                width="270" 
                alt="Mobile app" 
              />
              <div className="flex flex-col lg:flex-row items-center lg:items-center self-center px-4 pt-12 py-6 text-center md:text-left">
                <div className="me-8">
                  <h4 className="text-white text-2xl font-bold mb-4">Download Our App</h4>
                  <p className="text-white/90 mb-6 lg:mb-0">
                    It is a long established fact that a reader will be distracted by the readable content.
                  </p>
                </div>
                <div className="flex flex-shrink-0 flex-wrap gap-3 justify-center">
                  {/* Apple Store Button */}
                  <a 
                    href="#" 
                    className="flex items-center px-4 py-3 rounded-xl text-white border border-white/20 hover:bg-white/10 transition-colors"
                  >
                    <i className="fab fa-apple text-3xl mr-3"></i>
                    <div>
                      <span className="text-sm block">Available on the</span>
                      <span className="text-lg capitalize">App Store</span>
                    </div>
                  </a>
                  {/* Google Play Button */}
                  <a 
                    href="#" 
                    className="flex items-center px-4 py-3 rounded-xl text-white border border-white/20 hover:bg-white/10 transition-colors"
                  >
                    <i className="fab fa-google-play text-2xl mr-3"></i>
                    <div>
                      <span className="text-sm block">Get it on</span>
                      <span className="text-lg capitalize">Google Play</span>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Main Footer Content */}
        <div className="border-t border-gray-700 py-12">
          <div className="grid lg:grid-cols-3 gap-8">
            {/* Get In Touch Section */}
            <div className="lg:border-r border-gray-700 lg:pr-8">
              <h5 className="font-bold text-xl mb-6">Get In Touch</h5>
              <div className="mb-6">
                Join our newsletter and receive the best job<br className="hidden xxl:block" /> 
                openings of the week, right on your inbox.
              </div>
              <div className="border border-gray-600 rounded-2xl p-6 mb-6">
                <h6 className="text-gray-300 mb-4">Join our Whatsapp:</h6>
                <a 
                  href="#" 
                  className="flex items-center text-white hover:text-primary transition-colors"
                >
                  <MessageCircle className="w-8 h-8 mr-3" />
                  <span className="text-xl font-semibold underline">(123) 456-7890</span>
                </a>
              </div>
              <h5 className="font-bold text-xl mb-4">
                Want to join Karibeo?<br /> Write us !
              </h5>
              <span className="text-gray-300">support@karibeo.com</span>
            </div>

            {/* Stay Connect Section */}
            <div className="lg:border-r border-gray-700 lg:pr-8">
              <h5 className="font-bold text-xl mb-6">Stay Connect</h5>
              <div className="text-gray-300 mb-6">
                1123 Fictional St, San Francisco<br className="hidden xxl:block" />
                , CA 94103
              </div>
              <div className="space-y-2">
                <a 
                  href="#" 
                  className="flex items-center font-medium text-white hover:text-primary transition-colors"
                >
                  <Phone className="w-4 h-4 mr-3" />
                  <span>(123) 456-7890</span>
                </a>
                <a 
                  href="#" 
                  className="flex items-center font-medium text-white hover:text-primary transition-colors"
                >
                  <Mail className="w-4 h-4 mr-3" />
                  support@karibeo.com
                </a>
              </div>
            </div>

            {/* Newsletter and Social Section */}
            <div>
              <h5 className="font-bold text-xl mb-6">Get In Touch</h5>
              <div className="relative mt-6">
                <Input 
                  type="email" 
                  placeholder="name@example.com" 
                  className="bg-gray-800 border-gray-600 text-white pr-12"
                />
                <Button 
                  size="sm"
                  className="absolute right-2 top-1/2 transform -translate-y-1/2 rounded-full w-8 h-8 p-0"
                >
                  <ChevronRight className="w-4 h-4" />
                </Button>
              </div>
              
              <div className="border-t border-gray-700 my-6"></div>
              
              <h5 className="font-bold text-xl mb-6">Follow the location</h5>
              
              {/* Social Icons */}
              <ul className="flex flex-wrap gap-3 list-none">
                <li>
                  <a 
                    href="#" 
                    className="w-12 h-12 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center text-white hover:scale-110 transition-transform"
                  >
                    <Instagram className="w-5 h-5" />
                  </a>
                </li>
                <li>
                  <a 
                    href="#" 
                    className="w-12 h-12 rounded-lg bg-blue-400 flex items-center justify-center text-white hover:scale-110 transition-transform"
                  >
                    <Twitter className="w-5 h-5" />
                  </a>
                </li>
                <li>
                  <a 
                    href="#" 
                    className="w-12 h-12 rounded-lg bg-pink-500 flex items-center justify-center text-white hover:scale-110 transition-transform"
                  >
                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12 0C5.374 0 0 5.374 0 12s5.374 12 12 12 12-5.374 12-12S18.626 0 12 0zm6.568 5.341c.13.187.29.349.477.479.239.165.518.248.804.248.286 0 .565-.083.804-.248.187-.13.347-.292.477-.479C21.89 6.458 22.5 8.188 22.5 12c0 3.812-.61 5.542-1.37 6.659-.13.187-.29.349-.477.479-.239.165-.518.248-.804.248-.286 0-.565-.083-.804-.248-.187-.13-.347-.292-.477-.479C18.808 17.542 18.198 15.812 18.198 12c0-3.812.61-5.542 1.37-6.659z"/>
                    </svg>
                  </a>
                </li>
                <li>
                  <a 
                    href="#" 
                    className="w-12 h-12 rounded-lg bg-blue-600 flex items-center justify-center text-white hover:scale-110 transition-transform"
                  >
                    <Facebook className="w-5 h-5" />
                  </a>
                </li>
                <li>
                  <a 
                    href="#" 
                    className="w-12 h-12 rounded-lg bg-green-500 flex items-center justify-center text-white hover:scale-110 transition-transform"
                  >
                    <MessageCircle className="w-5 h-5" />
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Footer */}
      <div className="max-w-7xl mx-auto px-4 border-t border-gray-700">
        <div className="flex flex-col lg:flex-row items-center gap-4 py-6">
          <div className="lg:order-2">
            {/* Footer Navigation */}
            <ul className="flex space-x-6 text-sm">
              <li><a href="#" className="text-gray-300 hover:text-white transition-colors">Privacy</a></li>
              <li><a href="#" className="text-gray-300 hover:text-white transition-colors">Sitemap</a></li>
              <li><a href="#" className="text-gray-300 hover:text-white transition-colors">Cookies</a></li>
            </ul>
          </div>
          <div className="lg:order-1 lg:flex-1">
            <div className="flex flex-col sm:flex-row items-center gap-4">
              {/* Footer Logo */}
              <a href="/" className="flex-shrink-0">
                <img 
                  src="https://themes.easital.com/html/liston/v2.3/assets/images/logo-white.png" 
                  alt="Karibeo" 
                  className="h-8"
                />
              </a>
              {/* Copyright */}
              <div className="text-sm text-gray-400">
                © 2025 Karibeo - All Rights Reserved
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;