@extends('v2-portal::app-layout', [
    'pageTitle' => 'Ouvidoria Oficial',
    'title' => 'Ouvidoria Oficial',
    'pageDescription' => 'Entre em contato direto com a Ouvidoria da Lotep. Registre elogios, reclamações, sugestões e solicitações.',
    'showAccessibilityBar' => true,
    'stickyAccessibilityBar' => true,
    'showHeader' => true,
    'showMainHeader' => true,
    'showMainFooter' => true,
    'showFooter' => true,
    'showMainLeftArea' => false,
    'showMainRightArea' => false
])

@section('main-section-area')
    <style>
        /*
         * Grid de ouvidoria com subgrid progressivo.
         *
         * Funcionamento:
         *   - Navegadores sem suporte a subgrid: layout flexível com fallback
         *   - Navegadores com subgrid (Firefox 71+, Safari 16+, Chrome 117+):
         *     alinhamento perfeito de ícone e título entre todos os cards.
         *
         * .cms-grid-ouvidoria-item tem 2 filhos diretos (.fs-2 e h4),
         * mapeados para grid-template-rows: auto auto / subgrid.
         */
        .cms-grid-ouvidoria {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-top: 20px;
        }

        @media (min-width: 768px) {
            .cms-grid-ouvidoria {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .cms-grid-ouvidoria-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px 15px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .acessibilidade-alto-contraste .cms-grid-ouvidoria-item {
            background-color: #000 !important;
            border: 1.5px solid #fff !important;
            color: #fff !important;
        }

        .cms-grid-ouvidoria-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        @supports (grid-template-rows: subgrid) {
            .cms-grid-ouvidoria {
                grid-template-rows: auto auto;
            }

            .cms-grid-ouvidoria > .cms-grid-ouvidoria-item {
                display: grid;
                grid-row: span 2;
                grid-template-rows: subgrid;
            }
        }
    </style>

    <article class="row fs-6 lh-base">
        <div class="col-12">
            <h2 class="h3 mb-3 pb-2 text-primary fw-bolder"
                style="border-bottom: 2px solid var(--bs-border-color);">
                <i class="bi bi-chat-left-text-fill me-2" aria-hidden="true"></i> Canal Direto de Ouvidoria
            </h2>

            <p class="text-secondary">
                A <strong>Ouvidoria da Lotep</strong> é o canal de interlocução entre o cidadão
                e a administração pública. Aqui você pode registrar suas manifestações,
                exercer seus direitos e contribuir para a melhoria dos nossos serviços.
            </p>

            <h3 class="h5 mt-4 fw-bold">Tipos de Manifestação</h3>
            <p class="text-secondary">
                Selecione o tipo de manifestação que melhor atende à sua necessidade:
            </p>

            <div class="cms-grid-ouvidoria" role="list">
                {{-- Box 1: Elogio --}}
                <div class="cms-grid-ouvidoria-item" role="listitem">
                    <div class="fs-2 text-success">
                        <i class="bi bi-hand-thumbs-up" aria-hidden="true"></i>
                    </div>
                    <h4 class="h6 mb-0 mt-2 fw-bold">Elogio</h4>
                </div>

                {{-- Box 2: Sugestão --}}
                <div class="cms-grid-ouvidoria-item" role="listitem">
                    <div class="fs-2 text-warning">
                        <i class="bi bi-lightbulb" aria-hidden="true"></i>
                    </div>
                    <h4 class="h6 mb-0 mt-2 fw-bold">Sugestão</h4>
                </div>

                {{-- Box 3: Reclamação --}}
                <div class="cms-grid-ouvidoria-item" role="listitem">
                    <div class="fs-2 text-danger">
                        <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
                    </div>
                    <h4 class="h6 mb-0 mt-2 fw-bold">Reclamação</h4>
                </div>

                {{-- Box 4: Denúncia --}}
                <div class="cms-grid-ouvidoria-item" role="listitem">
                    <div class="fs-2 text-primary">
                        <i class="bi bi-lock-fill" aria-hidden="true"></i>
                    </div>
                    <h4 class="h6 mb-0 mt-2 fw-bold">Denúncia</h4>
                </div>
            </div>

            <div class="alert alert-info mt-4 p-4 border-0 d-flex flex-column gap-2" role="alert">
                <h4 class="alert-heading h5 mb-1 fw-bold">
                    <i class="bi bi-telephone-fill me-2" aria-hidden="true"></i> Canais de Atendimento
                </h4>
                <p class="mb-0">
                    <strong>E-mail oficial:</strong> ouvidoria@lotep.pb.gov.br
                </p>
                <p class="mb-0">
                    <strong>Atendimento Presencial:</strong> Segunda a Sexta, das 08:00 às 14:00
                    (sede administrativa).
                </p>
            </div>
        </div>
    </article>
@endsection