@extends('layouts.public')

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

@section('content')
<div class="bg-[#161b22] border border-[#30363d] rounded-md p-8 shadow-2xl">
    <div class="text-center mb-6">
        <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">CAVENDRAL BETA</span>
        </div>
        <p class="text-xs text-[#7d8590] mt-2 font-mono">CADASTRO DE TESTADOR</p>
    </div>

    @isset($project)
    <div class="bg-[#21262d] border-l-4 border-[#1f6c92] p-3 mb-6 rounded-r">
        <div class="text-xs text-[#7d8590] uppercase">Projeto</div>
        <div class="text-base font-semibold">{{ $project->name }}</div>
        <div class="text-xs text-[#7d8590] mt-1">{{ $project->description }}</div>
    </div>
    @endisset

    <form method="POST" action="{{ route('invite.accept.store') }}" class="space-y-4">
        @csrf
        <input type="hidden" name="token" value="{{ $invitation->token }}">

        <div>
            <label class="block text-xs font-bold text-[#7d8590] mb-1">EMAIL</label>
            <input type="email" value="{{ $invitation->email }}" disabled
                   class="w-full px-3 py-2 bg-[#21262d] border border-[#30363d] rounded text-sm opacity-60 cursor-not-allowed">
            <p class="text-xs text-[#6e7681] mt-1">Email confirmado pelo convite.</p>
        </div>

        <div>
            <label for="full_name" class="block text-xs font-bold text-[#7d8590] mb-1">NOME COMPLETO</label>
            <input type="text" id="full_name" name="full_name" required
                   value="{{ old('full_name') }}"
                   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">
            @error('full_name') <p class="text-xs text-[#f85149]">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="display_name" class="block text-xs font-bold text-[#7d8590] mb-1">APELIDO (OPCIONAL)</label>
            <input type="text" id="display_name" name="display_name" maxlength="50"
                   value="{{ old('display_name') }}"
                   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">
        </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"
                   autocomplete="new-password">
            <p class="text-xs text-[#6e7681] mt-1">Mín 12 chars: maiúscula, minúscula, número e símbolo.</p>
            @error('password') <p class="text-xs text-[#f85149]">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="password_confirmation" class="block text-xs font-bold text-[#7d8590] mb-1">CONFIRMAR SENHA</label>
            <input type="password" id="password_confirmation" name="password_confirmation" 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"
                   autocomplete="new-password">
        </div>

        <div class="flex items-start gap-2">
            <input type="checkbox" id="lgpd_consent" name="lgpd_consent" required class="mt-1">
            <label for="lgpd_consent" class="text-xs text-[#7d8590]">
                Consentimento LGPD: concordo com o tratamento dos meus dados para fins do Beta, conforme a <a href="#" class="text-[#80b9d5] underline">Política de Privacidade</a>.
            </label>
            @error('lgpd_consent') <p class="text-xs text-[#f85149]">{{ $message }}</p> @enderror
        </div>

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

    <div class="mt-6 text-center">
        <a href="{{ route('login') }}" class="text-xs text-[#6e7681] hover:text-[#80b9d5]">← Voltar</a>
    </div>
</div>
@endsection