import React from "react";

const Competitions = () => {
  return (
    <div className="container mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative">
      <h1 className="text-4xl font-bold text-center pb-20 ">Competitions</h1>
      <div className="w-[330px] h-[220px] md:w-[600px] md:h-[400px] lg:w-[800px] lg:h-[500px] border-l-2 border-b-2 border-black mx-auto relative md:absolute md:top-[50%] md:translate-y-[-50%] md:left-[50%] md:translate-x-[-50%] ">
        <div className="absolute top-[-15px] left-[-9px] h-0 w-0 border-x-8 border-x-transparent border-b-[16px] border-black"></div>
        <div className="absolute bottom-[-9px] right-[-9px] h-0 w-0 border-y-8 border-y-transparent border-l-[16px] border-black"></div>
        <span className="absolute top-[16%] left-[-16%] md:top-[10%] md:left-[-10%] rotate-[-90deg]">
          Innovative
        </span>
        <span className="absolute bottom-[-10%] right-[6%] md:bottom-[-10%] md:right-[10%] ">
          Specialization
        </span>
        <div className="absolute top-0 left-[10%] w-[80px] h-[60px] md:top-0 md:left-[10%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-slate-200 ">
          <span className="text-center text-xs md:text-lg">Google</span>
        </div>
        <div className="absolute top-[10%] left-[35%] w-[80px] h-[60px] md:top-[10%] md:left-[30%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-slate-200 ">
          <span className="text-center text-xs md:text-lg">ChatGPT</span>
        </div>
        <div className="absolute top-[15%] right-[10%] w-[80px] h-[60px] md:top-[15%] md:right-[10%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-gradient-to-r from-cyan-400 to-blue-400">
          <span className="text-center text-white font-bold text-xs md:text-lg">
            Us
          </span>
        </div>
        <div className="absolute bottom-[15%] right-[25%] w-[80px] h-[60px] md:bottom-[15%] md:right-[20%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-slate-200 ">
          <span className="text-center text-xs md:text-lg">
            Traditional Chatbot​
          </span>
        </div>
        <div className="absolute bottom-[15%] right-[0%] w-[80px] h-[60px] md:bottom-[15%] md:right-[0%] md:w-[120px] md:h-[80px] rounded-[50%] flex justify-center items-center bg-slate-200 ">
          <span className="text-center text-xs md:text-lg">
            Chat Application​
          </span>
        </div>
      </div>
    </div>
  );
};

export default Competitions;