"use client";
import Link from "next/link";
import { useLanguage } from "@/context/LanguageContext";

export const Footer = () => {
  const { t } = useLanguage();
  const currentYear = new Date().getFullYear();

  return (
    <footer className="w-full bg-white pt-20 pb-10 border-t border-crisp mt-auto">
      <div className="max-w-7xl mx-auto px-6 lg:px-12">
        
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center  pb-12 mb-8">
          {/* Logo / Brand */}
          <div className="text-[32px] font-extrabold text-navy tracking-tight mb-8 md:mb-0">
            ITEM OPINA.
          </div>
          
          {/* Nav Links Traducidos */}
          <div className="flex flex-col sm:flex-row gap-6 sm:gap-12 text-[14px] font-bold text-navy/60">
            <Link href="/legal" className="hover:text-ocean transition-colors">
              {t.footer.legal}
            </Link>
            <Link href="/privacidad" className="hover:text-ocean transition-colors">
              {t.footer.privacy}
            </Link>
            <Link href="/cookies" className="hover:text-ocean transition-colors">
              {t.footer.cookies}
            </Link>
            <Link href="/contacto" className="hover:text-ocean transition-colors">
              {t.footer.contact}
            </Link>
          </div>
        </div>
        
        {/* Bottom Credits Traducidos */}
        <div className="flex flex-col sm:flex-row justify-between items-center text-[13px] text-navy/40 font-semibold uppercase tracking-wider">
          <p>
            {t.footer.rights.replace("2026", currentYear.toString())}
          </p>
          
        </div>
      </div>
    </footer>
  );
};