import Link from "next/link";
import Image from "next/image";
import { Phone, Mail, MapPin, Facebook, Instagram, Twitter, Linkedin, Youtube } from "lucide-react";
import { formatPhoneForTel } from "@/lib/utils";
import type { SiteSettings } from "@prisma/client";

interface FooterProps {
  settings: SiteSettings;
}

export function Footer({ settings }: FooterProps) {
  const socialLinks = [
    { url: settings.facebookUrl, icon: Facebook, label: "Facebook" },
    { url: settings.instagramUrl, icon: Instagram, label: "Instagram" },
    { url: settings.twitterUrl, icon: Twitter, label: "Twitter" },
    { url: settings.linkedinUrl, icon: Linkedin, label: "LinkedIn" },
    { url: settings.youtubeUrl, icon: Youtube, label: "YouTube" },
  ].filter((s) => s.url);

  return (
    <footer className="bg-primary text-primary-foreground pb-24 md:pb-16">
      <div className="content-wrap py-16 md:py-20">
        <div className="grid md:grid-cols-2 lg:grid-cols-12 gap-12 lg:gap-8">
          <div className="lg:col-span-4">
            {settings.logoUrl ? (
              <Image
                src={settings.logoUrl}
                alt={settings.businessName}
                width={140}
                height={40}
                className="h-9 w-auto object-contain brightness-0 invert mb-5"
              />
            ) : (
              <p className="font-heading text-2xl mb-4">{settings.businessName}</p>
            )}
            <p className="text-primary-foreground/65 text-sm leading-relaxed max-w-xs">
              {settings.tagline}
            </p>
          </div>

          <div className="lg:col-span-3">
            <h3 className="text-xs uppercase tracking-[0.16em] text-primary-foreground/50 mb-5">
              Contact
            </h3>
            <ul className="space-y-4 text-sm text-primary-foreground/75">
              <li>
                <a
                  href={`tel:${formatPhoneForTel(settings.phone)}`}
                  className="flex items-center gap-2 hover:text-primary-foreground transition-colors"
                >
                  <Phone className="h-4 w-4 text-accent" />
                  {settings.phone}
                </a>
              </li>
              <li>
                <a
                  href={`mailto:${settings.email}`}
                  className="flex items-center gap-2 hover:text-primary-foreground transition-colors"
                >
                  <Mail className="h-4 w-4 text-accent" />
                  {settings.email}
                </a>
              </li>
              <li className="flex items-start gap-2">
                <MapPin className="h-4 w-4 text-accent mt-0.5 shrink-0" />
                {settings.address}
              </li>
            </ul>
          </div>

          <div className="lg:col-span-3">
            <h3 className="text-xs uppercase tracking-[0.16em] text-primary-foreground/50 mb-5">
              Navigate
            </h3>
            <ul className="space-y-3 text-sm text-primary-foreground/75">
              <li><a href="#services" className="hover:text-primary-foreground transition-colors">Services</a></li>
              <li><a href="#why-us" className="hover:text-primary-foreground transition-colors">Why us</a></li>
              <li><a href="#testimonials" className="hover:text-primary-foreground transition-colors">Reviews</a></li>
              <li><a href="#faq" className="hover:text-primary-foreground transition-colors">FAQ</a></li>
              <li><a href="#contact-form" className="hover:text-primary-foreground transition-colors">Contact</a></li>
            </ul>
          </div>

          <div className="lg:col-span-2">
            <h3 className="text-xs uppercase tracking-[0.16em] text-primary-foreground/50 mb-5">
              Social
            </h3>
            {socialLinks.length > 0 ? (
              <div className="flex flex-wrap gap-2">
                {socialLinks.map(({ url, icon: Icon, label }) => (
                  <a
                    key={label}
                    href={url!}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={label}
                    className="w-10 h-10 border border-primary-foreground/15 flex items-center justify-center hover:border-accent hover:text-accent transition-colors"
                  >
                    <Icon className="h-4 w-4" />
                  </a>
                ))}
              </div>
            ) : (
              <p className="text-sm text-primary-foreground/60">Follow us for updates</p>
            )}
          </div>
        </div>

        <div className="border-t border-primary-foreground/10 mt-14 pt-8 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs text-primary-foreground/50">
          <p>&copy; {new Date().getFullYear()} {settings.businessName}</p>
          <div className="flex gap-6">
            <Link href={settings.privacyPolicyUrl} className="hover:text-primary-foreground transition-colors">
              Privacy
            </Link>
            <Link href={settings.termsUrl} className="hover:text-primary-foreground transition-colors">
              Terms
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
}