@extends('layouts.app')

@section('title', $pageTitle . ' - ERAS')

@section('content')
<main class="relative">
    <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 mb-12">
                <nav class="text-sm text-gray-500 mb-4">
                    <a href="{{ route('public.tax-types') }}" class="hover:text-emerald-600">Tax Types</a>
                    <span class="mx-2">/</span>
                    <span class="text-gray-900">Direct Assessment</span>
                </nav>
                <h1 class="text-3xl lg:text-4xl font-semibold tracking-tight text-gray-900 mb-4">
                    Direct Assessment
                </h1>
                <div class="w-16 h-1 bg-emerald-600 mx-auto mb-6"></div>
            </div>

            <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-8 max-w-4xl mx-auto">
                <div class="prose prose-gray max-w-none">
                    <p class="text-gray-600 leading-relaxed">
                        Direct Assessment is an Income Tax imposed on self-employed persons, professionals, and businesses that are not subject to PAYE. It processes and manages income declarations and tax assessments for individuals earning income outside formal employment.
                    </p>
                    <h3 class="text-lg font-semibold text-gray-900 mt-6 mb-3">Who is Liable?</h3>
                    <ul class="list-disc list-inside text-gray-600 space-y-2">
                        <li>Self-employed individuals and sole proprietors</li>
                        <li>Professionals (doctors, lawyers, consultants, etc.)</li>
                        <li>Traders and business owners</li>
                        <li>Artisans and craftsmen</li>
                        <li>Individuals with income from multiple sources</li>
                    </ul>
                    <h3 class="text-lg font-semibold text-gray-900 mt-6 mb-3">Filing Requirements</h3>
                    <ul class="list-disc list-inside text-gray-600 space-y-2">
                        <li>Annual income declaration</li>
                        <li>Supporting financial records</li>
                        <li>Self-assessment computation</li>
                        <li>Payment of assessed tax within due dates</li>
                    </ul>
                    <div class="mt-8">
                        <a href="{{ route('cbs.pay-taxes') }}" class="inline-flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition">
                            Pay Direct Assessment
                            <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>
    </section>
</main>
@endsection