import React, { useMemo } from 'react';
import { Favorite, AutoStories } from '@mui/icons-material';
import { useSearchParams } from 'react-router-dom';
import { motion } from 'framer-motion';
import { useTermsAndPolicies } from '../hooks/useTermsAndPolicies';
import { Skeleton, SkeletonText } from '../components/common/Skeleton';

export default function TermsAndCondition() {
  const [searchParams] = useSearchParams();
  const type = searchParams.get("type") || "terms";
  const { data, isLoading, isError } = useTermsAndPolicies(type);

  const content = useMemo(() => {
    return data?.data?.message || "";
  }, [data]);

  const title = useMemo(() => {
    return data?.data?.name || "Terms & Conditions";
  }, [data]);

  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">{title}</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"
        >
          <motion.div
            whileHover={{ scale: 1.01 }}
            className="bg-white/90 backdrop-blur-lg rounded-3xl p-8 shadow-xl border border-amber-100 relative overflow-hidden mx-auto max-w-[1100px]"
          >
            <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="">
              {/* <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="">
                {isLoading && (
                  <div className="space-y-4">
                    <Skeleton height={22} width="45%" />
                    <SkeletonText lines={6} height={14} />
                    <SkeletonText lines={4} height={14} />
                  </div>
                )}
                {isError && (
                  <p className="text-red-600 text-lg leading-8 font-light tracking-wide">
                    Failed to load terms.
                  </p>
                )}
                {!isLoading && !isError && (
                  <div
                    className="text-gray-800 text-[16px] leading-7"
                    dangerouslySetInnerHTML={{ __html: content }}
                  />
                )}
              </div>
            </div>
          </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>
  );
}
