import React from 'react';
import { Link } from 'react-router-dom';
import { Shield, Cpu, BookOpen, Wrench, ArrowRight, Lock, Eye, Target, Zap } from 'lucide-react';
import { Button } from '@/components/ui/button';

const Index: React.FC = () => {
  const features = [
    {
      icon: Shield,
      title: 'Security Dashboard',
      description: 'Monitor your cyber posture with real-time insights and security scores.',
      link: '/dashboard',
    },
    {
      icon: Wrench,
      title: 'Cyber Tools',
      description: 'Analyze passwords, detect phishing, check URLs, and encrypt data.',
      link: '/tools',
    },
    {
      icon: BookOpen,
      title: 'Learning Academy',
      description: '8 comprehensive modules covering all aspects of cybersecurity.',
      link: '/academy',
    },
    {
      icon: Cpu,
      title: 'Cipher-AI Assistant',
      description: '24/7 AI-powered help for all your cybersecurity questions.',
      link: '/cipher-ai',
    },
  ];

  const stats = [
    { value: '99.9%', label: 'Threat Detection' },
    { value: '8', label: 'Learning Modules' },
    { value: '9', label: 'Security Tools' },
    { value: '24/7', label: 'AI Assistance' },
  ];

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center px-4 py-20 overflow-hidden">
        {/* Background Effects */}
        <div className="absolute inset-0 cyber-grid opacity-30" />
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-3xl animate-float" />
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-secondary/20 rounded-full blur-3xl animate-float" style={{ animationDelay: '1.5s' }} />
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-accent/10 rounded-full blur-3xl" />

        {/* Scan Line Effect */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-primary/5 to-transparent h-32 animate-scan" />
        </div>

        <div className="container mx-auto max-w-6xl relative z-10">
          <div className="text-center space-y-8">
            {/* Logo */}
            <div className="inline-flex items-center justify-center gap-4 mb-8">
              <div className="relative">
                <Shield className="w-16 h-16 lg:w-20 lg:h-20 text-primary" />
                <div className="absolute inset-0 blur-2xl bg-primary/50" />
                <div className="absolute inset-0 rounded-full border-2 border-primary/50 animate-pulse-ring" />
              </div>
            </div>

            {/* Headline */}
            <h1 className="font-display text-5xl lg:text-7xl font-bold leading-tight">
              <span className="text-gradient-primary">CipherX</span>{' '}
              <span className="text-foreground">Labs</span>
            </h1>

            <p className="text-xl lg:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
              Your gateway to mastering cybersecurity. Learn, protect, and defend with cutting-edge tools and AI-powered assistance.
            </p>

            {/* CTA Buttons */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
              <Link to="/auth?signup=true">
                <Button variant="neon" size="xl" className="w-full sm:w-auto">
                  Get Started
                  <ArrowRight className="w-5 h-5 ml-2" />
                </Button>
              </Link>
              <Link to="/dashboard">
                <Button variant="neon-outline" size="xl" className="w-full sm:w-auto">
                  Explore Dashboard
                </Button>
              </Link>
            </div>

            {/* Stats */}
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 pt-16">
              {stats.map((stat, index) => (
                <div
                  key={index}
                  className="glass-card p-6 text-center group hover:neon-glow-purple transition-all duration-300"
                >
                  <p className="font-display text-3xl lg:text-4xl font-bold text-gradient-primary mb-2">
                    {stat.value}
                  </p>
                  <p className="text-muted-foreground text-sm">{stat.label}</p>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Scroll Indicator */}
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
          <div className="w-6 h-10 rounded-full border-2 border-muted-foreground/50 flex items-start justify-center p-2">
            <div className="w-1.5 h-3 bg-primary rounded-full animate-glow" />
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-16">
            <h2 className="font-display text-3xl lg:text-4xl font-bold text-gradient-accent mb-4">
              Powerful Features
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Everything you need to learn cybersecurity and protect yourself in the digital world.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {features.map((feature, index) => (
              <Link
                key={index}
                to={feature.link}
                className="glass-card-hover p-6 group"
                style={{ animationDelay: `${index * 0.1}s` }}
              >
                <div className="w-14 h-14 rounded-xl bg-primary/20 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-primary-foreground transition-all duration-300">
                  <feature.icon className="w-7 h-7" />
                </div>
                <h3 className="font-display text-xl font-semibold mb-3">{feature.title}</h3>
                <p className="text-muted-foreground text-sm mb-4">{feature.description}</p>
                <span className="text-primary text-sm font-medium flex items-center group-hover:gap-2 transition-all">
                  Learn more <ArrowRight className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
                </span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* Why CipherX Section */}
      <section className="py-20 px-4 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-primary/5 to-transparent" />
        <div className="container mx-auto max-w-6xl relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="font-display text-3xl lg:text-4xl font-bold mb-6">
                Why Choose <span className="text-gradient-primary">CipherX Labs</span>?
              </h2>
              <div className="space-y-6">
                {[
                  { icon: Lock, title: 'Privacy First', desc: 'All tools run locally. Your data never leaves your device.' },
                  { icon: Eye, title: 'Hands-On Learning', desc: 'Interactive modules with quizzes to test your knowledge.' },
                  { icon: Target, title: 'Real-World Focus', desc: 'Learn techniques used by security professionals.' },
                  { icon: Zap, title: 'AI-Powered', desc: '24/7 intelligent assistant for instant answers.' },
                ].map((item, index) => (
                  <div key={index} className="flex gap-4 items-start">
                    <div className="w-12 h-12 rounded-lg bg-secondary/20 text-secondary flex items-center justify-center shrink-0">
                      <item.icon className="w-6 h-6" />
                    </div>
                    <div>
                      <h3 className="font-display font-semibold mb-1">{item.title}</h3>
                      <p className="text-muted-foreground text-sm">{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="glass-card p-8 neon-glow-purple">
              <h3 className="font-display text-2xl font-bold mb-4">Ready to Start?</h3>
              <p className="text-muted-foreground mb-6">
                Join thousands of users who are leveling up their cybersecurity knowledge. Create your free account today and access all features.
              </p>
              <Link to="/auth?signup=true">
                <Button variant="neon" size="lg" className="w-full">
                  Create Free Account
                </Button>
              </Link>
              <p className="text-center text-xs text-muted-foreground mt-4">
                No credit card required • Instant access
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4">
        <div className="container mx-auto max-w-4xl">
          <div className="glass-card p-12 text-center relative overflow-hidden">
            <div className="absolute inset-0 cyber-grid opacity-20" />
            <div className="relative z-10">
              <Cpu className="w-16 h-16 text-primary mx-auto mb-6 animate-float" />
              <h2 className="font-display text-3xl lg:text-4xl font-bold mb-4">
                Have Questions? Ask <span className="text-gradient-accent">Cipher-AI</span>
              </h2>
              <p className="text-muted-foreground max-w-xl mx-auto mb-8">
                Our intelligent AI assistant is ready to answer your cybersecurity questions anytime, day or night.
              </p>
              <Link to="/cipher-ai">
                <Button variant="neon-blue" size="xl">
                  Chat with Cipher-AI
                  <ArrowRight className="w-5 h-5 ml-2" />
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Index;
