import React, { useState, useEffect } from 'react';
import { 
  Shield, 
  Lock, 
  Terminal, 
  User, 
  ChevronRight, 
  Target, 
  Activity, 
  Globe, 
  ExternalLink,
  CheckCircle2,
  Menu,
  X,
  Mail,
  Linkedin
} from 'lucide-react';

const PASSWORD_HASH = "4e38e6e580e03e5c938f3876e93e0988e0e0f3418519e99c1482811a7894a473"; // Hash pour LevelUp@2024!Sec

const hashPassword = async (string) => {
  const utf8 = new TextEncoder().encode(string);
  const hashBuffer = await crypto.subtle.digest('SHA-256', utf8);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
};

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [currentPage, setCurrentPage] = useState('home');
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [password, setPassword] = useState('');
  const [loginError, setLoginError] = useState(false);

  useEffect(() => {
    const auth = sessionStorage.getItem('vault_auth');
    if (auth === 'true') setIsAuthenticated(true);
  }, []);

  const handleLogin = async () => {
    const inputHash = await hashPassword(password);
    if (inputHash === PASSWORD_HASH) {
      setIsAuthenticated(true);
      sessionStorage.setItem('vault_auth', 'true');
    } else {
      setLoginError(true);
      setPassword('');
    }
  };

  const Nav = () => (
    <nav className="fixed top-0 w-full z-50 bg-slate-950/80 backdrop-blur-xl border-b border-slate-800">
      <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
        <div className="flex items-center space-x-3 cursor-pointer" onClick={() => setCurrentPage('home')}>
          <div className="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20">
            <Shield className="text-white w-6 h-6" />
          </div>
          <span className="text-xl font-black tracking-tighter uppercase">LevelUp<span className="text-blue-500">Security</span></span>
        </div>

        <div className="hidden md:flex items-center space-x-8">
          {['home', 'expert', 'services', 'pricing', 'contact'].map((page) => (
            <button 
              key={page}
              onClick={() => setCurrentPage(page)}
              className={`text-sm font-semibold uppercase tracking-widest transition-all ${currentPage === page ? 'text-blue-500 underline underline-offset-8' : 'text-slate-400 hover:text-white'}`}
            >
              {page === 'home' ? 'Accueil' : page}
            </button>
          ))}
          <button onClick={() => {sessionStorage.clear(); window.location.reload();}} className="p-2 text-slate-500 hover:text-red-500">
            <Lock size={18} />
          </button>
        </div>

        <button className="md:hidden text-white" onClick={() => setIsMenuOpen(!isMenuOpen)}>
          {isMenuOpen ? <X /> : <Menu />}
        </button>
      </div>
    </nav>
  );

  const HomePage = () => (
    <div className="pt-32 pb-20 px-6 animate-in fade-in duration-700">
      <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-20 items-center">
        <div>
          <div className="inline-flex items-center space-x-2 bg-blue-500/10 border border-blue-500/20 text-blue-400 px-4 py-1.5 rounded-full text-xs font-bold mb-8 uppercase tracking-widest">
            <Activity size={14} />
            <span>Postures Cyber Senior - Marché Belgique</span>
          </div>
          <h1 className="text-6xl lg:text-8xl font-black mb-8 leading-[0.9] tracking-tighter">
            PROTÉGER <br /> <span className="text-blue-500">L'AVENIR.</span>
          </h1>
          <p className="text-xl text-slate-400 mb-10 max-w-lg leading-relaxed">
            Expertise offensive et gouvernance stratégique pour les entreprises qui ne laissent rien au hasard. TJM Expert : 1.000€.
          </p>
          <div className="flex space-x-4">
            <button onClick={() => setCurrentPage('services')} className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-2xl font-bold transition-all transform hover:-translate-y-1">
              Explorer nos Solutions
            </button>
            <button onClick={() => setCurrentPage('expert')} className="border border-slate-700 hover:border-slate-500 px-8 py-4 rounded-2xl font-bold transition-all">
              Profil de l'Expert
            </button>
          </div>
        </div>

        <div className="relative">
          <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-emerald-600 rounded-3xl blur opacity-20 group-hover:opacity-40 transition duration-1000 group-hover:duration-200"></div>
          <div className="relative bg-slate-900 border border-slate-800 rounded-3xl p-8 font-mono text-sm overflow-hidden shadow-2xl">
            <div className="flex items-center space-x-2 mb-6">
              <div className="w-3 h-3 rounded-full bg-red-500"></div>
              <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
              <div className="w-3 h-3 rounded-full bg-green-500"></div>
              <span className="text-slate-500 ml-4 text-xs">root@levelup-be: ~</span>
            </div>
            <div className="space-y-3">
              <p className="text-emerald-400"># Initializing Security Audit</p>
              <p className="text-slate-300">$ target: be.companies.critical</p>
              <p className="text-slate-300">$ status: <span className="text-blue-400">analyzing_compliance_NIS2</span></p>
              <div className="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden mt-4">
                <div className="bg-blue-500 h-full w-2/3 animate-pulse"></div>
              </div>
              <p className="text-slate-500 text-[10px] mt-6 italic">// Rapport d'expertise disponible dans le Vault client.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  const ExpertPage = () => (
    <div className="pt-32 pb-20 px-6 max-w-7xl mx-auto animate-in slide-in-from-bottom-10 duration-700">
      <h2 className="text-4xl font-black mb-16 uppercase tracking-tighter">L'Expert <span className="text-blue-500">Ludovic</span></h2>
      <div className="grid md:grid-cols-2 gap-16 items-start">
        <div className="space-y-8">
          <p className="text-2xl text-slate-300 leading-relaxed font-light">
            Plus de 10 ans de résilience technique au service des infrastructures critiques belges.
          </p>
          <p className="text-slate-400 text-lg leading-relaxed">
            Analyste senior indépendant, mon approche fusionne la rigueur de l'audit technique (Pentest) avec une vision stratégique C-Level (vCISO). Je ne me contente pas de trouver des failles ; j'élabore la stratégie pour les éradiquer durablement.
          </p>
          <div className="grid grid-cols-2 gap-4">
            <div className="p-6 bg-slate-900 border border-slate-800 rounded-3xl">
              <h4 className="text-3xl font-bold text-blue-500 mb-1">10+</h4>
              <p className="text-xs text-slate-500 uppercase tracking-widest">Années d'Expertise</p>
            </div>
            <div className="p-6 bg-slate-900 border border-slate-800 rounded-3xl">
              <h4 className="text-3xl font-bold text-emerald-500 mb-1">BE/LU</h4>
              <p className="text-xs text-slate-500 uppercase tracking-widest">Focus Marché</p>
            </div>
          </div>
        </div>
        <div className="grid grid-cols-1 gap-4">
           {['Certifié CISSP / OSCP', 'Expertise NIS2 & DORA', 'Indépendance Totale', 'Approche pragmatique'].map((item, idx) => (
             <div key={idx} className="flex items-center space-x-4 p-5 bg-slate-900/50 border border-slate-800 rounded-2xl hover:border-blue-500/50 transition-colors">
               <CheckCircle2 className="text-blue-500" />
               <span className="font-bold text-slate-200">{item}</span>
             </div>
           ))}
        </div>
      </div>
    </div>
  );

  const ServicesPage = () => {
    const services = [
      {
        title: "Pentest Applicatif & Infra",
        desc: "Audit technique profond de vos surfaces d'attaque. Web, Mobile, Cloud.",
        details: ["Test d'intrusion Black Box / Grey Box", "Audit de configuration Cloud", "Rapport de remédiation priorisé"],
        basePrice: 3000,
        unit: "mission 3 jours min."
      },
      {
        title: "vCISO Stratégique",
        desc: "Pilotage de votre sécurité sans embauche fixe. Idéal pour PME en croissance.",
        details: ["Gouvernance NIS2 / ISO27001", "Plan de continuité d'activité (PCA)", "Comité de pilotage mensuel"],
        basePrice: 1000,
        unit: "journée d'expertise"
      },
      {
        title: "Conformité NIS2 / DORA",
        desc: "Mise en conformité réglementaire pour les entités critiques belges.",
        details: ["Gap Analysis complet", "Formalisation des politiques", "Audit de la Supply Chain"],
        basePrice: 5000,
        unit: "forfait accompagnement"
      }
    ];

    return (
      <div className="pt-32 pb-20 px-6 max-w-7xl mx-auto">
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-16">
          <div>
            <h2 className="text-4xl font-black uppercase tracking-tighter mb-4">Solutions <span className="text-blue-500">Elite</span></h2>
            <p className="text-slate-400">Des services modulaires basés sur un TJM Expert de 1.000€.</p>
          </div>
          <div className="mt-4 md:mt-0 px-4 py-2 bg-slate-900 border border-slate-800 rounded-full text-xs font-mono text-slate-500 uppercase">
            Variables : Complexité / Durée / Scope
          </div>
        </div>

        <div className="grid lg:grid-cols-3 gap-8">
          {services.map((s, i) => (
            <div key={i} className="group bg-slate-900/50 border border-slate-800 p-8 rounded-[2rem] flex flex-col hover:border-blue-500/50 transition-all hover:bg-slate-900">
              <h3 className="text-xl font-bold mb-4">{s.title}</h3>
              <p className="text-sm text-slate-400 mb-8 flex-grow leading-relaxed">{s.desc}</p>
              <ul className="space-y-3 mb-10 text-xs text-slate-300">
                {s.details.map((d, j) => (
                  <li key={j} className="flex items-start">
                    <ChevronRight className="w-4 h-4 text-blue-500 mr-2 flex-shrink-0" />
                    {d}
                  </li>
                ))}
              </ul>
              <div className="pt-6 border-t border-slate-800">
                <span className="text-xs text-slate-500 uppercase block mb-1">Dès l'investissement de</span>
                <div className="flex items-baseline space-x-1">
                  <span className="text-3xl font-black text-white">{s.basePrice}€</span>
                  <span className="text-xs text-slate-500">HTVA / {s.unit}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  const ContactPage = () => (
    <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto text-center animate-in zoom-in-95 duration-500">
      <h2 className="text-5xl font-black mb-8 uppercase tracking-tighter">On Sécurise votre <span className="text-blue-500">Futur ?</span></h2>
      <p className="text-xl text-slate-400 mb-12">
        Pas de consultation gratuite, mais une discussion d'expert pour évaluer vos besoins réels.
      </p>
      
      <div className="grid md:grid-cols-2 gap-6 text-left">
        <div className="p-8 bg-slate-900 border border-slate-800 rounded-3xl">
          <Mail className="text-blue-500 mb-4" />
          <h4 className="font-bold mb-2">E-mail Professionnel</h4>
          <p className="text-slate-400 text-sm">ludovic@levelupsecurity.be</p>
        </div>
        <div className="p-8 bg-slate-900 border border-slate-800 rounded-3xl">
          <Linkedin className="text-blue-500 mb-4" />
          <h4 className="font-bold mb-2">Network</h4>
          <p className="text-slate-400 text-sm italic">Profil réservé aux connexions directes.</p>
        </div>
      </div>

      <div className="mt-16 p-10 bg-blue-600 rounded-[3rem] text-white">
        <h3 className="text-3xl font-bold mb-4">Prêt pour un Audit ?</h3>
        <p className="mb-8 opacity-80">Les agendas sont limités. Anticipez votre mise en conformité NIS2 dès maintenant.</p>
        <a href="mailto:ludovic@levelupsecurity.be" className="inline-block bg-slate-950 text-white px-10 py-5 rounded-2xl font-black uppercase tracking-widest hover:scale-105 transition-transform">
          Envoyer un Brief
        </a>
      </div>
    </div>
  );

  if (!isAuthenticated) {
    return (
      <div className="min-h-screen bg-slate-950 flex items-center justify-center p-6 font-sans">
        <div className="max-w-md w-full bg-slate-900 border border-slate-800 p-10 rounded-[2.5rem] shadow-2xl relative overflow-hidden">
          <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-600 to-emerald-600"></div>
          <div className="flex justify-center mb-8">
            <div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-500/20">
              <Lock className="text-white w-8 h-8" />
            </div>
          </div>
          <h2 className="text-2xl font-black text-center mb-2 uppercase tracking-tighter">Vault Accès</h2>
          <p className="text-slate-500 text-center text-xs mb-8 uppercase tracking-widest">LevelUpSecurity System v2.0</p>
          
          <div className="space-y-4">
            <input 
              type="password" 
              value={password}
              onChange={(e) => {setPassword(e.target.value); setLoginError(false);}}
              onKeyPress={(e) => e.key === 'Enter' && handleLogin()}
              placeholder="Code de Déchiffrement" 
              className="w-full bg-slate-950 border border-slate-800 rounded-2xl px-6 py-4 text-center tracking-[0.4em] font-bold focus:outline-none focus:border-blue-500 transition-all"
            />
            <button 
              onClick={handleLogin}
              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-2xl transition-all uppercase tracking-widest text-sm"
            >
              Vérifier l'Identité
            </button>
            {loginError && (
              <p className="text-red-500 text-[10px] text-center font-mono animate-pulse uppercase">Violation d'accès détectée. Log enregistré.</p>
            )}
          </div>
          <div className="mt-8 text-center">
            <p className="text-slate-600 text-[10px] uppercase font-mono">End-to-End Encryption Enabled</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 font-sans selection:bg-blue-500/30">
      <Nav />
      
      <main className="min-h-[calc(100vh-80px)]">
        {currentPage === 'home' && <HomePage />}
        {currentPage === 'expert' && <ExpertPage />}
        {currentPage === 'services' && <ServicesPage />}
        {currentPage === 'pricing' && <ServicesPage />} {/* Combiné pour la clarté */}
        {currentPage === 'contact' && <ContactPage />}
      </main>

      <footer className="py-12 border-t border-slate-900 bg-slate-950 px-6">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center text-xs text-slate-500 font-mono uppercase gap-4">
          <div className="flex items-center space-x-2">
            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
            <span>System Status: Optimal</span>
          </div>
          <span>© 2024 LevelUpSecurity.be | Expert Cyber indépendant (BE)</span>
          <span>TVA 21% non incluse - TJM 1k€</span>
        </div>
      </footer>

      {/* Menu Mobile */}
      {isMenuOpen && (
        <div className="fixed inset-0 z-[60] bg-slate-950 p-8 flex flex-col justify-center animate-in fade-in slide-in-from-right-10">
          <button className="absolute top-8 right-8 text-white" onClick={() => setIsMenuOpen(false)}><X size={32}/></button>
          <div className="flex flex-col space-y-8 text-3xl font-black uppercase tracking-tighter">
            {['home', 'expert', 'services', 'pricing', 'contact'].map(p => (
              <button key={p} onClick={() => {setCurrentPage(p); setIsMenuOpen(false);}} className={currentPage === p ? 'text-blue-500' : 'text-white'}>
                {p}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default App;