'use client'

import { Instagram, Facebook, Youtube } from 'lucide-react'
import { imageUrls } from '@/lib/images'
import { useLanguage } from '@/lib/LanguageContext'
import { getTranslation } from '@/lib/i18n'

import Image from 'next/image'

export default function Footer() {
  const { language } = useLanguage()
  const navLinks: { name: string; href: string; external?: boolean }[] = [
    { name: getTranslation(language, 'nav.home'), href: `/${language}` },
    { name: getTranslation(language, 'nav.buy'), href: `/${language}/buy` },
    { name: getTranslation(language, 'nav.sell'), href: `/${language}/sell` },
    { name: getTranslation(language, 'nav.properties'), href: `/${language}/properties` },
    { name: getTranslation(language, 'nav.blog'), href: `/${language}/blog` },
    { name: getTranslation(language, 'nav.contact'), href: `/${language}/contact` },
  ]

  return (
    <footer className="bg-black text-white pt-16 sm:pt-20 md:pt-24 pb-8 sm:pb-12">
      <div className="container mx-auto px-4 sm:px-6">
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-10 sm:gap-12 md:gap-16 mb-16 sm:mb-20 md:mb-24">
          <div className="sm:col-span-2">
            <div className="relative h-7 sm:h-8 w-48 mb-6 sm:mb-8 md:mb-10 brightness-0 invert">
              <Image
                src={imageUrls.logo.black}
                alt="Kevin Victor Real Estate"
                fill
                className="object-contain object-left"
              />
            </div>
            <p className="text-xs sm:text-sm font-medium opacity-40 max-w-sm leading-relaxed mb-6 sm:mb-8 md:mb-10">
              {getTranslation(language, 'footer.description')}
            </p>
            <div className="flex space-x-5 sm:space-x-6">
              <a
                href="https://www.instagram.com/kevinvictor.realestate/"
                target="_blank"
                rel="noopener noreferrer"
                className="opacity-40 hover:opacity-100 cursor-pointer transition-all"
                aria-label="Instagram"
              >
                <Instagram size={18} className="sm:w-5 sm:h-5" />
              </a>
              <a
                href="https://www.facebook.com/kevinvictor.realestate"
                target="_blank"
                rel="noopener noreferrer"
                className="opacity-40 hover:opacity-100 cursor-pointer transition-all"
                aria-label="Facebook"
              >
                <Facebook size={18} className="sm:w-5 sm:h-5" />
              </a>
              <a
                href="https://www.youtube.com/@KEVINVICTOR.REALESTATE"
                target="_blank"
                rel="noopener noreferrer"
                className="opacity-40 hover:opacity-100 cursor-pointer transition-all"
                aria-label="YouTube"
              >
                <Youtube size={18} className="sm:w-5 sm:h-5" />
              </a>
            </div>
          </div>
          <div>
            <h4 className="text-[10px] uppercase tracking-[0.4em] font-bold mb-6 sm:mb-8 text-brand-accent">
              {getTranslation(language, 'footer.quickLinks')}
            </h4>
            <ul className="space-y-3 sm:space-y-4 text-[11px] sm:text-xs font-bold uppercase tracking-widest opacity-40">
              <li className="hover:text-white cursor-pointer transition-colors">
                <a href={`/${language}/vcard`}>{getTranslation(language, 'vcard.saveContact') || 'Save Contact'}</a>
              </li>
              {navLinks.map((l) => (
                <li key={l.name} className="hover:text-white cursor-pointer transition-colors">
                  <a href={l.href} target={l.external ? '_blank' : undefined} rel={l.external ? 'noopener noreferrer' : undefined}>{l.name}</a>
                </li>
              ))}
            </ul>
          </div>
          <div className="text-left flex flex-col items-start">
            <h4 className="text-[10px] uppercase tracking-[0.4em] font-bold mb-6 sm:mb-8 text-brand-accent">
              {getTranslation(language, 'footer.connect')}
            </h4>
            {/* HOGAR logo horizontal - alineado a la izquierda */}
            <div className="relative h-16 sm:h-20 w-64 sm:w-80 mb-6 shrink-0">
              <Image
                src={imageUrls.hogarLogo}
                alt="HOGAR Realtors"
                fill
                className="object-contain object-left"
              />
            </div>
            <p className="text-[11px] sm:text-xs font-bold opacity-40 leading-relaxed sm:leading-loose uppercase tracking-widest text-left">
              Hogar Realtors
              <br />
              Aquiles Serdán 382
              <br />
              Romantic Zone, PV
            </p>
            <p className="text-[11px] sm:text-xs font-bold text-brand-accent mt-4 sm:mt-6 tracking-widest">
              +52 322 231 1415
            </p>
          </div>
        </div>
        <div className="pt-8 sm:pt-10 md:pt-12 border-t border-white/5 flex flex-col sm:flex-row justify-between gap-3 sm:gap-0 text-[8px] sm:text-[9px] uppercase tracking-[0.4em] opacity-30">
          <p>© 2026 Kevin Victor Real Estate. {getTranslation(language, 'footer.rights')}</p>
          <p className="sm:mt-0">
            {getTranslation(language, 'footer.builtBy')}{' '}
            <a href="https://qretaria.com" target="_blank" rel="noopener noreferrer" className="hover:opacity-80 transition-opacity underline">{getTranslation(language, 'footer.company1')}</a>
            {' '}{getTranslation(language, 'footer.builtByConnector')}{' '}
            <a href="https://amimarketing.com" target="_blank" rel="noopener noreferrer" className="hover:opacity-80 transition-opacity underline">{getTranslation(language, 'footer.company2')}</a>
          </p>
        </div>
      </div>
    </footer>
  )
}