import { ImagePath } from "@/utils/imagePath";
import { Texts } from "@/utils/texts";
import Image from "next/image";

export default function LearnMore() {
  return (
    <>
      <div className=" mx-6">
        <div className="w-full p-6 md:p-10 my-8 md:my-20 flex flex-col items-center justify-between bg-white rounded-lg md:rounded-3xl lg:flex-row lg:max-w-screen-2xl dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
          {/* <Image
            width={700}
            height={600}
            className="object-cover rounded-3xl lg:hidden"
            src={ImagePath.learn}
            alt=""
          /> */}
          <div className="w-full md:w-1/2 flex flex-col md:mx-10 justify-between py-4 md:p-4 leading-normal">
            <p className="text-lg md:text-4xl font-normal leading-9 md:leading-12 text-gray-900 dark:text-white">
              {Texts.learn_more_title}
            </p>
            <button
              type="button"
              className="mt-8 md:mt-16 bg-black max-w-fit h-16 text-white  focus:ring-4 focus:outline-none font-medium rounded-full text-lg md:text-xl px-5 py-2.5 text-center inline-flex items-center justify-center hover:bg-gray-800"
            >
              {Texts.learn_more}
              <img src={ImagePath.circle_arrow} className="h-9 ml-6 arrow animate-pulse" />
            </button>
          </div>
          <div className="w-full md:w-1/2 h-full overflow-hidden rounded-lg md:rounded-3xl">
            <Image
              width={700}
              height={600}
              className="object-cover w-full h-full rounded-3xl transition-transform duration-300 ease-in-out hover:scale-105"
              src={ImagePath.learn}
              alt=""
            />
          </div>
        </div>
      </div>
      <style jsx>{`
        h5 {
          line-height: 66px;
        }
        .rounded-3xl {
          border-radius: 70px !important;
        }
      `}</style>
    </>
  );
}
