"use client";
import { withBasePath } from "@/utils/comman/Comman";
import Image from "next/image";
import { FaArrowDown } from "react-icons/fa6";
import { useEffect, useState } from "react";
import { IoVideocamOutline } from "react-icons/io5";
import { useRouter } from "next/navigation";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { usePathname } from "next/navigation";
import "swiper/css";
import "swiper/css/navigation";
import { useQuery } from "@tanstack/react-query";
import { getApi, getAPIAuth } from "@/services/apiservice";
import { API_GET_SPECIALIZATION, API_VIEW_EXERTS } from "@/utils/APIConstant";
import { BiClinic } from "react-icons/bi";
import Slider from "./Slider/Slider";
import Testimonial from "./Testimonial/Testimonial";
import FAQ from "./FAQ/FAQ";
import { useSelector } from "react-redux";
import FeaturedSpecializations from "./FeaturedSpecialization/FeaturedSpecialization";
import { toast } from "react-toastify";
import FeaturedBlog from "./featuredBlog/FeaturedBlog";

const HomePage = () => {
  const footerData = useSelector((state) => state?.clinicDetails?.footerData);
  const [expertData, setExpertData] = useState([]);
  console.log("expertDataexpertData", expertData);
  const router = useRouter();
  //  console.log("API_VIEW_EXERTS" , API_VIEW_EXERTS);

  const { data, error, isError } = useQuery({
    queryKey: ["get-expert-api"],
    queryFn: () =>
      getAPIAuth(`${API_VIEW_EXERTS}?domain=${process.env.NEXT_PUBLIC_DOMAIN}`)
  });

  useEffect(() => {
    if (data?.data?.data?.documents?.length > 0) {
      setExpertData(data?.data?.data?.documents);
    }
  }, [data]);

  console.log("wwwwwwwdatadatadatadatadata", data);

  const handleClick = (value,slotType) => {
    router.push(`/appointment?type=${value}&slotType=${slotType}`);
  };

  return (
    <>
      <>
        <Slider/>
        {/* hero */}

        {/* section-3 */}
        <FeaturedSpecializations/>
        {/* section-3 */}

        {/* meet our doctor */}
        {/* <div className="max-w-7xl px-6 lg:px-8 mx-auto py-8">
          <div className="sm:text-3xl text-2xl font-bold text-center">
            Meet the experts
          </div>
          <div className="text-sm font-medium max-w-2xl text-gray-500 text-center mx-auto mt-1 text-pretty mb-6">
            At {footerData?.clinic_name}, our team of experienced and compassionate Doctors is
            dedicated to providing personalized care and guidance for your
            Sexual Health and Mental Health. Each expert brings a wealth of
            knowledge, professionalism, and empathy to address your unique
            concerns.
          </div>
          <div className="relative [&_.swiper-button-disabled]:opacity-50">
            <Swiper
              slidesPerView={"1.1"}
              observer={true}
              speed={1600}
              spaceBetween={10}
              modules={[Pagination, Navigation, Autoplay]}
              navigation={{
                nextEl: ".swiper-button-next-test-series",
                prevEl: ".swiper-button-prev-test-series",
              }}
              autoplay={{
                delay: 2000,
                disableOnInteraction: false,
                pauseOnMouseEnter: true,
              }}
              breakpoints={{
                640: { slidesPerView: 2 },
                768: { slidesPerView: 3 },
                1024: { slidesPerView: 4 },
              }}
              className="py-4"
            >
              {expertData.map((expert) => (
                <SwiperSlide
                  key={expert._id}
                  className="rounded-md overflow-hidden"
                >
                  <div className="w-full aspect-[1/.9] bg-[#F7F6FD]">
                    <Image
                      width={400}
                      height={400}
                      alt={expert.avatar}
                      src={expert.avatar}
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <div className="py-3 text-center">
                    <div className="text-xs font-bold text-[#7b2cbf]">
                      {`${expert.experience} years of experience`}
                    </div>
                    <div className="my-1 text-xl font-bold">{expert.name}</div>
                    <div className="text-xs font-medium text-gray-400">
                      {expert.qualification}
                    </div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
            <button className="swiper-button-prev-test-series rounded-[0.125rem] *:size-6 text-gray1 bg-white  w-7 h-16 shadow-xl border flex max-sm:opacity-100  justify-center items-center  z-20 absolute  top-1/2 left-0 -translate-y-1/2">
              <svg
                stroke="currentColor"
                fill="currentColor"
                strokeWidth="0"
                viewBox="0 0 320 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"></path>
              </svg>
            </button>
            <button className="swiper-button-next-test-series rounded-[0.125rem] *:rotate-180 *:size-6 text-gray1 bg-white  w-7 h-16 shadow-xl border flex max-sm:opacity-100  justify-center items-center  z-20 absolute  top-1/2 right-0 -translate-y-1/2">
              <svg
                stroke="currentColor"
                fill="currentColor"
                strokeWidth="0"
                viewBox="0 0 320 512"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"></path>
              </svg>
            </button>
          </div>
        </div> */}
        {/* <div className="max-w-7xl px-6 lg:px-8 mx-auto py-8">
          <div className="sm:text-3xl text-2xl font-bold text-center">
            Meet the experts
          </div>
          <div className="text-sm font-medium max-w-2xl text-gray-500 text-center mx-auto mt-1 text-pretty">
            Meet Allo's in-house sexual health experts providing holistic care
            based on science-backed evidence.
          </div>
          <div className="flex  mx-auto flex-nowrap gap-4 sm:mt-6 mt-2 overflow-x-auto overflow-hidden py-4 no-scrollbar">
            <div className="rounded-md shrink-0 lg:w-1/4 md:w-1/3 sm:w-1/2 w-full overflow-hidden">
              <div className="w-full aspect-[1/.9] *:size-full *:object-cover bg-[#F7F6FD]">
                <Image
                  width={400}
                  height={400}
                  alt="bg"
                  src={withBasePath("/assets/img/expert-1.webp")}
                />
              </div>
              <div className="py-3">
                <div className="text-xs font-bold text-[#7b2cbf]">
                  18 years of experience
                </div>
                <div className="my-1 text-xl font-bold">
                  Dr. Sandip Deshpande
                </div>
                <div className="text-xs font-medium text-gray-400">
                  MBBS, MD (Psychiatry)
                </div>
                <a
                  href=""
                  className="text-xs font-bold mt-4 block text-[#7b2cbf]"
                >
                  View Profile
                </a>
              </div>
            </div>
            <div className="rounded-md shrink-0 lg:w-1/4 md:w-1/3 sm:w-1/2 w-full overflow-hidden">
              <div className="w-full aspect-[1/.9] *:size-full *:object-cover bg-[#F7F6FD]">
                <Image
                  width={400}
                  height={400}
                  alt="bg"
                  src={withBasePath("/assets/img/expert-1.webp")}
                />
              </div>
              <div className="py-3">
                <div className="text-xs font-bold text-[#7b2cbf]">
                  18 years of experience
                </div>
                <div className="my-1 text-xl font-bold">
                  Dr. Sandip Deshpande
                </div>
                <div className="text-xs font-medium text-gray-400">
                  MBBS, MD (Psychiatry)
                </div>
                <a
                  href=""
                  className="text-xs font-bold mt-4 block text-[#7b2cbf]"
                >
                  View Profile
                </a>
              </div>
            </div>

            <div className="rounded-md shrink-0 lg:w-1/4 md:w-1/3 sm:w-1/2 w-full overflow-hidden">
              <div className="w-full aspect-[1/.9] *:size-full *:object-cover bg-[#F7F6FD]">
                <Image
                  width={400}
                  height={400}
                  alt="bg"
                  src={withBasePath("/assets/img/expert-1.webp")}
                />
              </div>
              <div className="py-3">
                <div className="text-xs font-bold text-[#7b2cbf]">
                  18 years of experience
                </div>
                <div className="my-1 text-xl font-bold">
                  Dr. Sandip Deshpande
                </div>
                <div className="text-xs font-medium text-gray-400">
                  MBBS, MD (Psychiatry)
                </div>
                <a
                  href=""
                  className="text-xs font-bold mt-4 block text-[#7b2cbf]"
                >
                  View Profile
                </a>
              </div>
            </div>

            <div className="rounded-md shrink-0 lg:w-1/4 md:w-1/3 sm:w-1/2 w-full overflow-hidden">
              <div className="w-full aspect-[1/.9] *:size-full *:object-cover bg-[#F7F6FD]">
                <Image
                  width={400}
                  height={400}
                  alt="bg"
                  src={withBasePath("/assets/img/expert-1.webp")}
                />
              </div>
              <div className="py-3">
                <div className="text-xs font-bold text-[#7b2cbf]">
                  18 years of experience
                </div>
                <div className="my-1 text-xl font-bold">
                  Dr. Sandip Deshpande
                </div>
                <div className="text-xs font-medium text-gray-400">
                  MBBS, MD (Psychiatry)
                </div>
                <a
                  href=""
                  className="text-xs font-bold mt-4 block text-[#7b2cbf]"
                >
                  View Profile
                </a>
              </div>
            </div>

            <div className="rounded-md shrink-0 lg:w-1/4 md:w-1/3 sm:w-1/2 w-full overflow-hidden">
              <div className="w-full aspect-[1/.9] *:size-full *:object-cover bg-[#F7F6FD]">
                <Image
                  width={400}
                  height={400}
                  alt="bg"
                  src={withBasePath("/assets/img/expert-1.webp")}
                />
              </div>
              <div className="py-3">
                <div className="text-xs font-bold text-[#7b2cbf]">
                  18 years of experience
                </div>
                <div className="my-1 text-xl font-bold">
                  Dr. Sandip Deshpande
                </div>
                <div className="text-xs font-medium text-gray-400">
                  MBBS, MD (Psychiatry)
                </div>
                <a
                  href=""
                  className="text-xs font-bold mt-4 block text-[#7b2cbf]"
                >
                  View Profile
                </a>
              </div>
            </div>

            <div className="rounded-md shrink-0 lg:w-1/4 md:w-1/3 sm:w-1/2 w-full overflow-hidden">
              <div className="w-full aspect-[1/.9] *:size-full *:object-cover bg-[#F7F6FD]">
                <Image
                  width={400}
                  height={400}
                  alt="bg"
                  src={withBasePath("/assets/img/expert-1.webp")}
                />
              </div>
              <div className="py-3">
                <div className="text-xs font-bold text-[#7b2cbf]">
                  18 years of experience
                </div>
                <div className="my-1 text-xl font-bold">
                  Dr. Sandip Deshpande
                </div>
                <div className="text-xs font-medium text-gray-400">
                  MBBS, MD (Psychiatry)
                </div>
                <a
                  href=""
                  className="text-xs font-bold mt-4 block text-[#7b2cbf]"
                >
                  View Profile
                </a>
              </div>
            </div>
          </div>
        </div> */}
        {/* start journey */}
        {/* <div className="max-w-7xl px-6 lg:px-8 mx-auto py-8">
          <div className="sm:text-3xl text-2xl font-bold text-center mt-1 text-pretty mb-6">
            Your Treatment Journey with {footerData?.clinic_name}
          </div>
          <div className="mx-auto max-w-7xl px-5 z-10">
            <div className="relative ">
              <div className="flex flex-wrap w-full justify-center mx-2 max-md:mx-0">
                <ul className="list-none w-full relative *:-mt-20 max-md:*:mt-0 md:mt-[86px] ">
                  <li className="flex items-center relative md:pb-5 pb-10 before:absolute before:h-1/2 before:top-0 before:w before:[transform:translateX(-50%)] before:left-1/2 before:bg-gray-400 after:absolute after:h-1/2 after:w-[2px] after:[transform:translateX(-50%)] after:left-1/2 after:bottom-0 after:bg-gray-400">
                    <div className="leftdiv relative flex-1 items-center md:max-w-[50%] w-full md:pr-20">
                      <div className="absolute md:top-1/2 top-[-20px] z-30 md:right-[-33px] max-md:left-1/2 max-md:mx-auto md:size-16 size-10 md:transform md:-translate-y-1/2 max-md:transform max-md:-translate-x-1/2 rounded-full bg-white flex items-center justify-center md:border-4 border-2 border-sky-900 shadow-md text-sky-900 md:text-lg text-base font-bold">
                        <div className="flex items-center justify-center">
                          <div className="bg-gray-100 rounded-full border-2 border-gray-200 rotate-180 drop-shadow-2xl shadow-white p-2">
                            <div className="text-lg text-sky-500 p-2 rounded-full bg-gray-200 border-4 rotate-180 border-t-0 border-gray-300 size-12 md:size-16 flex items-center justify-center drop-shadow-2xl before:absolute before:size-full before:border-2 before:border-t-0 before:border-sky-900 before:rounded-full before:inset-0 before:z-0 before:shadow-2xl before:shadow-sky-500 after:absolute after:border-t-4 after:border-white after:rounded-full after:size-full after:inset-0">
                              1
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="w-full p-8 bg-white mx-auto shadow-md rounded-lg relative z-10 border-4 border-sky-900 rounded-tr-[70px]">
                        <h3 className="text-slate-900 font-bold text-xl">
                          <span>You're Here</span> <br />
                          Start Your Journey{" "}
                        </h3>
                        <div className="mt-2 sm:text-base text-sm leading-6">
                          You've taken the first step! Book your consultation
                          and get started with {footerData?.clinic_name}.{" "}
                        </div>
                      </div>
                    </div>
                  </li>
                  <li className="flex flex-row-reverse items-center relative md:pb-5 pb-10 before:absolute before:h-1/2 before:top-0 before:w-[2px] before:[transform:translateX(-50%)] before:left-1/2 before:bg-gray-400 after:absolute after:h-1/2 after:w-[2px] after:[transform:translateX(-50%)] after:left-1/2 after:bottom-0 after:bg-gray-400 ">
                    <div className="leftdiv relative flex-1 items-center md:max-w-[50%] w-full md:pl-20">
                      <div className="absolute md:top-1/2 top-[-20px] z-30 md:left-[-33px] max-md:left-1/2 max-md:mx-auto  md:size-16 size-10 md:transform md:-translate-y-1/2 max-md:transform max-md:-translate-x-1/2 rounded-full bg-white flex items-center justify-center md:border-4 border-2 border-sky-800 shadow-md text-sky-800 md:text-lg text-base font-bold">
                        <div className="flex items-center justify-center">
                          <div className="bg-gray-100 rounded-full border-2 border-gray-200 rotate-180 drop-shadow-2xl shadow-white p-2">
                            <div className="text-lg text-sky-500 p-2 rounded-full bg-gray-200 border-4 rotate-180 border-t-0 border-gray-300 size-12 md:size-16 flex items-center justify-center drop-shadow-2xl before:absolute before:size-full before:border-2 before:border-t-0 before:border-sky-900 before:rounded-full before:inset-0 before:z-0 before:shadow-2xl before:shadow-sky-500 after:absolute after:border-t-4 after:border-white after:rounded-full after:size-full after:inset-0">
                              2
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="w-full p-8 bg-white mx-auto shadow-md rounded-lg relative z-10 border-4 border-sky-800 rounded-tl-[70px]">
                        <h3 className="text-slate-900 font-bold text-xl">
                          Begin Your Treatment{" "}
                        </h3>
                        <div className="mt-2 sm:text-base text-sm leading-6">
                          Once booked, you'll begin your treatment from an
                          experienced doctor.
                        </div>
                      </div>
                    </div>
                  </li>
                  <li className="flex items-center relative md:pb-5 pb-10 before:absolute before:h-1/2 before:top-0 before:w-[2px] before:[transform:translateX(-50%)] before:left-1/2 before:bg-gray-400 after:absolute after:h-1/2 after:w-[2px] after:[transform:translateX(-50%)] after:left-1/2 after:bottom-0 after:bg-gray-400">
                    <div className="leftdiv relative flex-1 items-center md:max-w-[50%] w-full md:pr-20">
                      <div className="absolute md:top-1/2 top-[-20px] z-30 md:right-[-33px] max-md:left-1/2 max-md:mx-auto md:size-16 size-10 md:transform md:-translate-y-1/2 max-md:transform max-md:-translate-x-1/2 rounded-full bg-gray-600 flex items-center justify-center md:border-4 border-2 border-white shadow-md text-white md:text-lg text-base font-bold">
                        <div className="flex items-center justify-center">
                          <div className="bg-gray-100 rounded-full border-2 border-gray-200 rotate-180 drop-shadow-2xl shadow-white p-2">
                            <div className="text-lg text-sky-500 p-2 rounded-full bg-gray-200 border-4 rotate-180 border-t-0 border-gray-300 size-12 md:size-16 flex items-center justify-center drop-shadow-2xl before:absolute before:size-full before:border-2 before:border-t-0 before:border-sky-900 before:rounded-full before:inset-0 before:z-0 before:shadow-2xl before:shadow-sky-500 after:absolute after:border-t-4 after:border-white after:rounded-full after:size-full after:inset-0">
                              3
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="w-full p-8 bg-white mx-auto shadow-md rounded-lg rounded-tr-[70px] relative z-10 border-4 border-sky-700">
                        <h3 className="text-slate-900 font-bold text-xl">
                          Holistic Evaluation
                        </h3>
                        <div className="mt-2 sm:text-base text-sm leading-6">
                          Complete a simple online consultation from the comfort
                          of your home.
                        </div>
                        <div className="grid gap-2 py-5 text-balance *:relative *:font-semibold *:md:text-sm *:text-xs *:inline-flex *:text-gray-900/80 *:items-center *:gap-x-2 *:md:pr-4 *:pr-3 *:pl-3 *:py-1 *:*:size-2 *:*:lg:size-2.5 *:*:opacity-90">
                          <div className="group/db">
                            <svg
                              className="group-hover/db:opacity-80 group-hover/db:animate-spin"
                              stroke="currentColor"
                              fill="currentColor"
                              strokeWidth="0"
                              viewBox="0 0 448 512"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"></path>
                            </svg>
                            Receive personalized treatment plan
                          </div>
                          <div className="group/db">
                            <svg
                              className="group-hover/db:opacity-80 group-hover/db:animate-spin"
                              stroke="currentColor"
                              fill="currentColor"
                              strokeWidth="0"
                              viewBox="0 0 448 512"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"></path>
                            </svg>
                            Get an action plan tailored to your needs.
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li className="flex flex-row-reverse items-center relative md:pb-5 pb-10 before:absolute before:h-1/2 before:top-0 before:w-[2px] before:[transform:translateX(-50%)] before:left-1/2 before:bg-gray-400 after:absolute after:h-1/2 after:w-[2px] after:[transform:translateX(-50%)] after:left-1/2 after:bottom-0 after:bg-gray-400 ">
                    <div className="leftdiv relative flex-1 items-center md:max-w-[50%] w-full md:pl-20">
                      <div className="absolute md:top-1/2 top-[-20px] z-30 md:left-[-33px] max-md:left-1/2 max-md:mx-auto  md:size-16 size-10 md:transform md:-translate-y-1/2 max-md:transform max-md:-translate-x-1/2 rounded-full bg-gray-600 flex items-center justify-center md:border-4 border-2 border-white shadow-md text-white md:text-lg text-base font-bold">
                        <div className="flex items-center justify-center">
                          <div className="bg-gray-100 rounded-full border-2 border-gray-200 rotate-180 drop-shadow-2xl shadow-white p-2">
                            <div className="text-lg text-sky-500 p-2 rounded-full bg-gray-200 border-4 rotate-180 border-t-0 border-gray-300 size-12 md:size-16 flex items-center justify-center drop-shadow-2xl before:absolute before:size-full before:border-2 before:border-t-0 before:border-sky-900 before:rounded-full before:inset-0 before:z-0 before:shadow-2xl before:shadow-sky-500 after:absolute after:border-t-4 after:border-white after:rounded-full after:size-full after:inset-0">
                              4
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="w-full p-8 bg-white mx-auto shadow-md rounded-lg rounded-tl-[70px] relative z-10 border-4 border-sky-600">
                        <h3 className="text-slate-900 font-bold text-xl">
                          Start Your Treatment – Within 2-3 days
                        </h3>
                        <div className="mt-2 sm:text-base text-sm leading-6">
                          Your treatment begins within 2-3 days of your
                          evaluation.
                        </div>
                        <div className="grid gap-2 py-5 text-balance *:relative *:font-semibold *:md:text-sm *:text-xs *:inline-flex *:text-gray-900/80 *:items-center *:gap-x-2 *:md:pr-4 *:pr-3 *:pl-3 *:py-1 *:*:size-2 *:*:lg:size-2.5 *:*:opacity-90">
                          <div className="group/db">
                            <svg
                              className="group-hover/db:opacity-80 group-hover/db:animate-spin"
                              stroke="currentColor"
                              fill="currentColor"
                              strokeWidth="0"
                              viewBox="0 0 448 512"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"></path>
                            </svg>
                            Medicative care (if prescribed)
                          </div>
                          <div className="group/db">
                            <svg
                              className="group-hover/db:opacity-80 group-hover/db:animate-spin"
                              stroke="currentColor"
                              fill="currentColor"
                              strokeWidth="0"
                              viewBox="0 0 448 512"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"></path>
                            </svg>
                            Get 1 free online coaching session if you buy
                            medication from us.
                          </div>
                          <div className="group/db">
                            <svg
                              className="group-hover/db:opacity-80 group-hover/db:animate-spin"
                              stroke="currentColor"
                              fill="currentColor"
                              strokeWidth="0"
                              viewBox="0 0 448 512"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"></path>
                            </svg>
                            Psychologist session if you have a mental health
                            concern.
                          </div>
                          <div className="group/db">
                            <svg
                              className="group-hover/db:opacity-80 group-hover/db:animate-spin"
                              stroke="currentColor"
                              fill="currentColor"
                              strokeWidth="0"
                              viewBox="0 0 448 512"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"></path>
                            </svg>
                            Physical health expert session if you have a sexual
                            health concern.
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>

                  <li className="flex items-center relative md:pb-5 pb-10 before:absolute before:h-1/2 before:top-0 before:w-[2px] before:[transform:translateX(-50%)] before:left-1/2 before:bg-gray-400 after:absolute after:h-1/2 after:w-[0px] after:[transform:translateX(-50%)] after:left-1/2 after:bottom-0 after:bg-gray-400">
                    <div className="leftdiv relative flex-1 items-center md:max-w-[50%] w-full md:pr-20">
                      <div className="absolute md:top-1/2 top-[-20px] z-30 md:right-[-33px] max-md:left-1/2 max-md:mx-auto md:size-16 size-10 md:transform md:-translate-y-1/2 max-md:transform max-md:-translate-x-1/2 rounded-full bg-gray-600 flex items-center justify-center">
                        <div className="flex items-center justify-center">
                          <div className="bg-gray-100 rounded-full border-2 border-gray-200 rotate-180 drop-shadow-2xl shadow-white p-2">
                            <div className="text-lg text-sky-500 p-2 rounded-full bg-gray-200 border-4 rotate-180 border-t-0 border-gray-300 size-12 md:size-16 flex items-center justify-center drop-shadow-2xl before:absolute before:size-full before:border-2 before:border-t-0 before:border-sky-900 before:rounded-full before:inset-0 before:z-0 before:shadow-2xl before:shadow-sky-500 after:absolute after:border-t-4 after:border-white after:rounded-full after:size-full after:inset-0">
                              5
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="w-full p-8 bg-white mx-auto shadow-md rounded-lg rounded-tr-[70px] relative z-10 border-4 border-sky-100">
                        <h3 className="text-slate-900 font-bold text-xl">
                          Continuous Care & Visible Results
                        </h3>
                        <div className="mt-2 sm:text-base text-sm leading-6">
                          See results as you continue treatment. Ongoing support
                          and follow-ups ensure you stay on track.{" "}
                        </div>
                        <div className="grid gap-2 py-5 text-balance *:relative *:font-semibold *:md:text-sm *:text-xs *:inline-flex *:text-gray-900/80 *:items-center *:gap-x-2 *:md:pr-4 *:pr-3 *:pl-3 *:py-1 *:*:size-2 *:*:lg:size-2.5 *:*:opacity-90">
                          <div className="group/db">
                            <svg
                              className="group-hover/db:opacity-80 group-hover/db:animate-spin"
                              stroke="currentColor"
                              fill="currentColor"
                              strokeWidth="0"
                              viewBox="0 0 448 512"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"></path>
                            </svg>
                            Regular check-ins with experts.
                          </div>
                          <div className="group/db">
                            <svg
                              className="group-hover/db:opacity-80 group-hover/db:animate-spin"
                              stroke="currentColor"
                              fill="currentColor"
                              strokeWidth="0"
                              viewBox="0 0 448 512"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"></path>
                            </svg>
                            Track your progress and improvements.
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div> */}

        {/*  */}

        <div className="flex justify-center text-center">
          <div className="grid gap-5 text-center">
            <h2 className="text-black font-bold text-lg sm:text-xl">
              Book Your Consultation Now
            </h2>

            <div className="flex  text-xs sm:text-sm font-medium items-stretch mb-12 w-max gap-2 mx-auto">
              <div
                className="text-black2 bg-white border-[#7b2cbf] text-[#7b2cbf] font-semibold hover:bg-primary hover:text-white duration-300 border p-2 sm:p-3 lg:px-[1.25rem] items-center gap-2 leading-normal rounded-lg flex justify-center hover:border-primary h-auto cursor-pointer shadow-md transition-all"
                onClick={() => handleClick("offline","onVisit")}
              >
                <BiClinic className="md:text-lg text-base" />
                <div className="md:text-lg text-base text-center font-semibold">
                  In-Clinic Appointment
                </div>
              </div>
              <div
                className="text-black2 bg-white border-[#7b2cbf] text-[#7b2cbf] font-semibold hover:bg-primary hover:text-white duration-300 border p-2 sm:p-3 lg:px-[1.25rem] items-center gap-2 leading-normal rounded-lg flex justify-center hover:border-primary h-auto cursor-pointer shadow-md transition-all"
                onClick={() => handleClick("online","zoomMeeting")}
              >
                <IoVideocamOutline className="md:text-lg text-base" />
                <div className="md:text-lg text-base text-center font-semibold">
                  Video consultation
                </div>
              </div>
            </div>
          </div>
        </div>

        {/*  */}
        {/* <div className="max-w-7xl px-6 lg:px-8 mx-auto py-8">
          <div className="sm:text-3xl text-2xl font-bold text-center">
            Why Choose {footerData?.clinic_name}?
          </div>
          <div className="text-sm font-medium max-w-2xl text-gray-500 text-center mx-auto mt-1 text-pretty">
            At {footerData?.clinic_name}, we believe in transforming lives through
            personalized care and expert guidance. Here's why thousands trust us
            for their sexual wellness and mental health needs:
          </div>
          <div className="w-full grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-9">
            <div className="border-2 p-5 group rounded-4xl border-black relative before:absolute before:size-24 before:border-t-[10px] before:border-l-[10px] before:rounded-tl-4xl before:border-primary before:-inset-[5px] md:hover:shadow-xl md:hover:shadow-primary/40 duration-300">
              <div className="bg-white duration-300 p-2 shadow-xl shadow-black/20 md:group-hover:shadow-black/0 rounded-3xl h-full">
                <div className="flex p-3 flex-col gap-3">
                  <h3 className="md:text-lg sm:text-base text-sm leading-6 font-bold">
                    Certified Specialists
                  </h3>
                  <div className="mt-2 sm:text-base text-sm leading-6">
                    Our team of experienced sexologists and psychiatrists
                    provide evidence-based, empathetic care tailored to your
                    unique needs.
                  </div>
                </div>
              </div>
              <div className="absolute flex justify-center items-end -left-[5px] top-20 w-[10px] h-10 bg-gray-100 before:absolute before:size-2 before:rounded-full before:bg-black before:-translate-x-1/2 before:translate-y-1/2 before:bottom-0 before:left-[calc(50%-1px)]"></div>
              <div className="absolute flex item-center-center justify-end left-20 -top-[5px] h-[10px] w-10 bg-gray-100 before:absolute before:size-2 before:rounded-full before:bg-black before:translate-x-1/2 before:-translate-y-1/2 before:top-[calc(50%-1px)] before:right-0"></div>
            </div>
            <div className="border-2 p-5 group rounded-4xl border-black relative before:absolute before:size-24 before:border-t-[10px] before:border-l-[10px] before:rounded-tl-4xl before:border-primary before:-inset-[5px] md:hover:shadow-xl md:hover:shadow-primary/40 duration-300">
              <div className="bg-white duration-300 p-2 shadow-xl shadow-black/20 md:group-hover:shadow-black/0 rounded-3xl h-full">
                <div className="flex p-3 flex-col gap-3">
                  <h3 className="md:text-lg sm:text-base text-sm leading-6 font-bold">
                    Comprehensive and Holistic Approach
                  </h3>
                  <div className="mt-2 sm:text-base text-sm leading-6">
                    We address both physical and emotional well-being, offering
                    a full spectrum of care that improves relationships,
                    intimacy, and mental health.
                  </div>
                </div>
              </div>
              <div className="absolute flex justify-center items-end -left-[5px] top-20 w-[10px] h-10 bg-gray-100 before:absolute before:size-2 before:rounded-full before:bg-black before:-translate-x-1/2 before:translate-y-1/2 before:bottom-0 before:left-[calc(50%-1px)]"></div>
              <div className="absolute flex item-center-center justify-end left-20 -top-[5px] h-[10px] w-10 bg-gray-100 before:absolute before:size-2 before:rounded-full before:bg-black before:translate-x-1/2 before:-translate-y-1/2 before:top-[calc(50%-1px)] before:right-0"></div>
            </div>
            <div className="border-2 p-5 group rounded-4xl border-black relative before:absolute before:size-24 before:border-t-[10px] before:border-l-[10px] before:rounded-tl-4xl before:border-primary before:-inset-[5px] md:hover:shadow-xl md:hover:shadow-primary/40 duration-300">
              <div className="bg-white duration-300 p-2 shadow-xl shadow-black/20 md:group-hover:shadow-black/0 rounded-3xl h-full">
                <div className="flex p-3 flex-col gap-3">
                  <h3 className="md:text-lg sm:text-base text-sm leading-6 font-bold">
                    Proven Success
                  </h3>
                  <div className="mt-2 sm:text-base text-sm leading-6">
                    With 92% of clients reporting enhanced sexual wellness and
                    87% achieving better emotional health, our results speak for
                    themselves.
                  </div>
                </div>
              </div>
              <div className="absolute flex justify-center items-end -left-[5px] top-20 w-[10px] h-10 bg-gray-100 before:absolute before:size-2 before:rounded-full before:bg-black before:-translate-x-1/2 before:translate-y-1/2 before:bottom-0 before:left-[calc(50%-1px)]"></div>
              <div className="absolute flex item-center-center justify-end left-20 -top-[5px] h-[10px] w-10 bg-gray-100 before:absolute before:size-2 before:rounded-full before:bg-black before:translate-x-1/2 before:-translate-y-1/2 before:top-[calc(50%-1px)] before:right-0"></div>
            </div>
            <div className="border-2 p-5 group rounded-4xl border-black relative before:absolute before:size-24 before:border-t-[10px] before:border-l-[10px] before:rounded-tl-4xl before:border-primary before:-inset-[5px] md:hover:shadow-xl md:hover:shadow-primary/40 duration-300">
              <div className="bg-white duration-300 p-2 shadow-xl shadow-black/20 md:group-hover:shadow-black/0 rounded-3xl h-full">
                <div className="flex p-3 flex-col gap-3">
                  <h3 className="md:text-lg sm:text-base text-sm leading-6 font-bold">
                    Affordable and Flexible Plans
                  </h3>
                  <div className="mt-2 sm:text-base text-sm leading-6">
                    Our consultations start at just ₹699, with a range of
                    packages to fit your goals and budget.
                  </div>
                </div>
              </div>
              <div className="absolute flex justify-center items-end -left-[5px] top-20 w-[10px] h-10 bg-gray-100 before:absolute before:size-2 before:rounded-full before:bg-black before:-translate-x-1/2 before:translate-y-1/2 before:bottom-0 before:left-[calc(50%-1px)]"></div>
              <div className="absolute flex item-center-center justify-end left-20 -top-[5px] h-[10px] w-10 bg-gray-100 before:absolute before:size-2 before:rounded-full before:bg-black before:translate-x-1/2 before:-translate-y-1/2 before:top-[calc(50%-1px)] before:right-0"></div>
            </div>
            <div className="border-2 p-5 group rounded-4xl border-black relative before:absolute before:size-24 before:border-t-[10px] before:border-l-[10px] before:rounded-tl-4xl before:border-primary before:-inset-[5px] md:hover:shadow-xl md:hover:shadow-primary/40 duration-300">
              <div className="bg-white duration-300 p-2 shadow-xl shadow-black/20 md:group-hover:shadow-black/0 rounded-3xl h-full">
                <div className="flex p-3 flex-col gap-3">
                  <h3 className="md:text-lg sm:text-base text-sm leading-6 font-bold">
                    Judgment-Free Environment
                  </h3>
                  <div className="mt-2 sm:text-base text-sm leading-6">
                    Discuss your concerns openly in a safe, confidential, and
                    supportive space designed to prioritize your comfort.
                  </div>
                </div>
              </div>
              <div className="absolute flex justify-center items-end -left-[5px] top-20 w-[10px] h-10 bg-gray-100 before:absolute before:size-2 before:rounded-full before:bg-black before:-translate-x-1/2 before:translate-y-1/2 before:bottom-0 before:left-[calc(50%-1px)]"></div>
              <div className="absolute flex item-center-center justify-end left-20 -top-[5px] h-[10px] w-10 bg-gray-100 before:absolute before:size-2 before:rounded-full before:bg-black before:translate-x-1/2 before:-translate-y-1/2 before:top-[calc(50%-1px)] before:right-0"></div>
            </div>
            <div className="border-2 p-5 group rounded-4xl border-black relative before:absolute before:size-24 before:border-t-[10px] before:border-l-[10px] before:rounded-tl-4xl before:border-primary before:-inset-[5px] md:hover:shadow-xl md:hover:shadow-primary/40 duration-300">
              <div className="bg-white duration-300 p-2 shadow-xl shadow-black/20 md:group-hover:shadow-black/0 rounded-3xl h-full">
                <div className="flex p-3 flex-col gap-3">
                  <h3 className="md:text-lg sm:text-base text-sm leading-6 font-bold">
                    Measurable Progress and Ongoing Support
                  </h3>
                  <div className="mt-2 sm:text-base text-sm leading-6">
                    Stay on track with goal-oriented care, regular check-ins,
                    and detailed progress updates to ensure long-lasting
                    results.
                  </div>
                </div>
              </div>
              <div className="absolute flex justify-center items-end -left-[5px] top-20 w-[10px] h-10 bg-gray-100 before:absolute before:size-2 before:rounded-full before:bg-black before:-translate-x-1/2 before:translate-y-1/2 before:bottom-0 before:left-[calc(50%-1px)]"></div>
              <div className="absolute flex item-center-center justify-end left-20 -top-[5px] h-[10px] w-10 bg-gray-100 before:absolute before:size-2 before:rounded-full before:bg-black before:translate-x-1/2 before:-translate-y-1/2 before:top-[calc(50%-1px)] before:right-0"></div>
            </div>
          </div>
        </div> */}
        {/*  */}

        {/* end Journey  */}
        {/* take out 3 minutes */}

        {/* <div className="py-6 md:py-8 lg:py-16 select-nonee">
          <div className="mx-auto max-w-7xl px-6 lg:px-8">
            <div className="relative isolate overflow-hidden bg-gradient-to-r from-gray-900 to-gray-900/50 px-6 shadow-2xl rounded-2xl sm:rounded-3xl sm:px-16 lg:flex  lg:px-24 *:relative *:z-10">
              <Image
                src={withBasePath("/assets/img/br-take.webp")}
                alt="Betting and Let Your Users Experience the Fun!"
                title="Betting and Let Your Users Experience the Fun!"
                width={1920}
                height={1080}
                className="!absolute !z-0 inset-0 size-full mix-blend-overlay object-cover object-center"
              />
              <div className="absolute inset-x-0 top-0 h-full z-0 text-white/20 [mask-image:linear-gradient(to_top,transparent,white)] pointer-events-none">
                <svg
                  className="absolute inset-0 h-full w-full"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <defs>
                    <pattern
                      id="I86"
                      width="32"
                      height="32"
                      patternUnits="userSpaceOnUse"
                      x="50%"
                      y="100%"
                      patternTransform="translate(0 -1)"
                    >
                      <path
                        d="M0 32V.5H32"
                        fill="none"
                        stroke="currentColor"
                      ></path>
                    </pattern>
                  </defs>
                  <rect width="100%" height="100%" fill="url(#I86)"></rect>
                </svg>
              </div>
              <div className="max-w-3xl mx-auto lg:flex-auto py-6 md:py-8 lg:py-16 lg:text-left relative z-[1]">
                <h2 className="max-sm:text-xl max-md:text-2xl/tight max-xl:text-3xl/tight text-4xl/tight text-white font-normal empty:hidden text-center">
                  {" "}
                  Take Our 3-Minute Self-Assessment
                  <span className="font-bold text-gray-100">
                    {" "}
                    Gain Clarity on Your Sexual & Mental Health{" "}
                  </span>
                </h2>
                <p className="mt-6 text-base md:text-lg md:leading-8 text-gray-300 text-center empty:hidden">
                  Taking care of your health means understanding what’s going on
                  beneath the surface. Whether it’s your emotional well-being or
                  your sexual health, self-awareness is the first step toward
                  improvement.
                </p>
                <div className="md:mt-10 mt-5 flex items-center gap-x-6 empty:hidden justify-center">
                  <label
                    htmlFor="leadPopup"
                    className="cursor-pointer rounded-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                  >
                    CTA - Take Assesment
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div> */}

        {/* end take out 3 minutes */}

        {/* testimonial section */}
        <Testimonial/>

        {/* faqs start */}
        <FAQ />

        {/* end faqs start  */}
        <FeaturedBlog/>
      </>
      {/* hero start */}
      {/* <SectionOne />
      <SectionTwo />
      <SectionThree />
      <SectionFour />
      <SectionFive /> */}
    </>
  );
};

export default HomePage;