"use client";

import Link from "next/link";

import {
  Leaf,
  Phone,
  Mail,
  MapPin,
} from "lucide-react";

import {
  FaFacebookF,
  FaInstagram,
  FaTwitter,
  FaYoutube,
} from "react-icons/fa";

export default function Footer() {
  return (
    <footer className="relative bg-[#07111f] overflow-hidden text-white">

      {/* Glow Effects */}
      <div className="absolute top-0 left-0 w-72 h-72 bg-green-500/10 rounded-full blur-3xl" />
      <div className="absolute bottom-0 right-0 w-96 h-96 bg-emerald-500/10 rounded-full blur-3xl" />

      <div className="relative max-w-7xl mx-auto px-4 py-14">

        <div className="grid grid-cols-2 lg:grid-cols-4 gap-10">

          {/* Brand */}
          <div className="col-span-2 lg:col-span-1 text-center lg:text-left">

            <Link
              href="/"
              className="flex items-center justify-center lg:justify-start gap-3"
            >
              <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-500 to-emerald-600 text-white flex items-center justify-center shadow-lg shadow-green-500/20">
                <Leaf size={28} fill="white" />
              </div>

              <div>
                <h2 className="text-3xl font-black">
                  <span className="text-white">Gain</span>
                  <span className="text-green-400">Super</span>
                </h2>

                <p className="text-sm text-slate-400 mt-1">
                  Fresh Grocery Marketplace
                </p>
              </div>
            </Link>

            <p className="mt-6 text-slate-400 leading-7 max-w-md mx-auto lg:mx-0">
              Fresh groceries, vegetables, fruits and daily essentials
              delivered quickly to your doorstep.
            </p>

            <div className="flex justify-center lg:justify-start gap-3 mt-8">
              <SocialIcon icon={<FaFacebookF size={16} />} />
              <SocialIcon icon={<FaInstagram size={16} />} />
              <SocialIcon icon={<FaTwitter size={16} />} />
              <SocialIcon icon={<FaYoutube size={16} />} />
            </div>

          </div>

          {/* Quick Links */}
          <div className="text-center lg:text-left">

            <h3 className="text-lg font-bold mb-5">
              Quick Links
            </h3>

            <div className="flex flex-col gap-3">
              <FooterLink href="/" label="Home" />
              <FooterLink href="/categories" label="Categories" />
              <FooterLink href="/products" label="Products" />
            </div>

          </div>

          {/* Customer Support */}
          <div className="text-center lg:text-left">

            <h3 className="text-lg font-bold mb-5">
              Customer Support
            </h3>

            <div className="flex flex-col gap-3">
              <FooterLink href="/account" label="My Account" />
              <FooterLink href="/orders" label="Track Order" />
              <FooterLink href="/account/wishlist" label="Wishlist" />
              <FooterLink href="/privacy-policy" label="Privacy Policy" />
              <FooterLink href="/terms" label="Terms & Conditions" />
            </div>

          </div>

          {/* Contact */}
          <div className="col-span-2 lg:col-span-1 text-center lg:text-left">

            <h3 className="text-lg font-bold mb-5">
              Contact Info
            </h3>

            <div className="flex flex-col gap-5">

              <ContactItem
                icon={<Phone size={18} />}
                text="+880 1700-000000"
              />

              <ContactItem
                icon={<Mail size={18} />}
                text="support@gainsuper.com"
              />

              <ContactItem
                icon={<MapPin size={18} />}
                text="Dhaka, Bangladesh"
              />

            </div>

          </div>

        </div>

      </div>

      {/* Bottom Bar */}
      <div className="border-t border-white/10">

        <div className="max-w-7xl mx-auto px-4 py-6 flex flex-col md:flex-row gap-4 items-center justify-between">

          <p className="text-slate-500 text-sm text-center">
            © {new Date().getFullYear()} GainSuper. All rights reserved.
          </p>

          <div className="flex gap-5 text-sm text-slate-500">

            <Link href="/privacy-policy" className="hover:text-white transition">
              Privacy
            </Link>

            <Link href="/terms" className="hover:text-white transition">
              Terms
            </Link>

            <Link href="/cookies" className="hover:text-white transition">
              Cookies
            </Link>

          </div>

        </div>

      </div>

    </footer>
  );
}

/* ===========================
   Components
=========================== */

function FooterLink({
  href,
  label,
}: {
  href: string;
  label: string;
}) {
  return (
    <Link
      href={href}
      className="
        block
        text-slate-400
        hover:text-green-400
        transition
      "
    >
      {label}
    </Link>
  );
}

function SocialIcon({
  icon,
}: {
  icon: React.ReactNode;
}) {
  return (
    <button
      className="
        w-11
        h-11
        rounded-2xl
        bg-white/5
        border
        border-white/10
        text-slate-300
        hover:bg-green-500
        hover:text-white
        transition-all
        flex
        items-center
        justify-center
      "
    >
      {icon}
    </button>
  );
}

function ContactItem({
  icon,
  text,
}: {
  icon: React.ReactNode;
  text: string;
}) {
  return (
    <div className="flex flex-col lg:flex-row items-center lg:items-start gap-3 text-center lg:text-left">

      <div
        className="
          w-11
          h-11
          rounded-2xl
          bg-white/5
          border
          border-white/10
          text-green-400
          flex
          items-center
          justify-center
          shrink-0
        "
      >
        {icon}
      </div>

      <p className="text-slate-400 leading-7">
        {text}
      </p>

    </div>
  );
}