
import React from 'react';
import { ArrowBackIosNew, Security, Shield, VerifiedUser } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';

const text = `It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.`;

export default function PoliciesPage() {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen relative z-20">
      {/* Green Luxury Header */}
      <motion.header
        initial={{ y: -100 }}
        animate={{ y: 0 }}
        className="my-8 rounded-[10px] relative bg-gradient-to-r from-[#034E08] via-[#034E08] to-[#034E08] text-white shadow-2xl relative overflow-hidden"
      >
        <div className="absolute inset-0 bg-black/10" />
        <div className="relative flex items-center justify-between px-6 py-8 safe-area-top">
          
          <div className="text-center flex-1">
            <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.3 }}
              className="inline-block p-4 bg-white/20 rounded-2xl mb-3">
              <Shield className="text-4xl text-[#A70710]" />
            </motion.div>
            <h1 className="text-3xl font-bold tracking-wider">Policies</h1>
            <p className="text-green-100 text-sm mt-1">Your Safety Is Our First Priority</p>
          </div>
          <div className="w-12" />
        </div>
      </motion.header>

      <main className="md:px-4 py-10 max-w-[1400px] mx-auto space-y-8">
        <motion.div whileHover={{ scale: 1.02 }} className="bg-white/90 backdrop-blur rounded-3xl p-8 shadow-xl border border-green-100">
          <div className="flex items-start gap-5">
            <div className="p-4 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl shadow-lg">
              <Security className="text-white text-3xl" />
            </div>
            <div>
              <h3 className="text-xl font-bold text-green-900 mb-3">Privacy Policy</h3>
              <p className="text-gray-800 text-lg leading-8 font-light tracking-wide">{text}</p>
            </div>
          </div>
        </motion.div>

        <motion.div whileHover={{ scale: 1.02 }} className="bg-white/90 backdrop-blur rounded-3xl p-8 shadow-xl border border-green-100">
          <h3 className="text-xl font-bold text-emerald-900 mb-3">Safety Guidelines</h3>
          <p className="text-gray-800 text-lg leading-8 font-light tracking-wide">{text}</p>
        </motion.div>

        <motion.div initial={{ scale: 0.9 }} animate={{ scale: 1 }} className="bg-[#f5fbff] text-black rounded-3xl p-10 text-center shadow-2xl">
          <h2 className="text-2xl font-bold mb-3">Protected With Love & Care</h2>
          <p className="text-black text-lg">Every profile, every chat, every dream — safeguarded 24×7.</p>
          <div className="flex justify-center gap-3 mt-6">
            <VerifiedUser className="text-4xl animate-ping text-[#A70710]" />
            <Shield className="text-5xl text-[#A70710]" />
            <VerifiedUser className="text-4xl animate-ping text-[#A70710]" />
          </div>
        </motion.div>
        <div className="h-32" />
      </main>
    </div>
  );
}