@extends('layouts.app')

@section('title', $pageTitle . ' - 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">
                    Welcome to Tax Payers Section
                </h1>
                <div class="w-16 h-1 bg-emerald-600 mx-auto mb-6"></div>
                <p class="text-lg text-gray-600">
                    This section covers information relating to tax payers, different types and importance
                </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">Tax Payer</h3>
                        <nav class="space-y-2">
                            <a href="{{ route('public.taxpayers.companies') }}" 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>
                                Companies
                            </a>
                            <a href="{{ route('public.taxpayers.individual') }}" 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>
                                Individuals
                            </a>
                            <a href="{{ route('public.taxpayers.government') }}" class="flex items-center gap-2 text-sm text-emerald-600 font-medium">
                                <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>
                                Governments
                            </a>
                            <a href="{{ route('public.taxpayers.special') }}" 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>
                                Special
                            </a>
                        </nav>
                    </div>
                </div>

                {{-- Main Content --}}
                <div class="lg:col-span-3">
                    <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-8 mb-8">
                        <h2 class="text-xl font-semibold text-gray-900 mb-4">Government Tax Payers</h2>
                        <p class="text-gray-600 leading-relaxed">
                            Government bodies and parastatals who operate from within Edo State are classified as separate tax payers.
                        </p>

                        {{-- Tax Types Grid --}}
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-6">
                            <a href="{{ route('public.tax-types.paye') }}" class="flex items-center justify-between px-4 py-3 bg-emerald-50 border border-emerald-200 rounded-lg text-emerald-700 hover:bg-emerald-100 transition text-sm font-medium">
                                PAYE
                                <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>
                            <a href="{{ route('public.tax-types.withholding-tax') }}" class="flex items-center justify-between px-4 py-3 bg-emerald-50 border border-emerald-200 rounded-lg text-emerald-700 hover:bg-emerald-100 transition text-sm font-medium">
                                WITHHOLDING TAX
                                <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>

                        {{-- Actions Grid --}}
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-6">
                            <span class="flex items-center justify-between px-4 py-3 bg-gray-100 rounded-lg text-gray-700 text-sm font-medium cursor-default">
                                GOVERNMENT CAPTURE
                                <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>
                            </span>
                            <span class="flex items-center justify-between px-4 py-3 bg-gray-100 rounded-lg text-gray-700 text-sm font-medium cursor-default">
                                MDA SERVICES FOR GOVERNMENTS
                                <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>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
@endsection