<script>
    let { name = $bindable(""), description = $bindable(""), onSubmit, onBack } = $props();

    const autofocus = (node) => { node.focus(); };
</script>

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

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

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

    <div class="form-actions">
        <button type="button" onclick={onBack}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M19 12H5M12 5l-7 7 7 7"/>
            </svg>
            Back
        </button>
        <button type="submit">Begin Adventure</button>
    </div>
</form>
</div>

<style>
    .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%;
        padding: 3rem;
    }

    textarea {
        resize: vertical;
        min-height: 240px;
        line-height: 1.6;
        font-size: 1rem;
    }

    .form-actions {
        display: flex;
        gap: 0.75rem;
    }

    .form-actions button {
        width: auto;
    }

    .form-actions button:first-child {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .form-actions button[type="submit"] {
        flex: 1;
    }

    @media (max-width: 700px) {
        .standardForm { padding: 1.75rem; }
        textarea { min-height: 160px; }
        .form-actions { flex-direction: column-reverse; }
    }
</style>
