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

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

    <p class="w-1/3 text-center text-[1.2vw] pb-[5%]">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and
        publishing industries f
    </p>

    <div
        class="w-[85%] rounded-[3vw] bg-gradient-to-r from-ieee-blue-300 to-ieee-blue-100 relative h-[30vh] flex items-center text-white/90"
    >
        <div class="w-2/5 flex justify-evenly ml-[5%]">
            <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-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
                >
                    <FaDiscord />
                </div>
                <p class="text-[1.3vw] font-semibold">Discord</p>
            </Link>

            <Link
                href="https://www.facebook.com/ieeeucsd"
                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-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
                >
                    <FaFacebook />
                </div>
                <p class="text-[1.3vw] font-semibold">Facebook</p>
            </Link>

            <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-[2.2vw] text-ieee-black/80 border-ieee-blue-100 bg-gradient-radial from-white to-ieee-blue-100"
                >
                    <RiInstagramFill />
                </div>
                <p class="text-[1.3vw] font-semibold">Instagram</p>
            </Link>
        </div>
        <Image
            src={evan}
            alt="cat placeholder"
            class="absolute -bottom-[10vh] w-[25vw] right-0"
        />
    </div>
</div>