@extends('layouts.public')

@section('title', 'Cavendral Beta · Login')

@section('content')
<div class="bg-[#161b22] border border-[#30363d] rounded-md p-8 shadow-2xl">
    <div class="text-center mb-8">
        <div class="inline-flex items-center gap-2 font-mono text-lg">
            <span class="px-2 py-1 rounded bg-[#1f6c92]/20 text-[#80b9d5]">[B]</span>
            <span class="font-bold tracking-tight">CAVENDRAL BETA</span>
        </div>
        <p class="text-xs text-[#7d8590] mt-2 font-mono">BETA PORTAL · v1.0 · 2026</p>
    </div>

    <div class="text-center mb-6 text-sm text-[#7d8590]">
        <p>Acesso restrito.</p>
        <p>Apenas por convite.</p>
    </div>

    <form method="POST" action="{{ route('login.store') }}" class="space-y-4">
        @csrf
        <div>
            <label for="email" class="block text-xs font-bold text-[#7d8590] mb-1">EMAIL</label>
            <input type="email" id="email" name="email" required
                   value="{{ old('email') }}"
                   class="w-full px-3 py-2 bg-[#21262d] border border-[#30363d] rounded text-sm focus:border-[#1f6c92] focus:ring-2 focus:ring-[#80b9d5]/40 outline-none"
                   placeholder="seu@email.com"
                   autocomplete="email">
            @error('email') <p class="text-xs text-[#f85149] mt-1">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="password" class="block text-xs font-bold text-[#7d8590] mb-1">SENHA</label>
            <input type="password" id="password" name="password" required
                   class="w-full px-3 py-2 bg-[#21262d] border border-[#30363d] rounded text-sm focus:border-[#1f6c92] focus:ring-2 focus:ring-[#80b9d5]/40 outline-none"
                   placeholder="••••••••••••"
                   autocomplete="current-password">
            @error('password') <p class="text-xs text-[#f85149] mt-1">{{ $message }}</p> @enderror
        </div>

        <button type="submit"
                class="w-full bg-[#1f6c92] hover:bg-[#80b9d5] text-white font-bold py-2 rounded transition-colors">
            ENTRAR
        </button>
    </form>

    <div class="my-6 border-t border-[#30363d]"></div>

    <div class="text-center">
        <p class="text-sm text-[#7d8590] mb-3">Recebeu um convite?</p>
        <a href="{{ route('invite.accept') }}"
           class="inline-block border border-[#1f6c92] hover:bg-[#1f6c92]/10 text-[#80b9d5] font-bold py-2 px-6 rounded transition-colors">
            FUI CONVIDADO
        </a>
    </div>

    <div class="mt-6 text-center">
        <a href="{{ route('password.forgot') }}" class="text-xs text-[#6e7681] hover:text-[#80b9d5] transition">esqueci minha senha</a>
    </div>
</div>

@if(session('status'))
<div class="mt-4 bg-[#21262d] border-l-4 border-[#3fb950] text-[#3fb950] p-3 text-sm rounded-r">
    {{ session('status') }}
</div>
@endif
@endsection