'use client';

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

export const CompactFooter = () => {
  return (
    <footer
      className="border-t border-white/10 bg-slate-950/80 backdrop-blur-sm"
      role="contentinfo"
    >
      <div className="hidden md:flex items-center justify-between h-16 px-6 max-w-7xl mx-auto">
        <div className="flex-shrink-0">
          <Image
            src="/logo-square.png"
            alt="Banatie"
            width={32}
            height={32}
            className="opacity-80"
          />
        </div>

        <nav aria-label="Footer navigation" className="flex items-center gap-6">
          {footerLinks.map((link) => (
            <a
              key={link.label}
              href={link.href}
              className="text-sm text-gray-400 hover:text-white transition-colors min-h-[44px] flex items-center"
            >
              {link.label}
            </a>
          ))}
        </nav>

        <p className="text-xs text-gray-500 flex-shrink-0">
          {footerCopyright}
        </p>
      </div>

      <div className="md:hidden px-6 py-4 space-y-4">
        <div className="flex items-center justify-between">
          <Image
            src="/logo-square.png"
            alt="Banatie"
            width={28}
            height={28}
            className="opacity-80"
          />
          <p className="text-xs text-gray-500">
            © 2025 Banatie
          </p>
        </div>

        <nav
          aria-label="Footer navigation"
          className="grid grid-cols-2 gap-x-4 gap-y-3"
        >
          {footerLinks.map((link) => (
            <a
              key={link.label}
              href={link.href}
              className="text-sm text-gray-400 hover:text-white transition-colors min-h-[44px] flex items-center"
            >
              {link.label}
            </a>
          ))}
        </nav>
      </div>
    </footer>
  );
};
