manoon-headless/src/components/layout/Footer.tsx

import Link from "next/link";
import Image from "next/image";
import { Instagram, Facebook } from "lucide-react";

const footerLinks = {
  shop: [
    { label: "All Products", href: "/products" },
    { label: "Hair Care", href: "/products" },
    { label: "Skin Care", href: "/products" },
    { label: "Gift Sets", href: "/products" },
  ],
  about: [
    { label: "Our Story", href: "/about" },
    { label: "Process", href: "/about" },
    { label: "Sustainability", href: "/about" },
  ],
  help: [
    { label: "FAQ", href: "/contact" },
    { label: "Shipping", href: "/contact" },
    { label: "Returns", href: "/contact" },
    { label: "Contact Us", href: "/contact" },
  ],
};

export default function Footer() {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-white border-t border-[#e5e5e5]">
      {/* Main Footer */}
      <div className="container py-16 lg:py-20">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8">
          {/* Brand Column */}
          <div className="lg:col-span-4">
            <Link href="/" className="inline-block mb-6">
              <Image
                src="https://minio-api.nodecrew.me/manoon-media/2024/09/cropped-manoon-logo_256x-1-1.png"
                alt="ManoonOils"
                width={150}
                height={40}
                className="h-8 w-auto object-contain"
              />
            </Link>
            <p className="text-[#666666] text-sm leading-relaxed max-w-xs mb-6">
              Premium natural oils for hair and skin care. Handcrafted with love using traditional methods.
            </p>
            {/* Social Links */}
            <div className="flex items-center gap-4">
              <a
                href="https://instagram.com"
                target="_blank"
                rel="noopener noreferrer"
                className="w-10 h-10 rounded-full border border-[#e5e5e5] flex items-center justify-center text-[#666666] hover:border-black hover:text-black transition-colors"
                aria-label="Instagram"
              >
                <Instagram className="w-4 h-4" />
              </a>
              <a
                href="https://facebook.com"
                target="_blank"
                rel="noopener noreferrer"
                className="w-10 h-10 rounded-full border border-[#e5e5e5] flex items-center justify-center text-[#666666] hover:border-black hover:text-black transition-colors"
                aria-label="Facebook"
              >
                <Facebook className="w-4 h-4" />
              </a>
            </div>
          </div>

          {/* Links Columns - All aligned at top */}
          <div className="lg:col-span-8">
            <div className="grid grid-cols-2 md:grid-cols-3 gap-8">
              {/* Shop */}
              <div className="flex flex-col">
                <h4 className="text-xs uppercase tracking-[0.15em] font-medium mb-5 text-[#1a1a1a]">
                  Shop
                </h4>
                <ul className="space-y-3">
                  {footerLinks.shop.map((link) => (
                    <li key={link.label}>
                      <Link
                        href={link.href}
                        className="text-sm text-[#666666] hover:text-black transition-colors"
                      >
                        {link.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>

              {/* About */}
              <div className="flex flex-col">
                <h4 className="text-xs uppercase tracking-[0.15em] font-medium mb-5 text-[#1a1a1a]">
                  About
                </h4>
                <ul className="space-y-3">
                  {footerLinks.about.map((link) => (
                    <li key={link.label}>
                      <Link
                        href={link.href}
                        className="text-sm text-[#666666] hover:text-black transition-colors"
                      >
                        {link.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Help */}
              <div className="flex flex-col">
                <h4 className="text-xs uppercase tracking-[0.15em] font-medium mb-5 text-[#1a1a1a]">
                  Help
                </h4>
                <ul className="space-y-3">
                  {footerLinks.help.map((link) => (
                    <li key={link.label}>
                      <Link
                        href={link.href}
                        className="text-sm text-[#666666] hover:text-black transition-colors"
                      >
                        {link.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="border-t border-[#e5e5e5]">
        <div className="container py-6">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            {/* Copyright */}
            <p className="text-xs text-[#999999]">
              &copy; {currentYear} ManoonOils. All rights reserved.
            </p>
            
            {/* Payment Methods */}
            <div className="flex items-center gap-3">
              <span className="text-xs text-[#999999]">We accept:</span>
              <div className="flex items-center gap-2">
                <span className="text-xs font-medium text-[#666666] px-2 py-1 border border-[#e5e5e5] rounded">
                  Visa
                </span>
                <span className="text-xs font-medium text-[#666666] px-2 py-1 border border-[#e5e5e5] rounded">
                  MC
                </span>
                <span className="text-xs font-medium text-[#666666] px-2 py-1 border border-[#e5e5e5] rounded">
                  COD
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}