import React from 'react';
import { Plane, Mail, Phone, MapPin, Facebook, Instagram, Twitter } from 'lucide-react';
import { Link } from 'react-router-dom';

const Footer = () => {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-gradient-to-br from-gray-900 to-gray-800 text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Company Info */}
          <div>
            <div className="flex items-center space-x-2 mb-4">
              <div className="bg-gradient-to-br from-cyan-500 to-blue-600 p-2 rounded-lg">
                <Plane className="w-5 h-5 text-white" />
              </div>
              <span className="text-lg font-bold">Epic Travel</span>
            </div>
            <p className="text-gray-300 text-sm leading-relaxed">
              Discover the world's most breathtaking destinations with Epic Travel. 
              We create unforgettable journeys tailored to your dreams.
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Quick Links</h3>
            <ul className="space-y-2">
              <li>
                <Link to="/" className="text-gray-300 hover:text-cyan-400 transition-colors duration-200 text-sm">
                  Home
                </Link>
              </li>
              <li>
                <a href="#destinations" className="text-gray-300 hover:text-cyan-400 transition-colors duration-200 text-sm">
                  Destinations
                </a>
              </li>
              <li>
                <a href="#specials" className="text-gray-300 hover:text-cyan-400 transition-colors duration-200 text-sm">
                  Special Offers
                </a>
              </li>
              <li>
                <a href="#testimonials" className="text-gray-300 hover:text-cyan-400 transition-colors duration-200 text-sm">
                  Testimonials
                </a>
              </li>
              <li>
                <Link to="/admin" className="text-gray-300 hover:text-cyan-400 transition-colors duration-200 text-sm">
                  Admin Portal
                </Link>
              </li>
            </ul>
          </div>

          {/* Contact Info */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Contact Us</h3>
            <ul className="space-y-3">
              <li className="flex items-start space-x-3">
                <MapPin className="w-5 h-5 text-cyan-400 flex-shrink-0 mt-0.5" />
                <span className="text-gray-300 text-sm">Weatherford, Texas  76088

                </span>
              </li>
              <li className="flex items-center space-x-3">
                <Phone className="w-5 h-5 text-cyan-400 flex-shrink-0" />
                <span className="text-gray-300 text-sm">+1 (817) 266-2022</span>
              </li>
              <li className="flex items-center space-x-3">
                <Mail className="w-5 h-5 text-cyan-400 flex-shrink-0" />
                <span className="text-gray-300 text-sm">advisor@epictravelexpeditions.com</span>
              </li>
            </ul>
          </div>

          {/* Social Media */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Follow Us</h3>
            <p className="text-gray-300 text-sm mb-4">
              Stay connected for the latest travel inspiration and exclusive deals.
            </p>
            <div className="flex space-x-4">
              <a
                href="https://facebook.com"
                target="_blank"
                rel="noopener noreferrer"
                className="bg-gray-700 p-2 rounded-full hover:bg-cyan-600 transition-colors duration-300">

                <Facebook className="w-5 h-5" />
              </a>
              <a
                href="https://instagram.com"
                target="_blank"
                rel="noopener noreferrer"
                className="bg-gray-700 p-2 rounded-full hover:bg-cyan-600 transition-colors duration-300">

                <Instagram className="w-5 h-5" />
              </a>
              <a
                href="https://twitter.com"
                target="_blank"
                rel="noopener noreferrer"
                className="bg-gray-700 p-2 rounded-full hover:bg-cyan-600 transition-colors duration-300">

                <Twitter className="w-5 h-5" />
              </a>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="border-t border-gray-700 mt-8 pt-8 text-center">
          <p className="text-gray-400 text-sm">
            © {currentYear} Epic Travel & Expeditions. All rights reserved.
          </p>
        </div>
      </div>
    </footer>);

};

export default Footer;