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

export default function LearnMore() {
  return (
    <>
      <div className="mx-6">
        <div className="w-full my-20 p-6 md:p-10 flex flex-col items-center justify-between bg-gray-100 rounded-2xl md:rounded-5xl lg:flex-row lg:max-w-screen-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
          <div className="flex flex-col justify-between md:p-4 leading-normal">
            <h1 className="lg:px-12 text-3xl font-semibold text-black">
              {Texts.cognify}
            </h1>
            <p className="lg:px-12 mt-6 mb-8 md:mb-16 text-xl leading-10 text-gray-900 dark:text-white">
              {Texts.learn_more_title}
            </p>
            <button
              type="button"
              className=" lg:mx-12 bg-black max-w-fit h-16 text-white mb-16 md:mb-0 focus:ring-4 focus:outline-none font-medium rounded-full text-xl px-5 py-2.5 text-center inline-flex items-center justify-center"
            >
              {Texts.visit_cognify}

              <img src={ImagePath.circle_arrow} className="h-9 ml-6 arrow" />
            </button>
          </div>
          <img
            className="object-cover rounded-2xl  w-full md:max-w-xl lg:h-auto lg:max-w-2xl md:rounded-3xl"
            src={ImagePath.learn}
            alt=""
          />
        </div>
      </div>
      <style jsx>{`
        h5 {
          line-height: 66px;
        }
        .rounded-3xl {
          border-radius: 70px;
        }
      `}</style>
    </>
  );
}
