"use client";

import Link from "next/link";
import Image from "next/image";
import React from "react";
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="bg-[#E6D7EA] px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 2xl:px-12 pb-6 md:pb-8 lg:pb-10 w-full mt-4">
      <div className="mx-auto w-full max-w-[1920px]">
        <div className="section-card-dark p-8 md:p-12 lg:p-14 text-white relative">
          {/* Background ambient glowing details */}
          <div className="absolute right-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-[120px] pointer-events-none" />

          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-10 lg:gap-12 relative z-10 items-start text-left">
            {/* Col 1: Brand info */}
            <div className="flex flex-col gap-4">
              <Link href="/" className="inline-block">
                <Image
                  src="/logo-light.png"
                  alt="Nearle"
                  width={220}
                  height={36}
                  style={{ width: "160px", height: "auto" }}
                  className="object-contain"
                />
              </Link>
              <p className="text-sm leading-relaxed text-white/70">
                India&apos;s leading hyperlocal neighborhood network, empowering
                communities and verified local businesses within 2km.
              </p>
              {/* Social Links */}
              <div className="flex gap-3 mt-2">
                <a
                  href="#"
                  className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300"
                  aria-label="Share"
                >
                  <MaterialIcon icon="share" size={20} />
                </a>
                <a
                  href="#"
                  className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300"
                  aria-label="Website"
                >
                  <MaterialIcon icon="public" size={20} />
                </a>
              </div>
            </div>

            {/* Col 2: Company Links */}
            <div>
              <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
                Company
              </h5>
              <ul className="flex flex-col gap-3">
                {COMPANY.map((l) => (
                  <li key={l.label}>
                    <Link
                      href={l.href}
                      className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
                    >
                      {l.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            {/* Col 3: Partnerships */}
            <div>
              <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
                Partnerships
              </h5>
              <ul className="flex flex-col gap-3">
                {PARTNERSHIPS.map((l) => (
                  <li key={l.label}>
                    <Link
                      href={l.href}
                      className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
                    >
                      {l.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            {/* Col 4: Support / Legal */}
            <div>
              <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
                Support & Legal
              </h5>
              <ul className="flex flex-col gap-3">
                {LEGAL.map((l) => (
                  <li key={l.label}>
                    <Link
                      href={l.href}
                      className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
                    >
                      {l.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            {/* Col 5: HQ Address & Helpdesk */}
            <div className="flex flex-col gap-4">
              <div>
                <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-4">
                  Visit Nearle
                </h5>
                <p className="text-xs leading-relaxed text-white/60">
                  424, Diwan Bahadur Rd,
                  <br />
                  Opposite to Sri Krishna Sweets,
                  <br />
                  R.S. Puram, Coimbatore,
                  <br />
                  Tamil Nadu 641002
                </p>
                <a
                  href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="mt-3 inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl border border-white/10 hover:border-[#E6D7EA]/50 text-white/80 hover:text-[#E6D7EA] text-xs font-bold transition-all duration-300"
                >
                  <MaterialIcon icon="location_on" size={14} />
                  <span>Get Directions</span>
                </a>
              </div>

              <div className="border-t border-white/10 pt-4 flex flex-col gap-2">
                <p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">
                  Neighborhood Helpdesk
                </p>
                <a
                  href="tel:+919092068666"
                  className="flex items-center gap-2 text-white hover:text-[#E6D7EA] transition-all"
                >
                  <MaterialIcon
                    icon="phone"
                    size={16}
                    className="text-[#E6D7EA] shrink-0"
                  />
                  <span className="text-sm font-black tracking-tight">
                    +91 90920 68666
                  </span>
                </a>
              </div>
            </div>
          </div>

          {/* Bottom Copyright Divider & Bar */}
          <div className="mt-12 pt-6 border-t border-white/10 relative z-10 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs text-white/40">
            <p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
            <div className="flex flex-wrap gap-x-6 gap-y-2 justify-center">
              {LEGAL.map((link) => (
                <Link
                  key={link.label}
                  href={link.href}
                  className="hover:text-[#E6D7EA] transition-colors"
                >
                  {link.label}
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

export default Footer;
