import React, { useState, useEffect, FormEvent } from 'react';
import { createRoot } from 'react-dom/client';
import { 
  Cpu, 
  Layout, 
  Terminal, 
  Zap, 
  Shield, 
  Layers, 
  Users, 
  ChevronRight, 
  ExternalLink,
  Github,
  Twitter,
  Activity,
  Code2,
  Box,
  Mail,
  Send,
  MessageSquare,
  Globe,
  ArrowRight,
  User,
  DollarSign,
  Sparkles,
  BrainCircuit,
  Wifi
} from 'lucide-react';

const LOGO_URL = "https://camzun.com/ai-os/assets/images/camzun-logo.png";
const DEV_EMAIL = "nishantkondal@gmail.com";
const DEV_NAME = "Nishant Kondal";

type Page = 'home' | 'about' | 'core' | 'cosmic' | 'roadmap' | 'contact';

const Navbar = ({ activePage, setPage }: { activePage: Page, setPage: (p: Page) => void }) => {
  const [scrolled, setScrolled] = useState(false);

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

  const links: { id: Page, label: string }[] = [
    { id: 'about', label: 'About' },
    { id: 'core', label: 'Core' },
    { id: 'cosmic', label: 'COSMIC' },
    { id: 'roadmap', label: 'Roadmap' },
    { id: 'contact', label: 'Contact' }
  ];

  return (
    <nav className={`fixed top-0 w-full z-50 transition-all duration-300 ${scrolled ? 'glass py-3 shadow-2xl shadow-sky-950/20' : 'bg-transparent py-5'}`}>
      <div className="container mx-auto px-6 flex justify-between items-center">
        <button onClick={() => setPage('home')} className="flex items-center gap-3 group">
          <div className="logo-hover-container">
            <img src={LOGO_URL} alt="Camzun OS Logo" className="w-8 h-8 revolving-logo" />
          </div>
          <span className="text-xl font-bold tracking-tight">Camzun <span className="text-sky-400">OS</span></span>
        </button>
        <div className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-300">
          {links.map(link => (
            <button 
              key={link.id} 
              onClick={() => setPage(link.id)} 
              className={`transition-colors relative py-1 ${activePage === link.id ? 'text-sky-400' : 'hover:text-sky-400'}`}
            >
              {link.label}
              {activePage === link.id && <div className="absolute -bottom-1 left-0 w-full h-0.5 bg-sky-400 rounded-full" />}
            </button>
          ))}
          <button 
            onClick={() => setPage('contact')} 
            className="px-5 py-2 rounded-full bg-sky-500 hover:bg-sky-400 text-white font-semibold transition-all hover:scale-105 active:scale-95 shadow-lg shadow-sky-500/20"
          >
            Invest / Join
          </button>
        </div>
      </div>
    </nav>
  );
};

const SectionHeader = ({ title, subtitle }: { title: string, subtitle?: string }) => (
  <div className="text-center mb-16 page-transition">
    <h2 className="text-4xl md:text-5xl font-extrabold text-white mb-4 tracking-tight">{title}</h2>
    {subtitle && <p className="text-slate-400 max-w-2xl mx-auto text-lg leading-relaxed">{subtitle}</p>}
  </div>
);

const FeatureCard = ({ icon: Icon, title, desc }: { icon: any, title: string, desc: string }) => (
  <div className="glass p-8 rounded-3xl group hover:border-sky-500/50 transition-all duration-300 hover:-translate-y-2">
    <div className="w-12 h-12 bg-sky-500/10 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-sky-500/20 transition-colors">
      <Icon className="text-sky-400 w-6 h-6" />
    </div>
    <h3 className="text-xl font-bold mb-3 text-white">{title}</h3>
    <p className="text-slate-400 leading-relaxed text-sm">{desc}</p>
  </div>
);

