import Link from "next/link";
import { Phone, Mail, MapPin, Clock, Snowflake, Facebook, Instagram, Linkedin, Youtube, ArrowUpRight } from "lucide-react";
import type { SiteSetting } from "@/lib/queries";
import { NAV_LINKS } from "./nav";

export function SiteFooter({ settings }: { settings: SiteSetting }) {
  const year = new Date().getFullYear();
  const services = [
    { label: "Industrial & Commercial AC", href: "/services/industrial-commercial-ac" },
    { label: "AC Installation", href: "/services/ac-installation" },
    { label: "AC Repair & Maintenance", href: "/services/ac-repair-maintenance" },
    { label: "Water Chiller Repair", href: "/services/water-chiller" },
    { label: "Air Duct Cleaning", href: "/services/air-duct-cleaning" },
    { label: "Cold Storage", href: "/services/cold-storage" },
    { label: "AMC Contracts", href: "/services/amc-contracts" },
  ];

  return (
    <footer className="navy-bg text-white/70 mt-auto">
      {/* CTA strip */}
      <div className="border-b border-white/10">
        <div className="container-mx py-8 flex flex-col md:flex-row items-center justify-between gap-5">
          <div>
            <h3 className="text-white text-xl font-bold">Need reliable HVAC service today?</h3>
            <p className="text-white/60 text-sm mt-1">Talk to our engineering team — free site survey & quotation.</p>
          </div>
          <div className="flex items-center gap-3">
            <a href={`tel:${settings.phone}`} className="inline-flex items-center gap-2 px-5 py-3 rounded-lg bg-white/10 hover:bg-white/15 text-white text-sm font-semibold transition-colors">
              <Phone className="size-4" /> {settings.phone}
            </a>
            <Link href="/contact" className="inline-flex items-center gap-2 px-5 py-3 rounded-lg brand-gradient text-white text-sm font-semibold shadow-brand hover:opacity-95">
              Get a Quote <ArrowUpRight className="size-4" />
            </Link>
          </div>
        </div>
      </div>

      <div className="container-mx py-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
        {/* Brand */}
        <div className="lg:col-span-1">
          <Link href="/" className="flex items-center gap-3 mb-5">
            <div className="grid place-items-center size-11 rounded-xl brand-gradient text-white">
              <Snowflake className="size-5" />
            </div>
            <div className="leading-tight">
              <div className="font-extrabold text-white text-sm">AL-HASAN ENGINEERING</div>
              <div className="text-[10px] font-semibold tracking-[0.18em] text-white/50 uppercase">AHE Services</div>
            </div>
          </Link>
          <p className="text-sm leading-relaxed text-white/60">{settings.footerText}</p>
          <div className="flex items-center gap-2 mt-5">
            {[
              { Icon: Facebook, href: settings.facebook || "#" },
              { Icon: Instagram, href: settings.instagram || "#" },
              { Icon: Linkedin, href: settings.linkedin || "#" },
              { Icon: Youtube, href: settings.youtube || "#" },
            ].map(({ Icon, href }, i) => (
              <a key={i} href={href} target="_blank" rel="noopener noreferrer" className="grid place-items-center size-9 rounded-lg bg-white/8 hover:bg-[var(--brand-royal)] text-white/70 hover:text-white transition-colors">
                <Icon className="size-4" />
              </a>
            ))}
          </div>
        </div>

        {/* Quick links */}
        <div>
          <h4 className="text-white font-semibold text-sm mb-4 tracking-wide uppercase">Company</h4>
          <ul className="space-y-2.5 text-sm">
            {NAV_LINKS.map((l) => (
              <li key={l.href}>
                <Link href={l.href} className="text-white/60 hover:text-white transition-colors">{l.label}</Link>
              </li>
            ))}
          </ul>
        </div>

        {/* Services */}
        <div>
          <h4 className="text-white font-semibold text-sm mb-4 tracking-wide uppercase">Services</h4>
          <ul className="space-y-2.5 text-sm">
            {services.map((s) => (
              <li key={s.href}>
                <Link href={s.href} className="text-white/60 hover:text-white transition-colors">{s.label}</Link>
              </li>
            ))}
          </ul>
        </div>

        {/* Contact */}
        <div>
          <h4 className="text-white font-semibold text-sm mb-4 tracking-wide uppercase">Get in Touch</h4>
          <ul className="space-y-3 text-sm">
            <li className="flex gap-3">
              <MapPin className="size-4 mt-0.5 text-[var(--brand-cyan)] shrink-0" />
              <span className="text-white/60">{settings.address}</span>
            </li>
            <li className="flex gap-3">
              <Phone className="size-4 mt-0.5 text-[var(--brand-cyan)] shrink-0" />
              <a href={`tel:${settings.phone}`} className="text-white/60 hover:text-white">{settings.phone}</a>
            </li>
            <li className="flex gap-3">
              <Mail className="size-4 mt-0.5 text-[var(--brand-cyan)] shrink-0" />
              <a href={`mailto:${settings.email}`} className="text-white/60 hover:text-white break-all">{settings.email}</a>
            </li>
            <li className="flex gap-3">
              <Clock className="size-4 mt-0.5 text-[var(--brand-cyan)] shrink-0" />
              <span className="text-white/60">{settings.workingHours}</span>
            </li>
          </ul>
        </div>
      </div>

      <div className="border-t border-white/10">
        <div className="container-mx py-5 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-white/50">
          <p>© {year} {settings.copyright}</p>
          <div className="flex items-center gap-4">
            <Link href="/privacy-policy" className="hover:text-white transition-colors">Privacy Policy</Link>
            <Link href="/terms" className="hover:text-white transition-colors">Terms & Conditions</Link>
            <span className="text-white/30">NTN: {settings.ntn}</span>
          </div>
        </div>
      </div>
    </footer>
  );
}
