<script>
    import { push } from 'svelte-spa-router';
    import { completeQuoteData, clearCompleteQuote } from '../stores/quoteStore.js';

    function proceed() {
        const dest = $completeQuoteData?.nextDest;
        clearCompleteQuote();
        if (dest) push(dest);
    }
</script>

{#if $completeQuoteData}
    <div class="overlay">
        <div class="bar" style="background: {$completeQuoteData.color}"></div>
        <p class="quote">{$completeQuoteData.text}</p>
        <button
            class="continue"
            style="border-color: {$completeQuoteData.color}; color: {$completeQuoteData.color}"
            on:click={proceed}
        >
            {$completeQuoteData.nextDest === '/win' ? 'finish →' : 'next level →'}
        </button>
    </div>
{/if}

<style>
    .overlay {
        position: absolute;
        inset: 0;
        background: rgba(6, 6, 6, 0.85);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
        padding: 0 80px;
        z-index: 30;
        animation: fadeIn 0.5s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .bar {
        width: 48px;
        height: 3px;
        border-radius: 2px;
    }

    .quote {
        font-family: 'Courier New', Courier, monospace;
        font-size: 17px;
        color: #ddd;
        text-align: center;
        line-height: 1.75;
        font-weight: 400;
    }

    .continue {
        margin-top: 8px;
        padding: 9px 30px;
        background: transparent;
        border: 1px solid;
        border-radius: 22px;
        font-family: 'Courier New', Courier, monospace;
        font-size: 15px;
        cursor: pointer;
        transition: background 0.15s;
    }

    .continue:hover {
        background: rgba(255, 255, 255, 0.07);
    }
</style>
