<script>
    import { createEventDispatcher } from 'svelte';
    import { VERSION, CHANGELOG } from '../lib/changelog';

    const dispatch = createEventDispatcher();
    function close() { dispatch('close'); }
</script>

<svelte:window on:keydown={(e) => e.key === 'Escape' && close()} />

<div class="modal-backdrop" on:click|self={close}>
    <div class="modal-box sheet-modal glass-panel about-modal">
        <button class="modal-close" on:click={close} aria-label="Close">×</button>
        <h3>About</h3>
        <p class="about-tagline">A remote-play companion for <em>Rats with Gats</em>.</p>
        <p class="about-version">Version {VERSION}</p>

        <h4 class="about-heading">What's New</h4>
        <ul class="changelog">
            {#each CHANGELOG as entry (entry.version)}
                <li class="changelog-entry">
                    <div class="changelog-head">
                        <span class="changelog-ver">v{entry.version}</span>
                        <span class="changelog-date text-muted">{entry.date}</span>
                    </div>
                    <ul class="changelog-changes">
                        {#each entry.changes as change}
                            <li>{change}</li>
                        {/each}
                    </ul>
                </li>
            {/each}
        </ul>
    </div>
</div>

<style>
    .about-tagline {
        margin: 0.25rem 0 0.75rem;
        color: var(--text-muted);
    }
    .about-version {
        font-family: var(--font-heading);
        font-weight: 700;
        color: var(--accent);
        margin: 0;
    }
    .about-heading {
        margin: 1.25rem 0 0.5rem;
        border-top: 1px solid var(--edge-soft);
        padding-top: 1rem;
    }
    .changelog {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .changelog-head {
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
        margin-bottom: 0.25rem;
    }
    .changelog-ver {
        font-family: var(--font-heading);
        font-weight: 700;
        color: var(--accent);
    }
    .changelog-date {
        font-size: 0.85rem;
    }
    .changelog-changes {
        margin: 0;
        padding-left: 1.2rem;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
</style>
