import React from "react";
import {
  Calendar,
  Ban,
  XCircle,
  CheckCircle,
  HardDrive,
  Network,
  Cpu,
  AlertTriangle,
} from "lucide-react";
import { Helmet } from "react-helmet";

const AUPPage = () => {
  const lastUpdated = "January 1, 2025";

  return (
    <div className="min-h-screen bg-slate-900">
      <Helmet>
        <title>Acceptable Use Policy | GameZone</title>
      </Helmet>
      {/* Hero */}
      <section className="py-12 md:py-24">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="text-center max-w-3xl mx-auto">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Acceptable Use Policy
            </h1>
            <div className="flex items-center justify-center gap-2 text-gray-300">
              <Calendar className="w-5 h-5" />
              <span>Last Updated: {lastUpdated}</span>
            </div>
          </div>
        </div>
      </section>

      {/* Content */}
      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl">
          {/* Warning Box */}
          <div className="bg-slate-900 border border-slate-900 rounded-md p-5 mb-16">
            <div className="flex items-start gap-4">
              <div className="bg-slate-950 p-2 rounded-md">
                <AlertTriangle className="w-6 h-6 text-blue-500" />
              </div>
              <div>
                <h2 className="text-xl font-semibold text-white mb-2">
                  Important Notice
                </h2>
                <p className="text-gray-300">
                  Violation of this Acceptable Use Policy may result in
                  suspension or termination of your services without notice.
                </p>
              </div>
            </div>
          </div>

          {/* Main Content */}
          <div className="space-y-6">
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                1. Overview
              </h2>
              <div className="bg-slate-900 rounded-md p-5">
                <p className="text-gray-300 mb-4">
                  This Acceptable Use Policy ("AUP") outlines the rules and
                  guidelines for using our hosting services. By using our
                  services, you agree to comply with this policy.
                </p>
                <p className="text-gray-300">
                  We reserve the right to modify this policy at any time.
                  Continued use of our services constitutes acceptance of any
                  modifications.
                </p>
              </div>
            </section>

            {/* Resource Usage */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                2. Resource Usage
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-8">
                <div className="bg-slate-900 rounded-md p-5">
                  <div className="mb-4">
                    <Cpu className="w-8 h-8 text-blue-500" />
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-4">
                    CPU Usage
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>No excessive CPU usage affecting other users</li>
                    <li>Background processes must be properly optimized</li>
                    <li>CPU-intensive tasks require prior approval</li>
                  </ul>
                </div>

                <div className="bg-slate-900 rounded-md p-5">
                  <div className="mb-4">
                    <HardDrive className="w-8 h-8 text-blue-500" />
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Storage Usage
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>Storage must be used for active content only</li>
                    <li>Backup storage limits must be respected</li>
                    <li>No storing of illegal or infringing content</li>
                  </ul>
                </div>

                <div className="bg-slate-900 rounded-md p-5">
                  <div className="mb-4">
                    <Network className="w-8 h-8 text-blue-500" />
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Network Usage
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>No excessive bandwidth consumption</li>
                    <li>Network traffic must be legitimate</li>
                    <li>Content delivery must be optimized</li>
                  </ul>
                </div>
              </div>
            </section>

            {/* Prohibited Activities */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                3. Prohibited Activities
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-8">
                <div className="bg-slate-900 rounded-md p-5">
                  <div className="mb-4">
                    <Ban className="w-8 h-8 text-blue-500" />
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Security Violations
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>Network scanning or probing</li>
                    <li>Unauthorized access attempts</li>
                    <li>DDoS attacks or botnets</li>
                    <li>Malware distribution</li>
                  </ul>
                </div>
                <div className="bg-slate-900 rounded-md p-5">
                  <div className="mb-4">
                    <XCircle className="w-8 h-8 text-blue-500" />
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Content Restrictions
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>Illegal content</li>
                    <li>Copyrighted material without permission</li>
                    <li>Spam or unsolicited email</li>
                    <li>Adult content without proper safeguards</li>
                  </ul>
                </div>
              </div>
            </section>

            {/* Required Actions */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                4. Required Actions
              </h2>
              <div className="bg-slate-900 rounded-md p-5">
                <div className="space-y-8">
                  <div className="flex items-start gap-4">
                    <div className="bg-slate-950 p-2 rounded-md">
                      <CheckCircle className="w-6 h-6 text-blue-500" />
                    </div>
                    <div>
                      <h3 className="text-xl font-semibold text-white mb-2">
                        Security Updates
                      </h3>
                      <p className="text-gray-300">
                        Maintain up-to-date security patches and software
                        versions
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-4">
                    <div className="bg-slate-950 p-2 rounded-md">
                      <CheckCircle className="w-6 h-6 text-blue-500" />
                    </div>
                    <div>
                      <h3 className="text-xl font-semibold text-white mb-2">
                        Access Controls
                      </h3>
                      <p className="text-gray-300">
                        Implement strong passwords and secure access controls
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-4">
                    <div className="bg-slate-950 p-2 rounded-md">
                      <CheckCircle className="w-6 h-6 text-blue-500" />
                    </div>
                    <div>
                      <h3 className="text-xl font-semibold text-white mb-2">
                        Monitoring
                      </h3>
                      <p className="text-gray-300">
                        Monitor for and report any security incidents
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            {/* Enforcement */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                5. Enforcement
              </h2>
              <div className="bg-slate-900 rounded-md p-5">
                <p className="text-gray-300 mb-4">We reserve the right to:</p>
                <ul className="space-y-2 text-gray-300">
                  <li>Investigate violations of this AUP</li>
                  <li>
                    Take action against violations, including service suspension
                  </li>
                  <li>Remove or disable access to any content or resource</li>
                  <li>Cooperate with law enforcement when required</li>
                </ul>
              </div>
            </section>

            {/* Report Violations */}
            <section className="bg-slate-900 rounded-md p-8 text-center">
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
                Report a Violation
              </h2>
              <p className="text-xl text-gray-300 mb-8">
                If you discover a violation of our Acceptable Use Policy, please
                report it immediately.
              </p>
              <div className="flex justify-center gap-2 md:gap-4">
                <button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200">
                  Report Abuse
                </button>
                <button className="bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 border border-slate-900">
                  Contact Support
                </button>
              </div>
            </section>

            {/* Footer Note */}
            <div className="text-center text-gray-400">
              <p>
                This Acceptable Use Policy was last updated on {lastUpdated}.
              </p>
              <p>Copyright © 2025 Your Company Name. All rights reserved.</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default AUPPage;
