@extends('layouts.app')
@section('title', 'Registrieren — kotsch.tech')
@section('content')
<div style="max-width:440px;margin:0 auto;padding:60px 20px;">
    <h1 style="font-size:2rem;font-weight:800;margin-bottom:8px;">Registrieren</h1>
    <p style="color:#475569;margin-bottom:28px;">Kostenloses Konto — schaltet alle Wissen-Artikel und Premium-Tools frei.</p>

    @if ($errors->any())
        <div style="background:#fef2f2;color:#b91c1c;padding:12px 16px;border-radius:10px;margin-bottom:16px;">
            {{ $errors->first() }}
        </div>
    @endif

    <form method="POST" action="{{ route('register.store') }}">
        @csrf
        <label style="display:block;font-weight:600;margin-bottom:6px;">E-Mail *</label>
        <input type="email" name="email" required value="{{ old('email') }}"
            style="width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;margin-bottom:16px;">

        <label style="display:block;font-weight:600;margin-bottom:6px;">Passwort (optional)</label>
        <input type="password" name="password" autocomplete="new-password"
            style="width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;margin-bottom:4px;">
        <p style="font-size:.8rem;color:#94a3b8;margin-bottom:16px;">Leer lassen = Login per Code an deine E-Mail.</p>

        <label style="display:flex;gap:8px;align-items:flex-start;margin-bottom:12px;font-size:.9rem;color:#475569;">
            <input type="checkbox" name="consent" value="1" style="margin-top:3px;">
            <span>Ich akzeptiere die <a href="/datenschutz">Datenschutzerklärung</a>. *</span>
        </label>
        <label style="display:flex;gap:8px;align-items:flex-start;margin-bottom:20px;font-size:.9rem;color:#475569;">
            <input type="checkbox" name="newsletter" value="1" style="margin-top:3px;">
            <span>Newsletter mit Tipps &amp; neuen Tools (jederzeit abbestellbar).</span>
        </label>

        <button type="submit" style="width:100%;background:#6D5AE6;color:#fff;border:none;padding:14px;border-radius:10px;font-weight:700;font-size:1rem;cursor:pointer;">Konto erstellen</button>
    </form>

    <p style="text-align:center;margin-top:20px;color:#475569;">Schon ein Konto? <a href="{{ route('login') }}">Anmelden</a></p>
</div>
@endsection