import React, { useEffect } from "react";
import { BiSearchAlt } from "react-icons/bi";
import { useTranslation } from "react-i18next";
import { TbFileDislike, TbFileLike } from "react-icons/tb";
import { AiOutlineMessage } from "react-icons/ai";
import { BsDatabaseCheck } from "react-icons/bs";
import { RiCodeSSlashLine, RiSettings4Line } from "react-icons/ri";
import Aos from "aos";
import "aos/dist/aos.css";
import customerInsight from "../../../assets/images/image22.png";
// import "../../../index.css";
const listSolutions = [
  {
    title: "DATA",
    content: [
      "Reliable and authoritative data sources.​​",
      "The data is certified by hospitals and specialist doctors.",
    ],
  },
  {
    title: "TECHNOLOGY​",
    content: [
      "The development and research team has extensive experience in developing products in the healthcare industry.",
    ],
  },
  {
    title: "CUSTOMIZATION",
    content: [
      "The server is designed to handle large amounts of data and has high scalability.",
      "The system is highly customizable and adaptable to each business and hospital​",
    ],
  },
];
const SolutionsOfProduct = () => {
  useEffect(() => {
    Aos.init();
  }, []);
  const { t } = useTranslation("solutionsOfProductHealthCare");
  return (
    <div
      className="w-full text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg px-10"
      id="solutionsOfProduct"
    >
      <h1 className="text-4xl font-bold text-center pb-20 relative">
        The Solutions of Product​
      </h1>
      <div className="container w-[94%] mx-auto flex flex-col gap-y-10  h-full">
        <div
          data-aos="fade-left"
          data-aos-duration="1000"
          className="flex items-center w-full gap-x-8"
        >
          <div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
            <BsDatabaseCheck
              className="text-white text-[32px] group-hover:rotateY transition-all 
              duration-500 ease-in-out"
            />
          </div>
          <div className="flex-1">
            <span className="font-bold text-lg">{t("data1.title")}</span>
            <ul>
              <li>{t("data1.contents.content1")}</li>
              <li>{t("data1.contents.content2")}</li>
            </ul>
          </div>
        </div>
        <div
          data-aos="animation__showLine"
          data-aos-duration="1500"
          data-aos-easing="ease-in-out"
          data-aos-delay="100"
          className="w-[2px] h-[40px] ml-[40px] bg-black"
        ></div>
        <div
          data-aos="fade-left"
          data-aos-duration="1000"
          data-aos-easing="ease-in-out"
          data-aos-delay="300"
          className="flex items-center w-full gap-x-8"
        >
          <div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
            <RiCodeSSlashLine
              className="text-white text-[32px] group-hover:rotateY transition-all 
              duration-500 ease-in-out"
            />
          </div>
          <div className="flex-1">
            <p className="font-bold text-lg">{t("data2.title")}​</p>
            <ul>
              <li>{t("data2.contents.content1")}</li>
            </ul>
          </div>
        </div>
        <div
          data-aos="animation__showLine"
          data-aos-duration="1500"
          data-aos-easing="ease-in-out"
          data-aos-delay="100"
          className="w-[2px] h-[40px] ml-[40px] bg-black overflow-hidden"
        ></div>

        <div
          data-aos="fade-left"
          data-aos-duration="1000"
          data-aos-easing="ease-in-out"
          data-aos-delay="300"
          className="flex items-center w-full gap-x-8"
        >
          <div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
            <RiSettings4Line
              className="text-white text-[32px] group-hover:rotateY transition-all 
              duration-500 ease-in-out"
            />
          </div>
          <div className="flex-1">
            <p className="font-bold text-lg">{t("data3.title")}</p>
            <ul>
              <li>{t("data3.contents.content1")}</li>
              <li>{t("data3.contents.content2")}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SolutionsOfProduct;
