import React from "react";
import {
  Shield,
  Calendar,
  Lock,
  Eye,
  Database,
  Globe,
  Mail,
} from "lucide-react";
import { Helmet } from "react-helmet";

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

  return (
    <div className="min-h-screen bg-slate-900">
      <Helmet>
        <title>Privacy 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">
              Privacy 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">
          {/* Overview Box */}
          <div className="bg-slate-900 rounded-md p-5 mb-16">
            <div className="flex items-start gap-4">
              <div className="bg-slate-950 p-2 rounded-md">
                <Lock className="w-6 h-6 text-blue-500" />
              </div>
              <div>
                <h2 className="text-xl font-semibold text-white mb-2">
                  Your Privacy Matters
                </h2>
                <p className="text-gray-300">
                  This Privacy Policy explains how we collect, use, disclose,
                  and safeguard your information when you use our services.
                  Please read this privacy policy carefully.
                </p>
              </div>
            </div>
          </div>

          <div className="space-y-6">
            {/* Information Collection */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                1. Information We Collect
              </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">
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Personal Information
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>Name and contact information</li>
                    <li>Billing and payment details</li>
                    <li>Account credentials</li>
                    <li>Communication preferences</li>
                  </ul>
                </div>

                <div className="bg-slate-900 rounded-md p-5">
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Technical Data
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>IP addresses and location data</li>
                    <li>Browser and device information</li>
                    <li>Usage statistics and analytics</li>
                    <li>Server logs and performance data</li>
                  </ul>
                </div>
              </div>
            </section>

            {/* Information Usage */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                2. How We Use Your Information
              </h2>
              <p className="text-xl text-gray-300 mb-8">
                We use the collected information for various purposes,
                including:
              </p>
              <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">
                    <Database className="w-8 h-8 text-blue-500" />
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Service Provision
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>Account management</li>
                    <li>Service optimization</li>
                    <li>Technical support</li>
                    <li>Security monitoring</li>
                  </ul>
                </div>
                <div className="bg-slate-900 rounded-md p-5">
                  <div className="mb-4">
                    <Mail className="w-8 h-8 text-blue-500" />
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Communication
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>Service updates</li>
                    <li>Security alerts</li>
                    <li>Marketing (with consent)</li>
                    <li>Support responses</li>
                  </ul>
                </div>
              </div>
            </section>

            {/* Data Protection */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                3. Data Protection
              </h2>
              <p className="text-xl text-gray-300 mb-8">
                We implement robust security measures to protect your
                information, including:
              </p>
              <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="space-y-4">
                    <div className="flex items-center gap-3">
                      <Shield className="w-6 h-6 text-blue-500" />
                      <span className="text-gray-300">
                        Encryption at rest and in transit
                      </span>
                    </div>
                    <div className="flex items-center gap-3">
                      <Lock className="w-6 h-6 text-blue-500" />
                      <span className="text-gray-300">
                        Access controls and authentication
                      </span>
                    </div>
                  </div>
                </div>
                <div className="bg-slate-900 rounded-md p-5">
                  <div className="space-y-4">
                    <div className="flex items-center gap-3">
                      <Eye className="w-6 h-6 text-blue-500" />
                      <span className="text-gray-300">
                        Regular security audits
                      </span>
                    </div>
                    <div className="flex items-center gap-3">
                      <Globe className="w-6 h-6 text-blue-500" />
                      <span className="text-gray-300">
                        Compliance with regulations
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            {/* Data Sharing */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                4. Data Sharing and Third Parties
              </h2>
              <div className="bg-slate-900 rounded-md p-5">
                <p className="text-xl text-gray-300 mb-4">
                  We may share your information with third parties under
                  specific circumstances:
                </p>
                <ul className="space-y-2 text-gray-300">
                  <li>
                    Service providers and partners who assist in operating our
                    services
                  </li>
                  <li>Legal requirements and law enforcement requests</li>
                  <li>
                    Protection of our rights, privacy, safety, or property
                  </li>
                  <li>Business transfers or mergers</li>
                </ul>
              </div>
            </section>

            {/* Privacy Rights */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                5. Your Privacy Rights
              </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">
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Access Rights
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>Request data access</li>
                    <li>Review collected information</li>
                    <li>Data portability</li>
                  </ul>
                </div>
                <div className="bg-slate-900 rounded-md p-5">
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Control Rights
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>Update preferences</li>
                    <li>Request deletion</li>
                    <li>Opt-out options</li>
                  </ul>
                </div>
              </div>
            </section>

            {/* Cookies */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                6. Cookies and Tracking
              </h2>
              <div className="bg-slate-900 rounded-md p-5">
                <p className="text-xl text-gray-300 mb-8">
                  We use cookies and similar tracking technologies to improve
                  your experience:
                </p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  <div>
                    <h3 className="text-xl font-semibold text-white mb-4">
                      Essential & Functional
                    </h3>
                    <ul className="space-y-2 text-gray-300">
                      <li>Essential cookies</li>
                      <li>Functionality cookies</li>
                    </ul>
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold text-white mb-4">
                      Analytics & Marketing
                    </h3>
                    <ul className="space-y-2 text-gray-300">
                      <li>Analytics cookies</li>
                      <li>Marketing cookies (optional)</li>
                    </ul>
                  </div>
                </div>
              </div>
            </section>

            {/* Contact Section */}
            <section className="bg-slate-900 rounded-md p-8 text-center">
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
                Privacy Questions?
              </h2>
              <p className="text-xl text-gray-300 mb-8">
                If you have any questions about our privacy practices, please
                contact our privacy team.
              </p>
              <div className="flex justify-center 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">
                  Contact Privacy Team
                </button>
                <button className="bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200">
                  Download Policy
                </button>
              </div>
            </section>

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

export default PrivacyPolicy;
