<script>
    let { title = $bindable(""), gameContext = $bindable(""), onNext } = $props();

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

<div class="heading">
    <h1>New Adventure</h1>
    <p>Set the stage for your story.</p>
</div>

<div class="form-glow">
<form class="standardForm" onsubmit={onNext}>
    <label>Title
        <input bind:value={title} type="text" placeholder="e.g. The Lost Kingdom of Arath" required use:autofocus>
    </label>

    <label>Game Information
        <textarea
            bind:value={gameContext}
            placeholder="Describe the world, setting, tone, or any context you want the AI to know about your adventure…"
            required
        ></textarea>
    </label>

    <button type="submit">Next &rarr;</button>
</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;
    }

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