'use client'

import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { Shield, Lock, Eye, Database, Server, FileText } from 'lucide-react'

export default function PrivacyPage() {
  return (
    <div className="min-h-screen bg-[#020202] text-white relative overflow-x-hidden selection:bg-accent/30 selection:text-white">
      {/* Background Atmosphere */}
      <div className="fixed inset-0 pointer-events-none z-0">
        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] mix-blend-overlay" />
        <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-500/[0.03] rounded-full blur-[120px]" />
        <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-accent/[0.02] rounded-full blur-[120px]" />
      </div>

      <Header />

      <main className="relative pt-32 sm:pt-48 pb-20 px-4 sm:px-6 flex-1">
        <div className="max-w-[1000px] mx-auto">
          
          {/* Document Header */}
          <div className="mb-20 text-center relative">
             <div className="inline-flex items-center gap-2 px-3 py-1 bg-white/5 border border-white/10 rounded-full mb-6 backdrop-blur-md">
                <Shield className="w-3 h-3 text-accent" />
                <span className="text-[10px] font-mono uppercase tracking-[0.2em] text-white/70">Protocol Alpha-9</span>
             </div>
             <h1 className="font-display text-5xl sm:text-7xl text-white mb-6 tracking-tight">
                Privacy Policy
             </h1>
             <div className="flex items-center justify-center gap-6 text-[10px] font-mono text-white/30 uppercase tracking-widest">
                <span>Last Updated: 2024.10.12</span>
                <span className="w-1 h-1 bg-white/20 rounded-full" />
                <span>Ref: PRIV-2024-X</span>
             </div>
          </div>

          {/* Document Container */}
          <div className="relative">
            {/* Tech Borders */}
            <div className="absolute -top-px left-0 w-20 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
            <div className="absolute -bottom-px right-0 w-20 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
            
            <div className="bg-[#050505]/80 backdrop-blur-xl border border-white/10 p-8 sm:p-16 relative overflow-hidden">
               {/* Watermark */}
               <div className="absolute top-0 right-0 p-8 opacity-[0.02] pointer-events-none">
                  <Shield className="w-96 h-96" />
               </div>

               {/* Intro */}
               <div className="mb-16 border-l-2 border-accent pl-8 py-2">
                  <p className="font-display text-2xl sm:text-3xl text-white leading-relaxed">
                     We collect minimal data. We protect it like our own. <br/>
                     <span className="text-white/40">We don&apos;t sell it. Ever.</span>
                  </p>
               </div>

               {/* Sections */}
               <div className="space-y-16">
                  
                  {/* Section 1 */}
                  <section className="group">
                     <div className="flex items-start gap-6">
                        <div className="hidden sm:flex flex-col items-center gap-2 mt-2">
                           <div className="w-8 h-8 rounded-full border border-white/10 flex items-center justify-center bg-white/5 group-hover:border-accent/50 transition-colors">
                              <span className="font-mono text-xs text-white/50 group-hover:text-accent">01</span>
                           </div>
                           <div className="w-px h-full bg-white/5 group-hover:bg-white/10 min-h-[100px]" />
                        </div>
                        <div className="flex-1">
                           <h3 className="font-display text-2xl text-white mb-6 flex items-center gap-3">
                              <Database className="w-5 h-5 text-white/30" />
                              Data Collection
                           </h3>
                           <div className="grid sm:grid-cols-2 gap-4">
                              {[
                                 'Account credentials (hashed)',
                                 'Billing information (Stripe)',
                                 'Domain watchlists',
                                 'Search telemetry'
                              ].map((item) => (
                                 <div key={item} className="p-4 bg-white/5 border border-white/5 rounded-none flex items-center gap-3">
                                    <div className="w-1.5 h-1.5 bg-accent/50" />
                                    <span className="font-mono text-sm text-white/70">{item}</span>
                                 </div>
                              ))}
                           </div>
                        </div>
                     </div>
                  </section>

                  {/* Section 2 */}
                  <section className="group">
                     <div className="flex items-start gap-6">
                        <div className="hidden sm:flex flex-col items-center gap-2 mt-2">
                           <div className="w-8 h-8 rounded-full border border-white/10 flex items-center justify-center bg-white/5 group-hover:border-accent/50 transition-colors">
                              <span className="font-mono text-xs text-white/50 group-hover:text-accent">02</span>
                           </div>
                           <div className="w-px h-full bg-white/5 group-hover:bg-white/10 min-h-[100px]" />
                        </div>
                        <div className="flex-1">
                           <h3 className="font-display text-2xl text-white mb-6 flex items-center gap-3">
                              <Eye className="w-5 h-5 text-white/30" />
                              Usage & Purpose
                           </h3>
                           <p className="font-mono text-sm text-white/50 leading-relaxed mb-6">
                              Your data is utilized strictly for operational efficiency. It enables the Real-Time Intelligence Engine to:
                           </p>
                           <ul className="space-y-3 font-mono text-sm text-white/60">
                              <li className="flex items-start gap-3">
                                 <span className="text-accent mt-1">{'>>'}</span>
                                 Provide millisecond-latency domain availability checks.
                              </li>
                              <li className="flex items-start gap-3">
                                 <span className="text-accent mt-1">{'>>'}</span>
                                 Execute automated acquisition strategies (Sniper Mode).
                              </li>
                              <li className="flex items-start gap-3">
                                 <span className="text-accent mt-1">{'>>'}</span>
                                 Process encrypted transactions via secure gateways.
                              </li>
                           </ul>
                        </div>
                     </div>
                  </section>

                  {/* Section 3 */}
                  <section className="group">
                     <div className="flex items-start gap-6">
                        <div className="hidden sm:flex flex-col items-center gap-2 mt-2">
                           <div className="w-8 h-8 rounded-full border border-white/10 flex items-center justify-center bg-white/5 group-hover:border-accent/50 transition-colors">
                              <span className="font-mono text-xs text-white/50 group-hover:text-accent">03</span>
                           </div>
                           <div className="w-px h-full bg-white/5 group-hover:bg-white/10 min-h-[100px]" />
                        </div>
                        <div className="flex-1">
                           <h3 className="font-display text-2xl text-white mb-6 flex items-center gap-3">
                              <Lock className="w-5 h-5 text-white/30" />
                              Security Protocol
                           </h3>
                           <div className="bg-[#020202] border border-white/10 p-6 relative overflow-hidden">
                              <div className="absolute top-0 right-0 w-20 h-20 bg-accent/5 rounded-full blur-2xl" />
                              <p className="font-mono text-sm text-white/60 leading-relaxed relative z-10">
                                 All transmissions are encrypted via <span className="text-white">TLS 1.3</span>. Databases are encrypted at rest using <span className="text-white">AES-256</span>. Access controls are strictly enforced via multi-factor authentication protocols. We employ automated threat detection to safeguard system integrity.
                              </p>
                           </div>
                        </div>
                     </div>
                  </section>

               </div>

               {/* Footer of Card */}
               <div className="mt-20 pt-8 border-t border-white/10 flex justify-between items-center opacity-50">
                  <div className="h-8 w-32 bg-[url('/barcode.png')] bg-contain bg-no-repeat opacity-50" /> 
                  {/* Fallback text if image missing, or just styling */}
                  <div className="font-mono text-[10px] uppercase tracking-widest text-right">
                     Doc_ID: 993-221-AZ<br/>
                     Encrypted
                  </div>
               </div>

            </div>
          </div>

        </div>
      </main>
      <Footer />
    </div>
  )
}
