---
import { LiaDotCircle } from "react-icons/lia";
import { Image } from "astro:assets";
import Link from "next/link";
import qp from "../../images/qp.webp";
import { IoIosArrowDroprightCircle } from "react-icons/io";
---

<div class="text-white flex flex-col items-center md:my-[7%] my-[12%] relative">
  <div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[4%]">
    <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
    <p>Quarterly Project</p>
  </div>
  <div class="w-[70vw] aspect-[2.5/1] relative">
    <div id="qp-skeleton" class="skeleton absolute inset-0 rounded-full z-0">
      <Image
        src={qp}
        alt="qp showcase photo"
        class="md:opacity-0 md:w-[70vw] w-[85vw] md:aspect-[2.5/1] aspect-[2.5/1.2] rounded-full relative in-view:animate-fade-down"
        data-inview
      />
    </div>
  </div>
  <Link
    data-inview
    href="/projects/quarterly"
    className="in-view:animate-fade-left absolute top-[25%] md:right-[15%] right-[10%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center md:text-[1.3vw] text-[2vw] hover:bg-ieee-yellow duration-300 shadow-md"
  >
    more details
    <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.7vw] mt-[1%]" />
  </Link>
  <div
    data-inview
    class="in-view:animate-fade-right md:w-[45%] w-[70%] text-[1.8vw] md:text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute md:-bottom-[6%] -bottom-[15%] md:left-[15%] left-[5%] px-[1.5%] py-[1%] rounded-[1.5vw]"
  >
    <p class="md:text-[1.4vw] text-[2.2vw] mb-[2%]">Quarterly Project</p>
    <p>
      Getting started on hardware development or want to make your own project?
      Need something to put on your resume? IEEE's Quarterly Projects aims to
      provide students with project experience in a span of 10 weeks. Check out
      QP page for more detail!
    </p>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const image = document.getElementById("qp-image");
    const skeleton = document.getElementById("qp-skeleton");

    if (image) {
      image.onload = () => {
        skeleton.style.display = "none";
      };
    }
  });
</script>