import Container from "@/components/ui/Container";
import { PlaneTakeoff } from "lucide-react";

const COLUMNS: { title: string; links: string[] }[] = [
  {
    title: "Product",
    links: ["Readiness check", "Complete prep", "Civics practice", "Pricing"],
  },
  {
    title: "Company",
    links: ["How it works", "For partners", "FAQ", "Contact"],
  },
  {
    title: "Resources",
    links: ["USCIS.gov", "Find an attorney", "Civics study guide", "Blog"],
  },
  {
    title: "Legal",
    links: ["Terms", "Privacy", "Disclaimers", "Do not sell my info"],
  },
];

export default function Footer() {
  return (
    <footer className="bg-navy-800 text-cream/70">
      <Container>
        <div className="grid gap-10 py-14 md:grid-cols-[1.4fr_1fr_1fr_1fr_1fr]">
          {/* Brand */}
          <div>
            <div className="flex items-center gap-2.5">
              <span className="grid h-9 w-9 place-items-center rounded-xl bg-white/5 text-gold">
                <PlaneTakeoff className="h-5 w-5" strokeWidth={2.2} />
              </span>
              <span className="font-display text-xl font-600 text-white">
                CitizenPilot
              </span>
            </div>
            <p className="mt-4 max-w-xs text-sm leading-relaxed text-cream/55">
              Tu copiloto para la ciudadanía. Self-help citizenship readiness and
              civics practice — Spanish-first.
            </p>
          </div>

          {COLUMNS.map((col) => (
            <div key={col.title}>
              <p className="text-xs font-700 uppercase tracking-wider text-cream/40">
                {col.title}
              </p>
              <ul className="mt-4 space-y-2.5">
                {col.links.map((link) => (
                  <li key={link}>
                    <a
                      href="#top"
                      className="text-sm text-cream/65 transition-colors hover:text-white"
                    >
                      {link}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Disclaimer */}
        <div className="border-t border-white/8 py-8">
          <p className="text-xs leading-relaxed text-cream/45">
            <span className="font-600 text-cream/65">Important:</span>{" "}
            CitizenPilot is not a law firm, is not a government agency, and is
            not affiliated with U.S. Citizenship and Immigration Services
            (USCIS). We provide self-help educational resources and civics-test
            practice only. We do not provide legal advice and do not select,
            prepare, file, or review immigration forms. USCIS forms are
            available for free at USCIS.gov. Attorney services, where mentioned,
            are provided by independent licensed immigration professionals. We
            do not guarantee approval or government processing speed.
          </p>
        </div>

        <div className="flex flex-col items-center justify-between gap-3 border-t border-white/8 py-6 sm:flex-row">
          <p className="text-xs text-cream/40">
            © {new Date().getFullYear()} CitizenPilot. All rights reserved.
          </p>
          <p className="text-xs text-cream/40">
            Made for our community · Hecho para nuestra comunidad
          </p>
        </div>
      </Container>
    </footer>
  );
}