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

const loremText = `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 TermsAndCondition() {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen  overflow-hidden relative z-20">
      {/* Luxury Header with Gold & Maroon */}
      <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"
      >
        {/* Decorative Mandala Pattern */}
     

        <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="flex justify-center mb-3"
            >
              <div className="p-4 bg-white/20 backdrop-blur rounded-2xl">
                <Favorite className="text-4xl text-[#A70710] drop-shadow-lg" />
              </div>
            </motion.div>
            <h1 className="text-3xl font-bold tracking-wider">Terms & Conditions</h1>
            <p className="text-[#ffff] text-sm mt-1 font-medium">Your Trust, Our Promise</p>
          </div>

          <div className="w-12" />
        </div>
      </motion.header>

      {/* Luxury Content Cards with Gold Accents */}
      <main className="px-5 py-10 max-w-[1400px] mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4 }}
          className="space-y-8"
        >
          {/* Card 1 */}
          <motion.div
            whileHover={{ scale: 1.02 }}
            className="bg-white/90 backdrop-blur-lg rounded-3xl p-8 shadow-xl border border-amber-100 relative overflow-hidden"
          >
            <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-amber-200 to-transparent rounded-full blur-3xl opacity-40" />
            <div className="flex items-start gap-4">
              <div className="p-3 bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl shadow-lg">
                <AutoStories className="text-white text-2xl" />
              </div>
              <div className="flex-1">
                <p className="text-gray-800 text-lg leading-8 font-light tracking-wide">
                  {loremText}
                </p>
              </div>
            </div>
          </motion.div>

          {/* Card 2 */}
          <motion.div
            whileHover={{ scale: 1.02 }}
            className="bg-gradient-to-r from-pink-50 to-rose-50 rounded-3xl p-8 shadow-xl border border-pink-200 relative overflow-hidden"
          >
            <div className="absolute -top-10 -right-10 w-40 h-40">
              <Favorite className="text-pink-200 text-9xl opacity-50" />
            </div>
            <p className="text-gray-800 text-lg leading-8 font-light tracking-wide relative z-10">
              {loremText}
            </p>
          </motion.div>

          {/* Final Trust Message */}
          <motion.div
            initial={{ scale: 0.9 }}
            animate={{ scale: 1 }}
            transition={{ delay: 0.6 }}
            className="bg-[#f5fbff] text-black rounded-3xl p-10 text-center shadow-2xl"
          >
            <h2 className="text-2xl font-bold mb-3">We Are Here For Your Forever</h2>
            <p className="text-gray-800 text-lg">
              Every relationship built here is protected with love, trust, and complete privacy.
            </p>
            <div className="flex justify-center gap-2 mt-6">
              <Favorite className="text-3xl text-[#A70710] animate-ping" />
              <Favorite className="text-4xl text-[#A70710]" />
              <Favorite className="text-3xl text-[#A70710]  animate-ping" />
            </div>
          </motion.div>
        </motion.div>

        {/* Bottom spacing */}
        <div className="h-32" />
      </main>
    </div>
  );
}