"use client";

import Link from "next/link";
import Image from "next/image";
import React from "react";
import { FaFacebookF, FaInstagram, FaLinkedinIn } from "react-icons/fa";
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: "/merchants" },
  { label: "Delivery Partner", href: "/delivery-partners" },
  { label: "Direct to Customer Brands", href: "/brands" },
  // { label: "Local Real Estate", href: "#" },
];

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

const socialButtonClass =
  "flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white transition-all duration-300 xl:h-[54px] xl:w-[54px]";

export function PremiumFooter() {
  return (
    <section className="bg-white px-2 pb-2 md:px-3 md:pb-3 lg:px-4 lg:pb-4 xl:px-5 xl:pb-4 2xl:px-6 2xl:pb-5">
      <footer className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#16001D] to-[#25002F] text-white shadow-[0_-12px_40px_rgba(22,0,29,0.12)]">
        <div className="flex flex-col px-6 pb-8 pt-10 md:px-8 md:pb-8 md:pt-12 xl:px-16 xl:pb-8 xl:pt-12 2xl:px-20 2xl:pt-10 2xl:pb-8">
          <div className="grid w-full grid-cols-1 items-start gap-10 text-left md:grid-cols-2 md:gap-x-12 md:gap-y-12 lg:grid-cols-[1.6fr_1fr_1fr_1fr] lg:gap-10 xl:gap-14">
            <div className="flex flex-col gap-5">
              <Link href="/" className="inline-block w-fit">
                <Image
                  src="/logo-light.png"
                  alt="Nearle"
                  width={240}
                  height={60}
                  className="h-auto w-[160px] object-contain md:w-[200px] xl:w-[240px]"
                />
              </Link>

              <p className="max-w-[430px] text-base leading-[1.65] text-white/70 md:text-lg xl:text-[19px]">
                India&apos;s leading hyperlocal neighborhood network, empowering
                communities and verified local businesses within a 2km radius.
              </p>

              <div className="mt-1 flex gap-3 xl:mt-2 xl:gap-4">
                <a
                  href="https://www.facebook.com/nearledigital"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Facebook"
                  className={`${socialButtonClass} hover:bg-[#1877F2]`}
                >
                  <FaFacebookF size={20} />
                </a>

                <a
                  href="https://www.instagram.com/nearledigital/"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Instagram"
                  className={`${socialButtonClass} hover:bg-[#E4405F]`}
                >
                  <FaInstagram size={21} />
                </a>

                <a
                  href="https://www.linkedin.com/company/nearledigital/"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="LinkedIn"
                  className={`${socialButtonClass} hover:bg-[#0A66C2]`}
                >
                  <FaLinkedinIn size={20} />
                </a>
              </div>
            </div>

            <div className="flex flex-col">
              <h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
                Company
              </h5>

              <ul className="flex flex-col gap-4 xl:gap-5">
                {COMPANY.map((link) => (
                  <li key={link.label}>
                    <Link
                      href={link.href}
                      className="inline-block text-sm leading-normal text-white/70 transition-all hover:translate-x-0.5 hover:text-white md:text-base xl:text-[17px]"
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            <div className="flex flex-col">
              <h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
                Nearle
              </h5>

              <ul className="flex flex-col gap-4 xl:gap-5">
                {PARTNERSHIPS.map((link) => (
                  <li key={link.label}>
                    <Link
                      href={link.href}
                      className="inline-block text-sm leading-normal text-white/70 transition-all hover:translate-x-0.5 hover:text-white md:text-base xl:text-[17px]"
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            <div className="flex flex-col">
              <h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
                Support
              </h5>

              <ul className="flex flex-col gap-4 xl:gap-5">
                {LEGAL.map((link) => (
                  <li key={link.label}>
                    <Link
                      href={link.href}
                      className="inline-block text-sm leading-normal text-white/70 transition-all hover:translate-x-0.5 hover:text-white md:text-base xl:text-[17px]"
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <div className="my-8 w-full border-t border-white/10 xl:my-10" />

          <div className="flex w-full flex-col items-center justify-between gap-8 md:flex-row xl:gap-12">
            <div className="flex min-h-[120px] w-full max-w-[560px] items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-4 md:w-auto md:p-5 xl:min-h-[130px] xl:gap-4 xl:p-6">
              <div className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/10 text-white xl:h-[58px] xl:w-[58px] xl:rounded-2xl">
                <MaterialIcon icon="location_on" size={20} />
              </div>

              <div className="text-left">
                <h6 className="text-sm font-black text-white md:text-base xl:text-lg">
                  Nearle
                </h6>

                <p className="mt-0.5 text-xs leading-normal text-white/60 md:text-sm xl:mt-1 xl:text-base">
                  424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram,
                  Coimbatore, TN 641002
                </p>
              </div>
            </div>

            <div className="flex shrink-0 flex-col items-center gap-1.5 text-center md:items-end md:text-right xl:gap-2">
              <span className="text-xs font-black uppercase tracking-widest text-white/40 md:text-sm xl:text-base">
                Neighborhood Helpdesk
              </span>

              <a
                href="tel:+919092068666"
                className="flex items-center gap-2 text-white transition-colors hover:text-[#8A5CFF] xl:gap-3"
              >
                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#6330D6] xl:h-14 xl:w-14">
                  <MaterialIcon icon="phone" size={20} className="text-white" />
                </div>

                <span className="text-base font-black tracking-tight md:text-lg xl:text-[30px]">
                  +91 90920 68666
                </span>
              </a>
            </div>
          </div>

          <div className="mb-4 mt-8 w-full border-t border-white/5 xl:mb-6 xl:mt-10" />

          <div className="flex w-full flex-col items-center justify-between gap-4 text-[13px] text-white/40 md:flex-row md:text-[14px] xl:text-[15px]">
            <p className="text-center md:text-left">
              © {new Date().getFullYear()} Nearle. All rights reserved.
            </p>

            <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
              <Link href="/privacy" className="transition-colors hover:text-white">
                Privacy Policy
              </Link>
              <span className="select-none font-bold opacity-35">·</span>
              <Link href="/terms" className="transition-colors hover:text-white">
                Terms of Service
              </Link>
              <span className="select-none font-bold opacity-35">·</span>
              <Link href="/contact" className="transition-colors hover:text-white">
                Help Center
              </Link>
            </div>
          </div>
        </div>
      </footer>
    </section>
  );
}
