import React from "react";
import { motion } from "framer-motion";
import {
  Lock,
  Eye,
  Database,
  Share2,
  Bell,
  Cookie,
  Clock,
  UserCheck,
  Users,
} from "lucide-react";

const PrivacyPolicy: React.FC = () => {
  const sections = [
    {
      title: "1. Information We Collect",
      content:
        "We may collect personal details (Name, Email, Phone), account & usage data (Scores, performance history, activity logs), and technical data (IP address, browser type, cookies) to provide and improve our services.",
      icon: Database,
    },
    {
      title: "2. How We Use Your Data",
      content:
        "We use your data to provide platform access, conduct tests, track student performance, generate insights, enable institutional monitoring, and communicate important service updates.",
      icon: Eye,
    },
    {
      title: "3. Data Sharing",
      content:
        "Student data is shared with their respective institutions for academic monitoring. We may disclose data if required by law or to trusted service providers. We do NOT sell your personal data to third parties.",
      icon: Share2,
    },
    {
      title: "4. Data Security",
      content:
        "We implement industry-standard measures including secure authentication, HTTPS encryption, and access monitoring. While we strive to protect your data, no system is completely secure.",
      icon: Lock,
    },
    {
      title: "5. Cookies & Tracking Technologies",
      content:
        "ExamInfra uses cookies to maintain sessions, improve user experience, and analyze usage. You can manage cookie preferences through your browser settings.",
      icon: Cookie,
    },
    {
      title: "6. Data Retention",
      content:
        "We retain your data only for as long as necessary to provide our services or as required for legal and operational compliance.",
      icon: Clock,
    },
    {
      title: "7. User Rights",
      content:
        "Users have the right to access their data, request corrections, or request account deletion. Please contact us to exercise these rights.",
      icon: UserCheck,
    },
    {
      title: "8. Children's Privacy",
      content:
        "ExamInfra is intended for educational use. Minors using the platform should do so under the supervision of a parent, institution, or authorized authority.",
      icon: Users,
    },
    {
      title: "9. Changes to This Policy",
      content:
        "We may update this Privacy Policy periodically. Your continued use of the platform constitutes acceptance of the updated terms.",
      icon: Bell,
    },
  ];

  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <section className="pt-32 pb-16 bg-brand-navy relative overflow-hidden">
        <div className="absolute bottom-0 left-0 -z-0 opacity-10">
          <div className="w-96 h-96 bg-brand-orange rounded-full blur-3xl transform -translate-x-1/2 translate-y-1/2"></div>
        </div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
          <motion.h1
            className="text-4xl md:text-5xl font-extrabold text-white mb-6"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
          >
            Privacy <span className="text-brand-green">Policy</span>
          </motion.h1>
          <motion.p
            className="text-blue-100 text-lg max-w-2xl mx-auto"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.2 }}
          >
            Your privacy is important to us. Learn how we handle and protect
            your personal data at ExamInfra.
          </motion.p>
        </div>
      </section>

      {/* Content */}
      <section className="py-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="space-y-3">
            {sections.map((section, index) => (
              <motion.div
                key={index}
                className="flex gap-6 p-8 rounded-2xl border border-gray-100 bg-white shadow-sm hover:shadow-md transition-shadow"
                initial={{ opacity: 0, x: 20 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: 0.5 }}
              >
                <div className="flex-shrink-0">
                  <div className="w-12 h-12 rounded-xl bg-green-50 flex items-center justify-center text-brand-green">
                    <section.icon className="w-6 h-6" />
                  </div>
                </div>
                <div>
                  <h3 className="text-xl font-bold text-brand-navy mb-3">
                    {section.title}
                  </h3>
                  <p className="text-gray-600 leading-relaxed">
                    {section.content}
                  </p>
                </div>
              </motion.div>
            ))}
          </div>

          <motion.div
            className="mt-16 p-8 rounded-2xl bg-green-50 border border-green-100"
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
          >
            <h3 className="text-lg font-bold text-brand-navy mb-4">
              Contacting Us
            </h3>
            <p className="text-gray-600">
              If you have any questions about this Privacy Policy or wish to
              request data deletion, please contact us at
              <a
                href="mailto:info@examinfra.com"
                className="text-brand-navy font-semibold ml-1 hover:underline"
              >
                info@examinfra.com
              </a>
              .
            </p>
          </motion.div>
        </div>
      </section>
    </div>
  );
};

export default PrivacyPolicy;