---
import Layout from "../layouts/Layout.astro";
import OfficerCard from "../components/react/OfficerCard.jsx";
import Officers from "../data/officers.json";
import OfficerTabs from "../components/react/OfficerTabs.jsx";
import { Icon } from "astro-icon/components";
---

<html lang="en">
    <Layout>
        <div class="flex flex-col">
            <div
                class="bg-ieee h-[35em] rounded-b-[10%] my-auto flex flex-col items-center justify-center bg-blend-overlay bg-no-repeat bg-cover align-center bg-center"
                style="background-image: url('/backgrounds/fa21qp.png');"
            >
                <!-- BLUE BG -->
                <div
                    class="flex flex-col items-center justify-center text-center"
                >
                    <div
                        class="text-[3.2em] text-white font-bold mb-4 w-[11em]"
                    >
                        Join the 2nd largest IEEE student branch in the US!
                    </div>
                    <div class="scale-[600%] mt-10 space-x-2 flex flex-row">
                        <a href="https://discord.gg/XxfjqZSjca">
                            <Icon
                                name="ic:baseline-discord"
                                class="duration-500 transition hover:scale-125 scale-100 text-white hover:text-[#5562ea]"
                            />
                        </a>

                        <a href="https://www.facebook.com/ieeeucsd">
                            <Icon
                                name="ic:baseline-facebook"
                                class="duration-500 transition hover:scale-125 scale-100 text-white hover:text-[#0863f7]"
                            />
                        </a>

                        <a href="https://www.instagram.com/ieee.ucsd">
                            <Icon
                                name="mdi:instagram"
                                class="duration-500 transition hover:scale-125 scale-100 text-white hover:text-[#ff68cd]"
                            />
                        </a>
                    </div>
                </div>
            </div>
            <!-- Regular White BG -->
            <div
                class="bg-white h-[45em] flex flex-col items-center justify-center align-center bg-center"
            >
                <div class="text-ieee mb-4 text-[3.2em]">We are...</div>
                <div class="text-black mb-4 text-[1.8em] w-[22em] text-center">
                    A diverse engineering community seeking to empower students
                    through hands-on projects, networking opportunities, and
                    social events. Bonus points on having an open-access project
                    studio!
                </div>
                <div class="text-black mb-4 text-[1.8em] w-[22em] text-center">
                    The Institute of Electrical and Electronics Engineers (IEEE)
                    UC San Diego student branch is the second largest student
                    chapter in the world's largest professional organization. On
                    the student level, we provide members with a plethora of
                    ways to get involved!
                </div>
            </div>
            <div
                class="bg-ieee h-[35em] my-auto rounded-t-[10%] rounded-b-[10%] flex flex-col items-center justify-center bg-blend-overlay bg-no-repeat bg-cover align-center bg-center"
                style="background-image: url('/backgrounds/robocup.jpg');"
            >
                <!-- BLUE BG -->
                <div
                    class="flex flex-col items-center justify-center text-center"
                >
                    <div
                        class="text-[3.2em] text-white font-bold mb-4 w-[11em]"
                    >
                        Watch our trailer(s)!
                    </div>

                    <!-- <div class="scale-[400%] mt-10 space-x-2">
                    <a href="https://www.instagram.com/ieee.ucsd">
                        <iconify-icon
                            icon="mdi:calendar"
                            class="duration-500 transition hover:scale-125 scale-100 text-white hover:text-gray-500"
                        ></iconify-icon>
                    </a>
                </div> -->
                </div>
            </div>
            <div
                class="bg-white h-[60em] lg:h-[60em] flex justify-center items-center"
            >
                <div class="flex flex-wrap justify-center space-y-20">
                    <div
                        class="flex flex-col justify-center items-center w-full px-4 lg:px-8"
                    >
                        <div class="text-[3.2em] text-ieee font-bold mb-4">
                            QP Trailer
                        </div>
                        <iframe
                            src="https://drive.google.com/file/d/1OmIFFEqRWpzVRQr5I5teUYRlA66noqFB/preview"
                            width="860"
                            height="620"
                            allow="autoplay"></iframe>
                    </div>
                </div>
            </div>
            <!-- BLUE BG -->
            <div
                class="bg-ieee h-[35em] my-auto rounded-t-[10%] rounded-b-[10%] flex flex-col items-center justify-center bg-blend-overlay bg-no-repeat bg-cover align-center bg-center"
                style="background-image: url('/backgrounds/project_space.png');"
            >
                <!-- BLUE BG -->
                <div
                    class="flex flex-col items-center justify-center text-center"
                >
                    <div
                        class="text-[3.2em] text-white font-bold mb-4 w-[11em]"
                    >
                        Join us at the Project Space!
                    </div>
                    <div
                        class="text-white w-[22em] text-align-center text-[1.8em]"
                    >
                        The <a
                            class="text-yellow-200 font-bold"
                            href="https://maps.app.goo.gl/y4RwNCkoKBEHGHsv6"
                            id="project-space-link">IEEE Project Space</a
                        > is an open-access, collaborative space where students can
                        do homework or get access to basic electronic tools such
                        as soldering stations, breadboard components, and Arduino
                        and Raspberry PI parts!
                    </div>
                    <!-- <div class="scale-[400%] mt-10 space-x-2">
                    <a href="https://www.instagram.com/ieee.ucsd">
                        <iconify-icon
                            icon="mdi:calendar"
                            class="duration-500 transition hover:scale-125 scale-100 text-white hover:text-gray-500"
                        ></iconify-icon>
                    </a>
                </div> -->
                </div>
            </div>
            <!-- Regular White BG -->
            <div
                class="bg-white h-[90em] lg:h-[50em] flex justify-center items-center"
            >
                <div class="flex flex-wrap justify-center space-y-20">
                    <div
                        class="flex flex-wrap justify-center items-center w-full px-4 lg:px-8"
                    >
                        <!-- Calendar -->
                        <div
                            class="flex flex-col items-center justify-center w-full lg:w-1/2 p-4"
                        >
                            <div
                                class="text-center text-ieee text-[1.8em] font-bold"
                            >
                                Each officer has their own OAH, which can be
                                seen here:
                            </div>
                            <iframe
                                src="https://calendar.google.com/calendar/embed?showTitle=0&showPrint=0&showTabs=0&showCalendars=0&mode=MONTH&height=600&wkst=1&bgcolor=%23FFFFFF&src=c_62493071bab19c7c60d103460604dc7b3b569ffc1e58a42617978f626dff02ac%40group.calendar.google.com&color=%232952A3&ctz=America%2FLos_Angeles"
                                style="border: 0"
                                class="w-full h-[450px] max-w-4xl"
                                loading="lazy"></iframe>
                        </div>

                        <!-- Map -->
                        <div
                            class="flex flex-col items-center justify-center w-full lg:w-1/2 p-4"
                        >
                            <div
                                class="text-center text-ieee mb-12 text-[1.8em] font-bold"
                            >
                                We are located in EBU1-4710, which can be seen
                                here:
                            </div>
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d418.8284043474777!2d-117.23570464239734!3d32.881580836136536!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dc06c3689b4f99%3A0xdf55f97f07f34d4f!2sIrwin%20%26%20Joan%20Jacobs%20School%20of%20Engineering!5e0!3m2!1sen!2sus!4v1706156878486!5m2!1sen!2sus"
                                class="w-full h-[450px] max-w-4xl"
                                style="border: 0"
                                allowfullscreen=""
                                loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade"
                            ></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div
            class="flex justify-center items-center font-bold text-ieee text-[3em] mb-8"
        >
            Meet our Board Members:
        </div>

        <OfficerTabs client:load officers={Officers} />

        <style>
            #project-space-link {
                position: relative;
                text-decoration: none;
            }

            #project-space-link::after {
                content: "";
                position: absolute;
                width: 100%;
                transform: scaleX(0);
                height: 3px;
                @apply rounded-md;
                bottom: 0;
                left: 0;
                @apply bg-yellow-200;
                transform-origin: bottom right;
                transition: transform 0.25s ease-out;
            }

            #project-space-link:hover::after {
                transform: scaleX(1);
                transform-origin: bottom left;
            }
        </style>
    </Layout>
</html>
