import React, { useState, useEffect } from 'react';
import { 
  Code2, 
  Terminal, 
  Cpu, 
  Zap, 
  Shield, 
  Search, 
  GitBranch, 
  Database, 
  FileText, 
  Layers, 
  ArrowRight, 
  Menu, 
  X, 
  ChevronDown, 
  ChevronUp, 
  Check, 
  Github, 
  Slack, 
  Twitter, 
  Linkedin 
} from 'lucide-react';

// --- Components ---

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  return (
    <nav className={`fixed top-0 w-full z-50 transition-all duration-300 ${scrolled ? 'bg-black/80 backdrop-blur-md border-b border-white/10' : 'bg-transparent'}`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
              <Zap className="w-5 h-5 text-white" fill="currentColor" />
            </div>
            <span className="font-bold text-xl tracking-tight text-white">Neuron</span>
          </div>
          
          <div className="hidden md:block">
            <div className="ml-10 flex items-baseline space-x-8">
              {['Solutions', 'Docs', 'Pricing', 'Resources', 'Company'].map((item) => (
                <a key={item} href="#" className="text-gray-300 hover:text-white transition-colors px-3 py-2 rounded-md text-sm font-medium">
                  {item}
                </a>
              ))}
            </div>
          </div>

          <div className="hidden md:flex items-center gap-4">
            <button className="text-gray-300 hover:text-white font-medium text-sm">Sign In</button>
            <button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full text-sm font-medium transition-all shadow-[0_0_15px_rgba(37,99,235,0.5)] hover:shadow-[0_0_25px_rgba(37,99,235,0.6)]">
              Try Free
            </button>
          </div>

          <div className="-mr-2 flex md:hidden">
            <button onClick={() => setIsOpen(!isOpen)} className="text-gray-400 hover:text-white p-2">
              {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile menu */}
      {isOpen && (
        <div className="md:hidden bg-black/95 backdrop-blur-xl border-b border-white/10">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            {['Solutions', 'Docs', 'Pricing', 'Resources', 'Company'].map((item) => (
              <a key={item} href="#" className="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                {item}
              </a>
            ))}
            <div className="mt-4 flex flex-col gap-2 px-3">
              <button className="w-full text-left text-gray-300 hover:text-white py-2">Sign In</button>
              <button className="w-full bg-blue-600 text-white py-2 rounded-lg">Try Free</button>
            </div>
          </div>
        </div>
      )}
    </nav>
  );
};

