import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowLeft, Shield, Code, Globe } from 'lucide-react';
import { SITE_CONFIG } from '../config/tools';

const TermsOfService = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-slate-900 dark:via-slate-800 dark:to-indigo-900">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Header */}
        <div className="mb-8">
          <Link 
            to="/" 
            className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors mb-6"
          >
            <ArrowLeft className="h-4 w-4" />
            Back to Home
          </Link>
          
          <div className="flex items-center gap-3 mb-4">
            <div className="p-3 bg-gradient-to-br from-blue-500 to-purple-500 rounded-xl shadow-lg">
              <Shield className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold text-slate-800 dark:text-white">
                Terms of Service
              </h1>
              <p className="text-slate-600 dark:text-slate-300">
                Last updated: {new Date().toLocaleDateString()}
              </p>
            </div>
          </div>
        </div>

        {/* Content */}
        <div className="bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm rounded-2xl border border-slate-200 dark:border-slate-700 p-8 shadow-xl">
          <div className="prose prose-slate dark:prose-invert max-w-none">
            
            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
                <Code className="h-5 w-5 text-blue-600" />
                1. Acceptance of Terms
              </h2>
              <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
                By accessing and using {SITE_CONFIG.title} ("{SITE_CONFIG.domain}"), you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service.
              </p>
            </section>

            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
                <Globe className="h-5 w-5 text-green-600" />
                2. Service Description
              </h2>
              <p className="text-slate-600 dark:text-slate-300 leading-relaxed mb-4">
                {SITE_CONFIG.title} provides a collection of developer tools including but not limited to:
              </p>
              <ul className="list-disc list-inside text-slate-600 dark:text-slate-300 space-y-2 ml-4">
                <li>Object and Table Editors for JSON, CSV, and other data formats</li>
                <li>URL and Base64 Encoders/Decoders</li>
                <li>Code Beautifiers and Minifiers</li>
                <li>Text Analysis and Comparison Tools</li>
                <li>Other web-based developer utilities</li>
              </ul>
              <p className="text-slate-600 dark:text-slate-300 leading-relaxed mt-4">
                All tools run entirely in your browser - no data is sent to our servers for processing.
              </p>
            </section>

            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
                3. Privacy-First Approach
              </h2>
              <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 mb-4">
                <p className="text-blue-800 dark:text-blue-200 font-medium mb-2">
                  🔒 What "Privacy-First" means at {SITE_CONFIG.title}:
                </p>
                <ul className="list-disc list-inside text-blue-700 dark:text-blue-300 space-y-1 text-sm">
                  <li><strong>Client-Side Processing:</strong> All tools process your data locally in your browser</li>
                  <li><strong>No Data Upload:</strong> Your sensitive data never leaves your device</li>
                  <li><strong>No Storage:</strong> We don't store, cache, or log your input data</li>
                  <li><strong>Minimal Analytics:</strong> We only collect anonymous usage statistics via Google Analytics</li>
                  <li><strong>No Tracking:</strong> No user accounts, no personal data collection</li>
                </ul>
              </div>
              <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
                We use Google Analytics to understand how our tools are used (page views, popular tools, etc.) but we never track or store the actual data you process with our tools.
              </p>
            </section>

            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
                4. Use License
              </h2>
              <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
                Permission is granted to temporarily use {SITE_CONFIG.title} for personal and commercial purposes. This is the grant of a license, not a transfer of title, and under this license you may not:
              </p>
              <ul className="list-disc list-inside text-slate-600 dark:text-slate-300 space-y-2 ml-4 mt-4">
                <li>Use the service for any illegal or unauthorized purpose</li>
                <li>Attempt to reverse engineer or extract source code</li>
                <li>Use automated tools to overload our servers</li>
                <li>Redistribute or resell access to the service</li>
              </ul>
            </section>

            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
                5. Disclaimer
              </h2>
              <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
                The materials on {SITE_CONFIG.title} are provided on an 'as is' basis. {SITE_CONFIG.title} makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties including without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.
              </p>
            </section>

            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
                6. Limitations
              </h2>
              <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
                In no event shall {SITE_CONFIG.title} or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on {SITE_CONFIG.title}, even if {SITE_CONFIG.title} or an authorized representative has been notified orally or in writing of the possibility of such damage.
              </p>
            </section>

            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
                7. Future Monetization
              </h2>
              <div className="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4">
                <p className="text-amber-800 dark:text-amber-200 leading-relaxed">
                  <strong>Transparency Notice:</strong> We display Adsterra advertisements to support the free operation of this service. Ads are clearly marked and do not interfere with tool functionality. Our privacy-first approach remains unchanged - we will never sell or share your usage data with advertisers.
                </p>
              </div>
            </section>

            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
                8. Revisions
              </h2>
              <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
                {SITE_CONFIG.title} may revise these terms of service at any time without notice. By using this service, you are agreeing to be bound by the then current version of these terms of service.
              </p>
            </section>

            <section>
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
                9. Contact Information
              </h2>
              <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
                If you have any questions about these Terms of Service, please contact us at{' '}
                <a href="mailto:dewe.developer@gmail.com" className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline">
                  dewe.developer@gmail.com
                </a>
                {' '}or through our website at {SITE_CONFIG.domain}.
              </p>
            </section>

          </div>
        </div>
      </div>
    </div>
  );
};

export default TermsOfService;