import { Link } from 'react-router-dom';

const footerLinks = {
  systems: [
    { name: 'Tráfego Pago Máximo', path: '/services' },
    { name: 'SEO & Conteúdo Escalonável', path: '/services' },
    { name: 'CRO & Design Orientado', path: '/services' },
    { name: 'Engenharia de Vendas', path: '/services' },
  ],
  nexus: [
    { name: 'A Agência', path: '/about' },
    { name: 'Nosso Portfólio', path: '/cases' },
    { name: 'Blog e Estratégias', path: '/blog' },
    { name: 'Fale com Especialista', path: '/contact' },
  ],
  network: [
    { name: 'Instagram', path: '#' },
    { name: 'LinkedIn', path: '#' },
    { name: 'Podcast', path: '#' },
  ]
};

export default function Footer() {
  return (
    <footer className="bg-black text-white pt-24 pb-12 border-t border-white/10 relative overflow-hidden">
      <div className="container mx-auto px-6 max-w-7xl relative z-10">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-16 lg:gap-8 mb-24">
          
          {/* Brand Col */}
          <div className="lg:col-span-5 flex flex-col items-start pr-0 lg:pr-12">
            <Link to="/" className="mb-8 flex items-center gap-2 group">
              <span className="font-display font-bold text-2xl tracking-tighter text-white">
                ONYX
              </span>
              <div className="w-1.5 h-1.5 bg-white rounded-full ml-1" />
            </Link>
            <p className="font-sans text-gray-500 text-sm leading-relaxed mb-10 max-w-sm">
              Marketing Digital centrado em engenharia e receita para empresas exigentes e escaláveis.
            </p>
            <div className="flex bg-transparent border-b border-white/20 w-full max-w-sm p-1 focus-within:border-white transition-colors">
              <input 
                type="email" 
                placeholder="Receber nossa Newsletter" 
                className="bg-transparent border-none text-white px-2 py-2 w-full focus:outline-none placeholder:text-gray-700 font-mono text-xs uppercase tracking-widest"
              />
              <button 
                className="text-gray-400 hover:text-white px-4 py-2 transition-all flex text-xs font-mono items-center uppercase tracking-widest"
              >
                Assinar
              </button>
            </div>
          </div>

          {/* Links Cols */}
          <div className="lg:col-span-2 lg:col-start-7">
            <h4 className="text-[10px] uppercase tracking-widest text-white/40 font-mono font-bold mb-6">Soluções</h4>
            <ul className="space-y-4 text-sm font-sans">
              {footerLinks.systems.map((link) => (
                <li key={link.name}>
                  <Link to={link.path} className="text-gray-500 hover:text-white transition-colors">
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div className="lg:col-span-2">
            <h4 className="text-[10px] uppercase tracking-widest text-white/40 font-mono font-bold mb-6">Agência</h4>
            <ul className="space-y-4 text-sm font-sans">
              {footerLinks.nexus.map((link) => (
                <li key={link.name}>
                  <Link to={link.path} className="text-gray-500 hover:text-white transition-colors">
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div className="lg:col-span-2">
            <h4 className="text-[10px] uppercase tracking-widest text-white/40 font-mono font-bold mb-6">Social</h4>
            <ul className="space-y-4 text-sm font-sans">
              {footerLinks.network.map((link) => (
                <li key={link.name}>
                  <a href={link.path} target="_blank" rel="noopener noreferrer" className="text-gray-500 hover:text-white transition-colors">
                    {link.name}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Bottom */}
        <div className="pt-8 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-6 font-mono text-[10px] text-gray-600 uppercase tracking-widest">
          <p>
            COPYRIGHT_ {new Date().getFullYear()} // Nação Onyx
          </p>
          <div className="flex gap-6">
            <Link to="#" className="hover:text-gray-400 transition-colors">Privacidade</Link>
            <Link to="#" className="hover:text-gray-400 transition-colors">Termos de Uso</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}
