@extends('layouts.public')

@section('title', 'Probar Credify GO! — Demo con datos de ejemplo')

@section('meta')
    <meta name="robots" content="noindex, nofollow">
@endsection

@section('content')
<section class="hero-dark min-h-screen pt-32 pb-24 px-4">
    <div class="max-w-2xl mx-auto">
        <h1 class="text-4xl font-extrabold text-white mb-4">Prueba Credify GO! con datos de ejemplo</h1>
        <p class="text-slate-300 mb-8">
            Déjanos tus datos y te enviamos por correo las credenciales para entrar como
            <strong class="text-white">Dueño</strong>, <strong class="text-white">Supervisor</strong> y
            <strong class="text-white">Cobrador</strong>. Podrás probar la <strong class="text-white">app móvil</strong>
            y el <strong class="text-white">panel de gestión</strong> con una empresa demo ya poblada.
            Es un entorno de prueba que se reinicia a diario.
        </p>

        @if (session('demo_sent'))
            <div class="rounded-2xl bg-emerald-500/15 border border-emerald-400/30 text-emerald-200 p-5 mb-6">
                <p class="font-semibold">¡Listo! Te enviamos las credenciales a tu correo.</p>
                <p class="text-sm mt-1 text-emerald-200/80">Revisa tu bandeja (y spam). Con ellas inicias sesión en la app y el panel.</p>
            </div>
        @endif

        <form method="POST" action="{{ route('demo.request.store') }}" class="glass rounded-2xl p-6 space-y-4">
            @csrf
            <div>
                <label class="block text-sm text-slate-300 mb-1">Nombre</label>
                <input name="name" value="{{ old('name') }}" required maxlength="120"
                       class="w-full rounded-xl bg-white/5 border border-white/15 px-4 py-2.5 text-white">
                @error('name') <p class="text-red-400 text-sm mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm text-slate-300 mb-1">Correo</label>
                <input type="email" name="email" value="{{ old('email') }}" required
                       class="w-full rounded-xl bg-white/5 border border-white/15 px-4 py-2.5 text-white">
                @error('email') <p class="text-red-400 text-sm mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm text-slate-300 mb-1">WhatsApp</label>
                <input name="phone" value="{{ old('phone') }}" required
                       class="w-full rounded-xl bg-white/5 border border-white/15 px-4 py-2.5 text-white">
                @error('phone') <p class="text-red-400 text-sm mt-1">{{ $message }}</p> @enderror
            </div>
            <div>
                <label class="block text-sm text-slate-300 mb-1">Tu negocio (opcional)</label>
                <input name="message" value="{{ old('message') }}" maxlength="1000"
                       class="w-full rounded-xl bg-white/5 border border-white/15 px-4 py-2.5 text-white">
            </div>
            <button type="submit"
                    class="w-full px-6 py-3.5 bg-linear-to-r from-emerald-500 to-emerald-600 text-white font-bold rounded-2xl hover:brightness-110 transition-all cursor-pointer">
                Enviarme las credenciales
            </button>
        </form>
    </div>
</section>
@endsection