<div class="container">
    <ul class="gallery-container"></ul>
    <div class="black-overlay"></div>
    <div class="pink-overlay"></div>
</div>

<script type="module">
    import { animate, transform } from "https://cdn.jsdelivr.net/npm/motion@12.7.3/+esm"

    // Gallery images data
    const images = [
        {
            url: "/photos/japan-day/1.jpg",
            aspectRatio: "4 / 3",
        },
        {
            url: "/photos/japan-day/2.jpg",
            aspectRatio: "3 / 4",
        },
        {
            url: "/photos/japan-day/3.jpg",
            aspectRatio: "3 / 4",
        },
        {
            url: "/photos/japan-day/4.jpg",
            aspectRatio: "3 / 4",
        },
        {
            url: "/photos/japan-day/5.jpg",
            aspectRatio: "4 / 3",
        },
        {
            url: "/photos/japan-day/6.jpg",
            aspectRatio: "3 / 4",
        },
    ]

    // Create gallery items
    const galleryContainer = document.querySelector(".gallery-container")
    let galleryHTML = ""

    images.forEach((image, i) => {
        const height = image.aspectRatio === "4 / 3" ? "100%" : "auto"
        const width = image.aspectRatio === "3 / 4" ? "100%" : "auto"

        galleryHTML += `
            <li class="gallery-item">
                <img 
                    src="${image.url}" 
                    alt="Gallery item ${i + 1}" 
                    style="aspect-ratio: ${
                        image.aspectRatio
                    }; height: ${height}; width: ${width};"
                />
            </li>
        `
    })

    galleryContainer.innerHTML = galleryHTML

    // Get overlay elements
    const blackOverlay = document.querySelector(".black-overlay")
    const pinkOverlay = document.querySelector(".pink-overlay")

    // Mock loading progress
    let progress = 0

    const mapProgressToTopEdge = transform([0, 1], ["50%", "0%"])
    const mapProgressToBottomEdge = transform([0, 1], ["50%", "100%"])

    function getClipPath(progress) {
        const leftEdge = progress < 1 ? "calc(50% - 2px)" : "calc(0% - 0px)"
        const rightEdge = progress < 1 ? "calc(50% + 2px)" : "calc(100% + 0px)"
        const topEdge = mapProgressToTopEdge(progress)
        const bottomEdge = mapProgressToBottomEdge(progress)

        return `polygon(
            0% 0%, ${leftEdge} 0%, ${leftEdge} ${topEdge}, ${leftEdge} ${bottomEdge}, ${rightEdge} ${bottomEdge}, ${rightEdge} ${topEdge}, 
            ${leftEdge} ${topEdge}, ${leftEdge} 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%
        )`
    }

    function animateOverlay(progress) {
        animate(
            pinkOverlay,
            { clipPath: getClipPath(progress) },
            progress < 1
                ? { type: "spring", stiffness: 500, damping: 40 }
                : { type: "spring", visualDuration: 0.5, bounce: 0 }
        )

        if (progress >= 1) {
            animate(blackOverlay, { opacity: 0 })
        }
    }

    // Set initial state dynamically
    animate(pinkOverlay, { clipPath: getClipPath(0) }, { type: false })

    const interval = setInterval(() => {
        progress = progress + Math.random() * 0.3
        animateOverlay(progress)
        if (progress >= 1) clearInterval(interval)
    }, 300)
</script>

<style>
    .container {
        position: relative;
        width: 500px;
        height: 400px;
        overflow: hidden;
    }

    .gallery-container {
        background-color: #0b1011;
        border: 1px solid #1d2628;
        border-radius: 25px;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 20px;
        list-style: none;
        box-sizing: border-box;
    }

    .gallery-item {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        background-color: #0f1115;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }

    .gallery-item img {
        object-fit: cover;
    }

    .black-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #0f1115;
        z-index: 10000000000;
        pointer-events: none;
    }

    .pink-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ff0088;
        z-index: 10000000001;
        pointer-events: none;
        will-change: clip-path;
    }
</style>