"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 PremiumFooter() {
  return (
    <footer className="bg-gradient-to-br from-[#16001D] to-[#25002F] rounded-[1.5rem] md:rounded-[2rem] overflow-hidden text-white p-8 md:p-12 select-none mx-3 sm:mx-4 md:mx-6 lg:mx-8 mb-3 sm:mb-4 md:mb-6 shadow-[0_12px_40px_rgba(22,0,29,0.22)]">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 items-start text-left">
        {/* Column 1: Brand & Description */}
        <div className="flex flex-col gap-4 lg:col-span-2 pr-0 lg:pr-8">
          <Link href="/" className="inline-block">
            <Image
              src="/logo-light.png"
              alt="Nearle"
              width={130}
              height={30}
              className="h-7 w-auto object-contain"
            />
          </Link>
          <p className="text-xs md:text-sm leading-relaxed text-white/70 max-w-sm">
            India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within a 2km radius.
          </p>
          {/* Social Icons */}
          <div className="flex gap-2.5 mt-2">
            <a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Share">
              <MaterialIcon icon="share" size={16} />
            </a>
            <a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Website">
              <MaterialIcon icon="public" size={16} />
            </a>
            <a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Help">
              <MaterialIcon icon="help" size={16} />
            </a>
          </div>
        </div>

        {/* Column 2: Company */}
        <div>
          <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Company</h5>
          <ul className="flex flex-col gap-2.5">
            {COMPANY.map((l) => (
              <li key={l.label}>
                <Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
                  {l.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        {/* Column 3: Nearle */}
        <div>
          <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Nearle</h5>
          <ul className="flex flex-col gap-2.5">
            {PARTNERSHIPS.map((l) => (
              <li key={l.label}>
                <Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
                  {l.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>

        {/* Column 4: Support */}
        <div>
          <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Support</h5>
          <ul className="flex flex-col gap-2.5">
            {LEGAL.map((l) => (
              <li key={l.label}>
                <Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
                  {l.label}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* HQ Address card at bottom-left and info */}
      <div className="mt-10 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
        {/* HQ Address Card */}
        <div className="bg-white/5 border border-white/10 rounded-2xl p-4 flex items-start gap-3.5 max-w-sm">
          <div className="w-8 h-8 rounded-lg bg-white/10 text-white flex items-center justify-center shrink-0 mt-0.5">
            <MaterialIcon icon="location_on" size={16} />
          </div>
          <div className="text-left">
            <h6 className="text-xs font-black text-white">Nearle HQ</h6>
            <p className="text-[11px] text-white/60 leading-normal mt-0.5">
              424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram, Coimbatore, TN 641002
            </p>
          </div>
        </div>

        {/* Call center */}
        <div className="flex flex-col items-start md:items-end gap-1">
          <span className="text-[10px] font-black text-white/40 uppercase tracking-widest">Neighborhood Helpdesk</span>
          <a
            href="tel:+918049123456"
            className="flex items-center gap-2 text-white hover:text-[#6330D6] transition-colors"
          >
            <div className="w-7 h-7 rounded-full bg-[#6330D6] flex items-center justify-center">
              <MaterialIcon icon="phone" size={14} className="text-white" />
            </div>
            <span className="text-sm font-black tracking-tight">+91 80 4912 3456</span>
          </a>
        </div>
      </div>

      {/* Bottom Copyright & legal links */}
      <div className="mt-8 pt-6 border-t border-white/5 flex flex-col sm:flex-row justify-between items-center gap-4 text-[11px] text-white/40 text-center sm:text-left">
        <p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
        <div className="flex flex-wrap gap-x-4 gap-y-1 justify-center">
          <Link href="#" className="hover:text-white transition-colors">Privacy Policy</Link>
          <span className="opacity-50">•</span>
          <Link href="#" className="hover:text-white transition-colors">Terms of Service</Link>
          <span className="opacity-50">•</span>
          <Link href="#" className="hover:text-white transition-colors">Help Center</Link>
        </div>
      </div>
    </footer>
  );
}