import Link from "next/link"
import { Building2, GitFork, Mail, ExternalLink } from "lucide-react"

const LINKS = {
  Product: [
    { label: "Features", href: "#features" },
    { label: "Pricing", href: "#pricing" },
    { label: "How it works", href: "#how-it-works" },
    { label: "FAQ", href: "#faq" },
  ],
  Platform: [
    { label: "Dashboard", href: "/login" },
    { label: "Tenant portal", href: "/tenant-portal-info" },
    { label: "API docs", href: "/api-docs" },
    { label: "Status", href: "/status" },
  ],
  Legal: [
    { label: "Privacy policy", href: "/privacy" },
    { label: "Terms of service", href: "/terms" },
    { label: "Cookie policy", href: "/cookie-policy" },
    { label: "GDPR", href: "/gdpr" },
  ],
}

export function Footer() {
  return (
    <footer className="border-t border-white/[0.06] bg-[#09090b]">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 py-12 sm:py-14">
        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-5">
          {/* Brand */}
          <div className="lg:col-span-2">
            <Link href="/" className="flex items-center gap-2 mb-4">
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600">
                <Building2 className="h-4 w-4 text-white" />
              </div>
              <span className="font-bold text-white">Property Management Network</span>
            </Link>
            <p className="text-sm text-white/40 max-w-xs leading-relaxed">
              The property management platform built for independent landlords who want simplicity, not complexity.
            </p>
            <div className="mt-5 flex items-center gap-3">
              {[
                { icon: ExternalLink, href: "https://twitter.com/propertymgmtnet", label: "Twitter" },
                { icon: GitFork, href: "https://github.com/propertymanagement-network", label: "GitHub" },
                { icon: Mail, href: "mailto:support@propertymanagement.network", label: "Email" },
              ].map(({ icon: Icon, href, label }) => (
                <a key={label} href={href} aria-label={label}
                  className="flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 text-white/40 hover:text-white hover:border-white/20 transition">
                  <Icon className="h-3.5 w-3.5" />
                </a>
              ))}
            </div>
          </div>

          {/* Link columns */}
          {Object.entries(LINKS).map(([section, links]) => (
            <div key={section}>
              <p className="text-xs font-semibold uppercase tracking-wider text-white/30 mb-4">{section}</p>
              <ul className="space-y-2.5">
                {links.map((l) => (
                  <li key={l.label}>
                    <Link href={l.href} className="text-sm text-white/50 hover:text-white transition">
                      {l.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-12 flex flex-col sm:flex-row items-center justify-between gap-4 border-t border-white/[0.06] pt-8 text-xs text-white/30">
          <p>© {new Date().getFullYear()} Property Management Network. All rights reserved.</p>
          <p>Built with Next.js · Supabase · Stripe · Resend</p>
        </div>
      </div>
    </footer>
  )
}