{{ push:styles }}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    {{ vite src="resources/css/swiper.css" }}
{{ /push:styles }}
{{ push:scripts }}
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
{{ /push:scripts }}
<div id="team-member">
    <div class="mt-18 flex justify-center px-4 pb-20 pt-18 md:mt-64 md:px-15 md:pt-6">
        <div class="absolute right-0 z-10 -mt-20 overflow-hidden opacity-0 sm:opacity-100 lg:-mt-6">
            {{ svg src="/images/background/team/background_member.svg" }}
        </div>
        <div class="flex w-full max-w-screen-lg flex-col items-center justify-center">
            <div id="team-nav-back" class="w-full text-brand-pink">
                {{ parent }}
                    <a
                        class="group inline-flex items-center gap-6 transition duration-300 hover:text-hover-brand-pink"
                        style="--underline-color: var(--hover-brand-pink)"
                        href="{{ url }}"
                    >
                        {{ svg src="/images/icon/small_arrow.svg" class="h-[19px] w-[33px] fill-brand-pink align-middle duration-300 group-hover:fill-hover-brand-pink scale-x-[-1]" }}
                        <span class="hover-underline-animation text-md group-hover:after:scale-x-100">
                            {{ title }}
                        </span>
                    </a>
                {{ /parent }}
            </div>
            <div id="team-member-info" class="mt-10 flex w-full max-w-screen-md flex-col">
                <div class="flex flex-col sm:relative sm:min-h-[413px]">
                    <div class="h-fit text-[3.75rem] leading-[5.625rem] sm:pr-80">{{ title }}</div>
                    <div class="right-0 top-0 text-right max-sm:mt-2 sm:absolute">
                        <img
                            class="relative aspect-square w-full object-cover sm:aspect-[89/110] sm:h-88"
                            src="{{ headshot_image:url }}"
                            alt="{{ headshot_image:alt }}"
                        />
                        {{ if linkedin_url }}
                            <a
                                class="group ml-auto mt-4 block w-fit"
                                href="https://linkedin.com/in/{{ linkedin_url }}"
                                target="_blank"
                            >
                                {{ svg src="/images/icon/linked_in.svg" class="h-[45px] fill-brand-pink group-hover:fill-hover-brand-pink" }}
                            </a>
                        {{ endif }}
                    </div>
                    <div class="text-xl leading-none sm:pr-80">
                        {{ if drink_preference }}
                            <div id="drink-preference" class="mt-10 text-brand-yellow">
                                {{ svg src="/images/icon/drink.svg" class="h-[26px] fill-current" }}
                                <div class="mt-4">{{ drink_preference }}</div>
                            </div>
                        {{ endif }}
                        {{ if superpowers }}
                            <div id="superpowers" class="mt-10 text-brand-pink">
                                {{ svg src="/images/icon/electric_bolt.svg" class="h-[26px] fill-current" }}
                                <ul>
                                    {{ superpowers }}
                                        <li class="mt-7">{{ value }}</li>
                                    {{ /superpowers }}
                                </ul>
                            </div>
                        {{ endif }}
                        <div id="roles" class="mt-10">
                            {{ svg src="/images/icon/id_card.svg" class="h-[33px] fill-current" }}
                            <ul>
                                {{ roles }}
                                    <li class="mt-7">{{ value }}</li>
                                {{ /roles }}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{ if into_lines || bio }}
        <div
            id="team_member_info"
            class="{{ if featured_image }} pt-16 md:pb-[4.2rem] md:pt-32 pb-[3.25rem] {{ else }} py-14 {{ /if }} justify-center bg-white px-4 md:flex md:px-15"
        >
            <div class="w-full max-w-screen-md">
                <div class="text-[2rem] font-bold leading-[2.5rem] text-brand-navy">{{ intro_lines }}</div>
                <div class="mt-4 text-md text-not-black">{{ bio }}</div>
            </div>
        </div>
    {{ endif }}
    {{ if featured_image }}
        <div
            class="items-center bg-gradient-to-b from-white from-75% to-brand-navy to-25% text-center align-middle lg:mb-20"
        >
            <img
                class="inline-block aspect-[1.5/1] w-full max-w-[72.5rem] object-cover md:aspect-[5.8/3]"
                src="{{ featured_image:url }}"
                alt="{{ featured_image:alt }}"
            />
        </div>
    {{ endif }}
