import { ImagePath } from "@/utils/imagePath";
import { Texts } from "@/utils/texts";
import ToolkitCard from "../ToolkitCard";
import Link from "next/link";

export default function Toolkit() {
  return (
    <div className="my-20 md:mt-60">
      <div className="text-center">
        <h1 className="my-10 md:my-20 text-3xl md:text-7xl font-semibold tracking-tight text-gray-900 dark:text-white">
          {Texts.exp_toolkit}
        </h1>
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 max-w-screen-xl">
        <div>
          {/* <img className="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg" alt=""/> */}
          <div className=" max-w-full mx-6 p-6 md:p-20 bg-white rounded-lg md:rounded-3xl dark:bg-gray-800 dark:border-gray-700">
            <a href="#">
              <h5 className="mb-4 tracking-wide text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
                {Texts.es}
              </h5>
            </a>
            <div className="relative border rounded-3xl my-20 w-full overflow-hidden">
              <img
                className="w-full h-auto object-contain transition-transform duration-300 ease-in-out hover:scale-110"
                src={ImagePath.toolkit1}
                alt=""
              />
            </div>
            <p className="mb-6 md:mb-9 text-base md:text-2xl font-light text-black dark:text-gray-400">
              {Texts.toolkit_sub1}
            </p>
            <p className="mb-3 text-base md:text-2xl font-light text-black dark:text-gray-400">
              {Texts.toolkit_sub11}
            </p>
            <Link href="http://codefast.ai/" target="_blank">
              <button
                type="button"
                className="mt-10 md:mt-20 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>
            </Link>
          </div>
        </div>
        <div>
          {/* <img className="h-auto max-w-full rounded-lg" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg" alt=""/> */}
          <div className=" max-w-full mx-6 p-6 md:p-20 bg-white rounded-lg md:rounded-3xl dark:bg-gray-800 dark:border-gray-700">
            <a href="#">
              <h5 className="mb-4 tracking-wide text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
                {Texts.fc}
              </h5>
            </a>
            <div className="relative border rounded-3xl my-20 w-full overflow-hidden">
              <img
                className="w-full h-auto object-contain transition-transform duration-300 ease-in-out hover:scale-110"
                src={ImagePath.toolkit2}
                alt=""
              />
            </div>
            <p className="mb-6 text-base md:text-2xl font-light text-black dark:text-gray-400">
              {Texts.toolkit_sub2}
            </p>
            <p className="mb-3 text-base md:text-2xl font-light text-black dark:text-gray-400">
              {Texts.toolkit_sub22}
            </p>
            <Link href="https://fastcode.sh/" target="_blank">
            <button
              type="button"
              className="mt-10 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>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}
