import React from 'react';
import { Shield, Target, Users, Rocket, Code, Lock } from 'lucide-react';

const About: React.FC = () => {
  return (
    <div className="min-h-screen py-8 px-4">
      <div className="container mx-auto max-w-4xl">
        {/* Hero */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-3 mb-6">
            <Shield className="w-12 h-12 text-primary animate-float" />
            <h1 className="font-display text-4xl lg:text-5xl font-bold text-gradient-primary">
              About CipherX Labs
            </h1>
          </div>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            Empowering individuals and organizations with the knowledge and tools to navigate the digital world securely.
          </p>
        </div>

        <div className="space-y-12">
          {/* What is CipherX */}
          <section className="glass-card p-8">
            <h2 className="font-display text-2xl font-bold mb-4 flex items-center gap-3">
              <Code className="w-6 h-6 text-primary" />
              What is CipherX Labs?
            </h2>
            <p className="text-muted-foreground leading-relaxed">
              CipherX Labs is a comprehensive cybersecurity education and tools platform designed to make security accessible to everyone. Whether you're a complete beginner or an IT professional, our platform provides the resources you need to understand, detect, and defend against digital threats.
            </p>
          </section>

          {/* Purpose */}
          <section className="glass-card p-8">
            <h2 className="font-display text-2xl font-bold mb-4 flex items-center gap-3">
              <Target className="w-6 h-6 text-secondary" />
              Our Purpose
            </h2>
            <p className="text-muted-foreground leading-relaxed mb-4">
              In an increasingly connected world, cybersecurity is no longer optional—it's essential. Our purpose is to bridge the knowledge gap between cyber threats and everyday users. We believe that understanding security shouldn't require a technical background.
            </p>
            <ul className="space-y-2 text-muted-foreground">
              <li className="flex items-start gap-2">
                <span className="text-primary">•</span>
                Democratize cybersecurity education
              </li>
              <li className="flex items-start gap-2">
                <span className="text-primary">•</span>
                Provide practical, hands-on security tools
              </li>
              <li className="flex items-start gap-2">
                <span className="text-primary">•</span>
                Build a community of security-conscious individuals
              </li>
            </ul>
          </section>

          {/* Mission */}
          <section className="glass-card p-8 neon-glow-purple">
            <h2 className="font-display text-2xl font-bold mb-4 flex items-center gap-3">
              <Rocket className="w-6 h-6 text-accent" />
              Our Mission
            </h2>
            <p className="text-lg text-foreground font-medium mb-4">
              "To create a safer digital world by empowering every individual with cybersecurity knowledge and tools."
            </p>
            <p className="text-muted-foreground leading-relaxed">
              We're committed to making cybersecurity education engaging, practical, and accessible. Through interactive learning modules, AI-powered assistance, and hands-on tools, we're transforming how people approach digital security.
            </p>
          </section>

          {/* Why Cybersecurity Matters */}
          <section className="glass-card p-8">
            <h2 className="font-display text-2xl font-bold mb-4 flex items-center gap-3">
              <Lock className="w-6 h-6 text-primary" />
              Why Cybersecurity Matters
            </h2>
            <div className="grid md:grid-cols-2 gap-6">
              <div className="p-4 bg-muted/30 rounded-lg">
                <h3 className="font-display font-semibold mb-2 text-secondary">Personal Protection</h3>
                <p className="text-sm text-muted-foreground">
                  Your personal data, financial information, and digital identity are valuable targets. Understanding threats helps protect what matters most.
                </p>
              </div>
              <div className="p-4 bg-muted/30 rounded-lg">
                <h3 className="font-display font-semibold mb-2 text-secondary">Business Security</h3>
                <p className="text-sm text-muted-foreground">
                  Data breaches cost businesses millions. Every employee with security awareness becomes a line of defense.
                </p>
              </div>
              <div className="p-4 bg-muted/30 rounded-lg">
                <h3 className="font-display font-semibold mb-2 text-secondary">National Security</h3>
                <p className="text-sm text-muted-foreground">
                  Critical infrastructure and government systems face constant threats. Cybersecurity is a matter of national importance.
                </p>
              </div>
              <div className="p-4 bg-muted/30 rounded-lg">
                <h3 className="font-display font-semibold mb-2 text-secondary">Global Impact</h3>
                <p className="text-sm text-muted-foreground">
                  Cyberattacks can affect anyone, anywhere. A more educated populace means a more secure internet for all.
                </p>
              </div>
            </div>
          </section>

          {/* Ethical Hacking */}
          <section className="glass-card p-8 border border-accent/30">
            <h2 className="font-display text-2xl font-bold mb-4 flex items-center gap-3">
              <Users className="w-6 h-6 text-accent" />
              Our Stance on Ethical Hacking
            </h2>
            <p className="text-muted-foreground leading-relaxed mb-4">
              We believe in the power of ethical hacking to make the digital world safer. Our platform is designed for education and defense—not offense. We encourage:
            </p>
            <ul className="space-y-2 text-muted-foreground">
              <li className="flex items-start gap-2">
                <span className="text-accent">✓</span>
                Learning security to protect, not attack
              </li>
              <li className="flex items-start gap-2">
                <span className="text-accent">✓</span>
                Responsible disclosure of vulnerabilities
              </li>
              <li className="flex items-start gap-2">
                <span className="text-accent">✓</span>
                Using knowledge ethically and legally
              </li>
              <li className="flex items-start gap-2">
                <span className="text-accent">✓</span>
                Contributing to a safer digital ecosystem
              </li>
            </ul>
          </section>

          {/* Future Plans */}
          <section className="glass-card p-8">
            <h2 className="font-display text-2xl font-bold mb-4 flex items-center gap-3">
              <Rocket className="w-6 h-6 text-secondary" />
              Future Plans
            </h2>
            <div className="space-y-4 text-muted-foreground">
              <p className="leading-relaxed">
                CipherX Labs is constantly evolving. Here's what's on our roadmap:
              </p>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="p-4 border border-border/50 rounded-lg">
                  <h3 className="font-display font-semibold text-foreground mb-2">Certification Programs</h3>
                  <p className="text-sm">Earn recognized credentials in cybersecurity fundamentals</p>
                </div>
                <div className="p-4 border border-border/50 rounded-lg">
                  <h3 className="font-display font-semibold text-foreground mb-2">Advanced Simulations</h3>
                  <p className="text-sm">Hands-on labs with real-world attack scenarios</p>
                </div>
                <div className="p-4 border border-border/50 rounded-lg">
                  <h3 className="font-display font-semibold text-foreground mb-2">Community Features</h3>
                  <p className="text-sm">Connect with other security enthusiasts</p>
                </div>
                <div className="p-4 border border-border/50 rounded-lg">
                  <h3 className="font-display font-semibold text-foreground mb-2">Enterprise Solutions</h3>
                  <p className="text-sm">Training programs for organizations</p>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  );
};

export default About;
