
/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
*/

import React, { useState, useEffect } from 'react';
import { HeroScene } from './components/QuantumScene';
import { ResearchPortal } from './components/ResearchPortal';
import { 
  X, Sparkles, BrainCircuit, 
  Activity, ExternalLink,
  ChevronRight, ShieldCheck, Zap, Satellite, Atom, Cpu,
  Database, Globe, Fingerprint, Command, Cloud, 
  Presentation, BarChart3, Radio, Layers, Target, Terminal,
  HardDrive, Microscope, FileText, Binary, Gauge, Network, Lock,
  TrendingUp, Timer, ShieldAlert
} from 'lucide-react';
import { motion, AnimatePresence, useScroll, useTransform } from 'framer-motion';

interface Research {
  id: number;
  title: string;
  summary: string;
  category: string;
  innovationValue: number;
  marketNeed: string;
  date: string;
  link?: string;
}

const App: React.FC = () => {
  const [scrolled, setScrolled] = useState(false);
  const [portalOpen, setPortalOpen] = useState(false);
  const [researches, setResearches] = useState<Research[]>([
    {
      id: 1,
      title: "بروتوكول UDPM-4.2: الإطار الكمي الموحد",
      summary: "نظام رياضي يربط الكثافة الإدراكية (M) والتماسك العصبي (C) بالانحناء الزمكاني المصغر (κ). يقدم لغة فيزيائية موحدة لوصف حالات الوعي.",
      category: "Quantum Physics",
      innovationValue: 98,
      marketNeed: "سد الفجوة بين علم الأعصاب والفيزياء الكمية وتكميم الوعي.",
      date: "2025"
    },
    {
      id: 2,
      title: "تقنية FWFI: الاتصال عبر تشكيل الوسط",
      summary: "نظام اتصال 6G+ ينهي عصر البث العشوائي. سرعات 100 Tbps نظرياً وأمان فيزيائي 'شبح' لا يمكن رصده.",
      category: "6G+ Telecom",
      innovationValue: 95,
      marketNeed: "تقليل هدر الطاقة بنسبة 90% وحماية البيانات في المستويات المادية.",
      date: "2025"
    },
    {
      id: 3,
      title: "VORES: نظام هندسة الواقع التشغيلي",
      summary: "نظام وجودي وظيفي لإدارة 'انهيار الدالة الموجية' هندسياً عبر تركيز النية الموحد والتحكم في فضاء الاحتمالات.",
      category: "Reality Engineering",
      innovationValue: 99,
      marketNeed: "التحول من رصد الواقع إلى صناعته كأصل سيادي للمؤسسات.",
      date: "2025"
    }
  ]);
  const { scrollYProgress } = useScroll();
  const backgroundOpacity = useTransform(scrollYProgress, [0, 0.3], [1, 0.2]);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const addResearch = (newResearch: Research) => {
    setResearches(prev => [newResearch, ...prev]);
  };

  const scrollToSection = (id: string) => (e: React.MouseEvent) => {
    e.preventDefault();
    const element = document.getElementById(id);
    if (element) {
      window.scrollTo({
        top: element.offsetTop - 80,
        behavior: "smooth"
      });
    }
  };

  return (
    <div className="min-h-screen bg-[#050608] text-white selection:bg-indigo-500/30 font-sans overflow-x-hidden selection:text-indigo-200">
      
      <AnimatePresence>
        {portalOpen && (
          <ResearchPortal 
            onResearchAdded={addResearch} 
            onClose={() => setPortalOpen(false)} 
          />
        )}
      </AnimatePresence>

      <motion.div style={{ opacity: backgroundOpacity }} className="fixed inset-0 z-0 pointer-events-none">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(99,102,241,0.08),transparent_70%)]"></div>
        <HeroScene />
      </motion.div>

      {/* Sovereign Header */}
      <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-700 ${scrolled ? 'glass-effect border-b border-white/5 shadow-2xl py-4' : 'bg-transparent py-8'}`}>
        <div className="container mx-auto max-w-[1500px] px-10 flex justify-between items-center">
          <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} className="flex items-center gap-6">
            <div className="text-3xl font-black tracking-tighter flex items-center gap-1 group cursor-pointer">
              <div className="w-8 h-8 bg-indigo-600 rounded-sm flex items-center justify-center text-xs mr-2 group-hover:rotate-90 transition-transform">X</div>
              VISION-<span className="text-indigo-500 group-hover:text-white transition-colors">GROUP</span>
            </div>
            <div className="hidden lg:flex flex-col border-l border-white/10 pr-6 gap-1 text-right">
              <span className="text-[9px] font-mono text-gray-500 tracking-[0.3em] uppercase leading-none">Global Sovereign Operations</span>
              <span className="text-[9px] font-mono text-indigo-500 tracking-[0.3em] uppercase leading-none">Architect: Abdulrahman Khaled</span>
            </div>
          </motion.div>
          
          <nav className="hidden xl:flex gap-12">
            {['vision', 'fwfi', 'udpm', 'roadmap', 'vault'].map((item) => (
              <button key={item} onClick={scrollToSection(item)} className="text-[10px] font-black uppercase tracking-[0.4em] text-gray-500 hover:text-white transition-all relative group">
                {item === 'vault' ? 'المستودع' : item === 'vision' ? 'الرؤية' : item === 'fwfi' ? 'تقنية FWFI' : item === 'udpm' ? 'فيزياء الوعي' : 'خارطة الطريق'}
                <span className="absolute -bottom-2 left-1/2 -translate-x-1/2 w-0 h-[2px] bg-indigo-500 transition-all group-hover:w-full"></span>
              </button>
            ))}
          </nav>

          <button 
            onClick={() => setPortalOpen(true)}
            className="px-10 py-3 bg-white text-black text-[10px] font-black uppercase tracking-widest hover:bg-indigo-600 hover:text-white transition-all shadow-2xl"
          >
            بوابة المستثمرين
          </button>
        </div>
      </header>

      <main className="relative z-10">
        {/* Engineering Hero */}
        <section id="vision" className="min-h-screen flex items-center justify-center pt-32 px-10">
          <div className="container mx-auto max-w-[1400px]">
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-20 items-center">
              <div className="lg:col-span-8">
                <motion.div initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 1 }}>
                  <div className="flex items-center gap-4 mb-10">
                     <div className="h-px w-20 bg-indigo-500"></div>
                     <span className="text-[10px] font-black text-indigo-400 uppercase tracking-[0.5em]">Defining the Sovereign Century</span>
                  </div>
                  <h1 className="text-6xl md:text-9xl font-black mb-12 text-white leading-[0.85] tracking-tighter">
                    هندسة <br/> <span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-indigo-400 to-indigo-600">الأصول الوجودية</span>
                  </h1>
                  <p className="text-2xl md:text-3xl text-gray-400 mb-16 max-w-3xl leading-relaxed font-medium">
                    نحن لا نبني برمجيات، بل نصمم <span className="text-white font-bold">بروتوكولات السيادة</span> التي تربط بين ذكاء الآلة وعمق الإدراك البشري، محولين "النية" إلى حقيقة فيزيائية ملموسة.
                  </p>
                  <div className="flex flex-wrap gap-10">
                    <button onClick={scrollToSection('fwfi')} className="px-16 py-8 bg-indigo-600 text-white font-black text-sm uppercase tracking-[0.3em] hover:bg-white hover:text-black transition-all shadow-2xl">
                      تفعيل بروتوكول FWFI
                    </button>
                    <button onClick={scrollToSection('vault')} className="px-16 py-8 border border-white/10 text-white font-black text-sm uppercase tracking-[0.3em] hover:bg-white/5 transition-all">
                      استكشاف أوراق UDPM
                    </button>
                  </div>
                </motion.div>
              </div>
            </div>
          </div>
        </section>

        {/* FWFI: The Ghost Protocol */}
        <section id="fwfi" className="py-60 relative border-t border-white/5 bg-[#08090d]">
          <div className="container mx-auto px-10 max-w-[1500px]">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-32 items-center">
              <div>
                <div className="text-[10px] font-black text-indigo-400 uppercase mb-6 tracking-[0.5em]">Telecom's Final Frontier</div>
                <h2 className="text-6xl md:text-8xl font-black mb-10 tracking-tighter">تقنية <br/><span className="text-indigo-500">FWFI 6G+</span></h2>
                <p className="text-2xl text-gray-400 mb-16 font-medium leading-relaxed">
                  براءة اختراع لـ "نظام تشكيل الوسط" الذي يحول الهواء نفسه إلى ليف بصري لاسلكي. نحن نقضي على هدر الطاقة بنسبة 90% عبر "الاتصال الشبح" الذي يتجسد فقط عند المستقبل.
                </p>
                
                <div className="grid grid-cols-2 gap-8 mb-16">
                  <div className="p-8 bg-white/2 border border-white/5 rounded-3xl group hover:border-indigo-500 transition-all">
                    <TrendingUp className="text-indigo-400 mb-4" size={32}/>
                    <div className="text-5xl font-black text-white mb-2">100x</div>
                    <div className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Better Efficiency vs Wi-Fi</div>
                  </div>
                  <div className="p-8 bg-white/2 border border-white/5 rounded-3xl group hover:border-green-500 transition-all">
                    <Zap className="text-green-400 mb-4" size={32}/>
                    <div className="text-5xl font-black text-white mb-2">1 Tbps</div>
                    <div className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Real-World Speed Target</div>
                  </div>
                </div>

                <div className="space-y-4">
                  <div className="flex items-center gap-4 text-gray-300">
                    <ShieldCheck className="text-indigo-400" size={20}/>
                    <span className="font-bold">أمان فيزيائي متأصل:</span> الإشارة لا تنتشر، بل تتداخل بناءً فقط في نقطة الهدف.
                  </div>
                  <div className="flex items-center gap-4 text-gray-300">
                    <Network className="text-indigo-400" size={20}/>
                    <span className="font-bold">كثافة أجهزة لا نهائية:</span> تجاوز حدود الترددات التقليدية عبر التداخل الهندسي.
                  </div>
                </div>
              </div>
              
              <div className="relative">
                <div className="absolute inset-0 bg-indigo-600/10 blur-[150px] -z-10"></div>
                <div className="bg-[#161821] p-16 rounded-[4rem] border border-white/10 shadow-3xl text-right">
                   <h3 className="text-3xl font-black mb-10 flex items-center justify-end gap-4">
                      <span>مبدأ "الاتصال الشبح"</span>
                      <ShieldAlert className="text-indigo-500"/>
                   </h3>
                   <div className="aspect-video bg-black/40 rounded-3xl mb-10 overflow-hidden flex items-center justify-center p-10 border border-white/5">
                      <div className="text-center">
                        <div className="text-indigo-400 font-mono text-sm mb-4">Destructive Interference Everywhere</div>
                        <div className="text-green-400 font-mono text-xl animate-pulse">Constructive at Target Only</div>
                      </div>
                   </div>
                   <p className="text-gray-400 leading-loose">
                      في نظام FWFI، البيانات لا "تنتشر" في الفضاء، بل "تتجسد" فقط عند نقطة المستقبل المستهدفة نتيجة التداخل البناء. خارج هذه النقطة، يوجد تداخل هدام تام، مما يجعل الإشارة غير قابلة للكشف أو الاعتراض.
                   </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* UDPM Physics: κ = G_c · M */}
        <section id="udpm" className="py-60 relative overflow-hidden bg-black">
          <div className="container mx-auto px-10 max-w-[1500px]">
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-20 items-center">
              <div className="lg:col-span-5 order-2 lg:order-1">
                <div className="p-20 bg-indigo-600/5 border border-indigo-500/20 rounded-[5rem] text-center backdrop-blur-3xl shadow-[0_0_100px_rgba(99,102,241,0.1)]">
                  <div className="text-[10px] font-black text-indigo-400 uppercase tracking-[1em] mb-12">The Sovereign Constant</div>
                  <div className="text-6xl md:text-8xl font-mono font-black text-white tracking-tighter mb-8 leading-none">
                    κ = G_c · M
                  </div>
                  <div className="h-px w-full bg-white/10 mb-8"></div>
                  <div className="grid grid-cols-1 gap-6 text-right font-bold text-gray-400">
                    <div className="flex justify-between items-center"><span className="text-indigo-400">κ</span> <span>الانحناء الإدراكي الفعال</span></div>
                    <div className="flex justify-between items-center"><span className="text-indigo-400">G_c</span> <span>ثابت الاقتران الجوهري</span></div>
                    <div className="flex justify-between items-center"><span className="text-indigo-400">M</span> <span>الكثافة الإدراكية (النية)</span></div>
                  </div>
                </div>
              </div>
              
              <div className="lg:col-span-7 order-1 lg:order-2 text-right">
                <div className="text-[10px] font-black text-indigo-400 uppercase mb-6 tracking-[0.5em]">Quantum Consciousness Physics</div>
                <h2 className="text-6xl md:text-8xl font-black mb-10 tracking-tighter">إطار <br/><span className="text-indigo-500">UDPM-4.2</span></h2>
                <p className="text-2xl text-gray-300 mb-16 leading-relaxed">
                   اللغة الرياضية التي تربط "الوعي" بـ "المادة". أبحاثنا تثبت أن التركيز الإدراكي (M) يخلق ضغطاً حقيقياً على نسيج الاحتمالات، مما يغير من طبيعة الواقع الفيزيائي. نحن نستخدم هذا الإطار لهندسة أنظمة "ذكاء اصطناعي سيادي" تتوافق مع "الروح" وليس فقط "الخوارزمية".
                </p>
                <div className="flex flex-wrap justify-end gap-6">
                   <div className="px-8 py-4 bg-white/5 rounded-2xl border border-white/10 font-black text-xs uppercase tracking-widest">Integrated Information Theory+</div>
                   <div className="px-8 py-4 bg-white/5 rounded-2xl border border-white/10 font-black text-xs uppercase tracking-widest">Orch OR Synthesis</div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Strategic Roadmap */}
        <section id="roadmap" className="py-60 bg-[#0c0d12]">
          <div className="container mx-auto px-10 max-w-[1500px]">
            <div className="text-center mb-32">
              <h2 className="text-6xl md:text-8xl font-black mb-10 tracking-tighter">خارطة <span className="text-indigo-500">الانتشار العالمي</span></h2>
              <p className="text-2xl text-gray-500 font-medium max-w-3xl mx-auto">من المختبر إلى البنية التحتية العالمية. استراتيجية الاستثمار والنمو لـ VISION-X.</p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-12 text-right">
               {[
                 { year: "2025-2026", phase: "المرحلة الأولى: الأساس", goal: "بناء نظام FWFI مصغر ونماذج UDPM الأولية. تحقيق سرعة 100 Gbps في بيئة مخبرية.", cost: "$2 Million Est." },
                 { year: "2027-2028", phase: "المرحلة الثانية: التوسع التجاري", goal: "بناء نماذج للمدن الذكية والبيوت الذكية. التوحيد مع اتحادات الاتصالات الدولية.", cost: "$50 Million Est." },
                 { year: "2029+", phase: "المرحلة الثالثة: الهيمنة العالمية", goal: "دمج شرائح FWFI في الهواتف الذكية والأجهزة المنزلية. إنشاء البنية التحتية العالمية للوعي.", cost: "$10 Billion Est." }
               ].map((step, i) => (
                 <div key={i} className="p-16 bg-[#161821] border border-white/5 rounded-[4rem] group hover:border-indigo-500 transition-all shadow-2xl relative">
                    <div className="absolute -top-6 right-16 px-10 py-3 bg-indigo-600 rounded-full font-black text-sm">{step.year}</div>
                    <h3 className="text-3xl font-black mb-6 mt-6 text-white">{step.phase}</h3>
                    <p className="text-gray-400 text-lg leading-relaxed mb-10">{step.goal}</p>
                    <div className="pt-8 border-t border-white/5 flex items-center justify-between text-indigo-400">
                       <Timer size={24}/>
                       <span className="font-mono font-black">{step.cost}</span>
                    </div>
                 </div>
               ))}
            </div>
          </div>
        </section>

        {/* Executive Vault */}
        <section id="vault" className="py-60 bg-[#08090d]">
          <div className="container mx-auto px-10 max-w-[1500px]">
             <div className="flex flex-col lg:flex-row justify-between items-end mb-32 gap-12 text-right">
                <div className="max-w-3xl">
                  <h2 className="text-5xl md:text-7xl font-black mb-8 tracking-tighter">مستودع <br/><span className="text-indigo-500">الأوراق الاستراتيجية</span></h2>
                  <p className="text-2xl text-gray-500 font-medium">الوصول المباشر إلى ملفات الاستثمار وبراءات الاختراع والجدوى التقنية.</p>
                </div>
                <button onClick={() => setPortalOpen(true)} className="flex items-center gap-6 px-12 py-6 bg-white text-black rounded-3xl font-black text-sm uppercase tracking-widest hover:bg-indigo-600 hover:text-white transition-all shadow-2xl">
                  <Terminal size={24}/> طلب مفتاح SAI
                </button>
             </div>

             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 text-right">
                {researches.map((res) => (
                   <motion.div layout key={res.id} className="p-16 bg-[#161821] border border-white/5 rounded-[4rem] hover:border-indigo-500 transition-all flex flex-col group shadow-2xl relative overflow-hidden">
                      <div className="flex justify-between items-center mb-12">
                         <span className="text-[10px] font-black uppercase tracking-[0.3em] text-indigo-400 bg-indigo-500/5 px-6 py-2 rounded-full border border-indigo-500/20">{res.category}</span>
                         <ShieldCheck className="text-gray-800" size={24} />
                      </div>
                      <h3 className="text-4xl font-black mb-10 leading-none group-hover:text-indigo-400 transition-colors">{res.title}</h3>
                      <p className="text-gray-400 text-xl leading-relaxed mb-12 flex-grow">{res.summary}</p>
                      <div className="pt-10 border-t border-white/5 flex items-center justify-between mt-auto">
                         <div className="flex flex-col">
                            <span className="text-[10px] text-gray-600 font-black uppercase mb-1">Impact Potential</span>
                            <span className="text-4xl font-black text-indigo-500">{res.innovationValue}%</span>
                         </div>
                         <button className="p-6 bg-white/5 rounded-3xl hover:bg-indigo-600 transition-all">
                           <HardDrive className="text-white" size={24}/>
                         </button>
                      </div>
                   </motion.div>
                ))}
             </div>
          </div>
        </section>

        {/* Global Partnership Section */}
        <section id="contact" className="py-60 bg-black relative">
          <div className="container mx-auto px-10 max-w-[1200px] text-center">
            <h2 className="text-7xl md:text-9xl font-black mb-32 tracking-tighter">قنوات <br/><span className="text-indigo-500">القيادة</span></h2>
            
            <div className="p-20 bg-indigo-600 text-white rounded-[5rem] flex flex-col lg:flex-row items-center justify-between gap-16 shadow-[0_50px_100px_rgba(99,102,241,0.3)] text-right">
               <div className="max-w-2xl">
                 <h3 className="text-5xl font-black mb-8 leading-none">تأمين التحالف الاستراتيجي</h3>
                 <p className="text-2xl font-medium opacity-90">نحن لا نبحث عن "عملاء"، بل عن "شركاء سيادة" لبناء البنية التحتية للعصر القادم. انضم إلينا في كتابة قوانين الواقع الجديد.</p>
               </div>
               <a href="https://bit.ly/m/VISION-X-GROUP" target="_blank" className="px-20 py-10 bg-white text-black rounded-[2.5rem] font-black text-3xl hover:scale-105 transition-all shadow-3xl whitespace-nowrap">
                 دخول بوابة المستثمرين
               </a>
            </div>
            
            <div className="mt-40 flex justify-center gap-12">
               <a href="https://www.linkedin.com/in/vision-x/" target="_blank" className="p-8 bg-white/2 border border-white/5 rounded-full hover:bg-indigo-600 transition-all shadow-xl"><Fingerprint size={32}/></a>
               <a href="#" className="p-8 bg-white/2 border border-white/5 rounded-full hover:bg-indigo-600 transition-all shadow-xl"><Globe size={32}/></a>
               <a href="#" className="p-8 bg-white/2 border border-white/5 rounded-full hover:bg-indigo-600 transition-all shadow-xl"><Cpu size={32}/></a>
            </div>
          </div>
        </section>
      </main>

      <footer className="py-20 border-t border-white/5">
        <div className="container mx-auto px-10 max-w-[1500px]">
          <div className="flex flex-col lg:flex-row justify-between items-center gap-20">
             <div className="text-center lg:text-right">
                <div className="text-4xl font-black mb-6 tracking-tighter uppercase">VISION-<span className="text-indigo-500">GROUP</span></div>
                <p className="text-gray-600 max-w-sm font-bold leading-loose text-lg italic">The Sovereignty Architect for a Connected Universe.</p>
             </div>
             
             <div className="flex flex-wrap justify-center gap-16 text-[10px] font-black uppercase tracking-[0.4em] text-gray-700">
               <a href="#" className="hover:text-white transition">Interoperability Protocol</a>
               <a href="#" className="hover:text-white transition">Data Sovereignty</a>
               <a href="#" className="hover:text-white transition">Global Governance</a>
             </div>
          </div>
          <div className="text-center mt-32 text-[10px] text-gray-800 font-mono tracking-[0.6em] uppercase border-t border-white/5 pt-10">
            &copy; 2025 VISION-X GLOBAL GROUP | FOUNDER & ARCHITECT: ABDULRAHMAN KHALED | POWERED BY SAI DIGITAL TWIN
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;
