import { motion } from 'framer-motion';
import {
  Shield,
  Zap,
  Network,
  Code2,
  Wallet,
  BarChart3,
  Github,
  Twitter,
  MessageCircle,
  ArrowRight,
  Lock,
  Layers,
  Globe,
  Cpu,
  FileCode,
  BookOpen,
} from 'lucide-react';

function App() {
  return (
    <div className="min-h-screen">
      <Header />
      <Hero />
      <Features />
      <Technology />
      <Ecosystem />
      <Stats />
      <CTA />
      <Footer />
    </div>
  );
}

function Header() {
  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-slate-950/80 backdrop-blur-xl border-b border-white/5">
      <nav className="container mx-auto px-6 py-4">
        <div className="flex items-center justify-between">
          <a href="#" className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-synor-500 to-quantum-500 flex items-center justify-center">
              <span className="text-white font-bold text-sm">S</span>
            </div>
            <span className="font-bold text-xl">Synor</span>
          </a>

          <div className="hidden md:flex items-center gap-8">
            <a href="#features" className="text-sm text-slate-300 hover:text-white transition-colors">Features</a>
            <a href="#technology" className="text-sm text-slate-300 hover:text-white transition-colors">Technology</a>
            <a href="#ecosystem" className="text-sm text-slate-300 hover:text-white transition-colors">Ecosystem</a>
            <a href="https://docs.synor.cc" className="text-sm text-slate-300 hover:text-white transition-colors">Docs</a>
          </div>

          <div className="flex items-center gap-4">
            <a href="https://wallet.synor.cc" className="btn-secondary hidden sm:block">
              Launch Wallet
            </a>
            <a href="https://explorer.synor.cc" className="btn-primary">
              Explorer
            </a>
          </div>
        </div>
      </nav>
    </header>
  );
}

