import { motion } from 'framer-motion';
import { Shield, Calendar, User, Globe, Lock } from 'lucide-react';
import { useLanguage } from '@/contexts/LanguageContext';

export default function Privacy() {
  const { t } = useLanguage();
  
  const sections = [
    {
      title: "Information We Collect",
      content: [
        "Personal Information: When you create an account, we collect your email address, username, and payment information.",
        "Usage Data: We collect information about how you use our VPN services, including connection timestamps and server locations.",
        "Device Information: We may collect device identifiers, operating system, and app version information.",
        "Payment Information: Payment details are processed through secure third-party payment processors and are not stored on our servers."
      ]
    },
    {
      title: "How We Use Your Information",
      content: [
        "Service Provision: To provide and maintain our VPN services, including customer support.",
        "Account Management: To manage your account, process payments, and send service-related communications.",
        "Service Improvement: To analyze usage patterns and improve our services and user experience.",
        "Legal Compliance: To comply with legal obligations and protect our legal rights."
      ]
    },
    {
      title: "Data Security",
      content: [
        "Encryption: All data transmitted through our VPN services is encrypted using military-grade AES-256 encryption.",
        "No-Log Policy: We do not log your browsing activity, traffic destinations, or DNS queries while connected to our VPN.",
        "Secure Infrastructure: Our servers are maintained with the highest security standards and regular security audits.",
        "Data Retention: We retain minimal connection logs for service optimization and are automatically deleted after 30 days."
      ]
    },
    {
      title: "Third-Party Services",
      content: [
        "Payment Processors: We use trusted third-party payment processors to handle payment transactions securely.",
        "Analytics: We may use analytics services to understand app usage patterns, excluding personal browsing data.",
        "Service Providers: We may engage trusted third-party service providers to assist in providing our services."
      ]
    },
    {
      title: "Your Rights",
      content: [
        "Access: You have the right to access the personal information we hold about you.",
        "Correction: You can update or correct your personal information through your account settings.",
        "Deletion: You can request deletion of your account and associated personal information.",
        "Data Portability: You can request a copy of your personal data in a machine-readable format."
      ]
    }
  ];

  return (
    <div className="min-h-screen py-20 px-4 sm:px-6 lg:px-8">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="text-center mb-12"
        >
          <div className="flex justify-center mb-6">
            <div className="bg-blue-600/20 rounded-lg p-4">
              <Shield className="h-12 w-12 text-blue-400" />
            </div>
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
            {t('privacy.title')}
          </h1>
          <p className="text-xl text-gray-300 mb-4">
            {t('privacy.updated')}
          </p>
          <p className="text-gray-300 max-w-2xl mx-auto">
            {t('privacy.description')}
          </p>
        </motion.div>

        {/* Policy Overview */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-8 mb-12"
        >
          <h2 className="text-2xl font-bold text-white mb-4">{t('privacy.commitment.title')}</h2>
          <p className="text-blue-100 mb-4">
            {t('privacy.commitment.text')}
          </p>
          <div className="flex items-center space-x-4 text-blue-100">
            <Lock className="h-5 w-5" />
            <span>{t('privacy.nolog')}</span>
          </div>
          <div className="flex items-center space-x-4 text-blue-100 mt-2">
            <Globe className="h-5 w-5" />
            <span>{t('privacy.laws')}</span>
          </div>
        </motion.div>

        {/* Policy Sections */}
        <div className="space-y-8">
          {sections.map((section, index) => (
            <motion.div
              key={section.title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              viewport={{ once: true }}
              className="bg-white/10 backdrop-blur-md rounded-xl p-8 border border-white/20"
            >
              <h2 className="text-2xl font-bold text-white mb-6">{section.title}</h2>
              <ul className="space-y-3">
                {section.content.map((item, itemIndex) => (
                  <li key={itemIndex} className="flex items-start space-x-3">
                    <div className="bg-blue-600/20 rounded-full p-1 mt-1 flex-shrink-0">
                      <div className="h-2 w-2 bg-blue-400 rounded-full"></div>
                    </div>
                    <p className="text-gray-300">{item}</p>
                  </li>
                ))}
              </ul>
            </motion.div>
          ))}
        </div>

        {/* Contact Information */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="bg-white/10 backdrop-blur-md rounded-xl p-8 mt-12 border border-white/20"
        >
          <h2 className="text-2xl font-bold text-white mb-6">{t('privacy.contact.title')}</h2>
          <p className="text-gray-300 mb-6">
            {t('privacy.contact.text')}
          </p>
          <div className="space-y-4">
            <div className="flex items-center space-x-3">
              <div className="bg-blue-600/20 rounded-lg p-2">
                <User className="h-5 w-5 text-blue-400" />
              </div>
              <div>
                <h3 className="text-white font-semibold">{t('privacy.company')}</h3>
                <p className="text-gray-300">TAW TRADERS SDN. BHD.</p>
              </div>
            </div>
            <div className="flex items-center space-x-3">
              <div className="bg-blue-600/20 rounded-lg p-2">
                <Globe className="h-5 w-5 text-blue-400" />
              </div>
              <div>
                <h3 className="text-white font-semibold">{t('privacy.email')}</h3>
                <p className="text-gray-300">privacy@hifastvpn.com</p>
              </div>
            </div>
            <div className="flex items-center space-x-3">
              <div className="bg-blue-600/20 rounded-lg p-2">
                <Calendar className="h-5 w-5 text-blue-400" />
              </div>
              <div>
                <h3 className="text-white font-semibold">{t('privacy.policy')}</h3>
                <p className="text-gray-300">{t('privacy.policy.text')}</p>
              </div>
            </div>
          </div>
        </motion.div>

        {/* Final Note */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mt-12 p-6 bg-gradient-to-r from-blue-600/20 to-indigo-600/20 rounded-xl border border-blue-400/30"
        >
          <p className="text-gray-300">
            {t('privacy.acknowledgement')}
          </p>
        </motion.div>
      </div>
    </div>
  );
}