import React from "react";
import { Calendar, AlertCircle } from "lucide-react";
import { Helmet } from "react-helmet";

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

  return (
    <div className="min-h-screen bg-slate-900">
      <Helmet>
        <title>Terms of Service | 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">
              Terms of Service
            </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>

      <section className="py-12 md:py-24 bg-slate-950">
        <div className="container mx-auto px-4 max-w-screen-xl">
          {/* Important Notice */}
          <div className="bg-slate-900 rounded-md p-5 mb-6">
            <div className="flex items-start gap-4">
              <div className="bg-slate-950 p-2 rounded-md">
                <AlertCircle 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">
                  Please read these Terms of Service carefully before using our
                  services. By accessing or using our services, you agree to be
                  bound by these terms.
                </p>
              </div>
            </div>
          </div>

          {/* Terms Content */}
          <div className="space-y-6">
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                1. Acceptance of Terms
              </h2>
              <div className="bg-slate-900 rounded-md p-5">
                <p className="text-gray-300 mb-4">
                  By accessing and using our services, you acknowledge that you
                  have read, understood, and agree to be bound by these Terms of
                  Service, along with our Privacy Policy and Acceptable Use
                  Policy.
                </p>
                <p className="text-gray-300">
                  We reserve the right to modify these terms at any time. Your
                  continued use of our services after any changes constitutes
                  acceptance of those changes.
                </p>
              </div>
            </section>

            {/* Service Description */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                2. Service Description
              </h2>
              <div className="space-y-8">
                <p className="text-xl text-gray-300">
                  We provide web hosting, VPS hosting, and related services.
                  While we strive to ensure high availability and performance,
                  we cannot guarantee that our services will be uninterrupted or
                  error-free.
                </p>
                <div className="bg-slate-900 rounded-md p-5">
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Our Commitment
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>99.9% uptime guarantee for all hosting services</li>
                    <li>24/7 technical support</li>
                    <li>Regular security updates and maintenance</li>
                    <li>Data backup services as specified in your plan</li>
                  </ul>
                </div>
              </div>
            </section>

            {/* User Responsibilities */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                3. User Responsibilities
              </h2>
              <div className="space-y-8">
                <p className="text-xl text-gray-300">
                  You are responsible for maintaining the security of your
                  account, including but not limited to protecting your password
                  and other login credentials.
                </p>
                <div className="bg-slate-900 rounded-md p-5">
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Prohibited Activities
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>Uploading or distributing malicious code</li>
                    <li>
                      Engaging in unauthorized scanning or penetration testing
                    </li>
                    <li>
                      Hosting content that violates intellectual property rights
                    </li>
                    <li>Using our services for any illegal activities</li>
                  </ul>
                </div>
              </div>
            </section>

            {/* Payment Terms */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                4. Payment Terms
              </h2>
              <p className="text-xl text-gray-300 mb-8">
                Services are billed according to the plan you select. You agree
                to pay all fees associated with your account.
              </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">
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Billing Cycle
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>Monthly or annual billing options</li>
                    <li>Automatic renewal unless cancelled</li>
                    <li>Pro-rated refunds for cancellations</li>
                  </ul>
                </div>
                <div className="bg-slate-900 rounded-md p-5">
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Payment Methods
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>Major credit cards accepted</li>
                    <li>PayPal and bank transfers</li>
                    <li>Cryptocurrency options available</li>
                  </ul>
                </div>
              </div>
            </section>

            {/* Termination */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                5. Termination
              </h2>
              <div className="space-y-8">
                <p className="text-xl text-gray-300">
                  We reserve the right to suspend or terminate your access to
                  our services for violations of these terms or for any other
                  reason we deem appropriate.
                </p>
                <div className="bg-slate-900 rounded-md p-5">
                  <h3 className="text-xl font-semibold text-white mb-4">
                    Effect of Termination
                  </h3>
                  <ul className="space-y-2 text-gray-300">
                    <li>All access to services will be discontinued</li>
                    <li>Data may be permanently deleted after 30 days</li>
                    <li>You remain liable for any outstanding payments</li>
                    <li>Certain terms survive termination</li>
                  </ul>
                </div>
              </div>
            </section>

            {/* Liability */}
            <section>
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
                6. Limitation of Liability
              </h2>
              <div className="space-y-8">
                <p className="text-xl text-gray-300">
                  We shall not be liable for any indirect, incidental, special,
                  consequential, or punitive damages resulting from your use of
                  our services.
                </p>
                <div className="bg-slate-900 rounded-md p-5">
                  <div className="flex items-start gap-4">
                    <div className="bg-slate-950 p-2 rounded-md">
                      <AlertCircle className="w-6 h-6 text-blue-500" />
                    </div>
                    <p className="text-gray-300">
                      Our liability is limited to the amount you paid for the
                      services in the 12 months preceding the claim.
                    </p>
                  </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">
                Questions About Our Terms?
              </h2>
              <p className="text-xl text-gray-300 mb-8">
                If you have any questions about these terms, please contact our
                legal 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 Legal
                </button>
                <button className="bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 ">
                  Download PDF
                </button>
              </div>
            </section>

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

export default TOSPage;
