import { Zap } from "lucide-react";

const footerLinks = [
  {
    title: "Company",
    links: [
      { label: "How It Works", href: "#how-it-works" },
      { label: "Services", href: "#services" },
      { label: "Packages", href: "#packages" },
      { label: "Contact", href: "#contact" },
    ],
  },
  {
    title: "Resources",
    links: [
      { label: "FAQ", href: "#faq" },
      { label: "Our Impact", href: "#impact" },
      { label: "Blog", href: "#" },
      { label: "Press Kit", href: "#" },
    ],
  },
  {
    title: "Legal",
    links: [
      { label: "Privacy Policy", href: "#" },
      { label: "Terms of Service", href: "#" },
      { label: "Cookie Policy", href: "#" },
    ],
  },
];

export function Footer() {
  return (
    <footer className="border-t border-brown-light/20 bg-bg-primary py-16 px-4">
      <div className="mx-auto max-w-6xl">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-10 mb-12">
          {/* Logo & tagline */}
          <div className="md:col-span-1">
            <a href="#" className="flex items-center gap-2 mb-4">
              <Zap className="h-6 w-6 text-neon" />
              <span className="text-lg font-bold text-cream">
                Porta<span className="text-neon">Power</span>
              </span>
            </a>
            <p className="text-sm text-cream-dim leading-relaxed">
              It&apos;s not about taking a shit. It&apos;s about giving one.
            </p>
          </div>

          {/* Link columns */}
          {footerLinks.map((group) => (
            <div key={group.title}>
              <h4 className="font-bold text-cream text-sm mb-4 uppercase tracking-wider">
                {group.title}
              </h4>
              <ul className="space-y-2">
                {group.links.map((link) => (
                  <li key={link.label}>
                    <a
                      href={link.href}
                      className="text-sm text-cream-dim hover:text-neon transition-colors"
                    >
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Bottom bar */}
        <div className="border-t border-brown-light/20 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-xs text-cream-dim">
            &copy; {new Date().getFullYear()} PortaPower Inc. All rights reserved.
          </p>
          <p className="text-xs text-cream-dim">
            Made with 💩 and ⚡ in Austin, TX
          </p>
        </div>
      </div>
    </footer>
  );
}