{% extends "base.html" %}
{% block title %}Erster Start | Nouri{% endblock %}
{% block content %}
<section class="auth-shell">
    <div class="auth-card">
        <p class="eyebrow">Erster Start</p>
        <h1>Den ersten Haushalt-Zugang anlegen</h1>
        <p class="lead">Danach könnt ihr Nouri gemeinsam nutzen. Der erste Einstieg bleibt bewusst klein: Zugang anlegen, Einkaufstag festlegen, erste Lebensmittel sammeln und bei Bedarf später eine Tagesvorlage merken.</p>

        <div class="setup-intro-grid">
            <div class="setup-tip">
                <strong>1. Ruhig starten</strong>
                <p class="muted">Ein erster Haushalt und ein Admin-Zugang reichen für den Anfang völlig.</p>
            </div>
            <div class="setup-tip">
                <strong>2. Alltag festhalten</strong>
                <p class="muted">Später könnt ihr Lebensmittel, Mahlzeitenideen und Planungen gemeinsam nutzen.</p>
            </div>
            <div class="setup-tip">
                <strong>3. Als App nutzen</strong>
                <p class="muted">Auf dem iPhone lässt sich Nouri später über Safari zum Home-Bildschirm hinzufügen.</p>
            </div>
        </div>

        <form method="post" class="stack-form">
            {{ csrf_input() }}
            <label>
                Haushaltsname
                <input type="text" name="household_name" autocomplete="organization" placeholder="z. B. Zuhause">
            </label>
            <label>
                Benutzername
                <input type="text" name="username" autocomplete="username" required>
            </label>
            <label>
                E-Mail
                <input type="email" name="email" autocomplete="email" placeholder="Optional">
            </label>
            <label>
                Anzeigename
                <input type="text" name="display_name" autocomplete="name" placeholder="z. B. Heinz">
            </label>
            <label>
                Passwort
                <input type="password" name="password" autocomplete="new-password" required>
            </label>
            <label>
                Passwort wiederholen
                <input type="password" name="password_repeat" autocomplete="new-password" required>
            </label>
            <button type="submit">Zugang anlegen</button>
        </form>
    </div>
</section>
{% endblock %}