seo01/Template-01/src/components/Footer.tsx

import { Link } from 'react-router-dom';
import { Mail, Github, Twitter, Linkedin, Instagram, Facebook, Youtube } from 'lucide-react';

export default function Footer() {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-slate-950 text-white pt-24 pb-12">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-16 mb-20">
          <div className="md:col-span-12 lg:col-span-12 xl:col-span-5">
            <Link to="/" className="flex items-center gap-3 mb-10">
              <span className="font-serif text-3xl font-bold italic tracking-tighter">SEO Authority.</span>
            </Link>
            <p className="text-slate-400 max-w-md mb-12 text-lg leading-relaxed font-medium">
              O recurso definitivo para profissionais que buscam excelência técnica e autoridade duradoura no ecossistema de busca.
            </p>
            <div className="flex flex-wrap gap-4">
              {[
                { Icon: Twitter, label: 'Twitter' },
                { Icon: Linkedin, label: 'LinkedIn' },
                { Icon: Instagram, label: 'Instagram' },
                { Icon: Facebook, label: 'Facebook' },
                { Icon: Youtube, label: 'YouTube' },
                { Icon: Github, label: 'GitHub' },
                { Icon: Mail, label: 'Email' }
              ].map(({ Icon, label }, i) => (
                <a 
                  key={i} 
                  href="#" 
                  aria-label={label}
                  className="h-11 w-11 flex items-center justify-center rounded-full border border-white/10 text-slate-400 hover:text-white hover:border-white hover:bg-white/5 transition-all group"
                >
                  <Icon size={18} className="group-hover:scale-110 transition-transform" />
                </a>
              ))}
            </div>
          </div>

          <div className="md:col-span-4 lg:col-span-3 xl:col-span-2">
            <h4 className="font-bold text-white mb-8 uppercase text-[10px] tracking-[0.2em] opacity-40">Seções</h4>
            <ul className="space-y-6">
              <li><Link to="/categoria/estrategia" className="text-slate-300 hover:text-white text-sm font-bold tracking-tight transition-colors">Estratégia</Link></li>
              <li><Link to="/categoria/tecnico" className="text-slate-300 hover:text-white text-sm font-bold tracking-tight transition-colors">Técnico</Link></li>
              <li><Link to="/categoria/autoridade" className="text-slate-300 hover:text-white text-sm font-bold tracking-tight transition-colors">Autoridade</Link></li>
              <li><Link to="/categoria/negocios" className="text-slate-300 hover:text-white text-sm font-bold tracking-tight transition-colors">Negócios</Link></li>
            </ul>
          </div>

          <div className="md:col-span-4 lg:col-span-3 xl:col-span-2">
            <h4 className="font-bold text-white mb-8 uppercase text-[10px] tracking-[0.2em] opacity-40">Publicação</h4>
            <ul className="space-y-6">
              <li><Link to="/metodologia" className="text-slate-300 hover:text-white text-sm font-bold tracking-tight transition-colors">Metodologia</Link></li>
              <li><Link to="/sobre" className="text-slate-300 hover:text-white text-sm font-bold tracking-tight transition-colors">Sobre</Link></li>
              <li><Link to="/contato" className="text-slate-300 hover:text-white text-sm font-bold tracking-tight transition-colors">Contato</Link></li>
            </ul>
          </div>

          <div className="md:col-span-4 lg:col-span-6 xl:col-span-3">
            <div className="p-8 bg-white/5 rounded-[32px] border border-white/10">
              <h5 className="font-serif text-xl font-bold mb-4 italic">Exclusive Insights.</h5>
              <p className="text-slate-400 text-xs leading-relaxed mb-6 font-medium">Assine nosso briefing semanal gratuito sobre o futuro do Google.</p>
              <a 
                href="#newsletter"
                className="block w-full py-4 bg-white text-slate-950 text-center rounded-xl font-bold text-[10px] uppercase tracking-widest hover:bg-slate-200 transition-colors"
              >
                Assinar Briefing
              </a>
            </div>
          </div>
        </div>

        <div className="pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6 text-[10px] font-bold uppercase tracking-widest text-slate-500">
          <p>© {currentYear} SEO AUTHORITY PUBLISHING. ALL RIGHTS RESERVED.</p>
          <div className="flex gap-8">
            <Link to="/privacidade" className="hover:text-white transition-colors">Privacy Policy</Link>
            <Link to="/termos" className="hover:text-white transition-colors">Terms of Service</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}