import React, { useState, useRef } from "react";
import {
  Heart,
  X,
  ChevronRight,
  SkipForward,
  Bookmark,
  MessageCircle,
  Ban,
  Flag,
  ChevronLeft,
} from "lucide-react";

// Import Swiper React components and styles
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Thumbs } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/thumbs";
import { useNavigate } from "react-router-dom";

const MatrimonyProfile = () => {
  const navigate = useNavigate();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [showMenu, setShowMenu] = useState(false);
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
  const mainSwiperRef = useRef(null);
  const modalSwiperRef = useRef(null);

  const profile = {
    name: "Sudharshan M",
    id: "M8355880",
    verified: true,
    lastSeen: "Last seen few hour ago",
    age: "30 yrs",
    height: "5'5\"",
    caste: "Brahmin",
    education: "Engineer - Non IT",
    location: "Chennai",
    maritalStatus: "Never Married",
    createdBy: "Profile created by sibling",
    images: [
      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=800&fit=crop",
      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=600&h=800&fit=crop",
      "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=600&h=800&fit=crop",
      "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=600&h=800&fit=crop",
      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=600&h=800&fit=crop",
    ],
  };

  const openModal = (index) => {
    setIsModalOpen(true);
    setTimeout(() => {
      if (modalSwiperRef.current) {
        modalSwiperRef.current.slideTo(index);
      }
    }, 100);
  };

  return (
    <div className="">
      <div
        className="max-w-[1200px] mx-auto 
      bg-white rounded-[10px] border border-1 border-gray-200 overflow-hidden"
      >
        <div className="grid md:grid-cols-[320px_auto] gap-0">
          {/* Image Section with Swiper */}
          <div className="relative ">
            <div className=" relative overflow-hidden w-[320px] h-[330px]">
              <Swiper
                modules={[Navigation, Pagination]}
                spaceBetween={0}
                slidesPerView={1}
                navigation={{
                  prevEl: ".swiper-button-prev-custom",
                  nextEl: ".swiper-button-next-custom",
                }}
                pagination={{
                  type: "fraction",
                  el: ".swiper-pagination-custom",
                }}
                onSwiper={(swiper) => {
                  mainSwiperRef.current = swiper;
                }}
                className="h-full w-full"
              >
                {profile.images.map((img, idx) => (
                  <SwiperSlide key={idx}>
                    <div
                      className="w-[320px] h-[330px] cursor-pointer"
                      onClick={() => openModal(idx)}
                    >
                      <img
                        src={img}
                        alt={`${profile.name} ${idx + 1}`}
                        className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
                      />
                    </div>
                  </SwiperSlide>
                ))}
              </Swiper>

              {/* Swiper Navigation Buttons */}
              <button className="swiper-button-prev-custom absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 text-white p-2 rounded-full hover:bg-black/70 transition-colors">
                <ChevronLeft className="w-5 h-5" />
              </button>
              <button className="swiper-button-next-custom absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 text-white p-2 rounded-full hover:bg-black/70 transition-colors">
                <ChevronRight className="w-5 h-5" />
              </button>

              {/* Pagination */}
              {/* <div className="swiper-pagination-custom absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/50 text-white px-3 py-1 rounded-full text-sm z-10"></div> */}

              {/* Thumbnail Navigation */}
              {/* <div className="absolute bottom-0 right-3 flex flex-row gap-2 z-10">
                {profile.images.slice(0, 4).map((img, idx) => (
                  <div
                    key={idx}
                    className="w-12 h-12 rounded-lg overflow-hidden border-2 border-white cursor-pointer hover:scale-110 transition-transform shadow-lg"
                    onClick={() => mainSwiperRef.current?.slideTo(idx)}
                  >
                    <img src={img} alt="" className="w-full h-full object-cover" />
                  </div>
                ))}
              </div> */}
            </div>
          </div>

          {/* Profile Details Section */}
          <div className="p-6 md:p-8">
            <div className="flex items-start justify-between mb-4">
              <div className="flex items-center gap-2">
                <div className="bg-[#034E08] text-white p-1 rounded-full">
                  <svg
                    className="w-4 h-4"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                      clipRule="evenodd"
                    />
                  </svg>
                </div>
                <span className="text-[#034E08] font-semibold">ID verified</span>
              </div>
              <div className="relative">
                <button
                  onClick={() => setShowMenu(!showMenu)}
                  className="p-2 hover:bg-gray-100 rounded-full transition-colors"
                >
                  <svg
                    className="w-6 h-6"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
                  </svg>
                </button>
                {showMenu && (
                  <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl border z-10">
                    <button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3">
                      <Bookmark className="w-4 h-4" /> Shortlist
                    </button>
                    <button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3">
                      <MessageCircle className="w-4 h-4" /> Send Message
                    </button>
                    <button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3">
                      <Ban className="w-4 h-4" /> Block Profile
                    </button>
                    <button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 text-red-600">
                      <Flag className="w-4 h-4" /> Report Profile
                    </button>
                  </div>
                )}
              </div>
            </div>

            <h1 className="text-3xl font-bold text-gray-900 mb-2">
              {profile.name}
            </h1>
            <p className="text-gray-500 text-sm mb-4">
              {profile.id} | {profile.lastSeen}
            </p>

            <div className="space-y-2 mb-6 text-gray-700">
              <p className="flex flex-wrap gap-2">
                <span className="font-semibold">{profile.maritalStatus}</span>
                <span>•</span>
                <span className="text-sm text-gray-500">
                  {profile.createdBy}
                </span>
                <span>•</span>
                <span>{profile.age}</span>
                <span>•</span>
                <span>{profile.height}</span>
                <span>•</span>
                <span>{profile.caste}</span>
              </p>
              <p>
                <span className="font-semibold">{profile.education}</span>
                <span> • </span>
                <span>{profile.location}</span>
              </p>
            </div>

            {/* Action Buttons */}
            <div className="flex justify-start gap-3">
              <button 
              // onClick={()=>{
              //   navigate("/chat")
              // }}
              className="w-[fit-content]  border-2 border-gray-300 text-gray-700 py-2  px-6 rounded-full hover:bg-gray-50 transition-colors flex items-center justify-center gap-2 text-sm">
                <X className="w-5 h-5" /> Don't Show
                 {/* Message */}
              </button>
              {/* <button className="w-[fit-content]  border-2 border-orange-500 text-[#034E08] py-2  px-6 rounded-full hover:bg-orange-50 transition-colors flex items-center justify-center gap-2 text-sm">
                <SkipForward className="w-5 h-5" /> Skip
              </button> */}
              <button className="w-[fit-content]  bg-[#034E08] text-white py-2  px-6 rounded-full hover:bg-[#A70710] transition-colors flex items-center justify-center gap-2 font-semibold text-sm">
                <Heart className="w-5 h-5" /> Send Interest
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Image Modal with Swiper */}
      {isModalOpen && (
        <div
          style={{ backdropFilter: "blur(5px)" }}
          className="fixed inset-0 bg-[#1010108f] z-[9999] flex items-center justify-center p-4"
        >
          <button
            onClick={() => setIsModalOpen(false)}
            className="absolute top-4 right-4 text-white bg-black/20 rounded-full p-2 hover:bg-black/70 transition-colors z-20"
          >
            <X className="w-6 h-6" />
          </button>

          <div className="max-w-4xl w-full bg-white p-4 rounded-md">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                {/* Main Modal Swiper */}
                <div
                  className="relative bg-gray-900 rounded-lg overflow-hidden"
                  style={{ height: "65vh" }}
                >
                  <Swiper
                    modules={[Navigation, Pagination, Thumbs]}
                    spaceBetween={0}
                    slidesPerView={1}
                    navigation={{
                      prevEl: ".modal-swiper-button-prev",
                      nextEl: ".modal-swiper-button-next",
                    }}
                    pagination={{
                      type: "fraction",
                      el: ".swiper-pagination-modal",
                    }}
                    thumbs={{
                      swiper:
                        thumbsSwiper && !thumbsSwiper.destroyed
                          ? thumbsSwiper
                          : null,
                    }}
                    onSwiper={(swiper) => {
                      modalSwiperRef.current = swiper;
                    }}
                    className="h-full w-full"
                  >
                    {profile.images.map((img, idx) => (
                      <SwiperSlide key={idx}>
                        <div className="w-full h-full flex items-center justify-center">
                          <img
                            src={img}
                            alt={`${profile.name} ${idx + 1}`}
                            className="max-w-full max-h-full object-contain"
                          />
                        </div>
                      </SwiperSlide>
                    ))}
                  </Swiper>

                  {/* Modal Navigation Buttons */}
                  <button className="modal-swiper-button-prev absolute left-4 top-1/2 -translate-y-1/2 z-10 bg-black/50 text-white p-3 rounded-full hover:bg-black/70 transition-colors">
                    <ChevronLeft className="w-6 h-6" />
                  </button>
                  <button className="modal-swiper-button-next absolute right-4 top-1/2 -translate-y-1/2 z-10 bg-black/50 text-white p-3 rounded-full hover:bg-black/70 transition-colors">
                    <ChevronRight className="w-6 h-6" />
                  </button>
                </div>
              </div>

              <div>
                {/* Top Info Bar */}
                <div className="bg-white rounded-t-lg p-4 mb-2">
                  <div className="flex items-center justify-between">
                    <div className="swiper-pagination-modal text-lg font-semibold"></div>
                    <div className="text-right">
                      <h3 className="font-bold text-lg">{profile.name}</h3>
                      <p className="text-sm text-gray-600">
                        {profile.id} | {profile.createdBy}
                      </p>
                      <p className="text-sm">
                        {profile.age} • {profile.height} • {profile.caste} • BE
                        • {profile.education} • {profile.location}
                      </p>
                    </div>
                  </div>
                </div>

                {/* Thumbnail Swiper */}
                <Swiper
                  modules={[Thumbs]}
                  watchSlidesProgress
                  onSwiper={setThumbsSwiper}
                  spaceBetween={10}
                  slidesPerView={5}
                  className="mb-2"
                >
                  {profile.images.map((img, idx) => (
                    <SwiperSlide key={idx}>
                      <div className="w-full h-16 rounded-lg overflow-hidden border-2 border-white cursor-pointer hover:border-orange-500 transition-colors">
                        <img
                          src={img}
                          alt=""
                          className="w-full h-full object-cover"
                        />
                      </div>
                    </SwiperSlide>
                  ))}
                </Swiper>

                {/* Bottom Action Bar */}
                <div className="bg-white p-4 rounded-b-lg mt-2 text-center">
                  <p className="text-sm text-gray-600 mb-2">
                    Like this member?
                  </p>
                  <button className="bg-[#034E08] text-white px-8 py-2 rounded-full hover:bg-orange-700 transition-colors font-semibold">
                    Send Interest
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="w-[100%] max-w-[1200px] mx-auto my-10 grid grid-cols-1 gap-4 md:grid-cols-2">
        {/* Personal Information Section */}
        <div className="  border border-gray-200 rounded-lg  bg-pink-50/30">
          <div className="flex items-center gap-2 mb-4 p-3 py-3 bg-green-100">
            <div className="bg-pink-100 p-2 rounded-full">
              <svg
                className="w-5 h-5 text-[#A70710]"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path
                  fillRule="evenodd"
                  d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                  clipRule="evenodd"
                />
              </svg>
            </div>
            <h3 className="font-semibold text-lg">Personal Information</h3>
          </div>

          <div className="p-5 mb-6 space-y-3 text-sm">
            <div className="flex">
              <span className="text-gray-600 w-40">Age</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">30 Years and 8 months</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Height</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">5'5"</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Weight</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">97 Kg</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Body Type</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">Average</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Spoken Languages</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">
                Tamil (Mother Tongue), English, Hindi
              </span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Profile Created By</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">Sibling</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Marital Status</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">Never Married</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Lives In</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">Chennai, Tamil Nadu</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Eating Habits</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">Vegetarian</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Religion</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">Hindu</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Caste</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">Brahmin - Iyer</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Subcaste</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">Brahacharmam</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Gothra(m)</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">Kashyapa / Kaashyapa</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Dosha(m)</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">Don't know</span>
            </div>
            <div className="flex items-center">
              <span className="text-gray-600 w-40">Date Of Birth</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900"> 23-12-1991</span>
              {/* <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
                <svg
                  className="w-3 h-3"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                  <path
                    fillRule="evenodd"
                    d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
                    clipRule="evenodd"
                  />
                </svg>
                Upgrade to view
              </button> */} 
            </div>
            <div className="flex items-center">
              <span className="text-gray-600 w-40">Star</span>
              <span className="text-gray-400">:</span>
                <span className="ml-3 text-gray-900">Piscus</span>
              {/* <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
                <svg
                  className="w-3 h-3"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                  <path
                    fillRule="evenodd"
                    d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
                    clipRule="evenodd"
                  />
                </svg>
                Upgrade to view
              </button> */}
            </div>
            <div className="flex items-center">
              <span className="text-gray-600 w-40">Rassi</span>
              <span className="text-gray-400">:</span>
                <span className="ml-3 text-gray-900"> Revathy</span>
              {/* <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
                <svg
                  className="w-3 h-3"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                  <path
                    fillRule="evenodd"
                    d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
                    clipRule="evenodd"
                  />
                </svg>
                Upgrade to view
              </button> */}
            </div>
            {/* <div className="flex items-center">
              <span className="text-gray-600 w-40">Horoscope</span>
              <span className="text-gray-400">:</span>
              <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
                <svg
                  className="w-3 h-3"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                  <path
                    fillRule="evenodd"
                    d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
                    clipRule="evenodd"
                  />
                </svg>
                Upgrade to view
              </button>
            </div> */}
            <div className="flex">
              <span className="text-gray-600 w-40">Employment</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">Employed in private</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Income</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">₹ 4 - 5 Lakhs</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Education</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">BE</span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Occupation</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">Engineer - Non IT</span>
            </div>
          </div>
        </div>

        {/* Family Information Section */}
        <div className="border border-gray-200 rounded-lg bg-pink-50/30 ">
          <div className="flex items-center gap-2 p-3 bg-pink-100">
            <div className="bg-white p-2 rounded-full">
              <svg
                className="w-5 h-5 text-[#A70710]"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
              </svg>
            </div>
            <h3 className="font-semibold text-lg">Family Information</h3>
          </div>

          <div className="p-5 space-y-3 text-sm">
            <div className="flex">
              <span className="text-gray-600 w-40">Parents</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">
                Father Passed Away, Mother is a Home Maker
              </span>
            </div>
            <div className="flex">
              <span className="text-gray-600 w-40">Ancestral Origin</span>
              <span className="text-gray-400">:</span>
              <span className="ml-3 text-gray-900">Rameshwaram</span>
            </div>
          </div>
          {/* Contact Information Section */}
          <div className="my-8">
            <div className="flex items-center gap-2 p-3 bg-pink-100">
              <div className="bg-white p-2 rounded-full">
                <svg
                  className="w-5 h-5 text-[#A70710]"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                </svg>
              </div>
              <h3 className="font-semibold text-lg">Contact Information</h3>
            </div>

            <div className="p-5 space-y-3 text-sm">
              <div className="flex items-center">
                <span className="text-gray-600 w-40">Mobile Number</span>
                <span className="text-gray-400">:</span>
                <div className="ml-3 flex items-center gap-2">
                  <svg
                    className="w-3 h-3 text-green-600"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                  </svg>
                  <svg
                    className="w-3 h-3 text-red-600"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <path
                      fillRule="evenodd"
                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                      clipRule="evenodd"
                    />
                  </svg>
                  <span className="text-gray-900">+91 99••••••••</span>
                  <button className="text-[#034E08] hover:text-orange-700 text-xs font-medium">
                    Upgrade to view
                  </button>
                </div>
              </div>
            </div>
          </div>

          {/* About Myself Section */}
          <div className="my-8">
            <div className="flex items-center gap-2 p-3 bg-pink-100">
              <div className="bg-white p-2 rounded-full">
                <svg
                  className="w-5 h-5 text-[#A70710]"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
                    clipRule="evenodd"
                  />
                </svg>
              </div>
              <h3 className="font-semibold text-lg">About Myself</h3>
            </div>

            <div className="p-5 space-y-4 text-sm">
              <div>
                <h4 className="font-semibold text-gray-900 mb-2">
                  About Sudharshan M
                </h4>
                <p className="text-gray-700 leading-relaxed">
                  I am making this profile for my brother. He completed his
                  bachelor's degree and is now working as a project engineer -
                  non IT. We belong to a middle class, nuclear family with
                  traditional values, currently settled in Chennai.
                </p>
              </div>
              <div>
                <h4 className="font-semibold text-gray-900 mb-2">
                  What we are looking for
                </h4>
                <p className="text-gray-700">
                  Traditional, homely girl with moderate values
                </p>
              </div>
            </div>
          </div>

          {/* Lifestyle Section */}
          <div className="my-8">
            <div className="flex items-center gap-2 p-3 bg-pink-100">
              <div className="bg-white p-2 rounded-full">
                <svg
                  className="w-5 h-5 text-[#A70710]"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z" />
                </svg>
              </div>
              <h3 className="font-semibold text-lg">Lifestyle</h3>
            </div>

            <div className="p-5 space-y-3 text-sm">
              <div className="flex">
                <span className="text-gray-600 w-40">Cuisine</span>
                <span className="text-gray-400">:</span>
                <span className="ml-3 text-gray-900">
                  Chinese, North Indian, South Indian
                </span>
              </div>
              <div className="flex">
                <span className="text-gray-600 w-40">Books</span>
                <span className="text-gray-400">:</span>
                <span className="ml-3 text-gray-900">
                  History, Philosophy / Spiritual
                </span>
              </div>
              <div className="flex">
                <span className="text-gray-600 w-40">Hobbies</span>
                <span className="text-gray-400">:</span>
                <span className="ml-3 text-gray-900">Cooking</span>
              </div>
              <div className="flex">
                <span className="text-gray-600 w-40">Movies</span>
                <span className="text-gray-400">:</span>
                <span className="ml-3 text-gray-900">
                  Anime, Comedy, Sci-Fi
                </span>
              </div>
              <div className="flex">
                <span className="text-gray-600 w-40">Sports</span>
                <span className="text-gray-400">:</span>
                <span className="ml-3 text-gray-900">Yoga / Meditation</span>
              </div>
              <div className="flex">
                <span className="text-gray-600 w-40">Smoking Habits</span>
                <span className="text-gray-400">:</span>
                <span className="ml-3 text-gray-900">Doesn't Smoke</span>
              </div>
              <div className="flex">
                <span className="text-gray-600 w-40">Drinking Habits</span>
                <span className="text-gray-400">:</span>
                <span className="ml-3 text-gray-900">Doesn't Drink</span>
              </div>
            </div>
          </div>
        </div>
      </div>




      
    </div>
  );
};

export default MatrimonyProfile;
