import React, { useState, useEffect } from 'react';
import { 
  Zap, 
  Users, 
  Home, 
  PlusCircle, 
  Menu, 
  User, 
  AlertTriangle,
  Mail,
  X,
  ShieldCheck,
  Star
} from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInAnonymously, 
  signInWithCustomToken, 
  onAuthStateChanged 
} from 'firebase/auth';

const firebaseConfig = window.__firebase_config ? JSON.parse(window.__firebase_config) : {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export default function App() {
  const [view, setView] = useState('home');
  const [menuOpen, setMenuOpen] = useState(false);
  const [user, setUser] = useState(null);

  useEffect(() => {
    const initAuth = async () => {
      if (window.__initial_auth_token) {
        await signInWithCustomToken(auth, window.__initial_auth_token);
      } else {
        await signInAnonymously(auth);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  const NavItem = ({ name, icon: Icon, target }) => (
    <button 
      onClick={() => { 
        setView(target); 
        setMenuOpen(false); 
        if(target === 'join') {
          setTimeout(() => document.getElementById('join-section')?.scrollIntoView({behavior:'smooth'}), 100);
        } else {
          window.scrollTo({ top: 0, behavior: 'smooth' });
        }
      }}
      className={`w-full text-left px-5 py-4 text-sm flex items-center gap-3 transition-all ${view === target ? 'bg-blue-600 text-white font-bold' : 'hover:bg-slate-100 text-slate-700 font-bold'}`}
    >
      <Icon size={18} /> {name.toUpperCase()}
    </button>
  );

  const emailBody = encodeURIComponent("Bonjour,\n\nJe souhaite rejoindre le Front Antithéiste.\n\nNom :\nPrénom :\nÂge :\nMotivations :");
  const mailtoUrl = `mailto:frontantitheiste@gmail.com?subject=Candidature%20Engagement%20Front%20Antith%C3%A9iste&body=${emailBody}`;

  return (
    <div className="min-h-screen bg-[#fcfcfc] text-slate-900 flex flex-col font-sans">
      <header className="bg-[#020617] shadow-lg sticky top-0 z-50 border-b border-blue-500/10">
        <div className="max-w-7xl mx-auto px-5 py-3.5 flex justify-between items-center">
          <div className="flex items-center space-x-3 cursor-pointer group" onClick={() => {setView('home'); window.scrollTo({top:0, behavior:'smooth'})}}>
            <Zap className="text-blue-500 fill-blue-500" size={26} />
            <h1 className="text-xl font-black text-white tracking-tighter uppercase italic">Front Antithéiste</h1>
          </div>

          <div className="relative">
            <button 
              onClick={() => setMenuOpen(!menuOpen)}
              className={`flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-200 shadow-md ${menuOpen ? 'bg-white text-black scale-95' : 'bg-blue-600 text-white hover:bg-blue-500 active:scale-90'}`}
              aria-label="Menu"
            >
              {menuOpen ? <X size={22} strokeWidth={2.5} /> : <Menu size={22} strokeWidth={2.5} />}
            </button>

            {menuOpen && (
              <div className="absolute right-0 mt-3 w-56 bg-white rounded-xl shadow-xl ring-1 ring-black/5 z-50 overflow-hidden py-1.5 animate-in fade-in zoom-in-95 duration-150 origin-top-right">
                <NavItem name="Accueil" icon={Home} target="home" />
                <NavItem name="Organisation" icon={Users} target="team" />
                <div className="border-t border-slate-100 my-1.5 mx-3"></div>
                <NavItem name="Rejoindre" icon={PlusCircle} target="join" />
              </div>
            )}
          </div>
        </div>
      </header>

      <main className="flex-grow">
        {view === 'home' && (
          <div className="animate-in fade-in duration-500">
            <section className="bg-[#020617] pt-32 pb-32 text-white border-b border-white/10 text-center px-6">
              <div className="max-w-4xl mx-auto">
                <h2 className="text-4xl sm:text-6xl font-black mb-8 leading-tight tracking-tight">
                  ÉRADIQUER LA RELIGION POUR <br/>
                  <span className="text-blue-500 uppercase italic">L'annihilation du dogme.</span>
                </h2>
                <p className="text-lg sm:text-xl text-slate-400 max-w-2xl mx-auto font-medium leading-relaxed">
                  La religion est le moteur principal des conflits, des guerres et de la haine. Nous militons pour son éradication totale afin de garantir un futur libéré du fanatisme.
                </p>
              </div>
            </section>

            <section className="py-24 bg-white">
              <div className="max-w-3xl mx-auto px-6 text-center">
                <AlertTriangle className="w-12 h-12 text-blue-600 mx-auto mb-6" />
                <h3 className="text-3xl font-bold mb-6 italic">Un constat sans appel</h3>
                <p className="text-slate-600 text-lg leading-relaxed mb-8">
                  L'histoire et l'actualité démontrent que les dogmes religieux sont à l'origine de meurtres de masse et de divisions insolubles. Le Front Antithéiste se lève contre cette influence toxique sur l'humanité.
                </p>
                <div className="h-1.5 w-20 bg-blue-600 mx-auto rounded-full"></div>
              </div>
            </section>
          </div>
        )}

        {view === 'team' && (
          <div className="pt-20 pb-20 px-6 animate-in slide-in-from-bottom-4 duration-500">
            <div className="max-w-6xl mx-auto">
              <div className="text-center mb-16">
                <h3 className="text-4xl font-extrabold mb-4 uppercase tracking-tighter italic">Structure de l'Organisation</h3>
                <p className="text-slate-500 font-medium">L'ordre contre l'obscurantisme.</p>
              </div>

              <div className="mb-20">
                <div className="flex items-center justify-center gap-3 mb-10 text-blue-600">
                  <Star size={20} fill="currentColor" />
                  <h4 className="text-xs font-black uppercase tracking-[0.4em]">Haut Commandement</h4>
                  <Star size={20} fill="currentColor" />
                </div>
                
                <div className="grid md:grid-cols-2 gap-8">
                  <div className="bg-white p-12 rounded-[2rem] border-2 border-blue-500 shadow-[0_20px_40px_rgba(37,99,235,0.15)] text-center transition-transform hover:scale-105 relative overflow-hidden">
                    <div className="absolute top-0 right-0 bg-blue-600 text-white px-6 py-2 rounded-bl-2xl font-black text-[10px] uppercase tracking-widest flex items-center gap-2">
                      <ShieldCheck size={14} /> Fondateur
                    </div>
                    <div className="w-20 h-20 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
                      <User className="w-10 h-10" strokeWidth={2.5} />
                    </div>
                    <h5 className="text-3xl font-black uppercase text-slate-900 tracking-tight">Nolan Lamboley</h5>
                    <p className="text-blue-600 font-black text-sm uppercase tracking-[0.2em] mt-3 bg-blue-50 inline-block px-4 py-1 rounded-full">Leader</p>
                  </div>

                  <div className="bg-white p-12 rounded-[2rem] border-2 border-blue-500 shadow-[0_20px_40px_rgba(37,99,235,0.15)] text-center transition-transform hover:scale-105 relative overflow-hidden">
                    <div className="absolute top-0 right-0 bg-blue-600 text-white px-6 py-2 rounded-bl-2xl font-black text-[10px] uppercase tracking-widest flex items-center gap-2">
                      <ShieldCheck size={14} /> Fondateur
                    </div>
                    <div className="w-20 h-20 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
                      <User className="w-10 h-10" strokeWidth={2.5} />
                    </div>
                    <h5 className="text-3xl font-black uppercase text-slate-900 tracking-tight">Liam B.</h5>
                    <p className="text-blue-600 font-black text-sm uppercase tracking-[0.2em] mt-3 bg-blue-50 inline-block px-4 py-1 rounded-full">Leader</p>
                  </div>
                </div>
              </div>

              <div className="mt-10 border-t border-slate-200 pt-16">
                <div className="bg-[#020617] text-white rounded-3xl p-16 text-center shadow-2xl relative overflow-hidden">
                  <div className="absolute top-0 left-0 w-full h-full opacity-5 pointer-events-none flex items-center justify-center">
                    <Zap size={300} />
                  </div>
                  <div className="relative z-10">
                    <div className="text-8xl font-black mb-2 tracking-tighter text-blue-500 italic">2</div>
                    <p className="text-slate-400 font-bold uppercase tracking-widest text-sm text-center">Militants engagés contre le dogme</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        <section id="join-section" className="py-24 bg-white border-t border-slate-100 px-6">
          <div className="max-w-3xl mx-auto text-center flex flex-col items-center">
            <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-600 text-white rounded-xl mb-8 shadow-lg rotate-3">
              <Mail size={32} />
            </div>
            <h3 className="text-3xl font-black mb-6 uppercase tracking-tight italic">Rejoindre les rangs</h3>
            <p className="text-slate-600 text-lg mb-10 leading-relaxed max-w-xl mx-auto font-medium">
              L'engagement se fait par contact direct. Clique sur l'adresse ci-dessous pour nous envoyer ton <span className="font-bold text-slate-900 underline decoration-blue-500">nom, prénom, âge et tes motivations</span>.
            </p>
            
            <div className="w-full flex justify-center">
              <a 
                href={mailtoUrl}
                className="inline-block bg-[#020617] text-white font-black px-8 sm:px-12 py-6 rounded-2xl hover:bg-blue-600 transition-all transform hover:-translate-y-1 shadow-2xl uppercase tracking-widest text-xs sm:text-sm border-b-4 border-blue-900 active:border-b-0 active:translate-y-0 text-center"
              >
                frontantitheiste@gmail.com
              </a>
            </div>
            
            <p className="mt-8 text-slate-400 text-[10px] font-black uppercase tracking-[0.4em]">
              Action Directe via Email
            </p>
          </div>
        </section>
      </main>

      <footer className="bg-[#020617] text-slate-500 py-16 border-t border-white/5">
        <div className="max-w-7xl mx-auto px-6 text-center">
          <p className="text-[10px] uppercase tracking-[0.3em] font-bold">
            © {new Date().getFullYear()} Front Antithéiste — L'annihilation du dogme.
          </p>
        </div>
      </footer>
    </div>
  );
}