@extends('v2-portal::app-layout', [
    'pageTitle' => 'Página não encontrada',
    'showHeader' => true,
    'showFooter' => true,
    'showMainHeader' => true,
    'showMainLeftArea' => true,
    'showMainRightArea' => true
])

@section('main-section-area')
    @component('v2-portal::main-section.main-content')
        <div class="text-center py-5">
            <div class="text-primary mb-4" style="opacity: 0.2;">
                <i class="bi bi-search" style="font-size: 6rem;" aria-hidden="true"></i>
            </div>

            <h2 class="display-3 fw-bold text-dark mb-3">404</h2>
            <p class="lead text-muted mb-4 mx-auto" style="max-width: 500px;">
                Desculpe, a página que você está procurando não existe ou foi movida.
            </p>

            <div class="d-flex flex-wrap justify-content-center gap-2 mb-5">
                <a href="{{ url('/') }}" class="btn btn-primary d-inline-flex align-items-center gap-2 px-4 py-2 btn-sm rounded-pill fw-bold">
                    <i class="bi bi-house-door-fill"></i> Voltar para o Início
                </a>

                <a href="{{ url('ouvidoria') }}" class="btn btn-outline-secondary d-inline-flex align-items-center gap-2 px-4 py-2 btn-sm rounded-pill fw-bold">
                    <i class="bi bi-telephone-fill"></i> Falar com a Ouvidoria
                </a>
            </div>

            <div class="card text-start border shadow-sm p-4 mx-auto" style="max-width: 600px;">
                <h3 class="h6 fw-bold text-uppercase text-secondary tracking-wider mb-3">Links Úteis</h3>
                <div class="row">
                    <div class="col-12">
                        @include('v2-portal::footer.footer-services-area')
                    </div>
                </div>
            </div>
        </div>
    @endcomponent
@endsection