import React from 'react';
import { ArrowLeft } from 'lucide-react';

interface PrivacyPolicyProps {
  onBack: () => void;
}

const PrivacyPolicy: React.FC<PrivacyPolicyProps> = ({ onBack }) => {
  return (
    <div className="bg-background-dark min-h-screen text-text-light font-sans pt-32 pb-20">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <button
          onClick={onBack}
          className="flex items-center gap-2 text-primary hover:text-emerald-400 transition-colors mb-8 group"
        >
          <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
          <span>Back to Home</span>
        </button>

        <h1 className="text-4xl lg:text-5xl font-display font-bold mb-4 text-white">Privacy Policy for Cardly</h1>
        <p className="text-gray-400 mb-8">Last Updated: 2026-01-01</p>

        <div className="space-y-8 text-gray-400 leading-relaxed">
          <section>
            <h2 className="text-2xl font-bold text-white mb-4">1. Introduction</h2>
            <p>
              Welcome to Cardly ("we," "our," or "us"). We are committed to protecting your privacy. This Privacy Policy explains how our mobile application (the "App") collects, uses, and safeguards your information.
            </p>
            <p className="mt-4">
              By downloading and using Cardly, you agree to the terms of this Privacy Policy.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-white mb-4">2. Information We Collect</h2>
            <p className="mb-4">
              We collect a limited amount of information to provide the features of the App.
            </p>

            <h3 className="text-xl font-semibold text-white mt-6 mb-3">A. Device Permissions and Data</h3>
            <p className="mb-4">
              To function correctly, Cardly requires access to certain features on your device:
            </p>
            <ul className="list-disc pl-6 space-y-4">
              <li>
                <strong className="text-gray-200">Camera and Photo Gallery:</strong> We Request access to your camera and photo library to allow you to upload custom cover images for your flashcard decks. Images are uploaded to our secure storage provider (Supabase) and are only used for displaying your deck covers.
              </li>
              <li>
                <strong className="text-gray-200">Usage Stats (Package Usage Stats):</strong> We use the PACKAGE_USAGE_STATS permission to enable "Focus Mode." This feature monitors which apps you are currently using to block distracting apps while you are studying. We do not store, sell, or share your usage history. This data is processed locally on your device to trigger the blocking mechanism.
              </li>
              <li>
                <strong className="text-gray-200">System Alert Window (Overlay):</strong> We use the "Display over other apps" permission to show the Focus Mode blocking screen when you attempt to open a restricted app during a study session.
              </li>
            </ul>

            <h3 className="text-xl font-semibold text-white mt-8 mb-3">B. Account Information</h3>
            <p className="mb-4">
              If you create an account, we store your authentication credentials (via email or social login) and user profile information consistent with our backend provider, Supabase. This includes your:
            </p>
            <ul className="list-disc pl-6 space-y-2">
              <li>Email address</li>
              <li>User ID</li>
              <li>Flashcard data (Decks, Cards, Progress)</li>
            </ul>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-white mb-4">3. How We Use Your Information</h2>
            <p>
              We use the collected information for the following purposes:
            </p>
            <ul className="list-disc pl-6 mt-4 space-y-2">
              <li>
                <strong className="text-gray-200">Core Functionality:</strong> To allow you to create flashcards, study them, and upload associated images.
              </li>
              <li>
                <strong className="text-gray-200">Focus Mode:</strong> To detect distracting apps and intervene to help you stay focused.
              </li>
              <li>
                <strong className="text-gray-200">Sync:</strong> To synchronize your study progress and decks across multiple devices.
              </li>
            </ul>
            <p className="mt-4">
              We do not sell your personal data to third parties.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-white mb-4">4. Third-Party Services</h2>
            <p>
              We may use third-party services that collect information used to identify you. Please consult the privacy policies of these third-party service providers:
            </p>
            <ul className="list-disc pl-6 mt-4 space-y-2">
              <li>
                Supabase: We use Supabase for authentication and database services. <span className="text-primary hover:text-emerald-400 cursor-pointer">Supabase Privacy Policy</span>
              </li>
              <li>
                Expo: We use Expo to build and update the app. <span className="text-primary hover:text-emerald-400 cursor-pointer">Expo Privacy Policy</span>
              </li>
              <li>
                Google Play Services: <span className="text-primary hover:text-emerald-400 cursor-pointer">Google Policies</span>
              </li>
            </ul>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-white mb-4">5. Data Security</h2>
            <p>
              We value your trust in providing us your Personal Information and strive to use commercially acceptable means of protecting it. All data synchronized with our servers is transmitted over secure SSL/TLS connections. However, remind that no method of transmission over the internet or method of electronic storage is 100% secure and reliable, and we cannot guarantee its absolute security.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-white mb-4">6. Children's Privacy</h2>
            <p>
              These Services do not address anyone under the age of 13. We do not knowingly collect personally identifiable information from children under 13.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-white mb-4">7. Changes to This Privacy Policy</h2>
            <p>
              We may update our Privacy Policy from time to time. Thus, you are advised to review this page periodically for any changes. We will notify you of any changes by posting the new Privacy Policy on this page.
            </p>
          </section>

          <section>
            <h2 className="text-2xl font-bold text-white mb-4">8. Contact Us</h2>
            <p>
              If you have any questions or suggestions about our Privacy Policy, do not hesitate to contact us at:
            </p>
            <a href="mailto:im@mati.ss" className="text-primary hover:text-emerald-400 transition-colors mt-2 inline-block">
              im@mati.ss
            </a>
          </section>

          <div className="pt-8 mt-12 border-t border-white/10 text-center text-sm text-gray-500">
            © 2026 Cardly. All rights reserved.
          </div>
        </div>
      </div>
    </div>
  );
};

export default PrivacyPolicy;