---
const videoUrl =
	"https://www.youtube.com/live/5HDW7u3xt6Y?si=SgPxg83YMdeqGo3t&t=8366";
const roles = ["Broadcast Manager", "ARG Creator", "Developer"];
---

<section
    id="projects"
    class="min-h-[calc(100svh-64px)] snap-start bg-background text-foreground"
    aria-labelledby="projects-title"
>
    <div class="grid min-h-full grid-cols-1 lg:grid-cols-2">
        <div
            class="px-6 py-12 sm:px-10 lg:px-[clamp(52px,5.208vw,100px)] lg:py-[clamp(58px,9.26vh,100px)]"
        >
            <div class="max-w-[654px] break-keep">
                <h2
                    id="projects-title"
                    class="mt-5 text-[clamp(32px,3.1vw,54px)] font-bold leading-[1.2] tracking-[-0.04em]"
                >
                    무대 뒤에서,<br />경험을 만들면서...
                </h2>
                <p
                    class="mt-6 max-w-[32rem] text-base leading-relaxed text-foreground/65"
                >
                    불과 얼음의 춤(A Dance of Fire and Ice)의 이펙트 제작과
                    플레이를<br /> 함께 다루는 대회, Effect Playing Contest. 2025와
                    Finale 시즌에 참여하며 방송부터 ARG, 개발까지 함께했어요.
                </p>
                <ul
                    class="mt-6 flex flex-wrap gap-x-4 gap-y-2 text-[13px] font-semibold"
                    aria-label="담당 역할"
                >
                    {
                        roles.map((role) => (
                            <li class="border-b-2 border-[#ff92ad]/60 pb-1">
                                {role}
                            </li>
                        ))
                    }
                </ul>

                <div class="mt-10 space-y-7">
                    <article
                        class="border-t border-foreground/15 pt-5"
                        aria-labelledby="epc-finale-title"
                    >
                        <div
                            class="mb-2 flex items-center gap-3 text-xs font-medium text-foreground/50"
                        >
                            <span>01</span><span>2026 · FINALE</span>
                        </div>
                        <h3
                            id="epc-finale-title"
                            class="text-[clamp(21px,1.7vw,28px)] font-bold tracking-[-0.025em]"
                        >
                            Effect Playing Contest : Finale
                        </h3>
                        <p
                            class="mt-3 text-sm leading-[1.85] text-foreground/65"
                        >
                            달성이 주관하고 ADOFAI.gg가 공동 주최하는 EPC의
                            마지막 시즌이에요.<br /> 방송 화면 개발과 운영을 맡고,
                            대회의 퍼즐을 경험하는 ARG를 제작했었어요.
                        </p>
                        <a
                            href="https://www.youtube.com/playlist?list=PLZeYZotn5_IM15cD3W2y5SAtI83xXE226"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="mt-4 inline-block text-sm font-semibold underline decoration-foreground/25 underline-offset-4 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring"
                            >Finale 영상 플레이리스트 <span aria-hidden="true"
                                >↗</span
                            ></a
                        >
                    </article>

                    <article
                        class="border-t border-foreground/15 pt-5"
                        aria-labelledby="epc-2025-title"
                    >
                        <div
                            class="mb-2 flex items-center gap-3 text-xs font-medium text-foreground/50"
                        >
                            <span>02</span><span>2025</span>
                        </div>
                        <h3
                            id="epc-2025-title"
                            class="text-[clamp(21px,1.7vw,28px)] font-bold tracking-[-0.025em]"
                        >
                            Effect Playing Contest 2025
                        </h3>
                        <p
                            class="mt-3 text-sm leading-[1.85] text-foreground/65"
                        >
                            이펙트 제작자와 플레이어가 각자의 실력을 선보이는
                            리듬 게임 대회입니다. 방송 화면의 대부분의 기능을
                            개발하고, 방송 운영을 담당했습니다.
                        </p>
                        <a
                            href="https://www.youtube.com/playlist?list=PLZeYZotn5_IOJDek6e35NKzUtJm09yxZD"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="mt-4 inline-block text-sm font-semibold underline decoration-foreground/25 underline-offset-4 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring"
                            >2025 영상 플레이리스트 <span aria-hidden="true"
                                >↗</span
                            ></a
                        >
                    </article>
                </div>
            </div>
        </div>

        <div
            class="grid min-w-0 items-center overflow-hidden px-4 pt-8 pb-[52px] lg:sticky lg:top-0 lg:h-[calc(100svh-64px)] lg:min-h-[560px] lg:self-start lg:py-6 lg:pr-7 lg:pl-0"
            aria-label="EPC 방송과 ARG 작업 사진"
        >
            <div class="relative mx-auto aspect-[0.98] w-full max-w-[880px]">
                <figure
                    class="absolute top-[9%] left-[6%] z-[2] m-0 w-[80%] -rotate-[5deg]"
                >
                    <div
                        class="aspect-video overflow-hidden rounded-xl bg-[#18141f] shadow-[0_12px_36px_#00000014]"
                        id="epc-video"
                    >
                        <button
                            class="group relative block h-full w-full cursor-pointer border-0 bg-transparent p-0 text-white focus-visible:outline-2 focus-visible:outline-offset-[-5px] focus-visible:outline-[#ff92ad]"
                            type="button"
                            aria-label="EPC Finale 후기 영상 재생"
                        >
                            <img
                                class="block h-full w-full object-cover"
                                src="/projects/epc-finale.avif"
                                alt="썸네일"
                                width="655"
                                height="387"
                                loading="lazy"
                                decoding="async"
                            />
                            <span
                                class="absolute top-1/2 left-1/2 grid aspect-square w-[clamp(40px,4vw,64px)] -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full border border-[#ffffff80] bg-[#17121d99] pl-[3px] backdrop-blur-[8px] transition-colors duration-200 group-hover:bg-[#17121de6] motion-reduce:transition-none"
                                aria-hidden="true">▶</span
                            >
                            <span
                                class="absolute inset-x-0 bottom-0 flex justify-between gap-2 bg-gradient-to-b from-transparent to-[#000c] px-4 pt-[30px] pb-3 text-left text-[clamp(10px,1vw,14px)] font-semibold"
                                >후기 영상
                            </span>
                        </button>
                    </div>
                    <img
                        class="absolute top-[-13%] left-[-5%] z-[3] pointer-events-none h-auto w-[13%] aspect-[94/131] rotate-[10deg]"
                        src="/projects/tape.svg"
                        alt=""
                        width="94"
                        height="131"
                    />
                    <img
                        class="absolute top-[-13%] right-[-5%] z-[3] pointer-events-none h-auto w-[13%] aspect-[94/131] rotate-[100deg]"
                        src="/projects/tape.svg"
                        alt=""
                        width="94"
                        height="131"
                    />
                </figure>

                <figure
                    class="absolute top-[47%] left-[21%] z-[1] m-0 w-[70%] rotate-[5deg] pointer-events-none select-none"
                >
                    <img
                        class="block h-auto w-full pointer-events-none overflow-hidden rounded-2xl shadow-[0_12px_36px_#00000014] focus-visible:rounded-2xl focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring"
                        src="/projects/IMG_0170.avif"
                        alt="점자로 보이는 단서가 적힌 찢어진 종이와 태블릿, 펜이 놓인 ARG 작업 사진"
                        width="2880"
                        height="2160"
                        loading="lazy"
                        decoding="async"
                    />
                    <img
                        class="absolute bottom-[-10%] left-[-6%] z-[3] pointer-events-none h-auto w-[13%] aspect-[94/131] rotate-90"
                        src="/projects/tape.svg"
                        alt=""
                        width="94"
                        height="131"
                    />
                    <img
                        class="absolute top-[-9%] right-[-5%] z-[3] pointer-events-none h-auto w-[13%] aspect-[94/131] rotate-[100deg]"
                        src="/projects/tape.svg"
                        alt=""
                        width="94"
                        height="131"
                    />
                </figure>
            </div>
        </div>
    </div>
</section>

<script>
    const videoFrame = document.getElementById("epc-video");
    const playButton = videoFrame?.querySelector("button");
    playButton?.addEventListener(
        "click",
        () => {
            if (!videoFrame) return;
            const player = document.createElement("iframe");
            player.src =
                "https://www.youtube-nocookie.com/embed/3NY8vgxvKaU?autoplay=1&playsinline=1";
            player.title = "EPC : Finale 방송화면에 이런 비밀이???";
            player.allow =
                "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
            player.allowFullscreen = true;
            player.referrerPolicy = "strict-origin-when-cross-origin";
            player.className = "block h-full w-full border-0";
            videoFrame.replaceChildren(player);
            player.focus();
        },
        { once: true },
    );
</script>