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

"use client";

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

interface FooterProps {
  locale?: string;
}

export default function Footer({ locale = "sr" }: FooterProps) {
  const t = useTranslations("Footer");
  const currentYear = new Date().getFullYear();
  const localePath = `/${locale}`;

  const footerLinks = {
    shop: [
      { label: t("allProducts"), href: `${localePath}/products` },
      { label: t("hairCare"), href: `${localePath}/products` },
      { label: t("skinCare"), href: `${localePath}/products` },
      { label: t("giftSets"), href: `${localePath}/products` },
    ],
    about: [
      { label: t("ourStory"), href: `${localePath}/about` },
      { label: t("process"), href: `${localePath}/about` },
      { label: t("sustainability"), href: `${localePath}/about` },
    ],
    help: [
      { label: t("faq"), href: `${localePath}/contact` },
      { label: t("shipping"), href: `${localePath}/contact` },
      { label: t("returns"), href: `${localePath}/contact` },
      { label: t("contactUs"), href: `${localePath}/contact` },
    ],
  };

  return (
    <footer className="bg-white border-t border-[#e5e5e5]">
      <div className="container py-16 lg:py-20">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8">
          <div className="lg:col-span-4">
            <Link href={localePath} 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">
              {t("brandDescription")}
            </p>
            <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>

          <div className="lg:col-span-8">
            <div className="grid grid-cols-2 md:grid-cols-3 gap-8">
              <div className="flex flex-col">
                <h4 className="text-xs uppercase tracking-[0.15em] font-medium mb-5 text-[#1a1a1a]">
                  {t("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>

              <div className="flex flex-col">
                <h4 className="text-xs uppercase tracking-[0.15em] font-medium mb-5 text-[#1a1a1a]">
                  {t("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>

              <div className="flex flex-col">
                <h4 className="text-xs uppercase tracking-[0.15em] font-medium mb-5 text-[#1a1a1a]">
                  {t("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>

      <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">
            <p className="text-xs text-[#999999]">
              &copy; {currentYear} ManoonOils. {t("allRights")}
            </p>

            <p className="text-xs text-[#999999]">
              <strong>{t("madeWith")} ❤️ by{" "}
              <a
                href="https://nodecrew.me"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#c9a962] hover:text-[#b8944f] transition-colors"
              >
                Nodecrew
              </a></strong>
            </p>

            <div className="flex items-center gap-3">
              <span className="text-xs text-[#999999]">{t("weAccept")}</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>
  );
}