---
import { LiaDotCircle } from "react-icons/lia";
import { Image } from "astro:assets";
import jellyfish from "../../images/jellyfish.png";
import { FaDiscord } from "react-icons/fa";
import { RiInstagramFill } from "react-icons/ri";
import { MdEmail } from "react-icons/md";
import Link from "next/link";
---

<div
    class="text-white flex flex-col items-center md:h-[35vw] h-[60vw] justify-between"
>
    <div class="flex items-center text-[4.5vw] md:text-[2.5vw]">
        <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
        <p>Social Media</p>
    </div>

    <p class="md:w-1/3 w-3/5 text-center text-[2vw] md:text-[1.2vw] pb-[5%]">
        Stay connected with us on Discord, Facebook, and Instagram! We regularly
        post information on upcoming events and competitions.
    </p>

    <div
        class="md:w-[85%] w-full rounded-[3vw] bg-gradient-to-r from-ieee-blue-300 to-ieee-blue-100 relative md:h-[15vw] h-[30vw] flex items-center text-white/90"
    >
        <div
            data-inview
            class="md:w-2/5 w-1/2 flex justify-evenly ml-[5%] animate-ease-in-out in-view:animate-flip-up animate-duration-1000"
        >
            <Link
                href="https://www.instagram.com/ieee.ucsd"
                target="_blank"
                className="flex flex-col items-center"
            >
                <div
                    class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[5vw] md:text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
                >
                    <RiInstagramFill />
                </div>
                <p class="text-[2vw] md:text-[1.3vw] font-semibold">
                    Instagram
                </p>
            </Link>

            <Link
                href="https://discord.gg/XxfjqZSjca"
                target="_blank"
                className="flex flex-col items-center"
            >
                <div
                    class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[5vw] md:text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
                >
                    <FaDiscord />
                </div>
                <p class="text-[2vw] md:text-[1.3vw] font-semibold">Discord</p>
            </Link>

            <Link
                href="mailto:ieee@ucsd.edu"
                target="_blank"
                className="flex flex-col items-center"
            >
                <div
                    class="border-[0.15vw] rounded-full shadow-glow hover:scale-110 duration-300 p-[1vw] text-[5vw] md:text-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
                >
                    <MdEmail />
                </div>
                <p class="text-[2vw] md:text-[1.3vw] font-semibold">Email</p>
            </Link>
        </div>
        <Image
            data-inview
            src={jellyfish}
            alt="Jellyfish mascot"
            class="absolute bottom-[2vw] md:w-[25vw] w-[35vw] right-[4vw] animate-wiggle animate-infinite"
        />
    </div>
</div>