const CorePillar = ({ name, description }: { name: string, description: string }) => (
  <div className="flex gap-4 items-start p-6 glass rounded-2xl hover:bg-white/5 transition-all border border-transparent hover:border-sky-500/20">
    <div className="mt-1">
      <div className="w-3 h-3 rounded-full bg-sky-500 shadow-[0_0_12px_#0ea5e9]" />
    </div>
    <div>
      <h4 className="font-bold text-slate-100 text-lg">{name}</h4>
      <p className="text-sm text-slate-400 mt-2 leading-relaxed">{description}</p>
    </div>
  </div>
);

const ContactForm = () => {
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    setLoading(true);
    // Simulate form submission
    setTimeout(() => {
      setLoading(false);
      setSubmitted(true);
    }, 1500);
  };

  if (submitted) {
    return (
      <div className="glass p-12 rounded-[2.5rem] text-center page-transition max-w-xl mx-auto">
        <div className="w-20 h-20 bg-emerald-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
          <Send className="text-emerald-400 w-10 h-10" />
        </div>
        <h3 className="text-3xl font-bold text-white mb-4">Message Sent!</h3>
        <p className="text-slate-400 mb-8">Thank you for reaching out. Nishant Kondal will review your message and get back to you shortly.</p>
        <button onClick={() => setSubmitted(false)} className="text-sky-400 font-semibold flex items-center gap-2 mx-auto hover:gap-3 transition-all">
          Send another message <ArrowRight size={18} />
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="glass p-8 md:p-12 rounded-[2.5rem] space-y-6 page-transition max-w-3xl mx-auto relative overflow-hidden">
      <div className="grid md:grid-cols-2 gap-6">
        <div className="space-y-2">
          <label className="text-sm font-semibold text-slate-400 ml-1">Full Name</label>
          <div className="relative">
            <User className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 w-5 h-5" />
            <input 
              required
              type="text" 
              placeholder="Your Name" 
              className="w-full bg-slate-900/50 border border-white/10 rounded-2xl px-12 py-4 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition-all text-white" 
            />
          </div>
        </div>
        <div className="space-y-2">
          <label className="text-sm font-semibold text-slate-400 ml-1">Email Address</label>
          <div className="relative">
            <Mail className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 w-5 h-5" />
            <input 
              required
              type="email" 
              placeholder="your@email.com" 
              className="w-full bg-slate-900/50 border border-white/10 rounded-2xl px-12 py-4 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition-all text-white" 
            />
          </div>
        </div>
      </div>
      
      <div className="space-y-2">
        <label className="text-sm font-semibold text-slate-400 ml-1">Subject / Inquiry Type</label>
        <select className="w-full bg-slate-900/50 border border-white/10 rounded-2xl px-6 py-4 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition-all text-white appearance-none">
          <option>General Inquiry</option>
          <option>Investment Opportunity</option>
          <option>Developer Contribution</option>
          <option>Media/Press</option>
          <option>Waitlist Interest</option>
        </select>
      </div>

      <div className="space-y-2">
        <label className="text-sm font-semibold text-slate-400 ml-1">Message</label>
        <textarea 
          required
          rows={5}
          placeholder="How can we help you? If you're interested in investing, please let us know your requirements." 
          className="w-full bg-slate-900/50 border border-white/10 rounded-2xl px-6 py-4 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 transition-all text-white resize-none"
        ></textarea>
      </div>

      <button 
        disabled={loading}
        type="submit" 
        className="w-full py-5 rounded-2xl bg-sky-500 hover:bg-sky-400 text-white font-bold transition-all shadow-xl shadow-sky-500/20 flex items-center justify-center gap-3 active:scale-[0.98] disabled:opacity-50"
      >
        {loading ? "Processing..." : <><Send size={18} /> Send Message to Nishant</>}
      </button>

      <p className="text-center text-xs text-slate-500">
        By submitting, you agree to our privacy standards. We'll never share your email.
      </p>
    </form>
  );
};

