@extends('layouts.app')

@section('title', 'Verify Agent')

@section('content')
<!-- Verification Form -->
<div class="bg-white rounded-2xl shadow-sm p-6">
    <form action="{{ route('verify.submit') }}" method="POST">
        @csrf

        <div class="mb-4">
            <label for="matrix_id" class="block text-sm font-medium text-gray-700 mb-2">Agent ID / Matrix ID</label>
            <input type="text"
                   id="matrix_id"
                   name="matrix_id"
                   placeholder="e.g., AGEN001"
                   class="w-full px-4 py-3.5 text-base border border-gray-200 rounded-xl bg-gray-50 text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:bg-white transition-all"
                   required
                   autocomplete="off"
                   autofocus>
        </div>

        <button type="submit"
                class="w-full py-3.5 bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white font-semibold rounded-xl shadow-sm transition-colors">
            Verify Agent
        </button>
    </form>
</div>

<!-- Info Cards -->
<div class="mt-6 space-y-3">
    <div class="flex items-center gap-3 px-4 py-3 bg-white rounded-xl">
        <div class="w-9 h-9 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </div>
        <div>
            <p class="text-sm font-medium text-gray-900">Verified Agents</p>
            <p class="text-xs text-gray-500">All agents are verified & authorized</p>
        </div>
    </div>

    <div class="flex items-center gap-3 px-4 py-3 bg-white rounded-xl">
        <div class="w-9 h-9 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
        </div>
        <div>
            <p class="text-sm font-medium text-gray-900">Secure & Private</p>
            <p class="text-xs text-gray-500">Your search is secure</p>
        </div>
    </div>

    <div class="flex items-center gap-3 px-4 py-3 bg-white rounded-xl">
        <div class="w-9 h-9 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
            <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        </div>
        <div>
            <p class="text-sm font-medium text-gray-900">Instant Results</p>
            <p class="text-xs text-gray-500">Get verification in seconds</p>
        </div>
    </div>
</div>
@endsection