import React, { useState } from 'react';
import { Menu, Search, Instagram, Twitter, Facebook, Youtube } from 'lucide-react';
import { Logo } from './components/Logo';
import { Home } from './components/Home';
import { Publications } from './components/Publications';
import { CONTENT } from './content';

type View = 'HOME' | 'PUBLICATIONS';

const App: React.FC = () => {
  const [isNavOpen, setIsNavOpen] = useState(false);
  const [lang, setLang] = useState<'TR' | 'EN'>('TR');
  const [currentView, setCurrentView] = useState<View>('HOME');

  const t = CONTENT[lang];

  return (
    <div className="bg-brand-lilac text-brand-deep antialiased font-sans w-full selection:bg-brand-purple selection:text-white">
      
      {/* --- FOOTER (FIXED BEHIND CONTENT) --- */}
      <footer className="fixed bottom-0 left-0 w-full h-[600px] bg-brand-deep flex flex-col justify-between p-8 md:p-12 z-0">
         <div className="flex justify-between items-start">
            <Logo className="w-16 h-16 md:w-24 md:h-24 text-brand-lilac" />
            <div className="text-right">
               <h2 className="text-[15vw] font-display font-bold text-brand-purple leading-none select-none opacity-50">{t.footer.feminist}</h2>
            </div>
         </div>
         
         <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-white font-display font-bold tracking-wider text-sm md:text-lg">
            <button onClick={() => setCurrentView('HOME')} className="text-left hover:text-brand-lilac transition-colors">{t.footer.about}</button>
            <button onClick={() => setCurrentView('PUBLICATIONS')} className="text-left hover:text-brand-lilac transition-colors">{t.footer.pubs}</button>
            <a href="#" className="hover:text-brand-lilac transition-colors">{t.footer.volunteer}</a>
            <a href="#" className="hover:text-brand-lilac transition-colors">{t.footer.contact}</a>
         </div>

         <div className="border-t border-white/20 pt-8 flex justify-between items-end text-brand-lilac text-sm">
            <div>
               <p>{t.footer.rights}</p>
               <p>{t.footer.city}</p>
            </div>
            <div className="flex gap-4">
               {[Instagram, Twitter, Facebook, Youtube].map((Icon, i) => (
                 <a key={i} href="#" className="hover:text-white transition-colors"><Icon size={24} /></a>
               ))}
            </div>
         </div>
      </footer>

      {/* --- MAIN CONTENT (SCROLLS OVER FOOTER) --- */}
      <main className="relative z-10 bg-brand-lilac mb-[600px] shadow-[0_50px_100px_#2D0F41] min-h-screen">
        
        {/* --- HEADER --- */}
        <nav 
          className={`fixed w-full z-50 transition-all duration-300 ease-in-out py-6 px-6 lg:px-12 flex justify-between items-center bg-brand-lilac/90 backdrop-blur-sm border-b-4 border-brand-deep shadow-lg`}
        >
          <div className="flex items-center gap-3">
            <button 
              onClick={() => setIsNavOpen(!isNavOpen)}
              className="p-3 border-2 border-brand-deep text-brand-deep hover:bg-brand-deep hover:text-white transition-colors lg:hidden rounded-lg"
            >
              <Menu className="w-6 h-6" />
            </button>
            <div 
              className="flex items-center gap-2 cursor-pointer"
              onClick={() => setCurrentView('HOME')}
            >
               <Logo className="w-12 h-12 text-brand-deep" />
               <span className="hidden lg:block font-display font-bold text-2xl tracking-tighter text-brand-deep">
                 KAMPÜS CADILARI
               </span>
            </div>
          </div>

          <div className="hidden lg:flex gap-8">
            <button 
              onClick={() => setCurrentView('HOME')}
              className={`text-lg font-display font-bold tracking-wider uppercase transition-colors relative group ${currentView === 'HOME' ? 'text-brand-purple' : 'text-brand-deep hover:text-brand-purple'}`}
            >
              {t.nav.home}
              <span className={`absolute -bottom-1 left-0 h-1 bg-brand-purple transition-all duration-300 ${currentView === 'HOME' ? 'w-full' : 'w-0 group-hover:w-full'}`}></span>
            </button>
            
            <button 
              onClick={() => setCurrentView('PUBLICATIONS')}
              className={`text-lg font-display font-bold tracking-wider uppercase transition-colors relative group ${currentView === 'PUBLICATIONS' ? 'text-brand-purple' : 'text-brand-deep hover:text-brand-purple'}`}
            >
              {t.nav.publications}
              <span className={`absolute -bottom-1 left-0 h-1 bg-brand-purple transition-all duration-300 ${currentView === 'PUBLICATIONS' ? 'w-full' : 'w-0 group-hover:w-full'}`}></span>
            </button>

            {[
              t.nav.translation, 
              t.nav.agenda
            ].map(item => (
              <a 
                key={item} 
                href="#" 
                className="text-brand-deep hover:text-brand-purple text-lg font-display font-bold tracking-wider uppercase transition-colors relative group"
              >
                {item}
                <span className="absolute -bottom-1 left-0 w-0 h-1 bg-brand-purple transition-all duration-300 group-hover:w-full"></span>
              </a>
            ))}
          </div>

          <div className="flex items-center gap-6">
             <div className="flex items-center gap-2 font-display font-bold text-brand-deep text-lg bg-white/50 px-3 py-1 rounded-full border border-brand-deep/20">
                <button 
                  onClick={() => setLang('TR')} 
                  className={`${lang === 'TR' ? 'text-brand-purple' : 'text-brand-deep hover:text-brand-purple'} transition-colors`}
                >
                  TR
                </button>
                <span className="text-gray-400">/</span>
                <button 
                  onClick={() => setLang('EN')} 
                  className={`${lang === 'EN' ? 'text-brand-purple' : 'text-brand-deep hover:text-brand-purple'} transition-colors`}
                >
                  EN
                </button>
             </div>

             <Search className="w-7 h-7 text-brand-deep cursor-pointer hover:text-brand-purple transition-colors" strokeWidth={2.5} />
             
             <button className="hidden md:block bg-brand-purple text-white px-8 py-3 font-display font-bold text-base tracking-widest uppercase border-2 border-brand-deep shadow-[4px_4px_0px_#2D0F41] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none transition-all rounded-lg">
               {t.nav.join}
             </button>
          </div>
        </nav>

        {/* --- VIEW CONTENT --- */}
        {currentView === 'HOME' ? <Home t={t} /> : <Publications t={t} />}
      
      </main>

    </div>
  );
};

export default App;