@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">
                    About Edo Revenue Administration
                </h1>
                <div class="w-16 h-1 bg-emerald-600 mx-auto mb-6"></div>
                <p class="text-lg text-gray-600">
                    Learn about our mission, vision, and commitment to efficient and transparent revenue collection for Edo State.
                </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">About</h3>
                        <nav class="space-y-2">
                            <a href="#overview" 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>
                                Overview
                            </a>
                            <a href="#mission" 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>
                                Our Mission
                            </a>
                            <a href="#vision" 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>
                                Our Vision
                            </a>
                            <a href="#values" 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>
                                Core Values
                            </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">
                        <div class="prose prose-gray max-w-none">
                            <section id="overview" class="mb-12">
                                <h2 class="text-xl font-semibold text-gray-900 mb-4">Overview</h2>
                                <p class="text-gray-600 leading-relaxed">
                                    The Edo Revenue Administration Service (ERAS) is the primary agency responsible for the assessment, collection, and accounting of all revenues accruing to the Edo State Government. Established to modernize and streamline revenue collection processes, ERAS leverages technology and best practices to ensure efficient, transparent, and taxpayer-friendly services.
                                </p>
                                <p class="text-gray-600 leading-relaxed mt-4">
                                    Our comprehensive digital platform enables taxpayers to easily fulfill their tax obligations while providing the government with accurate and timely revenue data for development planning and implementation.
                                </p>
                            </section>

                            <section id="mission" class="mb-12">
                                <h2 class="text-xl font-semibold text-gray-900 mb-4">Our Mission</h2>
                                <p class="text-gray-600 leading-relaxed">
                                    To efficiently mobilize revenue for the sustainable development of Edo State through the provision of excellent taxpayer services, effective tax administration, and the promotion of voluntary tax compliance.
                                </p>
                            </section>

                            <section id="vision" class="mb-12">
                                <h2 class="text-xl font-semibold text-gray-900 mb-4">Our Vision</h2>
                                <p class="text-gray-600 leading-relaxed">
                                    To be a world-class revenue administration that delivers outstanding value to taxpayers and stakeholders through innovation, integrity, and professionalism.
                                </p>
                            </section>

                            <section id="values">
                                <h2 class="text-xl font-semibold text-gray-900 mb-4">Core Values</h2>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div class="bg-gray-50/50 rounded-lg p-4">
                                        <h4 class="font-medium text-gray-900 mb-2">Integrity</h4>
                                        <p class="text-sm text-gray-600">We uphold the highest ethical standards in all our dealings with taxpayers and stakeholders.</p>
                                    </div>
                                    <div class="bg-gray-50/50 rounded-lg p-4">
                                        <h4 class="font-medium text-gray-900 mb-2">Transparency</h4>
                                        <p class="text-sm text-gray-600">We maintain open and clear communication about our processes, policies, and revenue utilization.</p>
                                    </div>
                                    <div class="bg-gray-50/50 rounded-lg p-4">
                                        <h4 class="font-medium text-gray-900 mb-2">Efficiency</h4>
                                        <p class="text-sm text-gray-600">We leverage technology and best practices to deliver timely and cost-effective services.</p>
                                    </div>
                                    <div class="bg-gray-50/50 rounded-lg p-4">
                                        <h4 class="font-medium text-gray-900 mb-2">Accountability</h4>
                                        <p class="text-sm text-gray-600">We take responsibility for our actions and are committed to continuous improvement.</p>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
@endsection