import React from "react";
import CourtOfArms from "../assets/Court of Arms.png";

export default function Footer() {
  return (
    <footer className="w-full bg-blue-900 text-white pt-10 pb-6 mt-auto font-inter">
      <div className="max-w-7xl mx-auto px-4 flex flex-col md:flex-row md:items-start gap-10 md:gap-8 justify-between">
        {/* Logo and Brand */}
        <div className="flex flex-col items-center md:items-start mb-6 md:mb-0 min-w-[180px]">
          <img src={CourtOfArms} alt="Court of Arms" className="h-12 w-auto mb-2" />
          <span className="text-xl font-extrabold font-poppins tracking-tight text-green-200">GCIC</span>
          <div className="flex gap-3 mt-3">
            <a href="https://facebook.com/citizenportal" target="_blank" rel="noopener noreferrer" className="hover:text-blue-200 text-xs">Facebook</a>
            <a href="https://instagram.com/citizenportal" target="_blank" rel="noopener noreferrer" className="hover:text-blue-200 text-xs">Instagram</a>
            <a href="https://twitter.com/citizenportal" target="_blank" rel="noopener noreferrer" className="hover:text-blue-200 text-xs">Twitter</a>
          </div>
        </div>
        {/* Contact */}
        <div className="flex-1 min-w-[180px] mb-6 md:mb-0">
          <h4 className="font-extrabold mb-2 text-base font-poppins tracking-tight">Contact Us</h4>
          <div className="flex flex-col gap-2 mb-2">
            <a href="mailto:support@citizenportal.gov" className="hover:text-blue-200 font-inter">support@citizenportal.gov</a>
            <a href="tel:+256123456789" className="hover:text-blue-200 font-inter">+256 123 456 789</a>
          </div>
        </div>
        {/* Services */}
        <div className="flex-1 min-w-[180px] mb-6 md:mb-0">
          <h4 className="font-extrabold mb-2 text-base font-poppins tracking-tight">Services</h4>
          <ul className="space-y-1 font-inter text-sm">
            <li><a href="/chatbot" className="hover:text-blue-200">Chatbot Interaction</a></li>
            <li><a href="/polls" className="hover:text-blue-200">Poll & Survey Participation</a></li>
            <li><a href="/complaints" className="hover:text-blue-200">Filing Complaints</a></li>
            {/* <li><a href="/agents" className="hover:text-blue-200">Agent Interaction</a></li> */}
          </ul>
        </div>
        {/* Why Choose */}
        <div className="flex-1 min-w-[220px]">
          <h4 className="font-extrabold mb-2 text-base font-poppins tracking-tight">Why use the Citizen Portal?</h4>
          <p className="text-sm opacity-90 mb-2 font-inter">
            The Citizen Portal empowers you to actively participate in governance with seamless tools for feedback, issue reporting, and real-time support. Built for transparency and accessibility, it connects citizens directly to ministries.
          </p>
          <a href="/about" className="inline-block mt-2 text-blue-200 underline font-poppins">Learn More</a>
        </div>
      </div>
      <div className="text-center text-xs text-blue-200 mt-8 font-inter px-2">
        © 2025 Citizen Portal. All rights reserved. | <a href="/privacy" className="underline">Privacy Policy</a> | <a href="/terms" className="underline">Terms of Service</a>
      </div>
    </footer>
  );
}
