'use client';

import Image from 'next/image';
import { footerLinks, footerCopyright } from '@/config/footer';

export const Footer = () => {
  return (
    <footer className="relative z-10 border-t border-white/10 backdrop-blur-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 pt-8 sm:pt-10 md:pt-12 pb-4">
        <div className="flex flex-col md:flex-row justify-between items-center gap-6 md:gap-8">
          {/* Logo - responsive sizing */}
          <div className="h-10 sm:h-12 md:h-14 lg:h-16 flex items-center">
            <Image
              src="/banatie-logo-horisontal.png"
              alt="Banatie Logo"
              width={200}
              height={60}
              loading="lazy"
              className="h-full w-auto object-contain"
            />
          </div>

          <nav aria-label="Footer navigation">
            <div className="grid grid-cols-2 gap-x-4 gap-y-3 sm:flex sm:flex-wrap sm:justify-center sm:gap-6 md:gap-8 text-sm text-gray-400">
              {footerLinks.map((link) => (
                <a
                  key={link.label}
                  href={link.href}
                  className="hover:text-white transition-colors text-center sm:text-left"
                >
                  {link.label}
                </a>
              ))}
            </div>
          </nav>
        </div>

        <div className="mt-8 md:mt-10 text-center text-sm text-gray-500">
          {footerCopyright}
        </div>
      </div>
    </footer>
  );
};