</div>
<div id="meet-more" class="mt-18 flex flex-col px-4 pb-[11.75rem] md:mt-22 md:justify-center md:px-15">
    <div class="flex justify-center align-middle">
        <div class="text-center text-xl font-normal max-md:w-[14.375rem]">Meet more of Amperative</div>
    </div>
    <div
        id="swiper"
        class="-mx-4 mt-12 md:-mx-15 md:mt-14"
        x-init="loader()"
        x-data="{
            isReady: false,
            swiper: undefined,
            selectedSlider: 1,
            loader () {
                let that = this;
                let defaultOptions = {
                    loop: true,
                    grabCursor: true,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    on: {
                        init: function () {
                            that.isReady = true;
                        },
                        slideChange(swiper) {
                            that.selectedSlider = swiper.realIndex;
                        },
                        realIndexChange(swiper) {
                            that.selectedSlider = swiper.realIndex;
                        }
                    },
                    watchSlidesProgress: true,
                    slidesPerView: 1.5,
                    spaceBetween: 24,
                    centeredSlides: true,
                    effect: 'coverflow',
                    coverflowEffect: {
                        slideShadows: false,
                        rotate: 0,
                        depth: 0,
                        scale: 0.8
                    },
                    breakpoints: {
                        768: {
                            slidesPerView: 4,
                            coverflowEffect: {
                                slideShadows: false,
                                scale: 1
                            }
                        }
                    }
                };

                if(this.swiper) this.swiper.destroy(true, true);
                this.swiper = new Swiper('#swiper-team', defaultOptions)
            },
            next() {
                this.swiper.slideNext();
            },
            prev() {
                this.swiper.slidePrev();
            }
        }"
    >
        <div class="relative flex w-full">
            <div id="swiper-team" class="h-full w-full flex-auto overflow-hidden" x-show="isReady">
                <div class="swiper-wrapper !w-fit">
                    {{ collection:team sort="random" }}
                        <div class="swiper-slide group relative w-full">
                            <a
                                class="relative w-full max-md:items-center max-md:text-center"
                                href="{{ url }}"
                                style="--underline-color: var(--hover-brand-pink)"
                            >
                                <div class="relative">
                                    <img
                                        loading="lazy"
                                        class="aspect-[17/23] w-full object-cover md:aspect-[68/75]"
                                        src="{{ headshot_image:url }}"
                                        alt="{{ headshot_image:alt }}"
                                    />
                                    <div
                                        class="absolute inset-0 bg-brand-pink opacity-0 transition duration-300 group-hover:opacity-15"
                                    ></div>
                                </div>
                                <div class="items-center justify-between md:flex">
                                    <div
                                        class="hover-underline-animation mt-2 text-md font-bold -tracking-[0.02063rem] text-hover-brand-pink group-hover:after:scale-x-100"
                                    >
                                        {{ title }}
                                    </div>
                                    {{ svg src="images/icon/small_arrow.svg" class="max-md:hidden flex h-5 w-10 fill-hover-brand-pink opacity-0 md:transition md:duration-200 md:group-hover:opacity-100" }}
                                </div>
                                <div class="text-md">
                                    {{ roles | first }}
                                </div>
                            </a>
                        </div>
                    {{ /collection:team }}
                </div>
            </div>
            <button
                class="absolute bottom-18 left-3 flex h-[16vw] w-[18vw] items-center justify-center bg-brand-pink xs:bottom-10 sm:bottom-6 sm:left-3 md:left-[5vw] md:top-[12vw] md:h-[4.6vw] md:w-[5.25vw] lg:left-[6.4vw]"
                @click="prev()"
            >
                {{ svg src="/images/icon/small_arrow.svg" class="fill-white w-1/2 scale-x-[-1]" }}
            </button>
            <button
                class="absolute bottom-18 right-3 flex h-[16vw] w-[18vw] items-center justify-center bg-brand-pink xs:bottom-10 sm:bottom-6 sm:right-3 md:right-[5vw] md:top-[12vw] md:h-[4.6vw] md:w-[5.25vw] lg:right-[6.4vw]"
                @click="next()"
            >
                {{ svg src="/images/icon/small_arrow.svg" class="fill-white w-1/2" }}
            </button>
        </div>
    </div>
</div>