---
import { Image } from "astro:assets";
import Link from "next/link";
import landingimg from "../../images/landing.webp";
import { FaDiscord } from "react-icons/fa";
import { RiInstagramFill } from "react-icons/ri";
import { MdEmail } from "react-icons/md";
---

<div class="w-full flex justify-between space-x-2 pt-[2%]">
  <div
    class="md:pt-[5%] pt-[6%] bg-linear-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black md:w-[53%] w-[60%] md:h-[45vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw]"
  >
    <p
      data-inview
      class="animate-ease-in-out text-ieee-yellow font-bold text-[3.5vw] md:text-[2.2vw] mb-[3%] in-view:animate-flip-down"
    >
      UC San Diego IEEE
    </p>
    <p
      data-inview
      class="animate-ease-in-out font-bold text-[3.6vw] md:text-[2.8vw] text-white mb-[6%] in-view:animate-fade-right"
    >
      Join one of the largest IEEE student branch in the US!
    </p>
    <p class="text-white font-light text-[2vw] md:text-[1.3vw]">
      IEEE @ UCSD is a pre-professional organization aiming to empower engineers
      with practical experience through hands-on project opportunities,
      insightful workshops, and panels with industry professionals. We are a
      branch organization of the International IEEE organization.
    </p>

    <div class="flex justify-end w-full mt-[6%]">
      <div
        class="text-white text-[3.5vw] md:text-[2.5vw] w-1/2 flex justify-between"
      >
        <Link
          href="https://www.instagram.com/ieee.ucsd"
          target="_blank"
          className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
        >
          <RiInstagramFill />
        </Link>
        <Link
          href="https://discord.gg/XxfjqZSjca"
          target="_blank"
          className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
        >
          <FaDiscord />
        </Link>

        <Link
          href="mailto:ieee@ucsd.edu"
          target="_blank"
          className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300"
        >
          <MdEmail />
        </Link>
      </div>
    </div>
  </div>
  <div
    class="md:w-[46%] w-[40%] md:h-[45vw] h-[65vw] border-white/70 border-[0.1vw] rounded-[3vw] bg-linear-to-b to-ieee-blue-100/60 from-ieee-black"
  >
    <Image
      src={landingimg}
      alt="circuit"
      class="w-[95%] md:h-[45vw] h-[60vw] object-contain"
    />
  </div>
</div>