import React from 'react';
import { Security, Psychology } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import LazyImage from '../components/common/LazyImage';
import { useQuery } from '@tanstack/react-query';
import { getBeSafeOnline } from '../api/safety.api';

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

  const { data, isLoading } = useQuery({
    queryKey: ['beSafeOnline'],
    queryFn: getBeSafeOnline,
  });

  if (isLoading) {
    return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
  }

  const safetyData = data?.data || [];
  const heroData = safetyData.length > 0 ? safetyData[0] : null;
  const tipsData = safetyData.length > 1 ? safetyData.slice(1) : [];

  return (
    <div className="min-h-screen  relative z-20">
      {/* Premium Header */}
      <motion.header
        initial={{ y: -100 }}
        animate={{ y: 0 }}
        className="bg-[#034E08] rounded-[10px] text-white shadow-xl"
      >
        <div className="flex items-center justify-center px-5 py-8 safe-area-top">
         
          <h1 className="text-2xl font-bold">Be Safe Online</h1>
          <div className="w-12" />
        </div>
      </motion.header>

      {/* Hero Section */}

      {heroData && (
        <div className='grid grid-cols-1 md:grid-cols-2 gap-2 my-4'>
          <section className="md:px-6 pt-8 pb-10">
            <h2 className="text-3xl font-bold text-gray-900 mb-4" style={{ color: heroData.title_color }}>
              {heroData.title}
            </h2>
            <p className="text-xl text-gray-600 text-justify leading-relaxed max-w-[900px]">
              {heroData.content}
            </p>
          </section>
          <LazyImage src={heroData.image} className="rounded-tl-[50px] rounded-tr-[0px] rounded-bl-[50px] rounded-br-[50px]"/>
        </div>
      )}

      {/* Safety Tips Grid */}
      <section className="px-6 py-12 max-w-[1400px] mx-auto space-y-4">
        {tipsData.map((tip, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: index * 0.15 }}
            className="bg-white rounded-3xl p-8  border border-gray-100 flex items-start gap-6"
          >
            <div className="p-4 rounded-2xl bg-gray-50 shadow-lg">
              <LazyImage src={tip.icon} className="w-10 h-10 object-contain" />
            </div>
            <div className="flex-1">
              <h3 className="text-2xl font-bold mb-3" style={{ color: tip.title_color }}>
                {tip.title}
              </h3>
              <p className="text-gray-700 text-lg leading-relaxed">{tip.content}</p>
            </div>
          </motion.div>
        ))}
      </section>

      {/* Final Trust Message */}
      <motion.div
        initial={{ y: 50, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ delay: 0.8 }}
        className="bg-[#f5fbff] text-black py-8 text-center"
      >
        <h2 className="text-3xl font-bold mb-4">You're Never Alone</h2>
        <p className="text-xl text-black max-w-3xl mx-auto px-6">
          Our 24×7 Safety Team is always watching. One tap to report — and we take immediate action.
        </p>
        <div className="flex justify-center gap-4 mt-8">
          <Security className="text-5xl animate-pulse text-[#A70710]" />
          <Psychology className="text-6xl text-[#A70710]" />
          <Security className="text-5xl animate-pulse text-[#A70710]" />
        </div>
      </motion.div>

      <div className="h-32" />
    </div>
  );
}