const App = () => {
  const [page, setPage] = useState<Page>('home');

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [page]);

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 selection:bg-sky-500/30">
      <Navbar activePage={page} setPage={setPage} />

      {/* Main Content Areas */}
      <main className="pt-20">
        {page === 'home' && (
          <section className="relative pt-20 pb-20 overflow-hidden page-transition">
            <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full max-w-7xl pointer-events-none opacity-30">
              <div className="absolute top-20 left-10 w-96 h-96 bg-sky-600/30 rounded-full blur-[128px] animate-pulse" />
              <div className="absolute bottom-20 right-10 w-80 h-80 bg-indigo-600/20 rounded-full blur-[128px] animate-pulse delay-700" />
            </div>

            <div className="container mx-auto px-6 relative z-10 flex flex-col items-center text-center">
              <div className="mb-8">
                <div className="logo-hover-container">
                  <img 
                    src={LOGO_URL} 
                    alt="Camzun OS Logo Large" 
                    className="w-32 h-32 md:w-48 md:h-48 drop-shadow-[0_0_25px_rgba(56,189,248,0.4)] revolving-logo"
                  />
                </div>
              </div>
              
              <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-sky-500/10 border border-sky-500/20 text-sky-400 text-xs font-bold uppercase tracking-widest mb-6">
                <Activity size={14} /> Under Active Development
              </div>

              <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight text-white max-w-4xl leading-tight mb-8">
                The Linux Evolution. <br />
                <span className="gradient-text">Engineered From Scratch.</span>
              </h1>

              <p className="text-lg md:text-xl text-slate-400 max-w-2xl mb-12 leading-relaxed">
                Camzun OS is an independent Linux distribution built upon LFS standards, featuring the adaptive <b>Cami AI Agent</b> and Rust-powered COSMIC environment.
              </p>

              <div className="flex flex-col sm:flex-row gap-4">
                <button onClick={() => setPage('contact')} className="px-8 py-4 rounded-full bg-white text-slate-950 font-bold flex items-center gap-2 hover:bg-sky-50 transition-all hover:scale-105 active:scale-95 group">
                  Join the Alpha Waitlist <ChevronRight size={18} className="group-hover:translate-x-1 transition-transform" />
                </button>
                <button onClick={() => setPage('core')} className="px-8 py-4 rounded-full glass text-white font-bold flex items-center gap-2 hover:bg-white/10 transition-all">
                  View Architecture <Layers size={18} />
                </button>
              </div>

              {/* Cami AI Section Shortcut */}
              <div className="mt-20 glass p-8 rounded-[2.5rem] border-sky-500/20 max-w-3xl w-full flex flex-col md:flex-row items-center gap-8 group">
                <div className="w-24 h-24 bg-gradient-to-tr from-sky-500 to-indigo-600 rounded-3xl flex items-center justify-center shrink-0 shadow-2xl shadow-sky-500/20 group-hover:scale-110 transition-transform duration-500">
                  <BrainCircuit className="text-white w-12 h-12 animate-pulse" />
                </div>
                <div className="text-left">
                  <div className="flex items-center gap-2 mb-2">
                    <span className="px-2 py-0.5 rounded-md bg-sky-500 text-white text-[10px] font-bold uppercase tracking-widest">Core Feature</span>
                    <h3 className="text-xl font-bold text-white">Meet Cami, Your AI Agent</h3>
                  </div>
                  <p className="text-slate-400 text-sm leading-relaxed mb-4">
                    Cami is built directly into the system core. She learns from your daily behaviors, automating repetitive tasks and evolving into your perfect companion.
                  </p>
                  <div className="flex items-center gap-4 text-xs font-bold text-sky-400">
                    <span className="flex items-center gap-1"><Sparkles size={14} /> Adaptive Learning</span>
                    <span className="flex items-center gap-1"><Wifi size={14} /> Cloud-Enhanced Intel</span>
                  </div>
                </div>
              </div>
              
              <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-16 items-center opacity-60 grayscale hover:grayscale-0 transition-all duration-700">
                 <span className="text-xl font-black italic tracking-tighter">LFS</span>
                 <span className="text-xl font-black italic tracking-tighter">BLFS</span>
                 <span className="text-xl font-black italic tracking-tighter">GLFS</span>
                 <span className="text-xl font-black italic tracking-tighter">ALFS</span>
              </div>
            </div>
          </section>
        )}

        {page === 'about' && (
          <section className="py-24 relative page-transition">
            <div className="container mx-auto px-6">
              <SectionHeader 
                title="Built for Every User" 
                subtitle={`Developed by ${DEV_NAME}, Camzun OS is a vision for a performance-first, intelligent desktop. Featuring the Cami AI Agent that gets smarter every time you connect to the internet.`}
              />
              
              <div className="grid md:grid-cols-3 gap-6">
                <FeatureCard 
                  icon={BrainCircuit}
                  title="Cami AI Agent"
                  desc="A deep-integrated neural assistant that learns your keyboard patterns, app usage, and preferred workflows to optimize system resources in real-time."
                />
                <FeatureCard 
                  icon={Zap}
                  title="Native Performance"
                  desc="Compiled from source specifically for your architecture. No bloat, no legacy baggage, just pure speed."
                />
                <FeatureCard 
                  icon={Shield}
                  title="Immutable Core"
                  desc="Built with a focus on stability and security, utilizing modern sandbox techniques to protect your system."
                />
                <FeatureCard 
                  icon={Layout}
                  title="COSMIC Experience"
                  desc="Experience the next generation of desktop computing with the Rust-based COSMIC Desktop Environment."
                />
                <FeatureCard 
                  icon={Terminal}
                  title="Developer First"
                  desc="Pre-configured with cutting-edge toolchains and integrated AI-assisted terminal capabilities powered by Cami."
                />
                <FeatureCard 
                  icon={Users}
                  title="Community Driven"
                  desc="Designed to be a platform where the community helps shape the future. Your feedback directly trains Cami's global models."
                />
              </div>
            </div>
          </section>
        )}

        {page === 'core' && (
          <section className="py-24 bg-slate-900/30 relative overflow-hidden page-transition">
            <div className="container mx-auto px-6">
              <SectionHeader 
                title="The Core DNA" 
                subtitle="From the Linux kernel to the Cami Neural Core, we build every layer with precision and intent."
              />
              <div className="flex flex-col lg:flex-row items-center gap-16">
                <div className="lg:w-1/2 grid sm:grid-cols-1 gap-4">
                  <CorePillar name="LFS (Linux From Scratch)" description="The absolute foundation. Every binary is compiled specifically for your hardware to eliminate generic bloat." />
                  <CorePillar name="Cami Neural Engine" description="An OS-level background service that analyzes system calls to predict user intent and pre-cache resources." />
                  <CorePillar name="ALFS (Automated LFS)" description="Proprietary build scripts that automate the source-to-ISO pipeline, ensuring perfect reproducibility." />
                  <CorePillar name="Rust-Based Security" description="The core OS and DE components utilize Memory Safe Rust to prevent memory leaks and zero-day vulnerabilities." />
                </div>
                
                <div className="lg:w-1/2 relative">
                  <div className="glass rounded-3xl p-8 shadow-2xl border-sky-500/20 font-mono text-sm">
                    <div className="flex gap-1.5 mb-6">
                      <div className="w-3 h-3 rounded-full bg-red-500/50" />
                      <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
                      <div className="w-3 h-3 rounded-full bg-green-500/50" />
                    </div>
                    <div className="space-y-3 text-sky-300">
                      <p className="flex items-center gap-2"><span className="text-emerald-400 font-bold">camzun@os:</span> <span className="text-slate-400">~/cami-core</span></p>
                      <p><span className="text-emerald-400">$</span> cami --status</p>
                      <p className="text-slate-500 italic">>> Cami AI Agent: Active [Online Mode]</p>
                      <p className="text-slate-500 italic">>> Neural Model: v2.1 (Adaptive Learning Active)</p>
                      <p className="text-slate-500 italic">>> Syncing intelligence with Cloud Node... [DONE]</p>
                      <div className="pl-4 border-l border-slate-800 space-y-1 mt-4">
                        <p className="text-emerald-400 font-bold">New Workflow Detected:</p>
                        <p className="text-slate-400">Optimizing 'cargo build' priority...</p>
                        <p className="text-slate-400">Automating daily backups at 04:00...</p>
                      </div>
                      <p className="text-white animate-pulse mt-4 font-bold tracking-widest text-center py-2 bg-sky-500/10 rounded-lg border border-sky-500/20">CAMI IS EVOLVING...</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        )}

        {page === 'cosmic' && (
          <section className="py-24 relative page-transition">
            <div className="container mx-auto px-6 text-center">
              <SectionHeader 
                title="The COSMIC Interface" 
                subtitle="Camzun OS features a custom-tuned version of the COSMIC Desktop Environment, enhanced with Cami's UI suggestions."
              />
              <div className="max-w-5xl mx-auto">
                <div className="relative group">
                   <div className="absolute -inset-1 bg-gradient-to-r from-sky-500 to-indigo-500 rounded-3xl blur opacity-20 group-hover:opacity-40 transition duration-1000"></div>
                   <div className="relative bg-slate-900 rounded-3xl overflow-hidden border border-white/5 shadow-2xl">
                      <div className="aspect-video bg-[url('https://images.unsplash.com/photo-1635830383423-276b65293427?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center flex items-center justify-center group">
                        <div className="glass p-10 rounded-3xl flex flex-col items-center gap-6 group-hover:scale-105 transition-transform">
                           <div className="w-20 h-20 bg-sky-500/20 rounded-2xl flex items-center justify-center">
                             <Box className="text-sky-400 w-12 h-12" />
                           </div>
                           <div className="text-center">
                              <h3 className="text-2xl font-bold text-white mb-2">Refined by Rust & AI</h3>
                              <p className="text-slate-300">Intelligent layouts that adapt to your focus.</p>
                           </div>
                        </div>
                      </div>
                   </div>
                </div>
                
                <div className="grid md:grid-cols-3 gap-8 mt-12 text-left">
                  <div className="glass p-6 rounded-2xl">
                    <h4 className="font-bold text-white mb-2 flex items-center gap-2"><BrainCircuit className="text-sky-400" size={18}/> UI Intelligence</h4>
                    <p className="text-sm text-slate-400">Cami learns your window tiling preferences and automatically arranges them as you work.</p>
                  </div>
                  <div className="glass p-6 rounded-2xl">
                    <h4 className="font-bold text-white mb-2 flex items-center gap-2"><Layout className="text-sky-400" size={18}/> Workflow Focus</h4>
                    <p className="text-sm text-slate-400">Customizable layouts designed for both mouse-heavy and keyboard-driven workflows.</p>
                  </div>
                  <div className="glass p-6 rounded-2xl">
                    <h4 className="font-bold text-white mb-2 flex items-center gap-2"><Shield className="text-sky-400" size={18}/> Secure by Design</h4>
                    <p className="text-sm text-slate-400">Native Wayland support with strictly enforced permission boundaries for all apps.</p>
                  </div>
                </div>
              </div>
            </div>
          </section>
        )}

        {page === 'roadmap' && (
          <section className="py-24 bg-slate-900/30 page-transition">
            <div className="container mx-auto px-6">
              <SectionHeader 
                title="Our Journey" 
                subtitle="From a kernel build to a world-class OS, step by step."
              />
              
              <div className="max-w-4xl mx-auto space-y-12">
                {[
                  { phase: "Phase 1: The Seed", status: "Completed", items: ["Kernel Hardening", "LFS Base System Stabilization", "Cami AI Alpha Architecture"] },
                  { phase: "Phase 2: Growth", status: "In Progress", items: ["COSMIC Desktop Tuning", "Cami Behavioral Learning Core", "ALFS Automation Pipelines"] },
                  { phase: "Phase 3: Community", status: "Upcoming", items: ["Public Alpha Program", "Cloud-Enhanced Intelligence Sync", "Developer Documentation Launch"] },
                  { phase: "Phase 4: Maturity", status: "Future", items: ["Stable 1.0 Release", "Cami Global Neural Network", "AI-Core Hardware Integration"] }
                ].map((step, idx) => (
                  <div key={idx} className="flex flex-col md:flex-row gap-8 relative group">
                    <div className="md:w-1/3 text-right">
                      <h3 className="text-xl font-bold text-white">{step.phase}</h3>
                      <span className={`text-xs font-bold px-3 py-1 mt-2 inline-block rounded-full ${step.status === 'Completed' ? 'bg-emerald-500/20 text-emerald-400' : step.status === 'In Progress' ? 'bg-sky-500/20 text-sky-400 animate-pulse' : 'bg-slate-800 text-slate-500'}`}>
                        {step.status}
                      </span>
                    </div>
                    <div className="hidden md:flex flex-col items-center">
                      <div className={`w-5 h-5 rounded-full border-4 border-slate-900 relative z-10 ${step.status === 'Completed' ? 'bg-emerald-500 shadow-[0_0_10px_#10b981]' : step.status === 'In Progress' ? 'bg-sky-500 shadow-[0_0_10px_#0ea5e9]' : 'bg-slate-700'}`} />
                      {idx !== 3 && <div className="w-1 h-full bg-slate-800/50 my-2 rounded-full" />}
                    </div>
                    <div className="md:w-2/3 glass p-8 rounded-[2rem] group-hover:border-sky-500/30 transition-all group-hover:shadow-2xl shadow-sky-950/20">
                      <ul className="space-y-4">
                        {step.items.map((item, i) => (
                          <li key={i} className="flex items-center gap-3 text-slate-300">
                            <div className="w-1.5 h-1.5 rounded-full bg-sky-500" /> {item}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>
        )}

        {page === 'contact' && (
          <section className="py-24 page-transition relative overflow-hidden">
            <div className="container mx-auto px-6 relative z-10">
              <SectionHeader 
                title="Get in Touch" 
                subtitle={`Contact ${DEV_NAME} directly for investment, collaboration, or to learn more about the Cami AI development.`}
              />
              
              <div className="grid lg:grid-cols-3 gap-12 items-start max-w-6xl mx-auto">
                {/* Contact Info Sidebar */}
                <div className="space-y-6">
                  <div className="glass p-8 rounded-[2rem] border-sky-500/20">
                    <h3 className="text-2xl font-bold text-white mb-6">Developer Details</h3>
                    <div className="space-y-6">
                      <div className="flex gap-4 items-start">
                        <div className="w-10 h-10 rounded-xl bg-sky-500/20 flex items-center justify-center shrink-0">
                          <User className="text-sky-400" size={20} />
                        </div>
                        <div>
                          <p className="text-xs text-slate-500 font-bold uppercase tracking-wider">Lead Developer</p>
                          <p className="text-lg text-white font-semibold">{DEV_NAME}</p>
                        </div>
                      </div>
                      
                      <div className="flex gap-4 items-start">
                        <div className="w-10 h-10 rounded-xl bg-sky-500/20 flex items-center justify-center shrink-0">
                          <Mail className="text-sky-400" size={20} />
                        </div>
                        <div>
                          <p className="text-xs text-slate-500 font-bold uppercase tracking-wider">Direct Email</p>
                          <a href={`mailto:${DEV_EMAIL}`} className="text-lg text-white font-semibold hover:text-sky-400 transition-colors break-all">
                            {DEV_EMAIL}
                          </a>
                        </div>
                      </div>

                      <div className="flex gap-4 items-start">
                        <div className="w-10 h-10 rounded-xl bg-sky-500/20 flex items-center justify-center shrink-0">
                          <Globe className="text-sky-400" size={20} />
                        </div>
                        <div>
                          <p className="text-xs text-slate-500 font-bold uppercase tracking-wider">Website</p>
                          <p className="text-lg text-white font-semibold">camzun.com</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="glass p-8 rounded-[2rem] bg-gradient-to-br from-sky-500/10 to-transparent border-sky-500/20">
                    <div className="flex items-center gap-3 mb-4">
                      <DollarSign className="text-sky-400" size={24} />
                      <h3 className="text-xl font-bold text-white">Investment</h3>
                    </div>
                    <p className="text-slate-400 text-sm leading-relaxed mb-6">
                      Camzun OS is scaling fast. If you are interested in venture opportunities or angel investment to accelerate our LFS/ALFS/Cami AI infrastructure, please reach out directly.
                    </p>
                    <div className="p-4 bg-white/5 rounded-xl border border-white/5 text-xs text-slate-300">
                      Currently seeking Seed-level partnerships for infrastructure expansion.
                    </div>
                  </div>
                </div>

                {/* Form Area */}
                <div className="lg:col-span-2">
                  <ContactForm />
                </div>
              </div>
            </div>
          </section>
        )}
      </main>

      {/* Footer */}
      <footer className="py-20 border-t border-white/5 mt-20 relative overflow-hidden">
        <div className="absolute bottom-0 left-0 w-full h-full bg-gradient-to-t from-sky-950/10 to-transparent pointer-events-none" />
        <div className="container mx-auto px-6 relative z-10">
          <div className="grid md:grid-cols-4 gap-12 mb-16">
            <div className="md:col-span-2">
              <div onClick={() => setPage('home')} className="flex items-center gap-3 mb-6 cursor-pointer group">
                <div className="logo-hover-container">
                  <img src={LOGO_URL} alt="Camzun OS Logo" className="w-10 h-10 revolving-logo" />
                </div>
                <span className="text-2xl font-bold">Camzun <span className="text-sky-400">OS</span></span>
              </div>
              <p className="text-slate-500 max-sm mb-8">
                The next evolution of the Linux desktop, engineered from source and powered by the adaptive Cami AI Agent.
              </p>
              <div className="flex gap-4">
                <a href="#" className="w-12 h-12 rounded-2xl glass flex items-center justify-center text-slate-400 hover:text-white hover:bg-sky-500/20 transition-all border border-transparent hover:border-sky-500/30">
                  <Github size={24} />
                </a>
                <a href="#" className="w-12 h-12 rounded-2xl glass flex items-center justify-center text-slate-400 hover:text-white hover:bg-sky-500/20 transition-all border border-transparent hover:border-sky-500/30">
                  <Twitter size={24} />
                </a>
              </div>
            </div>

            <div>
              <h4 className="font-bold text-white mb-6 uppercase text-xs tracking-widest">Navigation</h4>
              <ul className="space-y-4 text-slate-500 text-sm">
                <li><button onClick={() => setPage('about')} className="hover:text-sky-400 transition-colors">About the Project</button></li>
                <li><button onClick={() => setPage('core')} className="hover:text-sky-400 transition-colors">Core Technology</button></li>
                <li><button onClick={() => setPage('cosmic')} className="hover:text-sky-400 transition-colors">COSMIC Desktop</button></li>
                <li><button onClick={() => setPage('roadmap')} className="hover:text-sky-400 transition-colors">Project Roadmap</button></li>
              </ul>
            </div>

            <div>
              <h4 className="font-bold text-white mb-6 uppercase text-xs tracking-widest">Connect</h4>
              <ul className="space-y-4 text-slate-500 text-sm">
                <li><button onClick={() => setPage('contact')} className="hover:text-sky-400 transition-colors">Contact Form</button></li>
                <li><a href={`mailto:${DEV_EMAIL}`} className="hover:text-sky-400 transition-colors">Email Developer</a></li>
                <li><a href="https://camzun.com" target="_blank" className="hover:text-sky-400 transition-colors">Camzun.com</a></li>
              </ul>
            </div>
          </div>
          
          <div className="flex flex-col md:flex-row justify-between items-center gap-6 pt-12 border-t border-white/5 text-slate-600 text-sm">
            <p>&copy; {new Date().getFullYear()} Camzun OS. Featuring Cami AI. All rights reserved.</p>
            <p>Developed with passion by <span className="text-slate-400 font-semibold">{DEV_NAME}</span></p>
          </div>
        </div>
      </footer>
    </div>
  );
};

const root = createRoot(document.getElementById('root')!);
root.render(<App />);