'use client';
import Link from 'next/link';
import Image from 'next/image';
import { MapPin, Phone, Mail, Lock } from 'lucide-react';
import { useLanguage } from '@/lib/i18n/language-context';
import { LanguageSwitcher } from './language-switcher';

export function PublicFooter() {
  const { t } = useLanguage();

  return (
    <footer className="bg-[#1a1a1a] text-white">
      <div className="max-w-[1200px] mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <div className="relative w-[220px] h-[60px] mb-4">
              <Image src="/images/logo.png" alt="Evo Truck Sales" fill className="object-contain brightness-200" />
            </div>
            <p className="text-gray-400 text-sm leading-relaxed">{t.footer.tagline}</p>
            <div className="mt-4">
              <LanguageSwitcher variant="admin" />
            </div>
          </div>
          <div>
            <h3 className="text-lg font-semibold mb-4 text-red-500">{t.footer.navigation}</h3>
            <div className="space-y-2">
              <Link href="/inventory" className="block text-gray-400 hover:text-white text-sm transition">{t.nav.inventory}</Link>
              <Link href="/about" className="block text-gray-400 hover:text-white text-sm transition">{t.nav.about}</Link>
              <Link href="/financing" className="block text-gray-400 hover:text-white text-sm transition">{t.nav.financing}</Link>
              <Link href="/contact" className="block text-gray-400 hover:text-white text-sm transition">{t.nav.contact}</Link>
            </div>
          </div>
          <div>
            <h3 className="text-lg font-semibold mb-4 text-red-500">{t.footer.contactTitle}</h3>
            <div className="space-y-3">
              <div className="flex items-start gap-3 text-gray-400 text-sm">
                <MapPin className="w-4 h-4 mt-0.5 shrink-0 text-red-500" />
                <span>1444 North Broad St, Hillside NJ 07205</span>
              </div>
              <div className="flex items-center gap-3 text-gray-400 text-sm">
                <Phone className="w-4 h-4 shrink-0 text-red-500" />
                <div className="flex flex-col gap-1">
                  <a href="tel:9085909802" className="hover:text-white transition">(908) 590-9802</a>
                  <a href="tel:9083436096" className="hover:text-white transition">(908) 343-6096</a>
                </div>
              </div>
              <div className="flex items-start gap-3 text-gray-400 text-sm">
                <Mail className="w-4 h-4 shrink-0 text-red-500 mt-0.5" />
                <div className="flex flex-col gap-1">
                  <a href="mailto:junior@evotrucksales.com" className="hover:text-white transition">junior@evotrucksales.com</a>
                  <a href="mailto:kein@evotrucksales.com" className="hover:text-white transition">kein@evotrucksales.com</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="border-t border-gray-800 mt-8 pt-6 flex items-center justify-between text-gray-500 text-xs">
          <span>© 2026 Evo Truck Sales. {t.footer.rights}</span>
          <Link href="/admin/login" className="flex items-center gap-1.5 text-gray-600 hover:text-gray-400 transition">
            <Lock className="w-3 h-3" />
            Admin
          </Link>
        </div>
      </div>
    </footer>
  );
}