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

    let name = $state("");
    let description = $state("");

    const submit = async ()=>{
        console.log("submit");
    }
</script>

<div class="page">
    <main>
        <div class="heading">
            <h1>Create Your Character</h1>
            <p>Who will you be in this world?</p>
        </div>

        <form class="standardForm" onsubmit={submit}>
            <label>Name
                <input bind:value={name} type="text" placeholder="e.g. Aldric the Grey" required>
            </label>

            <label>Description
                <textarea bind:value={description} placeholder="Describe your character's appearance, background, personality, or anything else that defines them…" rows="6" required></textarea>
            </label>

            <button type="submit">Create Character</button>
        </form>
    </main>
</div>

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

    header {
        padding: 1.25rem 2rem;
        border-bottom: 1px solid #1e1e28;
    }

    .back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.85rem;
        font-weight: 500;
        color: #6b6b7a;
        text-decoration: none;
        transition: color 0.15s;
    }

    .back:hover { color: #a1a1aa; }

    main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 1.5rem 6rem;
        gap: 2rem;
    }

    .heading {
        text-align: center;
        max-width: 480px;
    }

    h1 {
        font-size: clamp(1.8rem, 4vw, 2.4rem);
        font-weight: 800;
        letter-spacing: -1.5px;
        color: #e5e5ea;
        margin-bottom: 0.5rem;
    }

    .heading p {
        font-size: 0.95rem;
        color: #6b6b7a;
    }

    .standardForm {
        width: 100%;
        max-width: 780px;
        padding: 3rem;
    }

    textarea {
        resize: vertical;
        min-height: 220px;
        line-height: 1.6;
    }

    @media (max-width: 700px) {
        .standardForm { padding: 1.75rem; }
        textarea { min-height: 140px; }
        main { padding: 2rem 1.25rem 4rem; }
    }
</style>
