import Link from 'next/link'
import { Instagram, Twitter, Linkedin, Youtube } from 'lucide-react'
import { NearleLogo } from '@/components/ui/NearleLogo'

const company = [
  { label: 'About Us', href: '/about' },
  { label: 'Communities', href: '/communities' },
  { label: 'Blog', href: '#' },
  { label: 'Careers', href: '#' },
]

const support = [
  { label: 'FAQ', href: '/#faq' },
  { label: 'Contact Us', href: '/contact' },
  { label: 'Privacy Policy', href: '#' },
  { label: 'Terms & Conditions', href: '#' },
]

export function Footer() {
  return (
    <footer className="bg-[#111827] text-white">
      <div className="max-w-7xl mx-auto px-5 sm:px-8 pt-16 pb-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10">
        <div>
          <div className="flex items-center gap-2">
            <NearleLogo size={40} light />
          </div>
          <p className="font-body text-nearle-light mt-4 max-w-xs">
            Your Neighbourhood, Your World.
          </p>
          <div className="flex items-center gap-4 mt-6 text-nearle-light">
            <a aria-label="Instagram" href="#" className="hover:text-purple-primary transition">
              <Instagram size={20} />
            </a>
            <a aria-label="Twitter / X" href="#" className="hover:text-purple-primary transition">
              <Twitter size={20} />
            </a>
            <a aria-label="LinkedIn" href="#" className="hover:text-purple-primary transition">
              <Linkedin size={20} />
            </a>
            <a aria-label="YouTube" href="#" className="hover:text-purple-primary transition">
              <Youtube size={20} />
            </a>
          </div>
        </div>

        <FooterCol title="Company" links={company} />
        <FooterCol title="Support" links={support} />
      </div>

      <div className="bg-[#0D1117]">
        <div className="max-w-7xl mx-auto px-5 sm:px-8 py-5 flex flex-col sm:flex-row items-center justify-between gap-2">
          <p className="text-sm text-[#475569] font-body">
            © 2024 Nearle Technology Private Limited. All rights reserved.
          </p>
          <p className="text-sm text-[#475569] font-body">
            Made with <span className="text-purple-primary">♥</span> in Coimbatore, India
          </p>
        </div>
      </div>
    </footer>
  )
}

function FooterCol({
  title,
  links,
}: {
  title: string
  links: { label: string; href: string }[]
}) {
  return (
    <div>
      <h4 className="font-mono uppercase text-[#94A3B8] text-xs tracking-widest">
        {title}
      </h4>
      <ul className="mt-4 flex flex-col gap-3">
        {links.map((l) => (
          <li key={l.label}>
            <Link
              href={l.href}
              className="text-nearle-light hover:text-white transition text-[15px]"
            >
              {l.label}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}
