'use client';

import Link from "next/link";
import { Share2, Camera, Send, MapPin, Phone, Mail, ArrowUpRight } from "lucide-react";
import { siteConfig } from "@/lib/data";

const QUICK_LINKS = [
  { name: "Hizmetlerimiz", href: "/hizmetler" },
  { name: "Makine Parkuru", href: "/filomuz" },
  { name: "Kurumsal", href: "/hakkimizda" },
  { name: "İletişim", href: "/iletisim" },
];

const SERVICES = [
  { name: "Sandiviç Panel Kaldırma", href: "/hizmetler" },
  { name: "Konteyner Nakliyesi", href: "/hizmetler" },
  { name: "Vinç Hizmetleri", href: "/hizmetler" },
  { name: "Sepetli Platform", href: "/hizmetler" },
  { name: "Tekne ve Yat Kaldırma", href: "/hizmetler" },
];

export function Footer() {
  return (
    <footer className="bg-surface-container-lowest pt-24 pb-12 border-t border-outline-variant/10">
      <div className="max-w-7xl mx-auto px-6 md:px-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-16 mb-20">
          {/* Brand Column */}
          <div className="flex flex-col gap-8">
            <Link href="/" className="flex flex-col items-start group">
              <span className="font-headline text-3xl font-black text-white tracking-tighter leading-none group-hover:text-primary transition-colors">
                AYDOĞAN
              </span>
              <span className="font-label text-xs text-primary font-bold tracking-[0.3em] uppercase -mt-1 group-hover:text-white transition-colors">
                Nakliyat & Vinç
              </span>
            </Link>
            <p className="text-on-surface-variant text-sm leading-relaxed">
              20 yılı aşkın tecrübemizle, Dalaman ve tüm Türkiye genelinde ağır lojistik ve kaldırma çözümleri sunuyoruz.
            </p>
            <div className="flex gap-4">
              <a href={siteConfig.social.facebook} target="_blank" className="w-10 h-10 bg-surface-container flex items-center justify-center text-on-surface-variant hover:bg-primary hover:text-on-primary transition-all">
                <Share2 size={18} />
              </a>
              <a href={siteConfig.social.instagram} target="_blank" className="w-10 h-10 bg-surface-container flex items-center justify-center text-on-surface-variant hover:bg-primary hover:text-on-primary transition-all">
                <Camera size={18} />
              </a>
              <a href="#" className="w-10 h-10 bg-surface-container flex items-center justify-center text-on-surface-variant hover:bg-primary hover:text-on-primary transition-all">
                <Send size={18} />
              </a>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="font-headline font-bold text-white uppercase tracking-widest text-xs mb-8">Hızlı Erişim</h4>
            <ul className="flex flex-col gap-4">
              {QUICK_LINKS.map((link) => (
                <li key={link.name}>
                  <Link href={link.href} className="text-on-surface-variant hover:text-primary transition-colors text-sm flex items-center gap-2 group">
                    <ArrowUpRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity" />
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Services */}
          <div>
            <h4 className="font-headline font-bold text-white uppercase tracking-widest text-xs mb-8">Hizmetlerimiz</h4>
            <ul className="flex flex-col gap-4">
              {SERVICES.map((link) => (
                <li key={link.name}>
                  <Link href={link.href} className="text-on-surface-variant hover:text-primary transition-colors text-sm">
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact Details */}
          <div>
            <h4 className="font-headline font-bold text-white uppercase tracking-widest text-xs mb-8">İletişim</h4>
            <div className="flex flex-col gap-6">
              <div className="flex items-start gap-4">
                <MapPin size={18} className="text-primary shrink-0" />
                <p className="text-on-surface-variant text-sm leading-snug">
                  {siteConfig.contact.address}
                </p>
              </div>
              <div className="flex items-center gap-4">
                <Phone size={18} className="text-primary shrink-0" />
                <a href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`} className="text-on-surface-variant hover:text-primary transition-colors text-sm font-bold">
                  {siteConfig.contact.phone}
                </a>
              </div>
              <div className="flex items-center gap-4">
                <Mail size={18} className="text-primary shrink-0" />
                <a href={`mailto:${siteConfig.contact.email}`} className="text-on-surface-variant hover:text-primary transition-colors text-sm">
                  {siteConfig.contact.email}
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="pt-12 border-t border-outline-variant/10 flex flex-col md:flex-row justify-between items-center gap-8">
          <p className="text-on-surface-variant text-[10px] uppercase tracking-widest font-bold">
            © {new Date().getFullYear()} {siteConfig.name}. Tüm hakları saklıdır.
          </p>
          
          <div className="flex items-center gap-2">
            <span className="text-on-surface-variant text-[8px] uppercase tracking-[0.3em] opacity-40">Created By</span>
            <a 
              href="https://ayris.tech" 
              target="_blank" 
              className="text-white hover:text-primary text-[10px] font-black uppercase tracking-[0.4em] transition-all"
            >
              AYRISTECH
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}