import Link from "next/link";

export default function Footer() {
  const currentYear = new Date().getFullYear();

  const quickLinks = [
    { name: "Về chúng tôi", href: "/about" },
    { name: "Dịch vụ", href: "/services" },
    { name: "Bảng giá", href: "/pricing" },
    { name: "Blog", href: "/blog" },
    { name: "Liên hệ", href: "/contact" },
  ];

  const visaServices = [
    { name: "Visa Mỹ", href: "/visa" },
    { name: "Visa Schengen", href: "/visa" },
    { name: "Visa Nhật Bản", href: "/visa" },
    { name: "Visa Hàn Quốc", href: "/visa" },
    { name: "Visa Canada", href: "/visa" },
  ];

  const countries = [
    { name: "Châu Âu", href: "/countries" },
    { name: "Bắc Mỹ", href: "/countries" },
    { name: "Châu Á", href: "/countries" },
    { name: "Châu Đại Dương", href: "/countries" },
  ];

  return (
    <footer className="bg-gray-900 text-white">
      <div className="container mx-auto px-4 py-12">
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Company Info */}
          <div>
            <div className="flex items-center space-x-2 mb-6">
              <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-xl">V</span>
              </div>
              <div>
                <div className="font-bold text-xl">VisaService</div>
                <div className="text-sm text-gray-400">Dịch vụ visa uy tín</div>
              </div>
            </div>
            <p className="text-gray-400 mb-6">
              Đối tác tin cậy cho dịch vụ visa và du lịch với hơn 10 năm kinh
              nghiệm. Cam kết mang đến dịch vụ chất lượng cao với tỷ lệ thành
              công 99%.
            </p>
            <div className="flex space-x-4">
              <a
                href="#"
                className="text-gray-400 hover:text-white transition-colors"
              >
                <span className="sr-only">Facebook</span>
                📘
              </a>
              <a
                href="#"
                className="text-gray-400 hover:text-white transition-colors"
              >
                <span className="sr-only">Instagram</span>
                📷
              </a>
              <a
                href="#"
                className="text-gray-400 hover:text-white transition-colors"
              >
                <span className="sr-only">YouTube</span>
                📺
              </a>
              <a
                href="#"
                className="text-gray-400 hover:text-white transition-colors"
              >
                <span className="sr-only">LinkedIn</span>
                💼
              </a>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="font-semibold text-lg mb-6">Liên Kết Nhanh</h3>
            <ul className="space-y-3">
              {quickLinks.map((link) => (
                <li key={link.name}>
                  <Link
                    href={link.href}
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Visa Services */}
          <div>
            <h3 className="font-semibold text-lg mb-6">Dịch Vụ Visa</h3>
            <ul className="space-y-3">
              {visaServices.map((service) => (
                <li key={service.name}>
                  <Link
                    href={service.href}
                    className="text-gray-400 hover:text-white transition-colors"
                  >
                    {service.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact Info */}
          <div>
            <h3 className="font-semibold text-lg mb-6">Thông Tin Liên Hệ</h3>
            <div className="space-y-4">
              <div className="flex items-start">
                <span className="text-blue-400 mr-3 mt-1">📍</span>
                <div>
                  <p className="text-gray-400">
                    123 Nguyễn Huệ, Quận 1<br />
                    TP. Hồ Chí Minh
                  </p>
                </div>
              </div>
              <div className="flex items-center">
                <span className="text-blue-400 mr-3">📞</span>
                <p className="text-gray-400">+84 28 1234 5678</p>
              </div>
              <div className="flex items-center">
                <span className="text-blue-400 mr-3">✉️</span>
                <p className="text-gray-400">info@visaservice.com</p>
              </div>
              <div className="flex items-start">
                <span className="text-blue-400 mr-3 mt-1">🕒</span>
                <div>
                  <p className="text-gray-400">
                    Thứ 2 - Thứ 6: 8:00 - 18:00
                    <br />
                    Thứ 7: 8:00 - 12:00
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom Section */}
        <div className="border-t border-gray-800 mt-12 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="text-gray-400 text-sm mb-4 md:mb-0">
              © {currentYear} VisaService. Tất cả quyền được bảo lưu.
            </div>
            <div className="flex space-x-6 text-sm">
              <Link
                href="#"
                className="text-gray-400 hover:text-white transition-colors"
              >
                Chính sách bảo mật
              </Link>
              <Link
                href="#"
                className="text-gray-400 hover:text-white transition-colors"
              >
                Điều khoản sử dụng
              </Link>
              <Link
                href="#"
                className="text-gray-400 hover:text-white transition-colors"
              >
                Sitemap
              </Link>
            </div>
          </div>
        </div>
      </div>

      {/* Floating Contact Button */}
      <div className="fixed bottom-6 right-6 z-50">
        <Link
          href="/appointment"
          className="bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition-colors flex items-center justify-center"
        >
          <span className="text-2xl">💬</span>
        </Link>
      </div>
    </footer>
  );
}