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

export default function Cognitive() {
  return (
    <>
      <div className="mt-10 md:mt-60 py-28 w-full flex items-center justify-center bg-cog">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 max-w-screen-2xl">
          {/* Crystal image - appears first on mobile, second on desktop */}
          <img
            className="w-full h-auto order-1 lg:order-2"
            src={ImagePath.crystal}
            alt=""
          />

          {/* Text content */}
          <div className="order-2 lg:order-1 mx-6 rounded-lg md:rounded-3xl bg-black px-6 py-16 lg:p-24 opacity-80">
            <h1 className="text-3xl md:text-6xl font-semibold tracking-tight text-white">
              {Texts.cog}
            </h1>
            <h1 className="text-3xl md:text-6xl mt-4 md:mt-8 font-semibold tracking-tight text-white">
              {Texts.revol}
            </h1>
            <h6 className="text-base md:text-xl py-6 md:py-10 text-white shining-text">
              {Texts.cog_sub1}
            </h6>
            <h6 className="text-base md:text-xl text-white shining-text">
              {Texts.cog_sub2}
            </h6>
          </div>
        </div>
      </div>

      <style jsx>{`
        .bg-cog {
          background-image: url("/images/cognitive.svg");
        }
        .rounded-3xl {
          border-radius: 50px !important;
        }
        .shining-text {
          position: relative;
          background: linear-gradient(45deg, #ffccf1, #d0e2ff, #ffccf1, #d0e2ff, #ffccf1, #d0e2ff, #ffccf1, #d0e2ff, #ffccf1);
          background-size: 400% 400%;
          color: transparent;
          background-clip: text;
          -webkit-background-clip: text;
          animation: shine 5s linear infinite;
        }

        @keyframes shine {
          0% {
            background-position: 200% 200%;
          }
          100% {
            background-position: -200% -200%;
          }
        }
      `}</style>
    </>
  );
}
