"use client";

import Link from 'next/link';
import { useLocale } from '@/contexts/LocaleContext';
import { usePageContent } from '@/hooks/usePageContent';

export default function Footer() {
  const { locale, t } = useLocale();
  const { content } = usePageContent('home', locale);
  
  // Prefixo para links
  const prefix = locale === 'pt' ? '' : `/${locale}`;
  
  // Badge do hero (dinâmica)
  const badge = content?.hero?.badge || { text: 'Coca-Cola', show: true };

  return (
    <footer className="bg-secondary text-white pt-16 pb-8">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
          {/* Brand */}
          <div className="col-span-1 md:col-span-1">
            <div className="flex items-center gap-2 mb-6">
              <i className="ri-building-2-fill text-4xl text-primary"></i>
              <div className="flex items-center gap-2">
                <span className="text-2xl font-bold font-headline">OCCTO</span>
                <span className="text-[10px] font-bold text-primary bg-white/10 px-2 py-1 rounded-md uppercase tracking-wider">ENG.</span>
              </div>
            </div>
            <p className="text-gray-400 mb-6">
              {t('footer.description')}
            </p>
            
            {badge?.show && (
              <div className="inline-flex items-center gap-2 bg-white/5 border border-white/10 rounded-lg px-3 py-2 mb-6">
                <i className="ri-verified-badge-fill text-primary"></i>
                <span className="text-xs font-bold text-gray-300 uppercase tracking-wide">{t('home.officialProvider')} <span className="text-primary">{badge.text}</span></span>
              </div>
            )}

            <div className="flex gap-4">
              <a href="#" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                <i className="ri-instagram-line"></i>
              </a>
              <a href="#" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                <i className="ri-linkedin-fill"></i>
              </a>
              <a href="#" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                <i className="ri-facebook-fill"></i>
              </a>
            </div>
          </div>

          {/* Links */}
          <div>
            <h3 className="text-lg font-bold font-headline mb-6">{t('footer.quickLinks')}</h3>
            <ul className="space-y-4">
              <li><Link href={`${prefix}/`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.home')}</Link></li>
              <li><Link href={`${prefix}/sobre`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.about')}</Link></li>
              <li><Link href={`${prefix}/servicos`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.services')}</Link></li>
              <li><Link href={`${prefix}/projetos`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.projects')}</Link></li>
              <li><Link href={`${prefix}/contato`} className="text-gray-400 hover:text-primary transition-colors">{t('nav.contact')}</Link></li>
            </ul>
          </div>

          {/* Services */}
          <div>
            <h3 className="text-lg font-bold font-headline mb-6">{t('nav.services')}</h3>
            <ul className="space-y-4">
              <li className="text-gray-400">{t('services.deviceProjects')}</li>
              <li className="text-gray-400">{t('services.implementEngineering')}</li>
              <li className="text-gray-400">{t('services.equipmentInspection')}</li>
              <li className="text-gray-400">{t('services.technicalReports')}</li>
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h3 className="text-lg font-bold font-headline mb-6">{t('nav.contact')}</h3>
            <ul className="space-y-4">
              <li className="flex items-start gap-3 text-gray-400">
                <i className="ri-map-pin-line mt-1 text-primary"></i>
                <span>Endereço da Empresa, 123<br />Cidade - ES</span>
              </li>
              <li className="flex items-center gap-3 text-gray-400">
                <i className="ri-phone-line text-primary"></i>
                <span>(27) 99999-9999</span>
              </li>
              <li className="flex items-center gap-3 text-gray-400">
                <i className="ri-mail-line text-primary"></i>
                <span>contato@octto.com.br</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-gray-500 text-sm">
            © {new Date().getFullYear()} OCCTO Engenharia. {t('footer.rights')}
          </p>
          <div className="flex gap-6 text-sm text-gray-500">
            <Link href={`${prefix}/privacidade`} className="hover:text-white">{t('footer.privacyPolicy')}</Link>
            <Link href={`${prefix}/termos`} className="hover:text-white">{t('footer.termsOfUse')}</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}