const CodeWindow = () => (
  <div className="relative rounded-xl overflow-hidden bg-[#0a0a0a] border border-white/10 shadow-2xl w-full max-w-4xl mx-auto transform hover:scale-[1.01] transition-transform duration-500">
    {/* Window Controls */}
    <div className="flex items-center gap-2 px-4 py-3 bg-white/5 border-b border-white/5">
      <div className="flex gap-1.5">
        <div className="w-3 h-3 rounded-full bg-red-500/80" />
        <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
        <div className="w-3 h-3 rounded-full bg-green-500/80" />
      </div>
      <div className="ml-4 text-xs text-gray-500 font-mono">optimize_db.ts — Neuron Agent</div>
    </div>

    {/* Content */}
    <div className="grid grid-cols-1 md:grid-cols-2">
      {/* Code Area */}
      <div className="p-6 font-mono text-xs sm:text-sm overflow-hidden">
        <div className="flex gap-4">
          <div className="text-gray-600 select-none flex flex-col text-right">
            {[...Array(12)].map((_, i) => <span key={i}>{i + 1}</span>)}
          </div>
          <div className="flex-1">
            <p className="text-purple-400">import <span className="text-white">{`{ Pool }`}</span> from <span className="text-green-400">'pg'</span>;</p>
            <p className="text-gray-500 mt-2">// Initialize connection pool with optimization limits</p>
            <p className="text-blue-400">const<span className="text-white"> pool = </span><span className="text-purple-400">new</span> <span className="text-yellow-300">Pool</span><span className="text-white">({`{`}</span></p>
            <p className="pl-4 text-white">max: <span className="text-orange-400">20</span>,</p>
            <p className="pl-4 text-white">idleTimeoutMillis: <span className="text-orange-400">30000</span>,</p>
            <p className="pl-4 text-white">connectionTimeoutMillis: <span className="text-orange-400">2000</span>,</p>
            <p className="text-white">{`}`});</p>
            <p className="mt-4 text-blue-400">async function <span className="text-yellow-300">queryDB</span><span className="text-white">(sql, params) {`{`}</span></p>
            <p className="pl-4 text-purple-400">const <span className="text-white">start = Date.</span><span className="text-yellow-300">now</span><span className="text-white">();</span></p>
            <p className="pl-4 text-purple-400">const <span className="text-white">res = </span><span className="text-purple-400">await</span> <span className="text-white">pool.</span><span className="text-yellow-300">query</span><span className="text-white">(sql, params);</span></p>
            <p className="pl-4 text-gray-500 opacity-0 animate-pulse delay-1000">... optimization pending</p>
          </div>
        </div>
      </div>

      {/* AI Chat Area */}
      <div className="border-l border-white/5 bg-white/[0.02] p-4 flex flex-col justify-between">
        <div className="space-y-4">
          <div className="flex gap-3">
            <div className="w-8 h-8 rounded-lg bg-blue-600/20 flex items-center justify-center shrink-0">
              <Zap className="w-4 h-4 text-blue-400" fill="currentColor" />
            </div>
            <div className="text-sm text-gray-300">
              <p>I noticed a potential bottleneck in your connection pool configuration.</p>
            </div>
          </div>
          <div className="flex gap-3">
            <div className="w-8 h-8 rounded-lg bg-blue-600/20 flex items-center justify-center shrink-0">
              <Zap className="w-4 h-4 text-blue-400" fill="currentColor" />
            </div>
            <div className="text-sm text-gray-300">
              <p>Increasing <code className="bg-white/10 px-1 rounded">idleTimeoutMillis</code> might reduce latency during high traffic bursts. Should I refactor?</p>
            </div>
          </div>
        </div>
        
        <div className="mt-6 relative">
          <input 
            type="text" 
            placeholder="Ask Neuron to refactor..." 
            className="w-full bg-black/50 border border-white/10 rounded-lg py-2.5 px-4 text-sm text-white focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/50 transition-all placeholder:text-gray-600"
          />
          <div className="absolute right-2 top-2 p-0.5 bg-blue-600 rounded text-white cursor-pointer hover:bg-blue-500">
            <ArrowRight className="w-3.5 h-3.5" />
          </div>
        </div>
      </div>
    </div>
  </div>
);

const Logo = ({ name }) => (
  <div className="flex items-center gap-2 opacity-50 hover:opacity-100 transition-opacity grayscale hover:grayscale-0 cursor-pointer">
    <div className="w-6 h-6 rounded-full bg-white/20" />
    <span className="font-semibold text-white/80">{name}</span>
  </div>
);

const FeatureItem = ({ icon: Icon, title, description }) => (
  <div className="flex gap-4 p-4 rounded-xl hover:bg-white/5 transition-colors group cursor-default">
    <div className="w-10 h-10 rounded-lg bg-blue-900/20 flex items-center justify-center shrink-0 group-hover:bg-blue-600/20 transition-colors">
      <Icon className="w-5 h-5 text-blue-400 group-hover:text-blue-300" />
    </div>
    <div>
      <h3 className="text-white font-medium mb-1">{title}</h3>
      <p className="text-sm text-gray-400 leading-relaxed">{description}</p>
    </div>
  </div>
);

