import React, { useEffect } from "react";
import { BiSearchAlt } from "react-icons/bi";
import { TbFileDislike, TbFileLike } from "react-icons/tb";
import { AiOutlineMessage } from "react-icons/ai";
import Aos from "aos";
import "aos/dist/aos.css";
import { useTranslation } from "react-i18next";
import customerInsight from "../../../assets/images/image22.png";

const listInsight = [
  {
    content:
      "Users need a reliable and easy-to-understand source of information.​​",
  },
  {
    content:
      "Users dislike having to synthesize complex information after conducting searches.​​​",
  },
  {
    content:
      "Users prefer to search for information about illnesses as a reference before seeing a doctor.​",
  },
  {
    content:
      "People with mental health issues tend to prefer texting about their problems​.​",
  },
];
const CustomerInsight = () => {
  useEffect(() => {
    Aos.init();
  }, []);
  const { t } = useTranslation("customerInsightHealthCare");
  return (
    <div
      className="w-full  text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg"
      id="customerInsight"
    >
      <h1 className="text-4xl font-bold text-center pb-20 relative">
        {t("title")}​
      </h1>
      <div
        data-aos="fade-up"
        data-aos-easing="ease-out-cubic"
        data-aos-duration="500"
        className="container w-[94%] mx-auto flex flex-wrap gap-y-10 sm:flex-row sm:items-start justify-around sm:gap-y-4 min-h-[50vh]  relative "
      >
        <div className="hidden md:block absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] border w-[150px] h-[150px] md:w-[200px] md:h-[200px] lg:w-[300px] lg:h-[300px]  bg-white rounded-[50%] overflow-hidden">
          <div className="absolute top-[0%] left-[0%] w-[75px] h-[75px] md:w-[100px] md:h-[100px] lg:w-[150px] lg:h-[150px]  border-r-[1.5px] border-b-[1.5px] border-slate-400 group ">
            <BiSearchAlt className="text-black absolute top-[50%] left-[50%] text-[16px] md:text-[20px] lg:text-[24px]  group-hover:text-orange-500 motion-safe:group-hover:scale-110" />
          </div>
          <div className="absolute top-[0%] right-[0%] w-[75px] h-[75px] md:w-[100px] md:h-[100px] lg:w-[150px] lg:h-[150px] border-b-[1.5px] border-slate-400 group">
            <TbFileDislike className="text-black absolute top-[50%] right-[50%] text-[16px] md:text-[20px] lg:text-[24px]  group-hover:text-orange-500 motion-safe:group-hover:scale-110" />
          </div>
          <div className="absolute bottom-[0%] left-[0%] w-[75px] h-[75px] md:w-[100px] md:h-[100px] lg:w-[150px] lg:h-[150px] border-r-[1.5px] border-slate-400 group">
            <TbFileLike className="text-black absolute bottom-[50%] left-[50%] text-[16px] md:text-[20px] lg:text-[24px]  group-hover:text-orange-500 motion-safe:group-hover:scale-110" />
          </div>
          <div className="absolute bottom-[0%] right-[0%] w-[75px] h-[75px] md:w-[100px] md:h-[100px] lg:w-[150px] lg:h-[150px]  group">
            <AiOutlineMessage className="text-black absolute bottom-[50%] right-[50%] text-[16px] md:text-[20px] lg:text-[24px]  group-hover:text-orange-500 motion-safe:group-hover:scale-110" />
          </div>
          <img
            className="md:w-[40px] md:h-[40px] lg:w-[75px] lg:h-[75px] absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] z-10 bg-white"
            src={customerInsight}
            alt=""
          />
        </div>
        <div className="flex items-center w-[60%] min-h-[150px] sm:w-[45%] rounded-lg p-2 shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)] relative md:shadow-none md:absolute md:top-[0%] md:left-[5%] md:w-[35%] ">
          <BiSearchAlt className="md:hidden absolute top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%] opacity-30 text-6xl " />
          <p className="text-black text-[20px] text-center">{t("content1")}</p>
        </div>
        <div className="flex items-center w-[60%] min-h-[150px] sm:w-[45%]  rounded-lg p-2 shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)] relative md:shadow-none md:absolute md:top-[0%] md:right-[5%] md:w-[35%]">
          <TbFileDislike className="md:hidden absolute top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%] opacity-30 text-6xl " />
          <p className="text-black text-[20px] text-center">{t("content2")}</p>
        </div>
        <div className="flex items-center w-[60%] min-h-[150px] sm:w-[45%] rounded-lg p-2 shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)] relative md:shadow-none md:absolute md:bottom-[-10%] md:left-[5%] md:w-[35%]">
          <TbFileLike className="md:hidden absolute top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%] opacity-30 text-6xl " />
          <p className="text-black text-[20px] text-center">{t("content3")}</p>
        </div>
        <div className="flex items-center w-[60%] min-h-[150px] sm:w-[45%] rounded-lg p-2 shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)] relative md:shadow-none md:absolute md:bottom-[-10%] md:right-[5%] md:w-[35%]">
          <AiOutlineMessage className="md:hidden absolute top-[50%] translate-y-[-50%] left-[50%] translate-x-[-50%] opacity-30 text-6xl " />
          <p className="text-black text-[20px] text-center">{t("content4")}</p>
        </div>
      </div>
    </div>
  );
};

export default CustomerInsight;
