import Link from "next/link";

export function Footer() {
  return (
    <footer className="w-full py-24 px-6 md:px-12 grid grid-cols-1 md:grid-cols-4 gap-12 bg-surface-container-lowest relative overflow-hidden">
      <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent"></div>
      
      <div className="col-span-1 md:col-span-1">
        <div className="text-2xl font-black text-white mb-8 tracking-tighter">
            AYDOĞAN <span className="text-primary">VINÇ</span>
        </div>
        <p className="text-on-surface-variant font-label text-[10px] md:text-xs leading-loose uppercase tracking-widest max-w-xs">
          Ağır sanayi ve inşaat sektöründe güvenin simgesi. Modern ekipmanlarımız ve uzman kadromuzla Dalaman'ın en güçlü ortağıyız.
        </p>
      </div>
      
      <div className="md:pl-12">
        <h4 className="text-primary font-headline text-[10px] uppercase tracking-[0.3em] mb-8 font-black">Merkez Ofis</h4>
        <ul className="space-y-4">
          <li><span className="text-white font-label text-[10px] uppercase tracking-widest leading-relaxed">Merkez Mah. Sanayi Sitesi No: 42 Dalaman / Muğla</span></li>
          <li><span className="text-white font-label text-[10px] uppercase tracking-widest">T: +90 252 692 XX XX</span></li>
        </ul>
      </div>

      <div className="md:pl-12">
        <h4 className="text-primary font-headline text-[10px] uppercase tracking-[0.3em] mb-8 font-black">Hizmetler</h4>
        <ul className="space-y-4">
          {[
            { name: "Mobil Vinç Kiralama", href: "/hizmetler" },
            { name: "Sepetli Platform", href: "/hizmetler" },
            { name: "Lojistik Çözümleri", href: "/hizmetler" }
          ].map(item => (
             <li key={item.name}><Link href={item.href} className="text-on-surface-variant hover:text-white transition-colors font-label text-[10px] uppercase tracking-widest">{item.name}</Link></li>
          ))}
        </ul>
      </div>

      <div className="md:pl-12">
        <h4 className="text-primary font-headline text-[10px] uppercase tracking-[0.3em] mb-8 font-black">Hızlı Menü</h4>
        <ul className="space-y-4">
          {[
            { name: "Hakkımızda", href: "/hakkimizda" },
            { name: "Makine Parkuru", href: "/filomuz" },
            { name: "İletişim", href: "/iletisim" },
            { name: "KVKK", href: "#" }
          ].map(item => (
             <li key={item.name}><Link href={item.href} className="text-on-surface-variant hover:text-white transition-colors font-label text-[10px] uppercase tracking-widest">{item.name}</Link></li>
          ))}
        </ul>
      </div>

      <div className="col-span-full mt-12 pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-8">
        <span className="text-on-surface-variant/40 font-label text-[10px] uppercase tracking-[0.2em]">© 2024 Aydoğan Nakliyat Vinç. Tüm Hakları Saklıdır.</span>
        <div className="flex gap-8">
          <a href="#" className="text-white/40 hover:text-primary transition-colors">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
          </a>
          <a href="#" className="text-white/40 hover:text-primary transition-colors">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
          </a>
          <a href="#" className="text-white/40 hover:text-primary transition-colors">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
          </a>
        </div>
      </div>
    </footer>
  );
}
