import { useTranslations } from 'next-intl'
import Link from 'next/link'
import { MapPin, Phone, Mail } from 'lucide-react'

export function Footer() {
  const t = useTranslations('nav')
  const f = useTranslations('footer')

  return (
    <footer className="bg-zinc-950 text-zinc-300 pt-16 pb-8 border-t border-zinc-900">
      <div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
        <div className="space-y-4">
          <Link href="/" className="flex items-center">
            <span className="text-2xl font-black tracking-tighter text-orange-500">FETHIYE</span>
            <span className="text-2xl font-bold tracking-tighter text-white">HOLIDAY</span>
          </Link>
          <p className="text-sm text-zinc-400 leading-relaxed">
            {f('description')}
          </p>
        </div>

        <div>
          <h4 className="text-white font-bold mb-4 uppercase tracking-wider text-sm">Quick Links</h4>
          <ul className="space-y-2 text-sm text-zinc-400">
            <li><Link href="/" className="hover:text-orange-500 transition">{t('home')}</Link></li>
            <li><Link href="/about" className="hover:text-orange-500 transition">{t('about')}</Link></li>
            <li><Link href="/tours" className="hover:text-orange-500 transition">{t('tours')}</Link></li>
            <li><Link href="/blog" className="hover:text-orange-500 transition">{t('blog')}</Link></li>
            <li><Link href="/contact" className="hover:text-orange-500 transition">{t('contact')}</Link></li>
          </ul>
        </div>

        <div>
          <h4 className="text-white font-bold mb-4 uppercase tracking-wider text-sm">Contact</h4>
          <ul className="space-y-3 text-sm text-zinc-400">
            <li className="flex items-start">
              <MapPin className="w-5 h-5 mr-3 text-orange-500 flex-shrink-0" />
              <span>{f('contact_info')}</span>
            </li>
            <li className="flex items-center">
              <Phone className="w-5 h-5 mr-3 text-orange-500 flex-shrink-0" />
              <span>+90 530 378 48 82</span>
            </li>
            <li className="flex items-center">
              <Mail className="w-5 h-5 mr-3 text-orange-500 flex-shrink-0" />
              <span>info@fethiyeholiday.com</span>
            </li>
          </ul>
        </div>

        <div>
          <h4 className="text-white font-bold mb-4 uppercase tracking-wider text-sm">Follow Us</h4>
          <div className="flex space-x-4">
            <a href="#" className="w-10 h-10 rounded-full bg-zinc-900 flex items-center justify-center hover:bg-orange-500 hover:text-white transition">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
            </a>
            <a href="#" className="w-10 h-10 rounded-full bg-zinc-900 flex items-center justify-center hover:bg-orange-500 hover:text-white transition">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>
            </a>
          </div>
          <div className="mt-6">
            <p className="text-xs text-zinc-500">TURSAB Licence No: 6105</p>
          </div>
        </div>
      </div>

      <div className="container mx-auto px-4 pt-8 border-t border-zinc-900 text-center text-xs text-zinc-500 flex flex-col items-center justify-center space-y-2">
        <p>{f('rights')}</p>
        <div>
          Created by{' '}
          <a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="text-orange-500 hover:text-orange-400 transition font-medium">
            ayris.tech
          </a>
        </div>
      </div>
    </footer>
  )
}