import Link from 'next/link'
import Image from 'next/image'
import { Phone, Mail, MapPin, Share2, Send, Camera, Users } from 'lucide-react'
import { site, nav, services } from '@/lib/site'
import logo from '@/public/images/logo.jpg'

export function Footer() {
  return (
    <footer className="mt-auto bg-navy text-navy-foreground">
      <div className="mx-auto max-w-7xl px-4 py-14">
        <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-4">
          <div>
            <div className="inline-flex rounded-lg bg-background p-3">
              <Image src={logo || '/placeholder.svg'} alt={`${site.name} logo`} width={150} height={72} className="h-12 w-auto" />
            </div>
            <p className="mt-4 text-sm leading-relaxed text-navy-foreground/80">
              Compassionate, qualified caregivers providing trusted in-home care 24 hours a day, 7 days a week across Port Saint Lucie, Florida.
            </p>
            <div className="mt-4 flex items-center gap-3">
              <FooterSocial href={site.social.facebook} label="Facebook" Icon={Share2} />
              <FooterSocial href={site.social.twitter} label="Twitter" Icon={Send} />
              <FooterSocial href={site.social.instagram} label="Instagram" Icon={Camera} />
              <FooterSocial href={site.social.linkedin} label="LinkedIn" Icon={Users} />
            </div>
          </div>

          <div>
            <h3 className="text-lg font-semibold">Quick Links</h3>
            <ul className="mt-4 space-y-2 text-sm">
              {nav.map((item) => (
                <li key={item.href}>
                  <Link href={item.href} className="text-navy-foreground/80 transition-colors hover:text-navy-foreground">
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="text-lg font-semibold">Our Services</h3>
            <ul className="mt-4 space-y-2 text-sm">
              {services.slice(0, 6).map((s) => (
                <li key={s.slug}>
                  <Link href={`/services#${s.slug}`} className="text-navy-foreground/80 transition-colors hover:text-navy-foreground">
                    {s.title}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="text-lg font-semibold">Contact Us</h3>
            <ul className="mt-4 space-y-3 text-sm">
              <li className="flex items-start gap-3">
                <MapPin className="mt-0.5 size-5 shrink-0 text-navy-foreground/70" aria-hidden />
                <span className="text-navy-foreground/80">{site.address}</span>
              </li>
              <li>
                <a href={site.phoneHref} className="flex items-center gap-3 text-navy-foreground/80 transition-colors hover:text-navy-foreground">
                  <Phone className="size-5 shrink-0 text-navy-foreground/70" aria-hidden />
                  {site.phoneDisplay}
                </a>
              </li>
              <li>
                <a href={`mailto:${site.email}`} className="flex items-center gap-3 text-navy-foreground/80 transition-colors hover:text-navy-foreground">
                  <Mail className="size-5 shrink-0 text-navy-foreground/70" aria-hidden />
                  {site.email}
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div className="border-t border-navy-foreground/15">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-2 px-4 py-5 text-sm text-navy-foreground/70 sm:flex-row">
          <p>
            &copy; {new Date().getFullYear()} {site.name}. All rights reserved.
          </p>
          <p>Available 24 hours a day, 7 days a week.</p>
        </div>
      </div>
    </footer>
  )
}

function FooterSocial({
  href,
  label,
  Icon,
}: {
  href: string
  label: string
  Icon: React.ComponentType<{ className?: string }>
}) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={label}
      className="flex size-9 items-center justify-center rounded-full bg-navy-foreground/10 transition-colors hover:bg-navy-foreground/20"
    >
      <Icon className="size-4" aria-hidden />
    </a>
  )
}