<script lang="ts">
    let {
        contentSnippet,
        accent = false,
    }: {
        contentSnippet: () => any
        accent?: boolean
    } = $props()
</script>

<div
    class="red-card-wrapper"
    class:red-card-wrapper--accent={accent}
>
    <div class="red-card-shell">
        <div class="red-card-body">
            {@render contentSnippet()}
        </div>
    </div>
</div>

<style lang="less">
    @import "../../assets/css/variables.less";

    .red-card-wrapper {
        display: flex;
        width: 100%;
        height: 100%;
    }

    .red-card-shell {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        width: 100%;
        border-radius: 1.4rem;
        background:
            radial-gradient(120% 130% at 20% 10%, rgba(173, 81, 76, 0.38) 0%, rgba(13, 12, 12, 0.78) 55%),
            rgba(13, 12, 12, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-top-color: rgba(173, 81, 76, 0.38);
        padding: 3.4rem 2.2rem 2.4rem;
        box-shadow:
            0 18px 40px rgba(0, 0, 0, 0.45),
            inset 0 0 0 1px rgba(255, 255, 255, 0.02);
        backdrop-filter: blur(12px);
        overflow: visible;
        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            border-color 0.3s ease;

        &::before {
            content: "";
            position: absolute;
            top: -1.9rem;
            left: -1px;
            right: -1px;
            height: 2.9rem;
            border-radius: 1.4rem 1.4rem 0 0;
            clip-path: polygon(0 0, calc(100% - 2.6rem) 0, 100% 100%, 0% 100%);
            background:
                radial-gradient(140% 160% at 15% -30%, rgba(173, 81, 76, 0.5) 0%, rgba(13, 12, 12, 0.92) 68%),
                rgba(13, 12, 12, 0.96);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: none;
            box-shadow:
                0 18px 36px rgba(0, 0, 0, 0.4),
                inset 0 0 0 1px rgba(255, 255, 255, 0.03);
            pointer-events: none;
            z-index: 0;
            transition: border-color 0.3s ease;
        }

        &::after {
            content: "";
            position: absolute;
            top: -1.9rem;
            left: -1px;
            right: -1px;
            bottom: -1px;
            border-radius: inherit;
            clip-path: polygon(0 0, calc(100% - 2.6rem) 0, 100% 2.6rem, 100% 100%, 0% 100%);
            background: linear-gradient(
                140deg,
                rgba(255, 255, 255, 0.12) 0%,
                rgba(173, 81, 76, 0.2) 40%,
                transparent 90%
            );
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }
    }

    .red-card-body {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 1.6rem;
        width: 100%;
        color: var(--neutral-white);
    }

    .red-card-wrapper:hover .red-card-shell {
        transform: translateY(-6px);
        box-shadow:
            0 24px 60px rgba(0, 0, 0, 0.55),
            inset 0 0 0 1px rgba(255, 255, 255, 0.03);

        &::after {
            opacity: 1;
        }

        &::before {
            border-bottom-color: rgba(219, 96, 88, 0.65);
        }
    }

    .red-card-wrapper--accent .red-card-shell {
        border-color: rgba(173, 81, 76, 0.5);
        border-top-color: rgba(219, 96, 88, 0.65);
        background:
            radial-gradient(120% 130% at 20% 10%, rgba(173, 81, 76, 0.5) 0%, rgba(13, 12, 12, 0.78) 55%),
            rgba(13, 12, 12, 0.9);
    }

    .red-card-wrapper--accent .red-card-shell::before {
        background:
            radial-gradient(140% 160% at 15% -30%, rgba(173, 81, 76, 0.68) 0%, rgba(13, 12, 12, 0.92) 68%),
            rgba(13, 12, 12, 0.96);
        border-color: rgba(173, 81, 76, 0.5);
        border-bottom-color: rgba(219, 96, 88, 0.65);
    }

    .red-card-wrapper--accent:hover .red-card-shell {
        border-color: rgba(255, 82, 82, 0.65);
    }

    @media @mobile {
        .red-card-shell {
            padding: 3rem 1.8rem 2.1rem;
        }
    }
</style>
