@extends('layouts.parquedacidade.theme')
@section('title', 'Projetos e Ações do Parque da Cidade da Prefeitura Municipal de Angra dos Reis')
@section('content')

    <div class="page-title dark-background" data-aos="fade"
        style="background-image: url({{ asset('parquedacidade/imagens/img-fundo.jpg') }});">
        <div class="container position-relative">
            <h1 class="text-white">Projetos e Ações</h1>
        </div>
    </div>

    <div class="container py-5">

        <div class="accordion" id="accordionProjetos">

            <div class="accordion-item mb-3 shadow-sm border-0">
                <h2 class="accordion-header" id="headingManejo">
                    <button class="accordion-button collapsed fw-bold text-success" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseManejo">
                        <i class="fas fa-tree me-2"></i> Plano de Manejo
                    </button>
                </h2>
                <div id="collapseManejo" class="accordion-collapse collapse" data-bs-parent="#accordionProjetos">
                    <div class="accordion-body">
                        <div class="row g-4">
                            <div class="col-md-4">
                                <img src="{{ asset('parquedacidade/asset/images/plano-manejo.jpg') }}" alt=""
                                    class="img-fluid rounded">
                            </div>
                            <div class="col-md-8">
                                <p class="lead"><strong>O que é o Plano de Manejo?</strong> É um documento técnico com diretrizes para
                                    uso sustentável da área, com base em estudos ambientais e sociais.</p>
                                <ul>
                                    <li><a href="/downloads/Plano-de-manejo.pdf" target="_blank"><i
                                                class="fas fa-download"></i> Download do Plano</a></li>
                                    <li><a href="/downloads/MAPA_PLANO_LIMITE_PROPOSTO.pdf" target="_blank"><i
                                                class="fas fa-download"></i> Mapa do Parque</a></li>
                                    <li><a href="/downloads/PM_PNMMA_13dez19.pdf" target="_blank"><i
                                                class="fas fa-download"></i> Apresentação da Audiência</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="accordion-item mb-3 shadow-sm border-0">
                <h2 class="accordion-header" id="headingMemorial">
                    <button class="accordion-button collapsed fw-bold text-success" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseMemorial">
                        <i class="fas fa-leaf me-2"></i> Memorial Bosque da Saudade
                    </button>
                </h2>
                <div id="collapseMemorial" class="accordion-collapse collapse" data-bs-parent="#accordionProjetos">
                    <div class="accordion-body">
                        <div class="row g-4">
                            <div class="col-md-8">
                                <p class="lead">Projeto em homenagem às vítimas da COVID-19, através do plantio de árvores nativas...</p>
                                <p class="lead">Local: Parque da Cidade, bairro Encruzo da Enseada.</p>
                                <p class="lead">Contato: <strong>imaar.supma@angra.rj.gov.br</strong></p>
                            </div>
                            <div class="col-md-4">
                                <img src="{{ asset('parquedacidade/imagens/memorial-da-saudade.png') }}"
                                    class="img-fluid rounded">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="accordion-item mb-3 shadow-sm border-0">
                <h2 class="accordion-header" id="headingRecuperacao">
                    <button class="accordion-button collapsed fw-bold text-success" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseRecuperacao">
                        <i class="fas fa-seedling me-2"></i> Recuperação de Área Degradada
                    </button>
                </h2>
                <div id="collapseRecuperacao" class="accordion-collapse collapse" data-bs-parent="#accordionProjetos">
                    <div class="accordion-body">
                        <div class="row g-4">
                            <div class="col-md-8">
                                <p class="lead">
                                    Iniciado projeto de recuperação ambiental de uma grande área degradada (voçoroca)
                                    existente no bairro Encruzo da Enseada, nos limites do Parque da Cidade. A implantação
                                    do projeto trará grandes benefícios a qualidade ambiental da área, com redução do
                                    processo erosivo e do carreamento de solo ao manguezal próxima a área. O projeto
                                    contemplará o controle da erosão na região a montante ou cabeceira da área através de
                                    melhorias na drenagem pluvial e ainda com recomposição da vegetação no interior da
                                    voçoroca, através de técnicas de nucleação e plantio de mudas de fácil adaptação na
                                    região, além de implantar dispositivos de retenção de sedimentos na área interna das
                                    voçorocas.
                                    <br><br>
                                    A recuperação ambiental da área foi promovida por meio compensação ambiental, mecanismo
                                    utilizado pelo IMAAR no licenciamento de obras ou atividades, onde terceiros são
                                    obrigados a custear ações visando compensar o impacto ambiental/social de seu
                                    empreendimento.
                                </p>
                            </div>
                            <div class="col-md-4">
                                <img src="{{ asset('parquedacidade/imagens/area-recuperada.png') }}"
                                    class="img-fluid rounded">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Item - Implantação de Sinalização -->
            <div class="accordion-item mb-3 shadow-sm border-0">
                <h2 class="accordion-header" id="headingSinalizacao">
                    <button class="accordion-button collapsed fw-bold text-success" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseSinalizacao">
                        <i class="fas fa-map-signs me-2"></i> Implantação de Sinalização
                    </button>
                </h2>
                <div id="collapseSinalizacao" class="accordion-collapse collapse" data-bs-parent="#accordionProjetos">
                    <div class="accordion-body">
                        <div class="row g-4">
                            <div class="col-md-8">
                                <p class="lead">Instalação de placas informativas nos limites e interior do parque com identificação e QR
                                    codes para mais informações sobre o local.</p>
                            </div>
                            <div class="col-md-4">
                                <img src="{{ asset('parquedacidade/imagens/sinalizacao.png') }}" alt="Sinalização" class="img-fluid rounded">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Item - Campanha de Prevenção a Incêndio -->
            <div class="accordion-item mb-3 shadow-sm border-0">
                <h2 class="accordion-header" id="headingIncendio">
                    <button class="accordion-button collapsed fw-bold text-success" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseIncendio">
                        <i class="fas fa-fire-extinguisher me-2"></i> Campanha de Prevenção a Incêndio
                    </button>
                </h2>
                <div id="collapseIncendio" class="accordion-collapse collapse" data-bs-parent="#accordionProjetos">
                    <div class="accordion-body">
                        <p class="lead">Campanha anual de conscientização contra queimadas nas comunidades próximas ao parque, com
                            materiais informativos e educativos.</p>
                        <ul>
                            <li>Diminuição da biodiversidade</li>
                            <li>Poluição do ar</li>
                            <li>Doenças respiratórias</li>
                            <li>Danos ao patrimônio</li>
                            <li>Erosão do solo</li>
                        </ul>
                        <a href="/downloads/panfleto-combate-queimada.pdf" target="_blank"
                            class="btn btn-outline-success mt-3">
                            <i class="fas fa-download me-1"></i> Baixar panfleto da campanha
                        </a>
                    </div>
                </div>
            </div>

            <!-- Item - Observação de Aves -->
            <div class="accordion-item mb-3 shadow-sm border-0">
                <h2 class="accordion-header" id="headingAves">
                    <button class="accordion-button collapsed fw-bold text-success" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseAves">
                        <i class="fas fa-dove me-2"></i> Observação de Aves
                    </button>
                </h2>
                <div id="collapseAves" class="accordion-collapse collapse" data-bs-parent="#accordionProjetos">
                    <div class="accordion-body">
                        <p class="lead">A observação de aves é uma atividade ecológica, científica e educativa que valoriza a
                            biodiversidade do parque.</p>
                        <p class="lead">Angra dos Reis possui <strong>518 espécies registradas</strong>, sendo destaque nacional.</p>
                        <p class="lead">Espécie endêmica: <strong>Formigueiro-de-Cabeça-Negra</strong>, só existe em Angra e Paraty.</p>
                        <p class="lead">Parceria com o <strong>Clube de Observação de Aves de Angra (COA-Angra)</strong>.</p>
                        <div class="row mt-4">
                            <div class="col-md-6 mb-3">
                                <img src="{{ asset('parquedacidade/imagens/coa1.png') }}" class="img-fluid rounded" alt="Observação de Aves 1">
                            </div>
                            <div class="col-md-6 mb-3">
                                <img src="{{ asset('parquedacidade/imagens/coa2.png') }}" class="img-fluid rounded" alt="Observação de Aves 2">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Item - Seja um Visitante Consciente -->
            <div class="accordion-item mb-3 shadow-sm border-0">
                <h2 class="accordion-header" id="headingVisitante">
                    <button class="accordion-button collapsed fw-bold text-success" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseVisitante">
                        <i class="fas fa-hiking me-2"></i> Seja um Visitante Consciente
                    </button>
                </h2>
                <div id="collapseVisitante" class="accordion-collapse collapse" data-bs-parent="#accordionProjetos">
                    <div class="accordion-body">
                        <p class="lead"><strong>Dicas para sua visita ao Parque da Cidade:</strong></p>
                        <ul>
                            <li>Permaneça nas trilhas oficiais</li>
                            <li>Não risque pedras ou árvores</li>
                            <li>Não alimente ou capture animais</li>
                            <li>Não faça fogueiras</li>
                            <li>Leve seu lixo com você</li>
                            <li>Traga kit de primeiros socorros</li>
                            <li>Informe acidentes às autoridades</li>
                        </ul>
                        <p class="lead"><strong>Atividades ao ar livre exigem responsabilidade:</strong></p>
                        <p class="lead">Considere os riscos e, se necessário, procure ajuda de um profissional ou guia local para
                            condução em trilhas ou esportes de aventura.</p>
                    </div>
                </div>
            </div>

        </div>
    </div>

@endsection