import Header from '@/components/ui/header';
import Footer from '@/components/ui/footer';
import { Shield, Clock, ArrowLeft, Lock, Eye, Database, UserCheck } from 'lucide-react';
import Link from 'next/link';
import { BRAND } from '@/lib/white-label/constants';

export const metadata = {
  title: `Privacy Policy | ${BRAND.companyName}`,
  description: `Privacy Policy for ${BRAND.companyName} platform.`,
};

export default function PrivacyPage() {
  return (
    <main className="min-h-screen bg-brand-bg">
      <Header />
      <div className="pt-32 pb-20 px-4">
        <div className="max-w-4xl mx-auto">
          <Link 
            href="/"
            className="inline-flex items-center gap-2 text-gray-400 hover:text-brand transition-colors mb-8"
          >
            <ArrowLeft className="w-4 h-4" />
            Back to Home
          </Link>
          
          <div className="glass-card p-8 md:p-12 bg-black/50">
            <div className="flex items-center gap-4 mb-8">
              <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-green-500/20 to-brand-deep/20 flex items-center justify-center">
                <Shield className="w-8 h-8 text-green-400" />
              </div>
              <div>
                <h1 className="text-3xl font-bold text-white">Privacy Policy</h1>
                <div className="flex items-center gap-2 text-gray-400 mt-1">
                  <Clock className="w-4 h-4" />
                  <span>Coming Soon</span>
                </div>
              </div>
            </div>
            
            <div className="border-l-4 border-green-500/50 pl-6 py-4 bg-green-500/5 rounded-r-lg mb-8">
              <p className="text-gray-300 text-lg">
                We're finalizing our Privacy Policy to ensure full transparency about how {BRAND.companyName} 
                handles your data. Your privacy is paramount to us.
              </p>
            </div>
            
            <div className="grid md:grid-cols-2 gap-6 mb-8">
              <div className="p-6 bg-white/5 rounded-xl border border-white/10">
                <Lock className="w-8 h-8 text-brand mb-4" />
                <h3 className="text-white font-semibold mb-2">Data Encryption</h3>
                <p className="text-gray-400 text-sm">All data encrypted at rest and in transit using industry-standard protocols</p>
              </div>
              <div className="p-6 bg-white/5 rounded-xl border border-white/10">
                <Eye className="w-8 h-8 text-brand-secondary-light mb-4" />
                <h3 className="text-white font-semibold mb-2">Transparency</h3>
                <p className="text-gray-400 text-sm">Full audit trails and clear documentation of all data access</p>
              </div>
              <div className="p-6 bg-white/5 rounded-xl border border-white/10">
                <Database className="w-8 h-8 text-green-400 mb-4" />
                <h3 className="text-white font-semibold mb-2">Data Isolation</h3>
                <p className="text-gray-400 text-sm">Your data is never used to train our models or shared with third parties</p>
              </div>
              <div className="p-6 bg-white/5 rounded-xl border border-white/10">
                <UserCheck className="w-8 h-8 text-yellow-400 mb-4" />
                <h3 className="text-white font-semibold mb-2">Your Control</h3>
                <p className="text-gray-400 text-sm">Export or delete your data at any time with full data portability</p>
              </div>
            </div>
            
            <div className="space-y-6 text-gray-400">
              <h2 className="text-xl font-semibold text-white">Our Privacy Commitments</h2>
              <ul className="space-y-3">
                <li className="flex items-start gap-3">
                  <span className="text-green-400 mt-1">✓</span>
                  <span>SOC 2 Type II compliance in progress</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-green-400 mt-1">✓</span>
                  <span>GDPR and CCPA compliant data handling</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-green-400 mt-1">✓</span>
                  <span>No selling of customer data—ever</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-green-400 mt-1">✓</span>
                  <span>Regular third-party security audits</span>
                </li>
              </ul>
            </div>
            
            <div className="mt-12 p-6 bg-gradient-to-r from-green-500/10 to-brand-deep/10 rounded-xl border border-green-500/20">
              <p className="text-gray-300">
                <span className="text-white font-semibold">Privacy Questions?</span> Reach out at{' '}
                <a href={`mailto:privacy@${BRAND.domain}`} className="text-green-400 hover:underline">
                  privacy@{BRAND.domain}
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </main>
  );
}
