import { PhoneIcon } from '@heroicons/react/24/outline'

export function Footer() {
    return (
        <footer className="bg-gradient-to-b from-[#13294B] to-[#0c1c33] text-gray-300">
            <div className="container mx-auto px-6 py-10">
                {/* Main Footer Content */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-10 mb-8">
                    {/* Logo and Main Info */}
                    <div className="text-center md:text-left">
                        <div className="flex md:justify-start justify-center mb-4 group">
                            <img
                                src="/usaf-emblem.png"
                                alt="USAF Official Emblem"
                                className="h-16 w-auto transform transition-all duration-300 
                                         group-hover:scale-105 group-hover:brightness-110
                                         drop-shadow-lg"
                            />
                        </div>
                        <h3 className="text-white font-bold text-lg tracking-wide mb-2
                                     drop-shadow-md">
                            美国空军官方领导机关信箱
                        </h3>
                        <p className="text-tertiary-300 text-sm">
                            为美国空军提供安全可靠的通信服务
                        </p>
                    </div>

                    {/* Technical Support */}
                    <div className="text-center md:text-left md:pl-6 md:border-l border-gray-700">
                        <h4 className="text-white font-semibold mb-4 text-lg tracking-wide
                                     drop-shadow-md">
                            技术支持
                        </h4>
                        <div className="space-y-4">
                            <div className="bg-gradient-to-br from-[#1a3a6a] to-[#234785] 
                                          p-4 rounded-lg shadow-lg hover:shadow-xl 
                                          transition-all duration-300 transform hover:-translate-y-0.5">
                                <p className="text-white font-medium mb-2">创新高地 软件小组</p>
                                <p className="text-gray-300 text-sm">负责系统开发维护及技术支持</p>
                                <div className="mt-3 flex items-center justify-center md:justify-start gap-2 
                                              text-sm text-gray-300">
                                    <PhoneIcon className="w-4 h-4" />
                                    <span>1-800-XXX-XXXX</span>
                                </div>
                            </div>
                            <p className="text-tertiary-300 text-sm italic">
                                由软件小组提供 24/7 专业技术支持
                            </p>
                        </div>
                    </div>
                </div>

                {/* Divider */}
                <div className="border-t border-gray-700/50 my-6"></div>

                {/* Bottom Section */}
                <div className="text-center">
                    <div className="flex flex-wrap justify-center gap-x-6 gap-y-2 mb-4 text-sm 
                                  text-tertiary-300">
                        <span className="hover:text-gray-300 transition-colors duration-200">
                            美国国防部授权网站
                        </span>
                        <span className="hover:text-gray-300 transition-colors duration-200">
                            所有通信内容受联邦法律保护
                        </span>
                        <span className="hover:text-gray-300 transition-colors duration-200">
                            政府信息系统
                        </span>
                    </div>
                    <p className="text-tertiary-300 text-sm">
                        © {new Date().getFullYear()} United States Air Force. All rights reserved.
                    </p>
                </div>
            </div>
        </footer>
    )
}