import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { ShieldAlert, Lock, Bug, ServerCrash } from "lucide-react";

export default function CyberSecuritySite() {
  return (
    <div className="min-h-screen bg-gray-950 text-white p-6">
      <header className="text-center mb-10">
        <h1 className="text-4xl font-bold">2techwithit</h1>
        <p className="text-gray-400 mt-2">
          Understanding Cybersecurity Risks & Why You Need a Consultant
        </p>
      </header>

      <section className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
        <Card className="bg-gray-900 rounded-2xl shadow-lg">
          <CardContent className="p-4">
            <Bug className="mb-3" />
            <h2 className="text-xl font-semibold">Malware Attacks</h2>
            <p className="text-gray-400 text-sm mt-2">
              Viruses, ransomware, and spyware can infiltrate systems and steal or destroy data.
            </p>
          </CardContent>
        </Card>

        <Card className="bg-gray-900 rounded-2xl shadow-lg">
          <CardContent className="p-4">
            <ShieldAlert className="mb-3" />
            <h2 className="text-xl font-semibold">Phishing</h2>
            <p className="text-gray-400 text-sm mt-2">
              Deceptive emails trick users into revealing sensitive credentials and financial information.
            </p>
          </CardContent>
        </Card>

        <Card className="bg-gray-900 rounded-2xl shadow-lg">
          <CardContent className="p-4">
            <Lock className="mb-3" />
            <h2 className="text-xl font-semibold">Data Breaches</h2>
            <p className="text-gray-400 text-sm mt-2">
              Unauthorized access to confidential data can lead to financial and reputational damage.
            </p>
          </CardContent>
        </Card>

        <Card className="bg-gray-900 rounded-2xl shadow-lg">
          <CardContent className="p-4">
            <ServerCrash className="mb-3" />
            <h2 className="text-xl font-semibold">System Vulnerabilities</h2>
            <p className="text-gray-400 text-sm mt-2">
              Unpatched systems and misconfigurations expose networks to attackers.
            </p>
          </CardContent>
        </Card>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-bold mb-4">Why Cybersecurity Matters</h2>
        <p className="text-gray-400">
          Cyber threats are constantly evolving. Organizations that fail to secure their systems risk data loss, downtime, legal consequences, and loss of customer trust.
        </p>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-bold mb-4">Why Hire a Cybersecurity Consultant?</h2>
        <ul className="list-disc ml-6 text-gray