const LargeFeature = ({ title, description, imageContent, reversed = false }) => (
  <div className={`flex flex-col lg:flex-row items-center gap-12 lg:gap-20 py-16 ${reversed ? 'lg:flex-row-reverse' : ''}`}>
    <div className="flex-1 space-y-6">
      <h2 className="text-3xl md:text-4xl font-bold text-white leading-tight">
        {title}
      </h2>
      <p className="text-lg text-gray-400 leading-relaxed">
        {description}
      </p>
      <div className="pt-4">
        <button className="text-blue-400 hover:text-blue-300 font-medium flex items-center gap-2 group">
          Learn more <ArrowRight className="w-4 h-4 transform group-hover:translate-x-1 transition-transform" />
        </button>
      </div>
    </div>
    <div className="flex-1 w-full">
      <div className="relative group">
        <div className="absolute -inset-1 bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-1000"></div>
        <div className="relative bg-[#0F1115] border border-white/10 rounded-xl p-6 md:p-8 min-h-[300px] flex items-center justify-center">
           {imageContent}
        </div>
      </div>
    </div>
  </div>
);

const Accordion = ({ question, answer }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="border-b border-white/10 last:border-0">
      <button 
        className="w-full py-6 flex items-center justify-between text-left focus:outline-none group"
        onClick={() => setIsOpen(!isOpen)}
      >
        <span className="text-lg font-medium text-gray-200 group-hover:text-white transition-colors">{question}</span>
        <div className={`w-8 h-8 rounded-full border border-white/10 flex items-center justify-center transition-all duration-300 ${isOpen ? 'bg-blue-600 border-blue-600 rotate-180' : 'bg-transparent'}`}>
          <ChevronDown className={`w-4 h-4 ${isOpen ? 'text-white' : 'text-gray-400'}`} />
        </div>
      </button>
      <div className={`overflow-hidden transition-all duration-300 ease-in-out ${isOpen ? 'max-h-96 opacity-100 pb-6' : 'max-h-0 opacity-0'}`}>
        <p className="text-gray-400 leading-relaxed">
          {answer}
        </p>
      </div>
    </div>
  );
};

// --- Main App Component ---

