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

export default function Idea() {
  return (
    <>
      <div className="md:my-20 w-full max-w-screen-2xl px-6">
        <div className="text-center w-full flex items-center justify-center">
          <h1 className="my-20 text-3xl md:text-7xl font-semibold tracking-tighter text-gray-900 max-w-screen-xl dark:text-white">
            {Texts.idea_t}
          </h1>
        </div>
        <div className=" text-white w-full max-w-screen-2xl bg-white rounded-3xl md:rounded-5xl dark:bg-gray-800 dark:border-gray-700">
          <Image
            width={0}
            height={0}
            className="w-full rounded-t-3xl md:rounded-t-5xl"
            src={ImagePath.idea}
            alt=""
            style={{
              // borderTopLeftRadius: "70px",
              // borderTopRightRadius: "70px",
            }}
          />
          <div className="p-4 lg:px-20 py-16 md:py-32">
            <p className="mb-3 text-lg md:text-xl font-normal text-gray-900 dark:text-gray-400">
              {Texts.idea_subt}
            </p>
            <ul className="flex flex-wrap justify-around items-center mt-14 md:mt-28">
              <li className="group bg-gray-50 hover:bg-gray-300 rounded-full p-10 md:p-16 transition duration-300">
                <img
                  src={ImagePath.idea1}
                  className="group-hover:scale-110 transition-transform duration-300 ease-in-out"
                  alt="Idea 1"
                />
              </li>
              <li className="group bg-gray-50 hover:bg-gray-300 rounded-full p-10 md:p-16 transition duration-300">
                <img
                  src={ImagePath.idea2}
                  className="group-hover:scale-110 transition-transform duration-300 ease-in-out"
                  alt="Idea 2"
                />
              </li>
              <li className="group bg-gray-50 hover:bg-gray-300 rounded-full py-8 md:py-14 px-10 md:px-16 transition duration-300">
                <img
                  src={ImagePath.idea3}
                  className="group-hover:scale-110 transition-transform duration-300 ease-in-out"
                  alt="Idea 3"
                />
              </li>
              <li className="group bg-gray-50 hover:bg-gray-300 rounded-full p-10 md:p-16 transition duration-300">
                <img
                  src={ImagePath.idea4}
                  className="group-hover:scale-110 transition-transform duration-300 ease-in-out"
                  alt="Idea 4"
                />
              </li>
            </ul>
          </div>
        </div>
      </div>
      <style jsx>{`
        .text-7xl {
          line-height: 150%;
        }
        {/* .rounded-3xl {
          border-radius: 70px;
        } */}
        {/* .rounded-t,
        .rounded-3xl {
          border-top-left-radius: 70px;
          border-top-right-radius: 70px;
        } */}
      `}</style>
    </>
  );
}
