@extends('layouts.app')

@section('title', 'Verify TCC - ERAS')

@section('content')
<main class="relative">
    {{-- Hero Section --}}
    <section class="py-16 lg:py-20">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto">
                <h1 class="text-3xl lg:text-4xl font-semibold tracking-tight text-gray-900 mb-4">
                    Revenue Services Hub: Edo Revenue Administration System
                </h1>
                <div class="w-16 h-1 bg-emerald-600 mx-auto mb-6"></div>
                <p class="text-lg text-gray-600">
                    Kindly interact with EIRS on a wide range of revenue administrator services to assist you better.
                </p>
            </div>
        </div>
    </section>

    {{-- Content Section --}}
    <section class="pb-16 lg:pb-24">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
                {{-- Sidebar Navigation --}}
                <div class="lg:col-span-1">
                    <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-6 sticky top-24">
                        <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4">Revenue Services Hub</h3>
                        <nav class="space-y-2">
                            <a href="{{ route('cbs.pay-taxes') }}" class="flex items-center gap-2 text-sm text-gray-600 hover:text-emerald-600 transition">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                                Pay Your Taxes
                            </a>
                        </nav>
                    </div>
                </div>

                {{-- Main Content --}}
                <div class="lg:col-span-3">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {{-- Verify via File Upload --}}
                        <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-3">Verify via File Upload</h3>
                            <p class="text-sm text-gray-600 mb-6">
                                If you have received a notification of assessment or a service bill, please enter the reference number here.
                            </p>
                            <a href="{{ route('verify-tcc.verify-file-upload') }}" class="inline-flex items-center justify-center w-full gap-2 bg-emerald-600 text-white px-4 py-3 rounded-lg hover:bg-emerald-700 transition font-medium">
                                Verify
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                            </a>
                        </div>

                        {{-- Verify via Reference Number --}}
                        <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-3">Verify via Reference Number</h3>
                            <p class="text-sm text-gray-600 mb-6">
                                You can also deposit money into your ERAS Tax Account which can then be applied to any upcoming taxes you may be liable for.
                            </p>
                            <a href="{{ route('verify-tcc.verify-reference-number') }}" class="inline-flex items-center justify-center w-full gap-2 bg-emerald-600 text-white px-4 py-3 rounded-lg hover:bg-emerald-700 transition font-medium">
                                Verify
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
@endsection