function Hero() {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
      {/* Background effects */}
      <div className="absolute inset-0 bg-gradient-to-b from-synor-950/50 via-slate-950 to-slate-950" />
      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-synor-500/20 rounded-full blur-3xl animate-pulse-slow" />
      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-quantum-500/20 rounded-full blur-3xl animate-pulse-slow delay-1000" />

      {/* Grid pattern */}
      <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:100px_100px]" />

      <div className="relative container mx-auto px-6 text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/10 rounded-full mb-8">
            <Shield className="w-4 h-4 text-quantum-400" />
            <span className="text-sm text-slate-300">Quantum-Resistant Security</span>
          </div>

          <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
            The Blockchain for the
            <br />
            <span className="gradient-text">Post-Quantum Era</span>
          </h1>

          <p className="text-xl text-slate-400 max-w-2xl mx-auto mb-10">
            Synor combines DAG-based consensus with quantum-resistant cryptography
            to deliver blazing-fast transactions that will remain secure for decades.
          </p>

          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="https://wallet.synor.cc" className="btn-primary flex items-center gap-2">
              Get Started <ArrowRight className="w-4 h-4" />
            </a>
            <a href="https://docs.synor.cc" className="btn-secondary flex items-center gap-2">
              <BookOpen className="w-4 h-4" /> Read the Docs
            </a>
          </div>

          {/* Tech badges */}
          <div className="flex flex-wrap items-center justify-center gap-4 mt-16">
            {['GHOSTDAG Consensus', 'Dilithium3 Signatures', 'WASM Smart Contracts', '1s Block Time'].map((tech) => (
              <span
                key={tech}
                className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-slate-400"
              >
                {tech}
              </span>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
}

function Features() {
  const features = [
    {
      icon: Shield,
      title: 'Quantum-Resistant',
      description: 'Hybrid Ed25519 + Dilithium3 signatures protect against both classical and quantum attacks.',
      color: 'from-quantum-500 to-purple-500',
    },
    {
      icon: Zap,
      title: 'Lightning Fast',
      description: '1-second block times with instant confirmations through DAG-based parallel processing.',
      color: 'from-yellow-500 to-orange-500',
    },
    {
      icon: Network,
      title: 'DAG Consensus',
      description: 'GHOSTDAG allows multiple blocks simultaneously, eliminating orphan blocks and maximizing throughput.',
      color: 'from-synor-500 to-cyan-500',
    },
    {
      icon: Code2,
      title: 'Smart Contracts',
      description: 'Write contracts in Rust, compile to WASM. Full SDK with testing framework included.',
      color: 'from-green-500 to-emerald-500',
    },
    {
      icon: Lock,
      title: 'Encrypted Storage',
      description: 'AES-256-GCM encryption with Argon2 key derivation keeps your assets secure.',
      color: 'from-red-500 to-pink-500',
    },
    {
      icon: Layers,
      title: 'UTXO Model',
      description: 'Proven UTXO transaction model with native support for atomic swaps and multi-sig.',
      color: 'from-indigo-500 to-blue-500',
    },
  ];

  return (
    <section id="features" className="py-32 relative">
      <div className="container mx-auto px-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-4">
            Built for the <span className="gradient-text">Future</span>
          </h2>
          <p className="text-xl text-slate-400 max-w-2xl mx-auto">
            Every component designed with security, speed, and scalability in mind.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature, i) => (
            <motion.div
              key={feature.title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="card group"
            >
              <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-4`}>
                <feature.icon className="w-6 h-6 text-white" />
              </div>
              <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
              <p className="text-slate-400">{feature.description}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Technology() {
  return (
    <section id="technology" className="py-32 relative bg-gradient-to-b from-slate-950 via-synor-950/20 to-slate-950">
      <div className="container mx-auto px-6">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
          >
            <h2 className="text-4xl md:text-5xl font-bold mb-6">
              Quantum-Safe
              <br />
              <span className="gradient-text">Cryptography</span>
            </h2>
            <p className="text-lg text-slate-400 mb-8">
              As quantum computers advance, traditional cryptography becomes vulnerable.
              Synor uses NIST-approved Dilithium3 lattice-based signatures alongside
              Ed25519 for a hybrid approach that's secure today and tomorrow.
            </p>

            <div className="space-y-4">
              {[
                { label: 'Ed25519', desc: 'Fast classical signatures for everyday use' },
                { label: 'Dilithium3', desc: 'Quantum-resistant lattice cryptography' },
                { label: 'Hybrid Mode', desc: 'Both signatures for maximum security' },
              ].map((item) => (
                <div key={item.label} className="flex items-start gap-4">
                  <div className="w-2 h-2 rounded-full bg-quantum-500 mt-2" />
                  <div>
                    <span className="font-semibold">{item.label}</span>
                    <span className="text-slate-400 ml-2">- {item.desc}</span>
                  </div>
                </div>
              ))}
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="relative"
          >
            {/* Code preview */}
            <div className="card bg-slate-900/90 p-0 overflow-hidden">
              <div className="flex items-center gap-2 px-4 py-3 border-b border-white/10">
                <div className="w-3 h-3 rounded-full bg-red-500" />
                <div className="w-3 h-3 rounded-full bg-yellow-500" />
                <div className="w-3 h-3 rounded-full bg-green-500" />
                <span className="text-sm text-slate-500 ml-2">signature.rs</span>
              </div>
              <pre className="p-4 text-sm font-mono overflow-x-auto">
                <code className="text-slate-300">
{`// Hybrid quantum-resistant signature
pub struct HybridSignature {
    ed25519: Ed25519Signature,
    dilithium: DilithiumSignature,
}

impl HybridSignature {
    pub fn sign(msg: &[u8], keypair: &HybridKeypair)
        -> Self
    {
        Self {
            ed25519: keypair.ed25519.sign(msg),
            dilithium: keypair.dilithium.sign(msg),
        }
    }

    pub fn verify(&self, msg: &[u8], pubkey: &HybridPubkey)
        -> bool
    {
        self.ed25519.verify(msg, &pubkey.ed25519)
            && self.dilithium.verify(msg, &pubkey.dilithium)
    }
}`}
                </code>
              </pre>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}

function Ecosystem() {
  const apps = [
    {
      icon: Wallet,
      title: 'Web Wallet',
      description: 'Browser-based wallet with QR codes, hardware support, and 6 languages.',
      url: 'https://wallet.synor.cc',
      status: 'Live',
    },
    {
      icon: Cpu,
      title: 'Desktop Wallet',
      description: 'Native app for macOS, Windows, and Linux with system tray integration.',
      url: '#',
      status: 'Download',
    },
    {
      icon: BarChart3,
      title: 'Block Explorer',
      description: 'Real-time blockchain explorer with 3D DAG visualization.',
      url: 'https://explorer.synor.cc',
      status: 'Live',
    },
    {
      icon: FileCode,
      title: 'Contract SDK',
      description: 'Full Rust SDK for building and testing smart contracts.',
      url: 'https://docs.synor.cc/contracts',
      status: 'Docs',
    },
    {
      icon: Globe,
      title: 'Public API',
      description: 'Rate-limited RPC access with free, developer, and enterprise tiers.',
      url: 'https://api.synor.cc',
      status: 'API',
    },
    {
      icon: BookOpen,
      title: 'Tutorials',
      description: 'Step-by-step guides from Hello World to DeFi staking pools.',
      url: 'https://docs.synor.cc/tutorials',
      status: 'Learn',
    },
  ];

  return (
    <section id="ecosystem" className="py-32 relative">
      <div className="container mx-auto px-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-4">
            Complete <span className="gradient-text">Ecosystem</span>
          </h2>
          <p className="text-xl text-slate-400 max-w-2xl mx-auto">
            Everything you need to build, deploy, and interact with Synor.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {apps.map((app, i) => (
            <motion.a
              key={app.title}
              href={app.url}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="card group cursor-pointer"
            >
              <div className="flex items-start justify-between mb-4">
                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-synor-500/20 to-quantum-500/20 border border-white/10 flex items-center justify-center">
                  <app.icon className="w-6 h-6 text-synor-400" />
                </div>
                <span className="px-3 py-1 text-xs font-medium bg-synor-500/20 text-synor-400 rounded-full">
                  {app.status}
                </span>
              </div>
              <h3 className="text-xl font-semibold mb-2 group-hover:text-synor-400 transition-colors">
                {app.title}
              </h3>
              <p className="text-slate-400">{app.description}</p>
            </motion.a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Stats() {
  const stats = [
    { value: '1s', label: 'Block Time' },
    { value: '10K+', label: 'TPS Capacity' },
    { value: '100%', label: 'Uptime' },
    { value: '0', label: 'Security Incidents' },
  ];

  return (
    <section className="py-20 relative bg-gradient-to-r from-synor-950/50 via-quantum-950/50 to-synor-950/50">
      <div className="container mx-auto px-6">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
          {stats.map((stat, i) => (
            <motion.div
              key={stat.label}
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="text-center"
            >
              <div className="text-4xl md:text-5xl font-bold gradient-text mb-2">{stat.value}</div>
              <div className="text-slate-400">{stat.label}</div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="py-32 relative">
      <div className="container mx-auto px-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="card bg-gradient-to-br from-synor-900/50 to-quantum-900/50 border-synor-500/20 text-center py-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-4">
            Ready to Build?
          </h2>
          <p className="text-xl text-slate-400 max-w-2xl mx-auto mb-8">
            Join the quantum-secure future. Start building on Synor today.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="https://wallet.synor.cc" className="btn-primary flex items-center gap-2">
              Create Wallet <ArrowRight className="w-4 h-4" />
            </a>
            <a href="https://docs.synor.cc/tutorials/01-hello-world" className="btn-secondary">
              Follow Tutorial
            </a>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="py-16 border-t border-white/5">
      <div className="container mx-auto px-6">
        <div className="grid md:grid-cols-4 gap-12 mb-12">
          <div>
            <div className="flex items-center gap-2 mb-4">
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-synor-500 to-quantum-500 flex items-center justify-center">
                <span className="text-white font-bold text-sm">S</span>
              </div>
              <span className="font-bold text-xl">Synor</span>
            </div>
            <p className="text-slate-400 text-sm">
              The quantum-secure blockchain for the post-quantum era.
            </p>
          </div>

          <div>
            <h4 className="font-semibold mb-4">Products</h4>
            <ul className="space-y-2 text-sm text-slate-400">
              <li><a href="https://wallet.synor.cc" className="hover:text-white transition-colors">Web Wallet</a></li>
              <li><a href="https://explorer.synor.cc" className="hover:text-white transition-colors">Block Explorer</a></li>
              <li><a href="https://api.synor.cc" className="hover:text-white transition-colors">Public API</a></li>
              <li><a href="#" className="hover:text-white transition-colors">Desktop Wallet</a></li>
            </ul>
          </div>

          <div>
            <h4 className="font-semibold mb-4">Developers</h4>
            <ul className="space-y-2 text-sm text-slate-400">
              <li><a href="https://docs.synor.cc" className="hover:text-white transition-colors">Documentation</a></li>
              <li><a href="https://docs.synor.cc/tutorials" className="hover:text-white transition-colors">Tutorials</a></li>
              <li><a href="https://docs.synor.cc/contracts" className="hover:text-white transition-colors">Smart Contracts</a></li>
              <li><a href="https://github.com/synor" className="hover:text-white transition-colors">GitHub</a></li>
            </ul>
          </div>

          <div>
            <h4 className="font-semibold mb-4">Community</h4>
            <div className="flex items-center gap-4">
              <a href="https://github.com/synor" className="text-slate-400 hover:text-white transition-colors">
                <Github className="w-5 h-5" />
              </a>
              <a href="https://twitter.com/synor_cc" className="text-slate-400 hover:text-white transition-colors">
                <Twitter className="w-5 h-5" />
              </a>
              <a href="https://discord.gg/synor" className="text-slate-400 hover:text-white transition-colors">
                <MessageCircle className="w-5 h-5" />
              </a>
            </div>
          </div>
        </div>

        <div className="pt-8 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-sm text-slate-500">
            &copy; {new Date().getFullYear()} Synor. All rights reserved.
          </p>
          <div className="flex items-center gap-6 text-sm text-slate-500">
            <a href="#" className="hover:text-white transition-colors">Privacy Policy</a>
            <a href="#" className="hover:text-white transition-colors">Terms of Service</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

export default App;