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

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

  return (
    <footer className="bg-black border-t border-white/5 pt-24 pb-12 relative overflow-hidden font-mono">
      <div className="mx-auto max-w-[1400px] px-6 lg:px-12 relative z-10">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-16 mb-20">
          <div className="md:col-span-12 lg:col-span-4">
            <Link to="/" className="flex items-center gap-3 mb-8 group">
              <div className="h-8 w-8 bg-brand flex items-center justify-center text-black skew-x-[-6deg]">
                <Zap size={16} fill="currentColor" className="skew-x-[6deg]" />
              </div>
              <span className="font-display text-xl font-black tracking-tight text-white uppercase italic">
                NODE<span className="text-brand">_IDX</span>
              </span>
            </Link>
            <p className="text-slate-700 max-w-sm mb-8 text-[9px] uppercase tracking-[0.3em] leading-relaxed font-black">
              Deciphering the neural future of organic search across the strategic spectrum. [SIGNAL_V3.0]
            </p>
            <div className="flex gap-1.5">
              {[Twitter, Linkedin, Github].map((Icon, i) => (
                <a 
                  key={i} 
                  href="#" 
                  className="h-10 w-10 flex items-center justify-center border border-white/5 text-slate-700 hover:text-brand hover:border-brand/20 transition-all font-mono"
                >
                  <Icon size={14} />
                </a>
              ))}
            </div>
          </div>

          <div className="md:col-span-6 lg:col-span-2 invisible lg:visible">
            <h4 className="text-white text-[9px] font-black uppercase tracking-[0.4em] mb-8 italic">NAV_CORE</h4>
            <ul className="space-y-3 font-mono text-[9px] text-slate-700 font-black uppercase tracking-widest leading-loose">
              <li><Link to="/categoria/estrategia" className="hover:text-brand transition-colors">STRATEGY_FEED</Link></li>
              <li><Link to="/categoria/tecnico" className="hover:text-brand transition-colors">TECH_OPS</Link></li>
              <li><Link to="/categoria/autoridade" className="hover:text-brand transition-colors">AUTHORITY_LOGS</Link></li>
            </ul>
          </div>

          <div className="md:col-span-6 lg:col-span-4">
            <div className="p-8 border border-white/5 bg-white/[0.01]">
              <h5 className="text-white font-black uppercase text-[9px] tracking-[0.4em] mb-4 italic">BRIEFING_SYNC</h5>
              <form className="flex gap-2" onSubmit={(e) => e.preventDefault()}>
                <input 
                  type="email" 
                  placeholder="ENDPOINT_ID..."
                  className="flex-grow h-10 bg-black border border-white/5 px-4 text-[9px] font-black uppercase tracking-widest focus:border-brand outline-none"
                />
                <button className="h-10 px-6 bg-brand text-black font-black text-[9px] uppercase tracking-widest hover:bg-white transition-all">
                  SYNC
                </button>
              </form>
            </div>
          </div>
        </div>

        <div className="pt-10 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6 text-[8px] font-black uppercase tracking-[0.3em] text-slate-800">
          <p>
            [ © NODE_IDX_{currentYear} ] DATASET_ENCRYPTED
          </p>
          <div className="flex gap-10">
            <Link to="/privacidade" className="hover:text-brand transition-colors">PRIVACY_PROTOCOLS</Link>
            <Link to="/termos" className="hover:text-brand transition-colors">STRUCTURE_INFO</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}