import React from 'react';
import Link from 'next/link';
import { mdiFacebook, mdiInstagram, mdiLinkedin, mdiTwitter } from '@mdi/js';
import BaseIcon from '../BaseIcon';
import ScrollReveal from './ScrollReveal';

const Footer = () => {
  return (
    <footer className="bg-gray-950 text-white pt-24 pb-12 overflow-hidden relative">
      <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-amber-600/30 to-transparent"></div>
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-16 mb-20">
          <ScrollReveal animation="fade-in-up">
            <div className="col-span-1 lg:col-span-1">
              <Link href="/" className="inline-block mb-10 group transition-transform duration-500 hover:scale-105 active:scale-95">
                <div className="bg-white p-2.5 rounded-[1.5rem] shadow-2xl flex items-center justify-center w-fit border border-white/10 group-hover:border-amber-600/30 transition-colors">
                  <img src="/logo-beka.png" alt="Beka Kaplama" className="h-16 w-auto object-contain" />
                </div>
              </Link>
              <p className="text-gray-400 leading-relaxed mb-10 max-w-sm font-medium font-body">
                Yaşam alanlarınıza estetik, konfor ve değer katan modern kaplama çözümleri sunuyoruz. Yılların tecrübesi ve uzman ekibimizle projelerinizi hayata geçiriyoruz.
              </p>
              <div className="flex space-x-4">
                {[mdiFacebook, mdiInstagram, mdiLinkedin, mdiTwitter].map((icon, i) => (
                  <a key={i} href="#" className="p-3 bg-white/5 border border-white/10 rounded-2xl hover:bg-amber-600 hover:border-amber-600 transition-all duration-300 hover:-translate-y-1.5 active:scale-90 group">
                    <BaseIcon path={icon} size={22} className="text-gray-400 group-hover:text-white transition-colors" />
                  </a>
                ))}
              </div>
            </div>
          </ScrollReveal>

          <ScrollReveal animation="fade-in-up" delay={100}>
            <div>
              <h4 className="text-xs font-black uppercase tracking-[0.2em] text-amber-500 mb-10 px-1 border-l-4 border-amber-600 pl-4 font-sans">Kurumsal</h4>
              <ul className="space-y-5 font-bold font-sans">
                {[
                  { name: 'Anasayfa', href: '/' },
                  { name: 'Hakkımızda', href: '/hakkimizda' },
                  { name: 'Referanslar', href: '/projeler' },
                  { name: 'İletişim', href: '/iletisim' }
                ].map((link, i) => (
                  <li key={i}>
                    <Link href={link.href} className="text-gray-400 hover:text-white transition-all flex items-center group">
                      <span className="w-0 group-hover:w-3 h-0.5 bg-amber-600 mr-0 group-hover:mr-3 transition-all"></span>
                      {link.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </ScrollReveal>

          <ScrollReveal animation="fade-in-up" delay={200}>
            <div>
              <h4 className="text-xs font-black uppercase tracking-[0.2em] text-amber-500 mb-10 px-1 border-l-4 border-amber-600 pl-4 font-sans">Hizmetlerimiz</h4>
              <ul className="space-y-5 font-bold font-sans">
                {[
                  'Akustik Panel Sistemleri',
                  'PU Cephe Lambri Kaplama',
                  'PVC Mermer Plaka Uygulamaları',
                  'Özel 3D Duvar Tasarımları'
                ].map((item, i) => (
                  <li key={i}>
                    <Link href="/hizmetler" className="text-gray-400 hover:text-white transition-all flex items-center group">
                      <span className="w-0 group-hover:w-3 h-0.5 bg-amber-600 mr-0 group-hover:mr-3 transition-all"></span>
                      {item}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          </ScrollReveal>

          <ScrollReveal animation="fade-in-up" delay={300}>
            <div className="bg-white/5 border border-white/10 p-10 rounded-[2.5rem] relative overflow-hidden group">
              <div className="absolute -top-10 -right-10 w-32 h-32 bg-amber-600/10 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-1000"></div>
              
              <h4 className="text-xs font-black uppercase tracking-[0.2em] text-amber-500 mb-6 px-1 border-l-4 border-amber-600 pl-4 relative z-10 font-sans">Teklif Al</h4>
              <p className="text-gray-400 mb-8 font-medium relative z-10 leading-relaxed font-body">Bize projelerinizden bahsedin, size en uygun çözümü sunalım.</p>
              <Link 
                href="/iletisim" 
                className="block w-full text-center py-5 bg-amber-600 text-white rounded-[1.25rem] font-black hover:bg-amber-700 transition-all shadow-xl shadow-amber-900/20 active:scale-95 relative z-10 uppercase tracking-widest text-xs font-sans"
              >
                Ücretsiz Keşif İste
              </Link>
            </div>
          </ScrollReveal>
        </div>

        <div className="pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0 text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 font-sans">
          <p className="hover:text-gray-300 transition-colors">© 2026 Beka Kaplama Sistemleri. Tüm Hakları Saklıdır.</p>
          <div className="flex flex-wrap justify-center gap-8">
            <Link href="/privacy-policy" className="hover:text-amber-500 transition-colors">Gizlilik</Link>
            <Link href="/terms-of-use" className="hover:text-amber-500 transition-colors">Şartlar</Link>
            <Link href="/login" className="hover:text-white transition-colors text-gray-500 flex items-center space-x-1 group">
              <span className="w-1.5 h-1.5 rounded-full bg-gray-700 group-hover:bg-amber-600 transition-colors"></span>
              <span>Yönetici Paneli</span>
            </Link>
          </div>
        </div>
      </div>
      
      {/* Footer Accent Bar */}
      <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-amber-600 to-transparent opacity-50"></div>
    </footer>
  );
};

export default Footer;
