app.py

import React, { useState } from 'react';
import { Shield, Home, ClipboardList, AlertTriangle, Lock, Wifi, Mail, Smartphone, CheckCircle, XCircle, Eye, Key, Database, Skull, Bug, Users, Globe, Server, FileWarning, CreditCard, Zap, Search } from 'lucide-react';

const CyberSecurityApp = () => {
  const [activeTab, setActiveTab] = useState('home');
  const [quizStarted, setQuizStarted] = useState(false);
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [answers, setAnswers] = useState([]);
  const [showReport, setShowReport] = useState(false);
  const [selectedCategory, setSelectedCategory] = useState('all');

  const quizQuestions = [
    {
      id: 1,
      question: "How often do you update your passwords?",
      options: [
        { text: "Every 3-6 months", score: 4 },
        { text: "Once a year", score: 2 },
        { text: "Only when required", score: 1 },
        { text: "Never or very rarely", score: 0 }
      ],
      category: "passwords",
      realIncident: {
        title: "LinkedIn Data Breach (2012)",
        description: "6.5 million LinkedIn passwords were stolen and posted online. The breach occurred because passwords weren't properly encrypted and users hadn't changed them regularly. Hackers used these credentials to access other accounts where users reused the same passwords.",
        impact: "167 million accounts eventually compromised"
      }
    },
    {
      id: 2,
      question: "Do you use the same password across multiple accounts?",
      options: [
        { text: "No, all unique passwords", score: 4 },
        { text: "Similar passwords with variations", score: 2 },
        { text: "Same password for most accounts", score: 1 },
        { text: "Same password everywhere", score: 0 }
      ],
      category: "passwords",
      realIncident: {
        title: "Collection #1 Breach (2019)",
        description: "773 million unique email addresses and 21 million passwords were exposed. Hackers exploited password reuse through 'credential stuffing' attacks - using stolen credentials from one breach to access accounts on other services.",
        impact: "Billions of login attempts across multiple platforms"
      }
    },
    {
      id: 3,
      question: "Do you have two-factor authentication (2FA) enabled?",
      options: [
        { text: "Yes, on all important accounts", score: 4 },
        { text: "On some accounts", score: 2 },
        { text: "On one or two accounts", score: 1 },
        { text: "No, not enabled anywhere", score: 0 }
      ],
      category: "authentication",
      realIncident: {
        title: "Twitter Bitcoin Scam (2020)",
        description: "High-profile Twitter accounts including Elon Musk, Barack Obama, and Bill Gates were hacked. Attackers gained access through social engineering and the absence of proper 2FA on internal tools, stealing over $100,000 in Bitcoin.",
        impact: "130 accounts compromised, $100,000+ stolen"
      }
    },
    {
      id: 4,
      question: "How do you handle suspicious emails?",
      options: [
        { text: "Verify sender, never click links", score: 4 },
        { text: "Usually delete without opening", score: 3 },
        { text: "Sometimes click if it looks real", score: 1 },
        { text: "Click on most emails I receive", score: 0 }
      ],
      category: "phishing",
      realIncident: {
        title: "Google & Facebook Phishing Scam (2013-2015)",
        description: "A Lithuanian man phished employees at Google and Facebook by sending fake invoices that appeared to be from a legitimate vendor. Employees clicked malicious links and approved fraudulent payments.",
        impact: "$100 million stolen from two tech giants"
      }
    },
    {
      id: 5,
      question: "How often do you update your software and apps?",
      options: [
        { text: "Immediately when available", score: 4 },
        { text: "Within a week", score: 3 },
        { text: "When I remember", score: 1 },
        { text: "Rarely or never", score: 0 }
      ],
      category: "updates",
      realIncident: {
        title: "WannaCry Ransomware Attack (2017)",
        description: "A global ransomware attack exploited outdated Windows systems that hadn't installed a critical security patch. The attack affected 200,000+ computers across 150 countries, encrypting files and demanding Bitcoin payments.",
        impact: "£92 million cost to NHS, global damages in billions"
      }
    },
    {
      id: 6,
      question: "Do you use public Wi-Fi for sensitive activities?",
      options: [
        { text: "Never, or only with VPN", score: 4 },
        { text: "Rarely", score: 2 },
        { text: "Sometimes", score: 1 },
        { text: "Frequently", score: 0 }
      ],
      category: "network",
      realIncident: {
        title: "Starbucks Wi-Fi Man-in-the-Middle Attack (2014)",
        description: "Security researchers demonstrated how attackers could intercept data on Starbucks public Wi-Fi. Customers' login credentials, emails, and financial data were captured without encryption, leading to identity theft cases.",
        impact: "Thousands of customers' data exposed globally"
      }
    },
    {
      id: 7,
      question: "How do you protect your mobile devices?",
      options: [
        { text: "Strong password/biometric + encryption", score: 4 },
        { text: "PIN or pattern lock", score: 2 },
        { text: "Simple swipe lock", score: 1 },
        { text: "No lock screen", score: 0 }
      ],
      category: "mobile",
      realIncident: {
        title: "Celebgate / iCloud Leak (2014)",
        description: "Hundreds of private photos of celebrities were stolen from iCloud accounts. Hackers used phishing and weak passwords to gain access. Many victims didn't have proper device security or 2FA enabled.",
        impact: "500+ private photos leaked, multiple victims"
      }
    },
    {
      id: 8,
      question: "Do you back up your important data?",
      options: [
        { text: "Yes, regularly (automated)", score: 4 },
        { text: "Occasionally", score: 2 },
        { text: "Rarely", score: 1 },
        { text: "Never", score: 0 }
      ],
      category: "backup",
      realIncident: {
        title: "Maersk NotPetya Attack (2017)",
        description: "Shipping giant Maersk was hit by NotPetya ransomware that encrypted all their data. Without proper backups, they had to reinstall 4,000 servers and 45,000 PCs. The company lost $300 million.",
        impact: "$300 million in losses, 10 days of operational shutdown"
      }
    },
    {
      id: 9,
      question: "How do you share personal information online?",
      options: [
        { text: "Very carefully, minimal sharing", score: 4 },
        { text: "Only with trusted sources", score: 3 },
        { text: "Share when asked", score: 1 },
        { text: "Share freely on social media", score: 0 }
      ],
      category: "privacy",
      realIncident: {
        title: "Cambridge Analytica Scandal (2018)",
        description: "87 million Facebook users had their personal data harvested without consent through a personality quiz app. The data was used for political advertising and manipulation during elections.",
        impact: "87 million users affected, $5 billion fine for Facebook"
      }
    },
    {
      id: 10,
      question: "Do you review app permissions before installing?",
      options: [
        { text: "Always check and limit permissions", score: 4 },
        { text: "Sometimes check", score: 2 },
        { text: "Rarely check", score: 1 },
        { text: "Never check, accept all", score: 0 }
      ],
      category: "privacy",
      realIncident: {
        title: "Flashlight App Data Collection (2013)",
        description: "A popular Android flashlight app was caught collecting users' location data, device identifiers, and contacts without disclosure. The data was sold to advertisers and third parties.",
        impact: "Millions of users' data collected and sold"
      }
    }
  ];

  const awarenessContent = {
    typesOfTheft: [
      {
        icon: CreditCard,
        title: "Identity Theft",
        color: "from-red-500 to-pink-500",
        description: "Criminals steal your personal information (SSN, credit card numbers, passwords) to impersonate you and commit fraud.",
        methods: ["Phishing emails", "Data breaches", "Dumpster diving", "Shoulder surfing"],
        prevention: ["Use credit monitoring services", "Shred sensitive documents", "Enable fraud alerts", "Check credit reports regularly"],
        stats: "33% of Americans have experienced identity theft"
      },
      {
        icon: Database,
        title: "Data Breach",
        color: "from-orange-500 to-amber-500",
        description: "Unauthorized access to databases containing sensitive information like passwords, financial records, or personal data.",
        methods: ["SQL injection", "Weak passwords", "Unpatched software", "Insider threats"],
        prevention: ["Use encrypted databases", "Implement access controls", "Regular security audits", "Employee training"],
        stats: "Over 5 billion records exposed in 2023"
      },
      {
        icon: Globe,
        title: "Ransomware",
        color: "from-purple-500 to-indigo-500",
        description: "Malicious software that encrypts your files and demands payment for the decryption key.",
        methods: ["Malicious email attachments", "Infected websites", "Compromised software", "Remote desktop attacks"],
        prevention: ["Regular backups", "Anti-malware software", "Email filtering", "Network segmentation"],
        stats: "Ransomware attacks occur every 11 seconds"
      },
      {
        icon: Mail,
        title: "Phishing & Social Engineering",
        color: "from-blue-500 to-cyan-500",
        description: "Manipulating people into revealing confidential information through deceptive communications.",
        methods: ["Fake emails/SMS", "Impersonation", "Pretexting", "Baiting with USB drives"],
        prevention: ["Verify sender identity", "Don't click suspicious links", "Use email authentication", "Security awareness training"],
        stats: "90% of data breaches start with phishing"
      },
      {
        icon: Wifi,
        title: "Man-in-the-Middle Attacks",
        color: "from-green-500 to-emerald-500",
        description: "Attackers intercept communication between two parties to steal data or inject malicious content.",
        methods: ["Public Wi-Fi eavesdropping", "DNS spoofing", "SSL stripping", "Session hijacking"],
        prevention: ["Use VPN on public networks", "HTTPS everywhere", "Avoid unsecured Wi-Fi", "Certificate validation"],
        stats: "35% of exploitation happens via man-in-the-middle"
      },
      {
        icon: Smartphone,
        title: "Mobile Device Theft",
        color: "from-teal-500 to-cyan-500",
        description: "Physical theft or compromise of smartphones and tablets containing sensitive personal and business data.",
        methods: ["Physical theft", "Malicious apps", "SIM swapping", "Bluetooth attacks"],
        prevention: ["Remote wipe capability", "Strong device encryption", "App permissions review", "Biometric locks"],
        stats: "70 million smartphones stolen annually worldwide"
      }
    ],
    hackerTools: [
      {
        icon: Bug,
        title: "Malware & Viruses",
        color: "from-red-600 to-rose-600",
        description: "Malicious software designed to damage, disrupt, or gain unauthorized access to computer systems.",
        types: ["Trojans", "Worms", "Spyware", "Keyloggers", "Rootkits"],
        howItWorks: "Infects systems through downloads, email attachments, or exploiting vulnerabilities. Steals data, monitors activity, or damages files.",
        realExample: "Emotet banking trojan infected over 1.6 million computers"
      },
      {
        icon: Key,
        title: "Password Cracking Tools",
        color: "from-orange-600 to-yellow-600",
        description: "Software that attempts to guess or crack passwords through various techniques.",
        types: ["Brute force", "Dictionary attacks", "Rainbow tables", "Credential stuffing"],
        howItWorks: "Systematically tries password combinations or uses leaked password databases to gain unauthorized access.",
        realExample: "Hashcat can test billions of password combinations per second"
      },
      {
        icon: Search,
        title: "Network Scanners",
        color: "from-purple-600 to-pink-600",
        description: "Tools that probe networks to find vulnerabilities, open ports, and system information.",
        types: ["Port scanners", "Vulnerability scanners", "Network mappers", "Packet sniffers"],
        howItWorks: "Scans network infrastructure to identify weaknesses that can be exploited for unauthorized access.",
        realExample: "Nmap is used to scan over 100 million hosts daily"
      },
      {
        icon: Zap,
        title: "Exploit Kits",
        color: "from-blue-600 to-indigo-600",
        description: "Automated tools that identify and exploit known vulnerabilities in software and systems.",
        types: ["Zero-day exploits", "Browser exploits", "Drive-by downloads", "Exploit frameworks"],
        howItWorks: "Automatically tests for vulnerabilities and deploys malware when weaknesses are found.",
        realExample: "Angler exploit kit infected 90,000 sites in 2015"
      },
      {
        icon: Eye,
        title: "Social Engineering Frameworks",
        color: "from-green-600 to-teal-600",
        description: "Sophisticated tools to manipulate people into divulging confidential information.",
        types: ["Phishing kits", "Fake login pages", "Voice phishing", "SMS spoofing"],
        howItWorks: "Creates convincing fake communications and websites to trick victims into revealing sensitive data.",
        realExample: "Social Engineer Toolkit (SET) used in 70% of targeted attacks"
      },
      {
        icon: Server,
        title: "Botnet Controllers",
        color: "from-cyan-600 to-blue-600",
        description: "Tools to control networks of infected computers (zombies) for coordinated attacks.",
        types: ["DDoS tools", "Spam bots", "Click fraud bots", "Crypto miners"],
        howItWorks: "Commands thousands of infected devices simultaneously to overwhelm targets or mine cryptocurrency.",
        realExample: "Mirai botnet used 600,000 IoT devices for massive DDoS"
      }
    ],
    dataSafety: [
      {
        icon: Lock,
        title: "Encryption",
        color: "from-indigo-500 to-purple-500",
        importance: "Critical",
        description: "Converts data into coded format that's unreadable without the decryption key. Essential for protecting sensitive information.",
        implementation: [
          "Use full-disk encryption (BitLocker, FileVault)",
          "Enable HTTPS for all web communications",
          "Encrypt email with PGP or S/MIME",
          "Use end-to-end encrypted messaging apps",
          "Encrypt cloud storage and backups"
        ],
        benefit: "Even if data is stolen, it remains unreadable"
      },
      {
        icon: Database,
        title: "Secure Backups",
        color: "from-blue-500 to-cyan-500",
        importance: "Essential",
        description: "Regular copies of data stored in multiple locations to prevent permanent loss from attacks, failures, or disasters.",
        implementation: [
          "Follow 3-2-1 rule: 3 copies, 2 different media, 1 offsite",
          "Automate backup schedules",
          "Test restoration regularly",
          "Encrypt backup data",
          "Keep offline backups for ransomware protection"
        ],
        benefit: "Recover quickly from ransomware or data loss"
      },
      {
        icon: Shield,
        title: "Access Control",
        color: "from-green-500 to-emerald-500",
        importance: "Critical",
        description: "Limiting who can access what data through authentication, authorization, and monitoring.",
        implementation: [
          "Implement principle of least privilege",
          "Use role-based access control (RBAC)",
          "Enable multi-factor authentication",
          "Regular access audits and reviews",
          "Immediate revocation for terminated employees"
        ],
        benefit: "Minimizes damage from compromised accounts"
      },
      {
        icon: FileWarning,
        title: "Data Loss Prevention (DLP)",
        color: "from-yellow-500 to-orange-500",
        importance: "Important",
        description: "Monitoring and controlling data transfers to prevent unauthorized sharing or leakage of sensitive information.",
        implementation: [
          "Monitor outbound data transfers",
          "Block unauthorized USB devices",
          "Scan emails for sensitive data",
          "Watermark confidential documents",
          "Alert on unusual data access patterns"
        ],
        benefit: "Prevents accidental or malicious data leaks"
      },
      {
        icon: Users,
        title: "Security Awareness Training",
        color: "from-pink-500 to-rose-500",
        importance: "Essential",
        description: "Educating users about threats and best practices, as humans are often the weakest link in security.",
        implementation: [
          "Regular phishing simulation tests",
          "Annual security training for all staff",
          "Clear security policies and procedures",
          "Incident reporting channels",
          "Recognition programs for security-conscious behavior"
        ],
        benefit: "Reduces human error-related breaches by 70%"
      },
      {
        icon: AlertTriangle,
        title: "Incident Response Plan",
        color: "from-red-500 to-orange-500",
        importance: "Critical",
        description: "Documented procedures for detecting, responding to, and recovering from security incidents.",
        implementation: [
          "Define incident response team roles",
          "Create escalation procedures",
          "Establish communication protocols",
          "Regular tabletop exercises",
          "Post-incident review process"
        ],
        benefit: "Minimize damage and recovery time during breaches"
      }
    ]
  };

  const calculateRiskScore = () => {
    const totalScore = answers.reduce((sum, score) => sum + score, 0);
    const maxScore = quizQuestions.length * 4;
    const percentage = (totalScore / maxScore) * 100;
    
    return {
      score: totalScore,
      maxScore,
      percentage,
      level: percentage >= 80 ? 'Low Risk' : percentage >= 60 ? 'Moderate Risk' : percentage >= 40 ? 'High Risk' : 'Critical Risk'
    };
  };

  const generateReport = () => {
    const risk = calculateRiskScore();
    const categoryScores = {};
    
    quizQuestions.forEach((q, idx) => {
      if (!categoryScores[q.category]) {
        categoryScores[q.category] = { total: 0, count: 0 };
      }
      categoryScores[q.category].total += answers[idx];
      categoryScores[q.category].count += 1;
    });

    const weakAreas = Object.entries(categoryScores)
      .map(([category, data]) => ({
        category,
        average: data.total / data.count
      }))
      .filter(area => area.average < 2.5)
      .sort((a, b) => a.average - b.average);

    return { risk, weakAreas, categoryScores };
  };

  const handleAnswer = (score) => {
    const newAnswers = [...answers, score];
    setAnswers(newAnswers);

    if (currentQuestion < quizQuestions.length - 1) {
      setCurrentQuestion(currentQuestion + 1);
    } else {
      setShowReport(true);
    }
  };

  const resetQuiz = () => {
    setQuizStarted(false);
    setCurrentQuestion(0);
    setAnswers([]);
    setShowReport(false);
  };

  const RiskReport = () => {
    const report = generateReport();
    const { risk, weakAreas } = report;

    const getRiskColor = () => {
      if (risk.percentage >= 80) return 'from-green-500 to-emerald-500';
      if (risk.percentage >= 60) return 'from-yellow-500 to-orange-500';
      if (risk.percentage >= 40) return 'from-orange-500 to-red-500';
      return 'from-red-600 to-rose-600';
    };

    const getRecommendations = (category) => {
      const recommendations = {
        passwords: [
          "Use a password manager like Bitwarden or 1Password",
          "Create passwords with at least 12 characters mixing letters, numbers, symbols",
          "Use unique passwords for every account",
          "Change passwords immediately if a breach is reported"
        ],
        authentication: [
          "Enable 2FA on all accounts that support it",
          "Use authenticator apps instead of SMS when possible",
          "Keep backup codes in a secure location",
          "Consider using hardware security keys for critical accounts"
        ],
        phishing: [
          "Verify sender email addresses carefully before responding",
          "Never click links in unsolicited emails",
          "Look for https:// and padlock icon in website URLs",
          "Report suspicious emails to your IT department or provider"
        ],
        updates: [
          "Enable automatic updates for your operating system",
          "Update apps regularly from official stores only",
          "Replace outdated software that no longer receives updates",
          "Set weekly reminders to check for critical updates"
        ],
        network: [
          "Invest in a reliable VPN service for public Wi-Fi use",
          "Avoid accessing banking or sensitive sites on public Wi-Fi",
          "Use your mobile hotspot instead when possible",
          "Disable file sharing when on public networks"
        ],
        mobile: [
          "Use biometric authentication combined with strong passcode",
          "Enable 'Find My Device' features",
          "Install apps only from official app stores",
          "Review and limit app permissions regularly"
        ],
        backup: [
          "Follow the 3-2-1 backup rule (3 copies, 2 different media, 1 offsite)",
          "Use automated cloud backup solutions",
          "Test your backups monthly to ensure they work",
          "Encrypt all sensitive backup data"
        ],
        privacy: [
          "Review privacy settings on all social media accounts quarterly",
          "Limit personal information shared online",
          "Use privacy-focused browsers and search engines",
          "Read privacy policies before accepting terms"
        ]
      };
      return recommendations[category] || [];
    };

    return (
      <div className="max-w-4xl mx-auto p-6">
   <div
  className={`bg-gradient-to-br ${getRiskColor()} rounded-2xl shadow-xl p-8 mb-6 text-white`}
>
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-4xl font-bold">Your Security Risk Report</h2>
            <Shield className="w-16 h-16 opacity-80" />
          </div>
          
          <div className="mb-8">
            <div className="flex items-baseline gap-3 mb-2">
              <span className="text-7xl font-bold">{risk.percentage.toFixed(0)}%</span>
              <span className="text-3xl font-semibold">{risk.level}</span>
            </div>
            <p className="text-white/90 text-lg">
              You scored {risk.score} out of {risk.maxScore} points
            </p>
          </div>

          <div className="w-full bg-white/30 rounded-full h-4 mb-8">
            <div 
              className="h-4 rounded-full bg-white transition-all shadow-lg"
              style={{ width: `${risk.percentage}%` }}
            />
          </div>
        </div>

        {risk.percentage < 80 && (
          <div className="bg-white rounded-2xl shadow-lg border-2 border-orange-200 p-8">
            <h3 className="text-2xl font-bold mb-6 flex items-center gap-3 text-orange-600">
              <AlertTriangle className="w-7 h-7" />
              Areas Needing Immediate Attention
            </h3>
            
            {weakAreas.length > 0 ? (
              <div className="space-y-8">
                {weakAreas.map((area, idx) => (
                  <div key={idx} className="border-l-4 border-orange-500 pl-6 bg-orange-50 p-6 rounded-r-xl">
                    <h4 className="text-xl font-bold mb-4 capitalize text-orange-800">{area.category}</h4>
                    <ul className="space-y-3">
                      {getRecommendations(area.category).map((rec, recIdx) => (
                        <li key={recIdx} className="flex items-start gap-3">
                          <CheckCircle className="w-5 h-5 text-green-600 mt-1 flex-shrink-0" />
                          <span className="text-gray-700 font-medium">{rec}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-gray-600 text-lg">No critical areas identified, but there's always room for improvement!</p>
            )}
          </div>
        )}

        {risk.percentage >= 80 && (
          <div className="bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-300 rounded-2xl p-8 shadow-lg">
            <div className="flex items-center gap-4 mb-3">
              <CheckCircle className="w-10 h-10 text-green-600" />
              <h3 className="text-3xl font-bold text-green-800">Excellent Security Practices!</h3>
            </div>
            <p className="text-gray-700 text-lg">
              You're following strong cybersecurity practices. Keep up the good work and stay vigilant!
            </p>
          </div>
        )}

        <button
          onClick={resetQuiz}
          className="mt-8 w-full py-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl hover:from-purple-700 hover:to-indigo-700 transition-all font-bold text-lg shadow-lg"
        >
          Take Quiz Again
        </button>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50">
      {/* Header */}
      <header className="bg-white/80 backdrop-blur-md border-b-2 border-purple-200 sticky top-0 z-10 shadow-md">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl">
              <Shield className="w-8 h-8 text-white" />
            </div>
            <h1 className="text-3xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">
              CyberShield
            </h1>
          </div>
          <nav className="flex gap-2">
            <button
              onClick={() => setActiveTab('home')}
              className={`px-6 py-3 rounded-xl transition-all font-semibold ${
                activeTab === 'home' 
                  ? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-lg' 
                  : 'text-gray-700 hover:bg-purple-100'
              }`}
            >
              <Home className="w-5 h-5 inline mr-2" />
              Awareness
            </button>
            <button
              onClick={() => setActiveTab('assessment')}
              className={`px-6 py-3 rounded-xl transition-all font-semibold ${
                activeTab === 'assessment' 
                  ? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-lg' 
                  : 'text-gray-700 hover:bg-purple-100'
              }`}
            >
              <ClipboardList className="w-5 h-5 inline mr-2" />
              Risk Assessment
            </button>
          </nav>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-6 py-12">
        {activeTab === 'home' && (
          <div>
            {/* Hero Section */}
            <div className="mb-12 text-center">
              <h2 className="text-5xl font-bold bg-gradient-to-r from-purple-600 via-indigo-600 to-blue-600 bg-clip-text text-transparent mb-4">
                Cybersecurity Awareness Hub
              </h2>
              <p className="text-xl text-gray-700 max-w-3xl mx-auto">
                Learn about cyber threats, hacker tools, and how to protect yourself in the digital world
              </p>
            </div>

            {/* Category Navigation */}
            <div className="flex justify-center gap-4 mb-12 flex-wrap">
              <button
                onClick={() => setSelectedCategory('all')}
                className={`px-6 py-3 rounded-xl font-semibold transition-all ${
                  selectedCategory === 'all'
                    ? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-lg'
                    : 'bg-white text-gray-700 hover:shadow-md'
                }`}
              >
                All Topics
              </button>
              <button
                onClick={() => setSelectedCategory('theft')}
                className={`px-6 py-3 rounded-xl font-semibold transition-all ${
                  selectedCategory === 'theft'
                    ? 'bg-gradient-to-r from-red-500 to-pink-500 text-white shadow-lg'
                    : 'bg-white text-gray-700 hover:shadow-md'
                }`}
              >
                Types of Theft
              </button>
              <button
                onClick={() => setSelectedCategory('tools')}
                className={`px-6 py-3 rounded-xl font-semibold transition-all ${
                  selectedCategory === 'tools'
                    ? 'bg-gradient-to-r from-orange-500 to-yellow-500 text-white shadow-lg'
                    : 'bg-white text-gray-700 hover:shadow-md'
                }`}
              >
                Hacker Tools
              </button>
              <button
                onClick={() => setSelectedCategory('safety')}
                className={`px-6 py-3 rounded-xl font-semibold transition-all ${
                  selectedCategory === 'safety'
                    ? 'bg-gradient-to-r from-green-500 to-teal-500 text-white shadow-lg'
                    : 'bg-white text-gray-700 hover:shadow-md'
                }`}
              >
                Data Safety
              </button>
            </div>

            {/* Types of Theft Section */}
            {(selectedCategory === 'all' || selectedCategory === 'theft') && (
              <div className="mb-16">
                <h3 className="text-3xl font-bold mb-8 text-gray-800 flex items-center gap-3">
                  <AlertTriangle className="w-8 h-8 text-red-500" />
                  Types of Cyber Theft
                </h3>
                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {awarenessContent.typesOfTheft.map((item, idx) => {
                    const Icon = item.icon;
                    return (
                      <div key={idx} className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all border-2 border-transparent hover:border-purple-300 overflow-hidden">
                        <div className={`bg-gradient-to-br ${item.color} p-6`}>
                          <Icon className="w-12 h-12 text-white mb-3" />
                          <h4 className="text-2xl font-bold text-white">{item.title}</h4>
                        </div>
                        <div className="p-6">
                          <p className="text-gray-700 mb-4 font-medium">{item.description}</p>
                          
                          <div className="mb-4">
                            <p className="font-bold text-gray-800 mb-2">Attack Methods:</p>
                            <ul className="space-y-1">
                              {item.methods.map((method, mIdx) => (
                                <li key={mIdx} className="flex items-start gap-2 text-sm text-gray-600">
                                  <XCircle className="w-4 h-4 text-red-500 mt-0.5 flex-shrink-0" />
                                  {method}
                                </li>
                              ))}
                            </ul>
                          </div>

                          <div className="mb-4">
                            <p className="font-bold text-gray-800 mb-2">Prevention:</p>
                            <ul className="space-y-1">
                              {item.prevention.map((prev, pIdx) => (
                                <li key={pIdx} className="flex items-start gap-2 text-sm text-gray-600">
                                  <CheckCircle className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
                                  {prev}
                                </li>
                              ))}
                            </ul>
                          </div>

                          <div className="bg-gradient-to-r from-purple-50 to-indigo-50 p-3 rounded-lg border border-purple-200">
                            <p className="text-sm font-bold text-purple-800">📊 {item.stats}</p>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}

            {/* Hacker Tools Section */}
            {(selectedCategory === 'all' || selectedCategory === 'tools') && (
              <div className="mb-16">
                <h3 className="text-3xl font-bold mb-8 text-gray-800 flex items-center gap-3">
                  <Skull className="w-8 h-8 text-orange-500" />
                  Hacker Tools & Methods
                </h3>
                <div className="grid md:grid-cols-2 gap-6">
                  {awarenessContent.hackerTools.map((tool, idx) => {
                    const Icon = tool.icon;
                    return (
                      <div key={idx} className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all border-2 border-transparent hover:border-orange-300">
                        <div className={`bg-gradient-to-br ${tool.color} p-6 flex items-center gap-4`}>
                          <Icon className="w-16 h-16 text-white" />
                          <h4 className="text-2xl font-bold text-white">{tool.title}</h4>
                        </div>
                        <div className="p-6">
                          <p className="text-gray-700 mb-4 font-medium">{tool.description}</p>
                          
                          <div className="mb-4">
                            <p className="font-bold text-gray-800 mb-2">Common Types:</p>
                            <div className="flex flex-wrap gap-2">
                              {tool.types.map((type, tIdx) => (
                                <span key={tIdx} className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm font-medium">
                                  {type}
                                </span>
                              ))}
                            </div>
                          </div>

                          <div className="mb-4">
                            <p className="font-bold text-gray-800 mb-2">How It Works:</p>
                            <p className="text-gray-600 text-sm">{tool.howItWorks}</p>
                          </div>

                          <div className="bg-gradient-to-r from-red-50 to-orange-50 p-4 rounded-lg border-l-4 border-red-500">
                            <p className="font-bold text-red-800 text-sm mb-1">Real-World Example:</p>
                            <p className="text-red-700 text-sm">{tool.realExample}</p>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}

            {/* Data Safety Section */}
            {(selectedCategory === 'all' || selectedCategory === 'safety') && (
              <div>
                <h3 className="text-3xl font-bold mb-8 text-gray-800 flex items-center gap-3">
                  <Shield className="w-8 h-8 text-green-500" />
                  Data Safety Best Practices
                </h3>
                <div className="grid md:grid-cols-2 gap-6">
                  {awarenessContent.dataSafety.map((practice, idx) => {
                    const Icon = practice.icon;
                    return (
                      <div key={idx} className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all border-2 border-transparent hover:border-green-300">
                        <div className={`bg-gradient-to-br ${practice.color} p-6`}>
                          <div className="flex items-center justify-between mb-3">
                            <Icon className="w-12 h-12 text-white" />
                            <span className={`px-4 py-1 rounded-full text-white font-bold text-sm ${
                              practice.importance === 'Critical' ? 'bg-red-500' :
                              practice.importance === 'Essential' ? 'bg-orange-500' :
                              'bg-yellow-500'
                            }`}>
                              {practice.importance}
                            </span>
                          </div>
                          <h4 className="text-2xl font-bold text-white">{practice.title}</h4>
                        </div>
                        <div className="p-6">
                          <p className="text-gray-700 mb-4 font-medium">{practice.description}</p>
                          
                          <div className="mb-4">
                            <p className="font-bold text-gray-800 mb-3">Implementation Steps:</p>
                            <ul className="space-y-2">
                              {practice.implementation.map((step, sIdx) => (
                                <li key={sIdx} className="flex items-start gap-2">
                                  <CheckCircle className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
                                  <span className="text-gray-700 text-sm">{step}</span>
                                </li>
                              ))}
                            </ul>
                          </div>

                          <div className="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-lg border-l-4 border-green-500">
                            <p className="font-bold text-green-800 text-sm mb-1">Key Benefit:</p>
                            <p className="text-green-700 text-sm font-medium">{practice.benefit}</p>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}
          </div>
        )}

        {activeTab === 'assessment' && !quizStarted && !showReport && (
          <div className="max-w-2xl mx-auto">
            <div className="bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl shadow-2xl p-12 text-center text-white">
              <ClipboardList className="w-20 h-20 mx-auto mb-6 opacity-90" />
              <h2 className="text-4xl font-bold mb-4">Get Your Risk Report</h2>
              <p className="text-lg mb-8 opacity-90">
                Take a 10-question assessment with real cyber incident examples to understand your security posture
              </p>
              <button
                onClick={() => setQuizStarted(true)}
                className="px-10 py-4 bg-white text-purple-600 rounded-xl hover:bg-gray-100 transition-all font-bold text-xl shadow-lg"
              >
                Start Assessment
              </button>
            </div>
          </div>
        )}

        {activeTab === 'assessment' && quizStarted && !showReport && (
          <div className="max-w-3xl mx-auto">
            <div className="bg-white rounded-2xl shadow-2xl border-2 border-purple-200 overflow-hidden">
              <div className="bg-gradient-to-r from-purple-500 to-indigo-600 p-6">
                <div className="flex items-center justify-between mb-3 text-white">
                  <span className="text-lg font-semibold">
                    Question {currentQuestion + 1} of {quizQuestions.length}
                  </span>
                  <span className="text-lg font-semibold">
                    {Math.round(((currentQuestion) / quizQuestions.length) * 100)}% Complete
                  </span>
                </div>
                <div className="w-full bg-white/30 rounded-full h-3">
                  <div 
                    className="bg-white h-3 rounded-full transition-all shadow-lg"
                    style={{ width: `${((currentQuestion) / quizQuestions.length) * 100}%` }}
                  />
                </div>
              </div>

              <div className="p-8">
                <h3 className="text-3xl font-bold mb-8 text-gray-800">
                  {quizQuestions[currentQuestion].question}
                </h3>

                <div className="space-y-4 mb-8">
                  {quizQuestions[currentQuestion].options.map((option, idx) => (
                    <button
                      key={idx}
                      onClick={() => handleAnswer(option.score)}
                      className="w-full p-5 text-left border-2 border-gray-200 rounded-xl hover:bg-purple-50 hover:border-purple-400 transition-all font-medium text-gray-700 text-lg"
                    >
                      {option.text}
                    </button>
                  ))}
                </div>

                {/* Real Incident Warning */}
                <div className="bg-gradient-to-r from-red-50 to-orange-50 border-l-4 border-red-500 p-6 rounded-lg">
                  <div className="flex items-start gap-3 mb-3">
                    <AlertTriangle className="w-6 h-6 text-red-600 flex-shrink-0 mt-1" />
                    <div>
                      <h4 className="font-bold text-red-800 text-lg mb-2">
                        Real Cyber Incident: {quizQuestions[currentQuestion].realIncident.title}
                      </h4>
                      <p className="text-red-700 mb-3">
                        {quizQuestions[currentQuestion].realIncident.description}
                      </p>
                      <div className="bg-red-100 px-4 py-2 rounded-lg inline-block">
                        <p className="text-red-900 font-bold text-sm">
                          💥 Impact: {quizQuestions[currentQuestion].realIncident.impact}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'assessment' && showReport && <RiskReport />}
      </main>
    </div>
  );
};

export default CyberSecurityApp;