const Inner = () => {
  return (
    <div className="min-h-screen bg-[var(--color-black)] text-white">
      <div className="container mx-auto px-4 md:px-0 md:py-2 md:mt-3">
        <div className="flex items-center justify-between">
          <div className="flex mb-2 items-center gap-4">
            <button className="cursor-pointer text-xs md:text-sm p-2 px-4 font-extrabold text-white bg-[var(--color-gray)] hover:text-white italic font-sofia transition">
              &lt; BACK
            </button>
            <h1 className="text-sm md:text-base font-extrabold italic tracking-tighter">
              ESPORTS
            </h1>
          </div>
          <button className="border font-onest gap-2 font-bold text-sm md:text-base flex items-center border-[#4D4CFE] px-5 py-2 bg-[#2B5AFF26] md:px-12">
            <span>COMPLETED BETS</span>
          </button>
        </div>
       
        <div className="mt-4">
          <div className="flex flex-col lg:flex-row gap-3 border py-2 px-4 text-white font-bold text-base md:text-xl 2xl:text-2xl font-sofia  border-[#29313D] bg-[#121924] items-center ">
            <div className="flex  items-center gap-3 justify-center ">
              <img src="/images/sports/army.svg" alt="" />
              <h1>United21 Season 41 2025</h1>
            </div>
            <div className="uppercase">best of 3 - first to two</div>
          </div>
        </div>
        <div className="">
          <div className="flex flex-col lg:flex-row p-1 px-3 border border-t-0 justify-between border-[#29313D] bg-[#161E2A] items-center gap-3 text-white font-bold text-base md:text-2xl 2xl:text-4xl  font-sofia">
            <div className="flex flex-1 flex-col lg:flex-row items-center justify-between gap-2">
              <div className="text-[#DBFAFF]">
                <div className="flex items-center gap-5">
                  <h1>DEC 3, 2025</h1>
                  <h1>21:00</h1>
                </div>
                <p className="text-xs md:text-base uppercase">YOUNG NINJAS VS mana esports</p>
              </div>
              <div className="flex font-onest text-xs md:text-base 2xl:text-lg hover:border-[#4D4CFE] duration-300 cursor-pointer hover:bg-[#2B5AFF26]  border-2 pl-5 justify-between gap-4 md:w-[400px] border-[#29313D] ">
                <div className="flex items-center gap-2">
                  <img src="/images/sports/star.svg" alt="" />
                  <h1>YOUNG NINJAS</h1>
                </div>
                <div className="bg-[#13151A] p-2">3.15</div>
              </div>
            </div>
            <div className="flex flex-1 items-center justify-between gap-2">
              <div className="flex p-1 font-onest text-xs md:text-base 2xl:text-lg duration-300 cursor-pointer pr-5 justify-between gap-4 md:w-[400px] border-[#29313D] ">
                <div className="flex items-center gap-1">
                  <img src="/images/sports/img.svg" className="w-10" alt="" />
                  <img src="/images/sports/img.svg" className="w-10" alt="" />
                  <img src="/images/sports/img.svg" className="w-10" alt="" />
                  <img src="/images/sports/img.svg" className="w-10" alt="" />
                </div>
              </div>
              <div className="flex items-center gap-2">
                <button className="bg-[#F14B3F] px-5 md:px-8 py-2">
                  Cancel Bet
                </button>
                {/* <h1>MANA ESPORTS</h1>
                <img src="/images/sports/badge.svg" alt="" /> */}
              </div>
            </div>
            {/* <h1>United21 Season 41 2025</h1> */}
          </div>
        </div>
         <div className="mt-4">
          <div className="flex flex-col lg:flex-row gap-3 border py-2 px-4 text-white font-bold text-base md:text-xl 2xl:text-2xl font-sofia  border-[#29313D] bg-[#121924] items-center ">
            <div className="flex  items-center gap-3 justify-center ">
              <img src="/images/sports/army.svg" alt="" />
              <h1>United21 Season 41 2025</h1>
            </div>
            <div className="uppercase">best of 3 - first to two</div>
          </div>
        </div>
        <div className="">
          <div className="flex flex-col lg:flex-row p-1 px-3 border border-t-0 justify-between border-[#29313D] bg-[#161E2A] items-center gap-3 text-white font-bold text-base md:text-2xl 2xl:text-4xl  font-sofia">
            <div className="flex flex-1 flex-col lg:flex-row items-center justify-between gap-2">
              <div className="text-[#DBFAFF]">
                <div className="flex items-center gap-5">
                  <h1>DEC 3, 2025</h1>
                  <h1>21:00</h1>
                </div>
                <p className="text-xs md:text-base uppercase">YOUNG NINJAS VS mana esports</p>
              </div>
              <div className="flex font-onest text-xs md:text-base 2xl:text-lg hover:border-[#4D4CFE] duration-300 cursor-pointer hover:bg-[#2B5AFF26]  border-2 pl-5 justify-between gap-4 md:w-[400px] border-[#29313D] ">
                <div className="flex items-center gap-2">
                  <img src="/images/sports/star.svg" alt="" />
                  <h1>YOUNG NINJAS</h1>
                </div>
                <div className="bg-[#13151A] p-2">3.15</div>
              </div>
            </div>
            <div className="flex flex-1 items-center justify-between gap-2">
              <div className="flex p-1 font-onest text-xs md:text-base 2xl:text-lg duration-300 cursor-pointer pr-5 justify-between gap-4 md:w-[400px] border-[#29313D] ">
                <div className="flex items-center gap-1">
                  <img src="/images/sports/img.svg" className="w-10" alt="" />
                  <img src="/images/sports/img.svg" className="w-10" alt="" />
                  <img src="/images/sports/img.svg" className="w-10" alt="" />
                  <img src="/images/sports/img.svg" className="w-10" alt="" />
                </div>
              </div>
              <div className="flex items-center gap-2">
                <button className="bg-[#F14B3F] px-5 md:px-8 py-2">
                  Cancel Bet
                </button>
                {/* <h1>MANA ESPORTS</h1>
                <img src="/images/sports/badge.svg" alt="" /> */}
              </div>
            </div>
            {/* <h1>United21 Season 41 2025</h1> */}
          </div>
        </div>
         <div className="mt-4">
          <div className="flex flex-col lg:flex-row gap-3 border py-2 px-4 text-white font-bold text-base md:text-xl 2xl:text-2xl font-sofia  border-[#29313D] bg-[#121924] items-center ">
            <div className="flex  items-center gap-3 justify-center ">
              <img src="/images/sports/army.svg" alt="" />
              <h1>United21 Season 41 2025</h1>
            </div>
            <div className="uppercase">best of 3 - first to two</div>
          </div>
        </div>
        <div className="">
          <div className="flex flex-col lg:flex-row p-1 px-3 border border-t-0 justify-between border-[#29313D] bg-[#161E2A] items-center gap-3 text-white font-bold text-base md:text-2xl 2xl:text-4xl  font-sofia">
            <div className="flex flex-1 flex-col lg:flex-row items-center justify-between gap-2">
              <div className="text-[#DBFAFF]">
                <div className="flex items-center gap-5">
                  <h1>DEC 3, 2025</h1>
                  <h1>21:00</h1>
                </div>
                <p className="text-xs md:text-base uppercase">YOUNG NINJAS VS mana esports</p>
              </div>
              <div className="flex font-onest text-xs md:text-base 2xl:text-lg hover:border-[#4D4CFE] duration-300 cursor-pointer hover:bg-[#2B5AFF26]  border-2 pl-5 justify-between gap-4 md:w-[400px] border-[#29313D] ">
                <div className="flex items-center gap-2">
                  <img src="/images/sports/star.svg" alt="" />
                  <h1>YOUNG NINJAS</h1>
                </div>
                <div className="bg-[#13151A] p-2">3.15</div>
              </div>
            </div>
            <div className="flex flex-1 items-center justify-between gap-2">
              <div className="flex p-1 font-onest text-xs md:text-base 2xl:text-lg duration-300 cursor-pointer pr-5 justify-between gap-4 md:w-[400px] border-[#29313D] ">
                <div className="flex items-center gap-1">
                  <img src="/images/sports/img.svg" className="w-10" alt="" />
                  <img src="/images/sports/img.svg" className="w-10" alt="" />
                  <img src="/images/sports/img.svg" className="w-10" alt="" />
                  <img src="/images/sports/img.svg" className="w-10" alt="" />
                </div>
              </div>
              <div className="flex items-center gap-2">
                <button className="bg-[#F14B3F] px-5 md:px-8 py-2">
                  Cancel Bet
                </button>
                {/* <h1>MANA ESPORTS</h1>
                <img src="/images/sports/badge.svg" alt="" /> */}
              </div>
            </div>
            {/* <h1>United21 Season 41 2025</h1> */}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Inner;
