import React from 'react';
import { ShieldAlert, Lock, EyeOff, Scale, Gavel, Globe, FileText, ChevronRight, ArrowLeft } from 'lucide-react';
/* Fix: react-router-dom exports may be flaky in this environment, using standard v6 imports */
import { useNavigate } from 'react-router-dom';

const PrivacyPolicy: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className="max-w-5xl mx-auto py-32 px-10 animate-in fade-in duration-500">
      <div className="flex flex-col items-center text-center mb-24">
        <div className="w-32 h-32 bg-yellow-500 border-8 border-black rounded-[3rem] flex items-center justify-center mb-10 shadow-[20px_20px_0px_black] rotate-3">
          <Gavel size={64} className="text-black" />
        </div>
        <h1 className="text-8xl font-black italic text-black uppercase tracking-tighter leading-none mb-6">
          Honest <span className="text-yellow-500 underline decoration-black decoration-8">Manifesto</span>
        </h1>
        <p className="text-[14px] font-black text-zinc-500 uppercase tracking-[0.8em]">Transparency First • 527 Org Protocol</p>
      </div>

      <div className="bg-white border-8 border-black rounded-[4rem] p-16 lg:p-24 space-y-32 shadow-[40px_40px_0px_rgba(255,215,0,0.2)] relative overflow-hidden">
        <section className="space-y-10">
          <div className="flex items-center gap-6">
            <div className="w-14 h-14 bg-black rounded-2xl flex items-center justify-center text-yellow-500 shadow-xl">
              <Lock size={28} />
            </div>
            <h2 className="text-4xl font-black italic text-black uppercase tracking-tight">Our Honest Position</h2>
          </div>
          <p className="text-black text-2xl leading-relaxed font-bold italic">
            Citibank Demo Business Inc is a 527 political organization. We do not offer banking services. We provide mathematical proof of AI expertise to educate the public and policy makers. Our "privacy policy" isn't a legal shield; it's a statement of fact: We do not want your data. We built this mesh to process information in real-time and then discard it.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="p-10 bg-zinc-50 border-4 border-black rounded-[3rem] space-y-4">
              <h4 className="text-[12px] font-black text-zinc-400 uppercase tracking-widest">Data Disposal</h4>
              <p className="text-black font-black text-lg uppercase tracking-tight">Every packet is shredded immediately after ledger verification. Zero persistence is our technical reality.</p>
            </div>
            <div className="p-10 bg-yellow-500 border-4 border-black rounded-[3rem] space-y-4">
              <h4 className="text-[12px] font-black text-black uppercase tracking-widest">No Tracking</h4>
              <p className="text-black font-black text-lg uppercase tracking-tight">We do not use cookies, pixels, or behavioral trackers. We are here to prove intelligence, not sell attention.</p>
            </div>
          </div>
        </section>

        <section className="space-y-10">
          <div className="flex items-center gap-6">
            <div className="w-14 h-14 bg-black rounded-2xl flex items-center justify-center text-yellow-500 shadow-xl">
              <Scale size={28} />
            </div>
            <h2 className="text-4xl font-black italic text-black uppercase tracking-tight">Expert Terms</h2>
          </div>
          <p className="text-black text-xl leading-relaxed font-bold italic">
            By interacting with this registry, you acknowledge that you are viewing educational artifacts. These simulations are designed to demonstrate the convergence of AI and treasury protocols. This platform is provided "as is" to prove that we are the undisputed experts in the liminal world of neural finance.
          </p>
          <ul className="space-y-4">
            {["Identity remains sovereign", "Logic is distributed", "Consensus is hard-coded", "Expertise is verified"].map((term, i) => (
              <li key={i} className="flex items-center gap-4 text-black font-black text-sm uppercase tracking-[0.4em] bg-zinc-100 p-6 rounded-2xl border-4 border-black">
                <div className="w-4 h-4 bg-yellow-500 rounded-full border-2 border-black" />
                {term}
              </li>
            ))}
          </ul>
        </section>

        <footer className="pt-24 border-t-8 border-black text-center space-y-12">
          <p className="text-[12px] font-black text-zinc-400 uppercase tracking-[1em]">Citibank Demo Business Inc • 527 Org • Verified 2025</p>
          <button 
            onClick={() => navigate(-1)} 
            className="px-20 py-8 bg-black text-white rounded-full font-black text-lg uppercase tracking-[0.5em] hover:bg-yellow-500 hover:text-black transition-all shadow-[0_20px_50px_rgba(0,0,0,0.3)] flex items-center gap-6 mx-auto"
          >
            <ArrowLeft size={24} /> Acknowledge Truth
          </button>
        </footer>
      </div>
    </div>
  );
};

export default PrivacyPolicy;