const App = () => {
  return (
    <div className="min-h-screen bg-black text-white font-sans selection:bg-blue-500/30">
      <Navbar />

      {/* Hero Section */}
      <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
        {/* Background Glows */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] bg-blue-600/20 rounded-full blur-[120px] -z-10 pointer-events-none" />
        <div className="absolute bottom-0 right-0 w-[800px] h-[600px] bg-purple-900/10 rounded-full blur-[120px] -z-10 pointer-events-none" />

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 mb-8 backdrop-blur-sm">
            <span className="flex h-2 w-2 relative">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
              <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
            </span>
            <span className="text-xs font-medium text-blue-200">New: Neuron 2.0 is now available</span>
          </div>

          <h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-8 bg-clip-text text-transparent bg-gradient-to-b from-white via-white to-gray-400">
            Build and ship faster<br />
            with Your AI partner
          </h1>
          
          <p className="max-w-2xl mx-auto text-lg md:text-xl text-gray-400 mb-10 leading-relaxed">
            Neuron helps you visualize code structure, catch errors instantly, and accelerate your workflow from idea to deploy.
          </p>

          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-20">
            <button className="w-full sm:w-auto px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-full font-semibold transition-all shadow-[0_0_20px_rgba(37,99,235,0.4)] hover:shadow-[0_0_30px_rgba(37,99,235,0.6)] hover:-translate-y-1">
              Get started for free
            </button>
            <button className="w-full sm:w-auto px-8 py-4 bg-white/5 hover:bg-white/10 border border-white/10 text-white rounded-full font-semibold transition-all backdrop-blur-sm">
              View Documentation
            </button>
          </div>

          {/* Code Window Mockup */}
          <div className="mx-auto px-4 animate-in fade-in slide-in-from-bottom-10 duration-1000">
            <CodeWindow />
          </div>

          {/* Social Proof */}
          <div className="mt-24 pt-10 border-t border-white/5">
            <p className="text-sm text-gray-500 mb-8">TRUSTED BY ENGINEERING TEAMS AT</p>
            <div className="flex flex-wrap justify-center gap-8 md:gap-16">
              <Logo name="OdysseyLabs" />
              <Logo name="Kintone" />
              <Logo name="Stacked Lab" />
              <Logo name="Magnolia" />
              <Logo name="WarpSpeed" />
            </div>
          </div>
        </div>
      </section>

      {/* Features List Section */}
      <section className="py-24 bg-[#050505] relative">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col lg:flex-row gap-16">
            <div className="lg:w-1/3">
              <div className="sticky top-32">
                <h2 className="text-3xl md:text-4xl font-bold text-white mb-6 leading-tight">
                  Your AI coding<br />
                  <span className="text-blue-500">partner for...</span>
                </h2>
                <p className="text-gray-400 text-lg leading-relaxed">
                  Everything from simple bug fixes to complex architectural changes. Neuron understands your codebase deeply.
                </p>
              </div>
            </div>
            
            <div className="lg:w-2/3 grid grid-cols-1 md:grid-cols-2 gap-6">
              <FeatureItem 
                icon={Database} 
                title="Database Optimization" 
                description="Analyze query performance and suggest indexing strategies automatically." 
              />
              <FeatureItem 
                icon={Zap} 
                title="Performance Tuning" 
                description="Identify bottlenecks in your frontend renders and backend logic." 
              />
              <FeatureItem 
                icon={Layers} 
                title="Complex Refactors" 
                description="Safely rename variables, extract components, and modernize legacy code." 
              />
              <FeatureItem 
                icon={Shield} 
                title="Code Reviews" 
                description="Get instant feedback on pull requests with security and style checks." 
              />
              <FeatureItem 
                icon={Terminal} 
                title="Debugging" 
                description="Paste stack traces and get root cause analysis with fix suggestions." 
              />
              <FeatureItem 
                icon={FileText} 
                title="Documentation" 
                description="Generate comprehensive API docs and READMEs from your source code." 
              />
              <FeatureItem 
                icon={Code2} 
                title="Feature Development" 
                description="Describe a feature and get a complete implementation plan and boilerplate." 
              />
              <FeatureItem 
                icon={GitBranch} 
                title="Framework Migrations" 
                description="Assist in upgrading dependencies or moving to new frameworks safely." 
              />
            </div>
          </div>
        </div>
      </section>

      {/* Detailed Features Section */}
      <section className="py-24 relative overflow-hidden">
        {/* Ambient background light */}
        <div className="absolute top-1/4 left-0 w-[500px] h-[500px] bg-blue-900/10 rounded-full blur-[120px] -z-10" />

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-20">
            <h2 className="text-sm font-semibold text-blue-400 tracking-wide uppercase mb-3">Capabilities</h2>
            <h3 className="text-3xl md:text-5xl font-bold text-white">Why Developers Choose Neuron</h3>
          </div>

          <LargeFeature 
            title="Understand every line you write"
            description="Neuron builds a comprehensive semantic graph of your project. It knows where variables are defined, how functions are used, and understands the business logic behind the code."
            imageContent={
              <div className="w-full h-full flex flex-col gap-3">
                <div className="flex items-center gap-2 text-xs text-gray-500 font-mono border-b border-white/10 pb-2">
                  <Search className="w-3 h-3" /> Semantic Search
                </div>
                <div className="space-y-2 font-mono text-xs">
                  <div className="bg-blue-500/10 border-l-2 border-blue-500 p-2 text-gray-300">
                    <span className="text-blue-400">def</span> calculate_metrics(data):
                  </div>
                  <div className="pl-4 text-gray-500"># references: 12 files</div>
                  <div className="pl-4 text-gray-500"># complexity: O(n)</div>
                </div>
                <div className="mt-auto bg-white/5 rounded p-3 text-xs text-gray-300">
                  <span className="text-blue-400 font-bold">Analysis:</span> Function handles critical reporting logic. Ensure null checks on 'data' param.
                </div>
              </div>
            }
          />

          <LargeFeature 
            reversed
            title="Turn ideas into working code"
            description="Describe your intent in natural language. Neuron plans the changes, writes the code, creates necessary files, and even runs tests to verify the implementation."
            imageContent={
              <div className="w-full h-full flex flex-col">
                <div className="flex gap-2 items-center mb-4">
                  <div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center">
                    <Zap className="w-3 h-3 text-white" fill="currentColor" />
                  </div>
                  <span className="text-sm font-medium text-white">Generating components...</span>
                </div>
                <div className="space-y-2 flex-1">
                  <div className="h-2 bg-white/10 rounded w-3/4 animate-pulse"></div>
                  <div className="h-2 bg-white/10 rounded w-1/2 animate-pulse"></div>
                  <div className="h-2 bg-white/10 rounded w-5/6 animate-pulse"></div>
                </div>
                <div className="mt-4 flex gap-2">
                  <div className="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded flex items-center gap-1">
                    <Check className="w-3 h-3" /> Tests Passed
                  </div>
                </div>
              </div>
            }
          />

          <LargeFeature 
            title="Built to remember what you build"
            description="Neuron maintains context across sessions. It remembers architectural decisions, coding patterns, and previous refactors, ensuring consistency as your team grows."
            imageContent={
              <div className="grid grid-cols-2 gap-3 w-full">
                <div className="col-span-2 bg-white/5 rounded p-3 border border-white/5">
                  <div className="text-xs text-gray-500 mb-1">Context Memory</div>
                  <div className="text-sm text-gray-300">Project: E-commerce Core</div>
                </div>
                <div className="bg-white/5 rounded p-3 border border-white/5">
                  <div className="text-xs text-gray-500 mb-1">Style</div>
                  <div className="text-xs text-blue-300">Functional</div>
                </div>
                <div className="bg-white/5 rounded p-3 border border-white/5">
                  <div className="text-xs text-gray-500 mb-1">Framework</div>
                  <div className="text-xs text-blue-300">Next.js 14</div>
                </div>
                <div className="col-span-2 bg-blue-600/10 rounded p-3 border border-blue-500/20 flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></div>
                  <div className="text-xs text-blue-200">Active Context: Auth Migration</div>
                </div>
              </div>
            }
          />
        </div>
      </section>

      {/* Integrations Section */}
      <section className="py-20 text-center">
        <div className="max-w-7xl mx-auto px-4">
          <h2 className="text-3xl font-bold text-white mb-12">Available on your favorite tools...</h2>
          
          <div className="flex flex-wrap justify-center gap-6">
            {[Github, Terminal, Code2, Layers, Cpu, Database].map((Icon, idx) => (
              <div key={idx} className="w-16 h-16 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 flex items-center justify-center transition-all hover:scale-110 hover:border-blue-500/30 cursor-pointer shadow-lg group">
                <Icon className="w-8 h-8 text-gray-400 group-hover:text-blue-400 transition-colors" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-24 bg-[#050505]">
        <div className="max-w-3xl mx-auto px-4 sm:px-6">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-12 text-center">Frequently Asked Questions</h2>
          <div className="space-y-2">
            <Accordion 
              question="How is data privacy handled?" 
              answer="Your code stays on your machine or private cloud. Neuron processes code snippets transiently and is SOC2 Type II compliant. We do not train on customer data without explicit opt-in."
            />
            <Accordion 
              question="Does Neuron replace developers?" 
              answer="No. Neuron is designed to be a force multiplier for developers, handling repetitive tasks, catching errors, and generating boilerplate so you can focus on high-level problem solving."
            />
            <Accordion 
              question="What languages does Neuron support?" 
              answer="Neuron has first-class support for JavaScript/TypeScript, Python, Go, Rust, Java, and C++. Support for Ruby and PHP is currently in beta."
            />
            <Accordion 
              question="Can I use Neuron offline?" 
              answer="Yes! Neuron offers a local model option that runs entirely on your device for maximum privacy and zero latency, though it requires a machine with significant VRAM."
            />
          </div>
          <div className="mt-12 text-center">
            <p className="text-gray-400">Have more questions? <a href="#" className="text-blue-400 hover:text-blue-300">Contact us</a></p>
          </div>
        </div>
      </section>

      {/* CTA Footer Section */}
      <section className="py-24 px-4">
        <div className="max-w-5xl mx-auto relative">
           {/* CTA Card Glow */}
           <div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 rounded-3xl blur opacity-30"></div>
           
           <div className="relative bg-gradient-to-b from-[#111] to-black border border-white/10 rounded-3xl p-12 md:p-20 text-center overflow-hidden">
             {/* Inner decorative elements */}
             <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-500 to-transparent opacity-50"></div>
             
             <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">Ship better code with Neuron</h2>
             <p className="text-lg text-gray-400 mb-10 max-w-2xl mx-auto">Join thousands of developers who are coding faster and happier.</p>
             
             <button className="px-10 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-full font-bold text-lg transition-all shadow-[0_0_40px_rgba(37,99,235,0.5)] hover:shadow-[0_0_60px_rgba(37,99,235,0.7)] hover:-translate-y-1">
               Get Started Free
             </button>
           </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-white/10 bg-black pt-16 pb-8 relative overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
            <div className="col-span-2 md:col-span-1">
              <div className="flex items-center gap-2 mb-4">
                <div className="w-6 h-6 bg-blue-600 rounded flex items-center justify-center">
                  <Zap className="w-3 h-3 text-white" fill="currentColor" />
                </div>
                <span className="font-bold text-xl text-white">Neuron</span>
              </div>
              <p className="text-gray-500 text-sm mb-6">
                Your intelligent coding companion for the modern web.
              </p>
              <div className="flex gap-4">
                <Twitter className="w-5 h-5 text-gray-400 hover:text-white cursor-pointer" />
                <Github className="w-5 h-5 text-gray-400 hover:text-white cursor-pointer" />
                <Linkedin className="w-5 h-5 text-gray-400 hover:text-white cursor-pointer" />
                <Slack className="w-5 h-5 text-gray-400 hover:text-white cursor-pointer" />
              </div>
            </div>
            
            <div>
              <h4 className="font-semibold text-white mb-4">Product</h4>
              <ul className="space-y-2 text-sm text-gray-400">
                <li><a href="#" className="hover:text-blue-400 transition-colors">Features</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">Integrations</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">Pricing</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">Changelog</a></li>
              </ul>
            </div>

            <div>
              <h4 className="font-semibold text-white mb-4">Resources</h4>
              <ul className="space-y-2 text-sm text-gray-400">
                <li><a href="#" className="hover:text-blue-400 transition-colors">Documentation</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">API Reference</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">Community</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">Blog</a></li>
              </ul>
            </div>

            <div>
              <h4 className="font-semibold text-white mb-4">Company</h4>
              <ul className="space-y-2 text-sm text-gray-400">
                <li><a href="#" className="hover:text-blue-400 transition-colors">About</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">Careers</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">Legal</a></li>
                <li><a href="#" className="hover:text-blue-400 transition-colors">Contact</a></li>
              </ul>
            </div>
          </div>
          
          <div className="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4">
            <p className="text-gray-600 text-sm">© 2024 Neuron Inc. All rights reserved.</p>
            <div className="flex gap-6 text-sm text-gray-600">
              <a href="#" className="hover:text-gray-400">Privacy Policy</a>
              <a href="#" className="hover:text-gray-400">Terms of Service</a>
            </div>
          </div>
        </div>

        {/* Large Watermark Text */}
        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 text-[15vw] font-bold text-white/[0.02] pointer-events-none select-none leading-none -mb-10 tracking-tighter">
          NEURON
        </div>
      </footer>
    </div>
  );
};

export default App;
<!-- PageDrop Unified FAB Widget -->
<link rel="stylesheet" href="https://pagedrop.io/fab-widget.css?v=6">


<!-- Like Prompt Popup (shown after 10s for Explore content) -->
<div id="pagedrop-like-prompt">
  <div id="pagedrop-like-prompt-content">
    <button id="pagedrop-like-prompt-close" aria-label="Close">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"/>
        <line x1="6" y1="6" x2="18" y2="18"/>
      </svg>
    </button>
    <div id="pagedrop-like-prompt-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
      </svg>
    </div>
    <p id="pagedrop-like-prompt-text">Enjoying this? A quick like helps keep it online longer.</p>
  </div>
  <div id="pagedrop-like-prompt-arrow"></div>
</div>


<!-- Expiration Warning Popup (only shown for content expiring soon) -->
<div id="pagedrop-expiry-popup">
  <div id="pagedrop-expiry-popup-content">
    <div id="pagedrop-expiry-popup-icon">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/>
        <polyline points="12,6 12,12 16,14"/>
      </svg>
    </div>
    <h3 id="pagedrop-expiry-popup-title">Content Expiring Soon</h3>
    <p id="pagedrop-expiry-popup-desc">
      This content will be deleted in less than 24 hours. If you like it, you can extend its lifetime to keep it available.
    </p>
    <div id="pagedrop-expiry-popup-actions">
      <button class="pagedrop-popup-btn pagedrop-popup-btn-secondary" id="pagedrop-expiry-dismiss">
        Dismiss
      </button>
      <button class="pagedrop-popup-btn pagedrop-popup-btn-primary" id="pagedrop-expiry-extend">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 5v14m-7-7h14"/>
        </svg>
        Extend Lifetime
      </button>
    </div>
  </div>
</div>

<div id="pagedrop-fab-container">
  <!-- Expanded Panel (appears above pill on hover/click) -->
  <div id="pagedrop-fab-expanded">
    
    <div class="pagedrop-fab-row">
      <span class="pagedrop-fab-label"><span id="pagedrop-like-count-expanded">0</span> likes</span>
      <button id="pagedrop-like-btn" class="pagedrop-fab-btn pagedrop-fab-btn-like">
        <svg id="pagedrop-like-icon-btn" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
        </svg>
        <span id="pagedrop-like-text">Like</span>
      </button>
    </div>
    
    <div class="pagedrop-fab-row pagedrop-fab-row-info">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pagedrop-fab-row-icon">
        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
        <circle cx="12" cy="12" r="3"/>
      </svg>
      <span class="pagedrop-fab-label"><span id="pagedrop-view-count-expanded">1</span> view</span>
    </div>
    <div class="pagedrop-fab-row">
      <span class="pagedrop-fab-label">10 days left</span>
      <button id="pagedrop-extend-btn" class="pagedrop-fab-btn pagedrop-fab-btn-extend">
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 5v14m-7-7h14"/>
        </svg>
        Extend
      </button>
    </div>
    <div class="pagedrop-fab-cta">
      Like what you see? <a href="https://pagedrop.io" target="_blank" rel="noopener">Create your own</a>
    </div>
    <div class="pagedrop-fab-report">
      <a href="#" id="pagedrop-report-btn">Report this content</a>
    </div>
  </div>

  <!-- Collapsed Pill (always visible) -->
  <div id="pagedrop-fab-pill" class="">
    <a href="https://pagedrop.io" target="_blank" rel="noopener" class="pagedrop-fab-logo" title="Hosted on PageDrop" onclick="event.stopPropagation();">
      <img src="https://pagedrop.io/icon.png" alt="PageDrop" />
    </a>
    <div class="pagedrop-fab-divider"></div>
    <div id="pagedrop-fab-views" class="pagedrop-fab-views" title="1 views">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
        <circle cx="12" cy="12" r="3"/>
      </svg>
      <span id="pagedrop-view-count-pill">1</span>
    </div>
    <div class="pagedrop-fab-divider"></div>
    
    <div class="pagedrop-fab-likes" id="pagedrop-likes-display">
      <svg id="pagedrop-like-icon-pill" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
      </svg>
      <span id="pagedrop-like-count-pill">0</span>
    </div>
    <div class="pagedrop-fab-divider"></div>
    
    <div class="pagedrop-fab-days ">
      
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/>
        <polyline points="12,6 12,12 16,14"/>
      </svg>
      
      <span>10d</span>
    </div>
  </div>
</div>

<script src="https://pagedrop.io/fab-widget.js" data-slug="classic-noon-dj37" data-base-url="https://pagedrop.io" data-is-explore="true" data-days-remaining="10" data-view-count="1" defer></script>