<section class="auth-section section">
    <div class="container auth-grid auth-grid-wide">
        <div class="auth-intro">
            <span class="eyebrow">Join the table</span>
            <h1>Faster pickup starts here.</h1>
            <p>Create an account to keep your contact details, see order history, and hear about new specials.</p>
            <ul class="check-list">
                <li>Optional email 2FA can be enabled from My Account</li>
                <li>Newsletter preferences stay in your control</li>
                <li>Your payment details are handled by Square, not stored here</li>
            </ul>
        </div>
        <form class="auth-card form-stack" action="<?= e(url('/register')) ?>" method="post">
            <?= csrf_field() ?>
            <div>
                <span class="eyebrow">Customer account</span>
                <h2>Create Account</h2>
            </div>
            <div class="form-grid">
                <label>Full name
                    <input type="text" name="full_name" required autocomplete="name" value="<?= e($old['full_name'] ?? '') ?>">
                </label>
                <label>Phone number
                    <input type="tel" name="phone" required autocomplete="tel" value="<?= e($old['phone'] ?? '') ?>">
                </label>
                <label class="field-wide">Email address
                    <input type="email" name="email" required autocomplete="email" value="<?= e($old['email'] ?? '') ?>">
                </label>
                <label class="field-wide">Street address
                    <input type="text" name="street_address" required autocomplete="street-address" value="<?= e($old['street_address'] ?? '') ?>">
                </label>
                <label>City
                    <input type="text" name="city" required autocomplete="address-level2" value="<?= e($old['city'] ?? 'Keyser') ?>">
                </label>
                <label>State
                    <input type="text" name="state" required maxlength="2" autocomplete="address-level1" value="<?= e($old['state'] ?? 'WV') ?>">
                </label>
                <label>ZIP code
                    <input type="text" name="postal_code" required autocomplete="postal-code" value="<?= e($old['postal_code'] ?? '26726') ?>">
                </label>
            </div>
            <div class="form-grid">
                <label>Password
                    <input type="password" name="password" minlength="10" required autocomplete="new-password">
                </label>
                <label>Confirm password
                    <input type="password" name="password_confirmation" minlength="10" required autocomplete="new-password">
                </label>
            </div>
            <div class="honeypot" aria-hidden="true">
                <label>Website <input type="text" name="website" tabindex="-1" autocomplete="off"></label>
            </div>
            <label>Quick check: what is <?= (int) $captcha[0] ?> + <?= (int) $captcha[1] ?>?
                <input type="number" name="captcha" required inputmode="numeric" autocomplete="off">
            </label>
            <div class="notice">Creating an account opts you into occasional Fat Bottom Grille news. You can opt out from any email or My Account.</div>
            <button class="button button-large button-block" type="submit">Create My Account</button>
            <p class="auth-switch">Already have an account? <a href="<?= e(url('/login')) ?>">Sign in</a></p>
        </form>
    </div>
</section>
