import { Link } from '@/i18n/routing'
import { useTranslations } from 'next-intl'

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

  return (
    <footer className="bg-pine text-stone/70 border-t border-white/10 pt-16 pb-8 font-sans">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-10 mb-12">
          
          {/* Logo & Info */}
          <div className="md:col-span-2 space-y-4">
            <Link href="/" className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full border-2 border-stone flex items-center justify-center relative bg-paper shrink-0">
                <div className="absolute inset-[2.5px] rounded-full border border-dashed border-turquoise" />
                <span className="font-heading font-extrabold text-pine text-xs tracking-tighter">ML</span>
              </div>
              <h2 className="font-heading font-extrabold text-lg text-stone tracking-tight leading-none lowercase">
                marmaris <span className="text-turquoise">local</span>
              </h2>
            </Link>
            <p className="text-xs text-stone/50 max-w-sm font-medium leading-relaxed">
              {t('about')}
            </p>
          </div>

          {/* Quick Links */}
          <div className="space-y-4">
            <h3 className="font-heading font-semibold text-xs text-stone uppercase tracking-wider">
              {nav('home')}
            </h3>
            <ul className="space-y-2 text-xs">
              <li>
                <Link href="/restoranlar" className="hover:text-turquoise transition-colors">
                  {nav('restaurants')}
                </Link>
              </li>
              <li>
                <Link href="/apartlar" className="hover:text-turquoise transition-colors">
                  {nav('aparts')}
                </Link>
              </li>
              <li>
                <Link href="/isletmeler" className="hover:text-turquoise transition-colors">
                  {nav('businesses')}
                </Link>
              </li>
            </ul>
          </div>

          {/* Guidelines */}
          <div className="space-y-4">
            <h3 className="font-heading font-semibold text-xs text-stone uppercase tracking-wider">
              Marmaris Local
            </h3>
            <ul className="space-y-2 text-xs">
              <li>
                <Link href="/hakkinda" className="hover:text-turquoise transition-colors">
                  {nav('about')}
                </Link>
              </li>
              <li>
                <Link href="/iletisim" className="hover:text-turquoise transition-colors">
                  {nav('contact')}
                </Link>
              </li>
              <li>
                <Link href="/isletme-ekle" className="hover:text-turquoise transition-colors">
                  {nav('addBusiness')}
                </Link>
              </li>
              <li>
                <Link href="/login" className="hover:text-turquoise transition-colors">
                  {nav('admin')}
                </Link>
              </li>
            </ul>
          </div>

        </div>

        {/* Bottom Copyright & Branding */}
        <div className="border-t border-white/5 pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-stone/40 gap-4">
          <p>{t('rights')}</p>
          <div className="flex items-center gap-1.5 font-medium">
            <span>Powered by</span>
            <a 
              href="https://ayris.tech" 
              target="_blank" 
              rel="noopener noreferrer" 
              className="text-stone hover:text-turquoise transition-colors border-b border-stone/20 hover:border-turquoise pb-0.5"
            >
              ayris.tech
            </a>
          </div>
        </div>

      </div>
    </footer>
  )
}