@extends('layouts.app')
@section('title', 'Join the bonanza')
@section('content')
<section class="auth-shell container"><div class="auth-story"><div class="eyebrow">BONUS BONANZA / CAT LOVERS’ EDITION</div><h1>You’re in<br><em>good company.</em></h1><p class="lead">A welcoming little space for cat people. Create your account, collect credits from your admin, and find your next bonus moment.</p><div class="auth-benefits"><span>01 &nbsp; Create your account</span><span>02 &nbsp; Receive admin-granted credits</span><span>03 &nbsp; Spin & discover</span></div><img class="auth-cat" src="{{ asset('wheel/cat-hero.png') }}" width="1024" height="1536" alt="A friendly tabby cat with white paws"></div>
<div class="auth-card"><div class="eyebrow">LET’S GET YOU IN</div><h2>Join the bonanza.</h2><p class="muted">{{ $signupCredits > 0 ? 'Receive '.$signupCredits.' spin credits when you register. Your admin can grant more later.' : 'Your first step towards a bonus moment. Ask your admin for spin credits after registering.' }}</p>
<form method="post" action="{{ route('register.store') }}" class="stack-form">@csrf
<label>Your name<input name="name" value="{{ old('name') }}" autocomplete="name" required maxlength="80" autofocus placeholder="How should we call you?"></label>
<label>Email address<input name="email" type="email" value="{{ old('email') }}" autocomplete="email" required maxlength="255" placeholder="you@example.com"></label>
<label>Password<input name="password" type="password" autocomplete="new-password" minlength="10" required><small>Use at least 10 characters.</small></label>
<label>Confirm password<input name="password_confirmation" type="password" autocomplete="new-password" minlength="10" required></label>
<button class="button wide" type="submit">Create my player account <span>↗</span></button>
</form><div class="small-note">Already joined the bonanza? <a href="{{ route('login') }}">Sign in</a></div></div></section>
@endsection