<script>
    import {page} from "$app/state";

    import DashboardNav from "./DashboardNav.svelte";
</script>

<div class="dashboard">

    <DashboardNav />

    <main>
        <div class="welcome">
            <div class="welcome-glow"></div>
            <h1>Welcome back.</h1>
            <p class="subtitle">Pick up where you left off, or start something new.</p>
        </div>

        <div class="actions">
            <a href="/tokens" class="card card-tokens">
                <div class="card-icon">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"/>
                        <path d="M12 6v12M9 9h4.5a2.5 2.5 0 0 1 0 5H9"/>
                    </svg>
                </div>
                <div class="card-body">
                    <h2>Add Tokens</h2>
                    <p>Top up your balance to fuel your next adventure. Pay only for what you use.</p>
                </div>
                <div class="card-arrow">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                </div>
            </a>

            <a href="/game" class="card card-games">
                <div class="card-icon">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
                        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
                        <path d="M8 7h8M8 11h5"/>
                    </svg>
                </div>
                <div class="card-body">
                    <h2>My Games</h2>
                    <p>Browse your ongoing campaigns and completed adventures.</p>
                </div>
                <div class="card-arrow">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                </div>
            </a>
        </div>
    </main>

</div>

<style>
    .dashboard {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: #0b0b10;
    }


    /* ── Main ── */
    main {
        flex: 1;
        max-width: 860px;
        width: 100%;
        margin: 0 auto;
        padding: 4rem 2rem 6rem;
    }

    /* ── Welcome ── */
    .welcome {
        position: relative;
        margin-bottom: 3.5rem;
        overflow: hidden;
    }

    .welcome-glow {
        position: absolute;
        top: -60px;
        left: -80px;
        width: 400px;
        height: 300px;
        background: radial-gradient(ellipse, rgba(192, 132, 252, 0.12) 0%, transparent 70%);
        pointer-events: none;
    }


    h1 {
        font-size: clamp(2.4rem, 6vw, 3.5rem);
        font-weight: 800;
        letter-spacing: -2px;
        color: #e5e5ea;
        line-height: 1.05;
        margin-bottom: 1rem;
    }

    .subtitle {
        font-size: 1.05rem;
        color: #6b6b7a;
        max-width: 440px;
    }

    /* ── Action cards ── */
    .actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }

    .card {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        padding: 2rem;
        border-radius: 16px;
        border: 1px solid #1e1e28;
        background: #0f0f18;
        text-decoration: none;
        color: inherit;
        position: relative;
        overflow: hidden;
        transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    }

    .card::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.2s;
        border-radius: inherit;
    }

    .card-tokens::before {
        background: radial-gradient(ellipse at top left, rgba(192, 132, 252, 0.08) 0%, transparent 70%);
    }

    .card-games::before {
        background: radial-gradient(ellipse at top left, rgba(90, 90, 255, 0.08) 0%, transparent 70%);
    }

    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.5);
    }

    .card-tokens:hover {
        border-color: #c084fc;
    }

    .card-games:hover {
        border-color: #5a5aff;
    }

    .card:hover::before {
        opacity: 1;
    }

    .card-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .card-tokens .card-icon {
        background: rgba(192, 132, 252, 0.1);
        color: #c084fc;
    }

    .card-games .card-icon {
        background: rgba(90, 90, 255, 0.1);
        color: #7a7aff;
    }

    .card-body {
        flex: 1;
    }

    .card-body h2 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #e5e5ea;
        margin-bottom: 0.5rem;
        letter-spacing: -0.3px;
    }

    .card-body p {
        font-size: 0.9rem;
        color: #6b6b7a;
        line-height: 1.5;
    }

    .card-arrow {
        color: #3a3a50;
        align-self: flex-end;
        transition: color 0.2s, transform 0.2s;
    }

    .card:hover .card-arrow {
        transform: translateX(4px);
    }

    .card-tokens:hover .card-arrow { color: #c084fc; }
    .card-games:hover .card-arrow  { color: #7a7aff; }

    @media (max-width: 600px) {
        .actions {
            grid-template-columns: 1fr;
        }

        main {
            padding: 2.5rem 1.25rem 4rem;
        }
    }
</style>
