import Link from "next/link";
import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";

const COMPANY = [
  { label: "About Us", href: "/about" },
  { label: "Careers", href: "#" },
  { label: "Press & News", href: "#" },
  { label: "Help Center", href: "#" },
];

const PARTNERSHIPS = [
  { label: "Merchant Partner", href: "/businesses" },
  { label: "Delivery Partner", href: "#" },
  { label: "Corporate Gifting", href: "#" },
  { label: "Local Real Estate", href: "#" },
];

const LEGAL = [
  { label: "Privacy Policy", href: "#" },
  { label: "Terms of Service", href: "#" },
  { label: "Cookie Policy", href: "#" },
  { label: "Sitemap", href: "#" },
];

export function Footer() {
  return (
    <footer className="relative bg-brand-dark text-white border-t border-white/5 pt-28 pb-12 w-full mt-24">
      {/* Overlapping Contact Helpdesk Card */}
      <div className="absolute top-0 left-0 right-0 transform -translate-y-1/2 z-20 max-w-container-max mx-auto px-margin-mobile md:px-margin-desktop">
        <div className="bg-brand-accent p-6 md:p-8 rounded-[2.5rem] flex flex-col md:flex-row justify-between items-center gap-6 shadow-2xl border border-brand-accent/20">
          <div className="flex items-center gap-4 text-brand-dark">
            <div className="w-12 h-12 rounded-full bg-brand-dark text-brand-accent flex items-center justify-center shadow-lg">
              <MaterialIcon icon="headset_mic" size={24} />
            </div>
            <div>
              <h4 className="text-headline-md font-black">24/7 Neighborhood Helpdesk</h4>
              <p className="text-[11px] font-bold text-brand-dark/80 mt-0.5">
                Need immediate assistance with an order or local service?
              </p>
            </div>
          </div>
          <a
            href="tel:+918049123456"
            className="flex items-center gap-3 bg-brand-dark hover:bg-brand-dark/90 text-brand-accent font-black px-8 py-3.5 rounded-full text-label-md shadow-2xl active:scale-95 duration-200 transition-all"
          >
            <MaterialIcon icon="phone" size={20} className="animate-pulse-subtle" />
            <span>+91 80 4912 3456</span>
          </a>
        </div>
      </div>

      <div className="max-w-container-max mx-auto px-margin-mobile md:px-margin-desktop">
        {/* Footer Link Grid */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-gutter mb-16 pt-4">
          {/* Brand Column */}
          <div className="col-span-2 md:col-span-1">
            <Link
              href="/"
              className="hover:scale-[1.02] transition-transform active:scale-95 duration-200 mb-6 inline-block"
            >
              <Image
                src="/logo-v2.png"
                alt="Nearle"
                width={140}
                height={23}
                style={{ height: "auto" }}
                className="h-7 w-auto object-contain"
              />
            </Link>
            <p className="text-body-sm text-white/60 max-w-xs mb-8 leading-relaxed">
              India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within 2km.
            </p>
            {/* Social Links */}
            <div className="flex gap-4">
              <a
                href="#"
                className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-brand-accent hover:text-brand-dark hover:scale-105 transition-all"
                aria-label="Share"
              >
                <MaterialIcon icon="share" size={18} />
              </a>
              <a
                href="#"
                className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-brand-accent hover:text-brand-dark hover:scale-105 transition-all"
                aria-label="Website"
              >
                <MaterialIcon icon="public" size={18} />
              </a>
            </div>
          </div>

          {/* Company Links */}
          <FooterCol title="Company" links={COMPANY} />
          
          {/* Partnerships Links */}
          <FooterCol title="Partnerships" links={PARTNERSHIPS} />
          
          {/* Legal Links */}
          <FooterCol title="Legal" links={LEGAL} />
        </div>

        {/* Bottom Bar */}
        <div className="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-body-sm text-white/40">
            © {new Date().getFullYear()} Nearle. All rights reserved.
          </p>
          <div className="flex items-center gap-2 text-white/40 text-body-sm">
            <span>Designed for neighborhoods in</span>
            <span className="flex items-center gap-1 font-bold text-white/80">
              India 🇮🇳
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({
  title,
  links,
}: {
  title: string;
  links: { label: string; href: string }[];
}) {
  return (
    <div>
      <h5 className="text-label-sm font-black text-brand-accent uppercase tracking-widest mb-6">
        {title}
      </h5>
      <ul className="space-y-3">
        {links.map((l) => (
          <li key={l.label}>
            <Link
              href={l.href}
              className="text-body-sm text-white/60 hover:text-brand-accent hover:translate-x-1.5 transition-all duration-300 inline-block"
            >
              {l.label}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}