thirukalyanamweb/src/pages/SafetyCentre.jsx

import React from 'react';
import { ArrowBackIosNew, Security, Report, Lock, Psychology } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import LazyImage from '../components/common/LazyImage';
import safegirl from "../assets/images/safegirl.jpg";
const dummyImage = "https://images.unsplash.com/photo-1594736797933-d0501ba2fe65?w=800&q=80&fit=crop";

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

  const safetyTips = [
    {
      icon: <Security className="text-3xl" />,
      title: "Safety Tips",
      color: "red",
      desc: "Follow these practical guidelines to protect yourself while connecting with potential Matches."
    },
    {
      icon: <Report className="text-3xl" />,
      title: "Report a Profile",
      color: "orange",
      desc: "Report any suspicious or inappropriate behavior immediately—especially requests for money, unsolicited contact, or blackmail threats."
    },
    {
      icon: <Lock className="text-3xl" />,
      title: "Privacy Settings",
      color: "pink",
      desc: "Manage who sees your photos, contact info, & profile and always be in control."
    },
    {
      icon: <Psychology className="text-3xl" />,
      title: "Mental Wellbeing",
      color: "blue",
      desc: "Here's how you can prioritize your mental well-being while making this life-changing decision."
    }
  ];

  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 */}

      <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">Safety Centre</h2>
        <p className="text-xl text-gray-600 text-justify leading-relaxed max-w-[900px]">
          Your safety matters deeply at <span className="font-bold text-red-600">Thirukalyanam</span>. 
          Our team works with advanced tools to ensure your matchmaking journey remains secure and safe.
        </p>
      </section>
             <LazyImage src={safegirl} 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">
        {safetyTips.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-gradient-to-br ${
              tip.color === "red" ? "from-red-500 to-rose-600" :
              tip.color === "orange" ? "from-orange-500 to-amber-600" :
              tip.color === "pink" ? "from-pink-500 to-rose-500" :
              "from-blue-500 to-indigo-600"
            } text-white shadow-lg`}>
              {tip.icon}
            </div>
            <div className="flex-1">
              <h3 className={`text-2xl font-bold mb-3 ${
                tip.color === "red" ? "text-red-600" :
                tip.color === "orange" ? "text-orange-600" :
                tip.color === "pink" ? "text-pink-600" :
                "text-blue-600"
              }`}>
                {tip.title}
              </h3>
              <p className="text-gray-700 text-lg leading-relaxed">{tip.desc}</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>
  );
}