nearle-next-new/src/components/layout/PremiumFooter.tsx

"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="premium-footer-shell bg-gradient-to-br from-[#16001D] to-[#25002F] rounded-t-[28px] md:rounded-t-[40px] rounded-b-none overflow-hidden text-white select-none shadow-[0_-12px_40px_rgba(22,0,29,0.12)]">
      <div className="mx-auto max-w-[1440px] px-6 md:px-10 xl:px-16 pt-16 pb-10 flex flex-col">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[minmax(320px,1.6fr)_repeat(3,minmax(150px,1fr))] gap-8 lg:gap-x-[clamp(56px,6vw,120px)] w-full text-left items-start">
          {/* Column 1: Brand & Description */}
          <div className="flex flex-col gap-4 md:col-span-2 lg:col-span-1">
            <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-[340px]">
              India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within a 2km radius.
            </p>
            {/* Social Icons */}
            <div className="flex gap-3 mt-4">
              <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 className="flex flex-col">
            <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Company</h5>
            <ul className="flex flex-col gap-[22px]">
              {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 className="flex flex-col">
            <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Nearle</h5>
            <ul className="flex flex-col gap-[22px]">
              {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 className="flex flex-col">
            <h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Support</h5>
            <ul className="flex flex-col gap-[22px]">
              {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>

        {/* Divider */}
        <div className="border-t border-white/10 w-full mt-[56px] mb-[48px]" />

        {/* Middle Contact Row */}
        <div className="flex flex-col md:flex-row justify-between items-center gap-[48px] w-full py-1.5 md:py-2">
          {/* 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 w-full md:w-auto">
            <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-center md:items-end gap-1.5 shrink-0 text-center md:text-right">
            <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 Divider */}
        <div className="border-t border-white/5 w-full mt-10 mb-8" />

        {/* Bottom Row */}
        <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-[11px] text-white/40 w-full">
          <p className="text-center md:text-left">© {new Date().getFullYear()} Nearle. All rights reserved.</p>
          <div className="flex flex-wrap gap-x-4 gap-y-1 justify-center items-center">
            <Link href="#" className="hover:text-white transition-colors">Privacy Policy</Link>
            <span className="opacity-35 select-none font-bold">·</span>
            <Link href="#" className="hover:text-white transition-colors">Terms of Service</Link>
            <span className="opacity-35 select-none font-bold">·</span>
            <Link href="#" className="hover:text-white transition-colors">Help Center</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}