import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowLeft, Shield, Lock, Eye, Server, Cookie, BarChart3, Globe } from 'lucide-react';
import { SITE_CONFIG } from '../config/tools';

const PrivacyPolicy = () => {
  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-green-500 to-emerald-500 rounded-xl shadow-lg">
              <Lock className="h-6 w-6 text-white" />
            </div>
            <div>
              <h1 className="text-3xl font-bold text-slate-800 dark:text-white">
                Privacy Policy
              </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">
            
            {/* Privacy-First Commitment */}
            <section className="mb-8">
              <div className="bg-gradient-to-r from-green-50 to-blue-50 dark:from-green-900/20 dark:to-blue-900/20 rounded-xl p-6 mb-6">
                <h2 className="text-2xl font-bold text-slate-800 dark:text-white mb-4 flex items-center gap-3">
                  <Shield className="h-6 w-6 text-green-600" />
                  Our Privacy-First Commitment
                </h2>
                <p className="text-slate-700 dark:text-slate-200 text-lg leading-relaxed mb-4">
                  At {SITE_CONFIG.title}, "Privacy-First" isn't just a marketing term—it's our core architectural principle. Your data privacy is protected by design, not by policy alone.
                </p>
                <div className="grid md:grid-cols-2 gap-4">
                  <div className="flex items-start gap-3">
                    <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
                      <Server className="h-5 w-5 text-green-600" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-slate-800 dark:text-white">100% Client-Side</h3>
                      <p className="text-sm text-slate-600 dark:text-slate-300">All processing happens in your browser</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
                      <Lock className="h-5 w-5 text-blue-600" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-slate-800 dark:text-white">Zero Data Upload</h3>
                      <p className="text-sm text-slate-600 dark:text-slate-300">Your sensitive data never leaves your device</p>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
                <Eye className="h-5 w-5 text-blue-600" />
                1. Information We Collect
              </h2>
              
              <div className="space-y-6">
                <div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-4">
                  <h3 className="font-semibold text-red-800 dark:text-red-200 mb-2">
                    ❌ What We DON'T Collect:
                  </h3>
                  <ul className="list-disc list-inside text-red-700 dark:text-red-300 space-y-1 text-sm">
                    <li>Your input data (JSON, CSV, URLs, text, etc.)</li>
                    <li>Files you upload or paste into our tools</li>
                    <li>Personal information (name, email, address)</li>
                    <li>Login credentials or user accounts</li>
                    <li>IP addresses or device fingerprints</li>
                    <li>Browsing history or cross-site tracking</li>
                  </ul>
                </div>

                <div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
                  <h3 className="font-semibold text-green-800 dark:text-green-200 mb-2">
                    ✅ What We DO Collect (via Google Analytics):
                  </h3>
                  <ul className="list-disc list-inside text-green-700 dark:text-green-300 space-y-1 text-sm">
                    <li>Anonymous page views and session duration</li>
                    <li>Which tools are most popular (aggregated data only)</li>
                    <li>General geographic region (country/state level)</li>
                    <li>Browser type and device type (for compatibility)</li>
                    <li>Referral sources (how you found our site)</li>
                  </ul>
                </div>
              </div>
            </section>

            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
                <BarChart3 className="h-5 w-5 text-purple-600" />
                2. Google Analytics Usage
              </h2>
              <p className="text-slate-600 dark:text-slate-300 leading-relaxed mb-4">
                We use Google Analytics to understand how our tools are used and to improve the service. This helps us answer questions like:
              </p>
              <ul className="list-disc list-inside text-slate-600 dark:text-slate-300 space-y-2 ml-4 mb-4">
                <li>Which tools are most helpful to developers?</li>
                <li>Are there performance issues on certain devices?</li>
                <li>How can we improve the user experience?</li>
              </ul>
              <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
                <p className="text-blue-800 dark:text-blue-200 text-sm">
                  <strong>Important:</strong> Google Analytics only sees that someone visited "dewe.dev/beautifier" - it never sees the actual JSON code you're beautifying or any data you process with our tools.
                </p>
              </div>
            </section>

            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
                <Server className="h-5 w-5 text-indigo-600" />
                3. How Our Tools Work
              </h2>
              <div className="bg-slate-50 dark:bg-slate-800/50 rounded-lg p-6">
                <h3 className="font-semibold text-slate-800 dark:text-white mb-3">Technical Architecture:</h3>
                <div className="space-y-3 text-sm">
                  <div className="flex items-start gap-3">
                    <span className="bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 px-2 py-1 rounded text-xs font-medium">CLIENT</span>
                    <p className="text-slate-600 dark:text-slate-300">Your browser downloads our JavaScript code</p>
                  </div>
                  <div className="flex items-start gap-3">
                    <span className="bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-2 py-1 rounded text-xs font-medium">LOCAL</span>
                    <p className="text-slate-600 dark:text-slate-300">All processing happens locally in your browser's memory</p>
                  </div>
                  <div className="flex items-start gap-3">
                    <span className="bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 px-2 py-1 rounded text-xs font-medium">SECURE</span>
                    <p className="text-slate-600 dark:text-slate-300">No data transmission to our servers for processing</p>
                  </div>
                </div>
              </div>
            </section>

            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
                <Cookie className="h-5 w-5 text-orange-600" />
                4. Cookies and Local Storage
              </h2>
              <p className="text-slate-600 dark:text-slate-300 leading-relaxed mb-4">
                We use minimal cookies and local storage for:
              </p>
              <ul className="list-disc list-inside text-slate-600 dark:text-slate-300 space-y-2 ml-4">
                <li><strong>Google Analytics:</strong> Anonymous tracking cookies (you can opt-out)</li>
                <li><strong>Theme Preference:</strong> Remembering if you prefer dark/light mode</li>
                <li><strong>No Personal Data:</strong> We never store your processed data locally</li>
              </ul>
            </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-teal-600" />
                5. Advertising (Adsterra)
              </h2>
              <div className="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4 mb-4">
                <h3 className="font-semibold text-amber-800 dark:text-amber-200 mb-2">
                  Advertising:
                </h3>
                <p className="text-amber-700 dark:text-amber-300 text-sm leading-relaxed mb-3">
                  To keep our tools free, we display Adsterra advertisements.
                </p>
                <ul className="list-disc list-inside text-amber-700 dark:text-amber-300 space-y-1 text-sm">
                  <li>Ads will be clearly marked and non-intrusive</li>
                  <li>No impact on tool functionality or performance</li>
                  <li>The ad network may use cookies for ad delivery</li>
                  <li><strong>We will NEVER share your tool usage data with advertisers</strong></li>
                </ul>
              </div>
            </section>

            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
                6. Your Rights and Controls
              </h2>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
                  <h3 className="font-semibold text-blue-800 dark:text-blue-200 mb-2">Analytics Opt-Out:</h3>
                  <p className="text-blue-700 dark:text-blue-300 text-sm">
                    Install browser extensions like uBlock Origin or use Google's opt-out tools to disable analytics tracking.
                  </p>
                </div>
                <div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
                  <h3 className="font-semibold text-green-800 dark:text-green-200 mb-2">Data Control:</h3>
                  <p className="text-green-700 dark:text-green-300 text-sm">
                    Since we don't collect your data, there's nothing to delete or export. Your data stays with you.
                  </p>
                </div>
              </div>
            </section>

            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
                7. Third-Party Services
              </h2>
              <div className="space-y-4">
                <div className="border-l-4 border-blue-500 pl-4">
                  <h3 className="font-semibold text-slate-800 dark:text-white">Google Analytics</h3>
                  <p className="text-slate-600 dark:text-slate-300 text-sm">
                    Privacy Policy: <a href="https://policies.google.com/privacy" className="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">https://policies.google.com/privacy</a>
                  </p>
                </div>
                <div className="border-l-4 border-green-500 pl-4">
                  <h3 className="font-semibold text-slate-800 dark:text-white">Adsterra</h3>
                  <p className="text-slate-600 dark:text-slate-300 text-sm">
                    Privacy Policy: <a href="https://adsterra.com/privacy-policy/" className="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">https://adsterra.com/privacy-policy/</a>
                  </p>
                </div>
              </div>
            </section>

            <section className="mb-8">
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
                8. Changes to This Policy
              </h2>
              <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
                We may update this privacy policy from time to time. We will notify users of any material changes by updating the "Last updated" date at the top of this policy. Your continued use of the service after any changes constitutes acceptance of the new policy.
              </p>
            </section>

            <section>
              <h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
                9. Contact Us
              </h2>
              <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
                If you have any questions about this Privacy Policy or our privacy practices, 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 visit {SITE_CONFIG.domain}.
              </p>
            </section>

          </div>
        </div>

        {/* Footer */}
        <div className="mt-8 text-center">
          <p className="text-sm text-slate-600 dark:text-slate-600">
            © {SITE_CONFIG.year} {SITE_CONFIG.title} • Your privacy is our priority
          </p>
        </div>
      </div>
    </div>
  );
};

export default PrivacyPolicy;