<button class="openButton" data-primary-action>Open modal</button>

<div class="overlay"></div>
<dialog class="modal">
    <h2 class="title">Confirm</h2>
    <p>Are you sure you want to become a Motion expert?</p>
    <div class="controls">
        <button class="cancel">Cancel</button>
        <button class="save">Expert me</button>
    </div>
    <button class="closeButton" aria-label="Close">
        <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M18 6L6 18"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
            />
            <path
                d="M6 6L18 18"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
            />
        </svg>
    </button>
</dialog>

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

    const openButton = document.querySelector(".openButton")
    const modal = document.querySelector(".modal")
    const overlay = document.querySelector(".overlay")
    const closeButton = modal.querySelector(".closeButton")
    const cancelButton = modal.querySelector(".cancel")
    const saveButton = modal.querySelector(".save")

    const dialogOpenState = {
        opacity: 1,
        filter: "blur(0px)",
        rotateX: 0,
        rotateY: 0,
        z: 0,
    }

    const dialogInitialState = {
        opacity: 0,
        filter: "blur(10px)",
        z: -100,
        rotateY: 25,
        rotateX: 5,
        transformPerspective: 500,
    }

    hover(openButton, () => {
        animate(openButton, { scale: 1.1 })
        return () => animate(openButton, { scale: 1 })
    })

    press(openButton, () => {
        animate(openButton, { scale: 1.05 })
        return (_, { success }) =>
            animate(openButton, { scale: success ? 1.1 : 1 })
    })

    // Set initial state
    animate(overlay, { opacity: 0 }, { type: false })
    animate(modal, dialogInitialState, { type: false })

    function openModal() {
        modal.showModal()

        // Animate to open state
        animate(overlay, { opacity: 1 })
        animate(modal, dialogOpenState, {
            delay: 0.2,
            duration: 0.8,
            ease: [0.17, 0.67, 0.51, 1],
            opacity: {
                delay: 0.2,
                duration: 0.5,
                ease: "easeOut",
            },
        })
    }

    async function closeModal() {
        await Promise.all([
            animate(overlay, { opacity: 0 }),
            animate(modal, dialogInitialState, {
                duration: 0.3,
                ease: [0.67, 0.17, 0.62, 0.64],
            }),
        ])
        modal.close()
    }

    // Click handlers
    openButton.addEventListener("click", openModal)
    closeButton.addEventListener("click", closeModal)
    cancelButton.addEventListener("click", closeModal)
    saveButton.addEventListener("click", closeModal)

    // Handle click outside
    document.addEventListener("click", (event) => {
        const { top, left, width, height } = modal.getBoundingClientRect()

        if (
            modal.open &&
            (event.clientX < left ||
                event.clientX > left + width ||
                event.clientY < top ||
                event.clientY > top + height)
        ) {
            closeModal()
        }
    })

    // Handle escape key
    modal.addEventListener("cancel", (event) => {
        event.preventDefault()
        closeModal()
    })
</script>

<style>
    .openButton,
    .controls button {
        background-color: #ff0088;
        color: #f5f5f5;
        font-size: 16px;
        padding: 10px 20px;
        border-radius: 10px;
        border: none;
        cursor: pointer;
    }

    .controls {
        border-top: 1px solid var(--divider);
        padding-top: 20px;
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .controls button.cancel {
        background-color: var(--divider);
    }

    .modal {
        border-radius: 10px;
        border: 1px solid #1d2628;
        background-color: #0b1011;
        position: relative;
        z-index: 10000000;
        padding: 20px;
        min-width: 300px;
        transform-style: preserve-3d;
    }

    .modal p {
        margin: 0;
    }

    .modal::backdrop {
        display: none;
    }

    .title {
        font-size: 24px;
        margin: 0 0 20px;
    }

    .closeButton {
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        color: #f5f5f5;
    }

    .overlay {
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        z-index: 10000000;
    }
</style>