import React from 'react';
import { Logo } from './Logo';
import { Instagram, Facebook, Twitter, Youtube, Mail, ArrowUp } from 'lucide-react';

export const Footer: React.FC = () => {
  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <footer className="bg-brand-dark text-white pt-20 pb-10">
      <div className="max-w-7xl mx-auto px-4 md:px-6 lg:px-8">
        
        {/* Main Footer Content */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
          
          {/* Brand Column */}
          <div className="space-y-6">
            <div className="flex items-center space-x-3">
              <Logo className="h-14 w-14 text-brand-purple" />
              <div>
                <h2 className="text-2xl font-bold tracking-tighter leading-none font-display">KAMPÜS</h2>
                <h2 className="text-2xl font-bold tracking-tighter leading-none text-gray-400 font-display">CADILARI</h2>
              </div>
            </div>
            <p className="text-gray-400 text-sm leading-relaxed">
              Üniversitelerde, sokaklarda, meydanlarda; eşitlik, özgürlük ve laiklik için mücadele eden feminist üniversite öğrencileriyiz.
            </p>
          </div>

          {/* Links Column 1 */}
          <div>
            <h3 className="text-lg font-bold mb-6 font-display text-brand-purpleLighter">ORGANİZASYON</h3>
            <ul className="space-y-3">
              {['Hakkımızda', 'İlkelerimiz', 'Tarihçemiz', 'İletişim', 'Bize Katıl'].map(item => (
                <li key={item}>
                  <a href="#" className="text-gray-400 hover:text-brand-purple transition-colors text-sm">
                    {item}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Links Column 2 */}
          <div>
            <h3 className="text-lg font-bold mb-6 font-display text-brand-purpleLighter">İÇERİKLER</h3>
            <ul className="space-y-3">
              {['Feminist Gündem', 'Cadı Yayınları', 'Çeviri', 'Kadınlardan Gelenler', 'E-Bülten'].map(item => (
                <li key={item}>
                  <a href="#" className="text-gray-400 hover:text-brand-purple transition-colors text-sm">
                    {item}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact/Social Column */}
          <div>
            <h3 className="text-lg font-bold mb-6 font-display text-brand-purpleLighter">TAKİP ET</h3>
            <div className="flex gap-4 mb-8">
              {[Instagram, Twitter, Facebook, Youtube].map((Icon, i) => (
                <a 
                  key={i} 
                  href="#" 
                  className="bg-white/5 hover:bg-brand-purple p-3 rounded-full transition-colors duration-300"
                >
                  <Icon size={18} />
                </a>
              ))}
            </div>
            
            <h3 className="text-lg font-bold mb-4 font-display text-brand-purpleLighter">İLETİŞİM</h3>
            <a href="mailto:info@kampuscadilari.com" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
              <Mail size={16} />
              <span>info@kampuscadilari.com</span>
            </a>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="border-t border-white/10 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-gray-500 text-sm text-center md:text-left">
            &copy; {new Date().getFullYear()} Kampüs Cadıları. Tüm hakları saklıdır.
          </p>
          
          <button 
            onClick={scrollToTop}
            className="flex items-center gap-2 text-sm font-semibold text-brand-purple hover:text-white transition-colors"
          >
            YUKARI ÇIK <ArrowUp size={16} />
          </button>
        </div>
      </div>
    </footer>
  );
};