@extends('layouts.landing_pages.tts.theme')
@section("title", "TTS - Taxa de Turismo Sustentável de Angra dos Reis")
@section('content')

<div class="">

    <nav class="navbar navbar-expand-lg navbar-dark bg-tts text-center min-vh-100">
        <div class="container d-flex justify-content-center flex-column align-items-center py-4 animate__animated animate__fadeInDown">
            <img src="{{ asset('pmar/assets/img/tts/logo-angraviva2.png') }}" alt="Logo" height="200" class="d-inline-block align-text-top text-center">
            <h1 class="text-white text-center fs-2">TTS - TAXA DE TURISMO SUSTENTÁVEL DE ANGRA DOS REIS</h1>
        </div>
    </nav>

    <!-- O QUE É A TTS -->
    <section class="py-5 bg-cinza">
        <div class="container px-4">
            <div class="row align-items-center animate-on-scroll animate__animated animate__pulse">
                <div class="col-lg-5 mb-3">
                    <h2 class="titulo fw-bold mb-3">O QUE É A TTS?</h2>
                    <p class="mb-3">A <strong>Taxa de Turismo Sustentável</strong> é a <strong>unificação de todas as taxas já existentes</strong> que incidem sobre o turismo de Angra dos Reis (Preservação Ambiental, Turismo e Embarque/Desembarque).</p>
                    <p class="mb-3">A TTS traz consigo o <strong>SDT - Sistema Digital de Turismo</strong> - que traz a <strong>tecnologia</strong> para o <strong>pagamento da taxa, ordenamento, controle e transparência das políticas públicas de Angra dos Reis</strong>.</p>
                    <p>A receita gerada através da TTS será destinada principalmente na <strong>preservação ambiental, saneamento básico e novas infraestruturas turísticas.</strong></p>
                </div>
                <div class="col-lg-7">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/taxas.png') }}" alt="Taxas TTS">
                </div>
            </div>
        </div>
    </section>

    <!-- ANTES E DEPOIS -->
    <section class="py-5">
        <div class="container px-4">
            <h2 class="text-center titulo fw-bold mb-4">ANTES E DEPOIS DA TTS E DO SDT</h2>
            <div class="row">
                <div class="col-lg-6 my-2 opacity-75 animate-on-scroll  animate__animated animate__fadeInLeft">
                    <div class="azul-escuro m-0 p-2 rounded-top-4">
                        <h4 class="text-center text-white fw-bolder">ANTES DA TTS</h4>
                    </div>
                    <div class="azul-claro text-white rounded-bottom-4 px-4 py-2 card-comparativo ">
                        <ul class="list-unstyled">
                            <li class="py-2 border-bottom border-light fw-bolder text-center"><i class="bi bi-x-circle me-2"></i>3 TAXAS DE TURISMO DIFERENTES</li>
                            <li class="py-2 border-bottom border-light fw-bolder text-center"><i class="bi bi-x-circle me-2"></i>VALOR DE R$ 23,90 A R$ 54,57</li>
                            <li class="py-2 border-bottom border-light fw-bolder text-center"><i class="bi bi-x-circle me-2"></i>VALOR DESCOMPATÍVEL COM OUTRAS CIDADES TURÍSTICAS</li>
                            <li class="py-2 border-bottom border-light fw-bolder text-center"><i class="bi bi-x-circle me-2"></i>SEM ORDENAMENTO TURÍSTICO</li>
                            <li class="py-2 border-bottom border-light fw-bolder text-center"><i class="bi bi-x-circle me-2"></i>SEM UTILIZAÇÃO DA TECNOLOGIA E TRANSPARÊNCIA</li>
                            <li class="py-2 fw-bolder text-center"><i class="bi bi-x-circle me-2"></i>SEM INVESTIMENTOS EM PRESERVAÇÃO AMBIENTAL E NOVAS INFRAESTRUTURAS TURÍSTICAS</li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-6 my-2 animate-on-scroll  animate__animated animate__fadeInRight">
                    <div class="verde-escuro m-0 p-2 rounded-top-4">
                        <h4 class="text-center text-white fw-bolder">DEPOIS DA TTS</h4>
                    </div>
                    <div class="verde-claro text-white rounded-bottom-4 px-4 py-2 card-comparativo">
                        <ul class="list-unstyled">
                            <li class="py-2 border-bottom border-light fw-bolder text-center"><i class="bi bi-check-circle me-2"></i>APENAS 1 TAXA DE TURISMO</li>
                            <li class="py-2 border-bottom border-light fw-bolder text-center"><i class="bi bi-check-circle me-2"></i>VALOR DE R$ 47,50 A R$ 95,00</li>
                            <li class="py-2 border-bottom border-light fw-bolder text-center"><i class="bi bi-check-circle me-2"></i>VALOR COMPATÍVEL COM OUTRAS CIDADES TURÍSTICAS</li>
                            <li class="py-2 border-bottom border-light fw-bolder text-center"><i class="bi bi-check-circle me-2"></i>COM ORDENAMENTO TURÍSTICO</li>
                            <li class="py-2 border-bottom border-light fw-bolder text-center"><i class="bi bi-check-circle me-2"></i>COM UTILIZAÇÃO DA TECNOLOGIA E TRANSPARÊNCIA</li>
                            <li class="py-2 fw-bolder text-center"><i class="bi bi-check-circle me-2"></i>COM INVESTIMENTOS EM PRESERVAÇÃO AMBIENTAL E NOVAS INFRAESTRUTURAS TURÍSTICAS</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row mt-5 animate-on-scroll animate__animated animate__fadeInUp">
                <div class="col-12 ">
                    <p class="mb-3">A <strong>TTS</strong> unifica todas as taxas de turismo já existentes e <strong>se adequa aos valores que são praticados por diversas outras cidades turísticas no Brasil</strong>.</p>
                    <p class="mb-3">A taxa será cobrada pelo <strong>SDT - Sistema Digital do Turismo</strong> - como instrumento obrigatório para controle, fiscalização e ordenamento das atividades turísticas do município.</p>
                    <p>O SDT vai gerar dados para o <strong>Observatório do Turismo</strong> e vai garantir que haja investimentos para a <strong>preservação ecológica e a sustentabilidade do setor</strong>.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- QUAL O VALOR DA TTS -->
    <section class="py-5 bg-cinza animate-on-scroll animate__animated animate__fadeInUp">
        <div class="container px-4">
            <div class="row">
                <div class="col-lg-6 my-3">
                    <h2 class="titulo fw-bold mb-3">QUAL O VALOR DA TTS?</h2>
                    <p class="mb-4">A expectativa é que o novo sistema entre em vigor a partir de 1º de janeiro de 2026. <strong>Para garantir que essa transição aconteça de forma tranquila, no primeiro ano (2026) haverá um desconto de 50% na taxa</strong>. Ou seja, neste período, quem ficar até 7 dias no continente, pagará R$ 23,75, acrescido de R$2,35 por cada dia adicional. Nas Ilhas, em 2026, o valor será de R$47,50 para permanência de até 7 dias, também com acréscimo diário de R$ 2,35. Em 2027, o desconto da taxa será de 25% e, em 2028, a cobrança da TTS será integral.</p>
                </div>
                <div class="col-lg-6">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/precos.png') }}" alt="Taxas TTS">
                </div>
            </div>
        </div>
    </section>

    <!-- QUEM DEVE PAGAR -->
    <section class="py-5">
        <div class="container px-4">

            <div class="row align-items-center">
                <div class="col-lg-4 mb-4 animate-on-scroll animate__animated animate__fadeInLeft">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/turista.png') }}" alt="Turista">
                </div>
                <div class="col-lg-8 animate-on-scroll animate__animated animate__fadeInRight">
                    <h2 class="titulo fw-bold mb-3">QUEM DEVE PAGAR?</h2>

                    <p class="mb-4">O turista é quem deve pagar a TTS pela compensação ecológica de suas atividades turísticas. A cobrança será feita proporcional ao tempo de permanência dos visitantes.</p>

                    <p class="fw-bold mb-3">Confira todas as isenções de pagamento da TTS:</p>

                    <ul class="list-unstyled">
                        <li class="py-2"><i class="fa-solid fa-circle-check me-2 text-success"></i>Moradores de Angra dos Reis e parentes consanguíneos até segundo grau</li>
                        <li class="py-2"><i class="fa-solid fa-circle-check me-2 text-success"></i>Crianças até 12 anos e Idosos a partir de 60 anos</li>
                        <li class="py-2"><i class="fa-solid fa-circle-check me-2 text-success"></i>Prestadores de serviços locais</li>
                        <li class="py-2"><i class="fa-solid fa-circle-check me-2 text-success"></i>Pessoas com vínculo empregatício formal no município</li>
                        <li class="py-2"><i class="fa-solid fa-circle-check me-2 text-success"></i>Pessoas com deficiência, nos termos da legislação federal</li>
                        <li class="py-2"><i class="fa-solid fa-circle-check me-2 text-success"></i>Contribuintes inseridos nas contrapartidas a serem oferecidas por interesse público</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- ONDE PAGAR A TTS -->
    <section class="py-5 bg-cinza animate-on-scroll animate__animated animate__fadeInDown">
        <div class="container px-4">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <h2 class="titulo fw-bold mb-3">ONDE PAGAR A TTS?</h2>
                    <p>Os pagamentos, controle e fiscalização serão operados pelo Sistema Digital de Turismo de Angra dos Reis, que vai se concentrar na plataforma Angra Viva. Os turistas poderão pagar a TTS em:</p>
                    <ul class="list-unstyled">
                        <li class="py-2"><i class="fa-solid fa-circle-check me-2 text-secondary"></i>Site e aplicativos (iOS e Android) do Angra Viva</li>
                        <li class="py-2"><i class="fa-solid fa-circle-check me-2 text-secondary"></i>Totens de autoatendimento nos Cais e espalhados pelo município</li>
                        <li class="py-2"><i class="fa-solid fa-circle-check me-2 text-secondary"></i>Caixas presentes nos cais de Angra dos Reis e Ilha Grande</li>
                        <li class="py-2"><i class="fa-solid fa-circle-check me-2 text-secondary"></i>Funcionários itinerantes que fazem parte da fiscalização dos pagamentos</li>
                    </ul>
                </div>
                <div class="col-lg-5">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/celular.png') }}" alt="Onde Pagar a TTS">
                </div>
            </div>
        </div>
    </section>

    <!-- A META -->
    <section class="py-5 animate-on-scroll animate__animated animate__fadeIn">
        <div class="container px-4">
            <h2 class="text-center titulo fw-bold mb-4">A META É TRANSFORMAR ANGRA DOS REIS EM REFERÊNCIA DE TURISMO SUSTENTÁVEL E SEGURO</h2>
            <p class="text-center mb-3 mx-auto" style="max-width: 900px;">A receita gerada pela <strong>Taxa de Turismo Sustentável</strong> será revertida em projetos para <strong> preservação ambiental, saneamento básico, novas infraestruturas turísticas, segurança e ordenamento com incentivo ao trade turístico </strong> de Angra dos Reis.</p>

            <div class="row text-center">
                <div class="col mb-4">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/projetos.png') }}" alt="Meta">
                </div>
            </div>
        </div>
    </section>

    <!-- PROJETOS -->
    <section class="py-5 bg-cinza">
        <div class="container px-4">
            <h2 class="text-center titulo fw-bold mb-4">PROJETOS PARA ILHA GRANDE E ANGRA DOS REIS</h2>
            <p class="text-center mb-3 text-muted">Imagens meramente ilustrativas.</p>

            <div class="row g-4">
                <div class="col-md-6 col-lg-3 p-3 animate-on-scroll animate__animated animate__pulse">
                    <div class="card border-0 shadow-sm h-100 rounded-3">
                        <img class="img-fluid rounded-top-3" src="{{ asset('pmar/assets/img/tts/cais-santaluzia.png') }}" alt="">
                        <div class="card-body text-center">
                            <h5 class="card-title titulo fw-bold">NOVO CAIS SANTA LUZIA</h5>
                            <p class="card-text">Com totens, caixas, fila rápida, lounges para espera e comércio.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 p-3 animate-on-scroll animate__animated animate__pulse">
                    <div class="card border-0 shadow-sm h-100 rounded-3">
                        <img class="img-fluid rounded-top-3" src="{{ asset('pmar/assets/img/tts/cais-abraao.png') }}" alt="">
                        <div class="card-body text-center">
                            <h5 class="card-title titulo fw-bold">NOVO CAIS DA VILA DO ABRAÃO</h5>
                            <p class="card-text">Com totens, caixas e fila rápida.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 p-3 animate-on-scroll animate__animated animate__pulse">
                    <div class="card border-0 shadow-sm h-100 rounded-3">
                        <img class="img-fluid rounded-top-3" src="{{ asset('pmar/assets/img/tts/cats.png') }}" alt="">
                        <div class="card-body text-center">
                            <h5 class="card-title titulo fw-bold">CENTRO DE ATENDIMENTO AO TURISTA</h5>
                            <p class="card-text">Informações sobre a TTS e atrações turísticas de Ilha Grande.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 p-3 animate-on-scroll animate__animated animate__pulse">
                    <div class="card border-0 shadow-sm h-100 rounded-3">
                        <img class="img-fluid rounded-top-3" src="{{ asset('pmar/assets/img/tts/proveta.png') }}" alt="">
                        <div class="card-body text-center">
                            <h5 class="card-title titulo fw-bold">NOVO CAIS EM PROVETÁ</h5>
                            <p class="card-text">Além de coleta de lixo e saneamento básico.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 p-3 animate-on-scroll animate__animated animate__pulse">
                    <div class="card border-0 shadow-sm h-100 rounded-3">
                        <img class="img-fluid rounded-top-3" src="{{ asset('pmar/assets/img/tts/esgoto-zero.png') }}" alt="">
                        <div class="card-body text-center">
                            <h5 class="card-title titulo fw-bold">ESGOTO ZERO</h5>
                            <p class="card-text">Projeto para saneamento básico em Ilha Grande e Angra dos Reis.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 p-3 animate-on-scroll animate__animated animate__pulse">
                    <div class="card border-0 shadow-sm h-100 rounded-3">
                        <img class="img-fluid rounded-top-3" src="{{ asset('pmar/assets/img/tts/lixo.png') }}" alt="">
                        <div class="card-body text-center">
                            <h5 class="card-title titulo fw-bold">LIXO ZERO</h5>
                            <p class="card-text">Aumento do efetivo de coleta de lixo, novas lixeiras e incentivo a reciclagem.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 p-3 animate-on-scroll animate__animated animate__pulse">
                    <div class="card border-0 shadow-sm h-100 rounded-3">
                        <img class="img-fluid rounded-top-3" src="{{ asset('pmar/assets/img/tts/reciclaveis.png') }}" alt="">
                        <div class="card-body text-center">
                            <h5 class="card-title titulo fw-bold">PROJETOS SUSTENTÁVEIS</h5>
                            <p class="card-text">Criar e apoiar projetos sustentáveis que deram certo em outras cidades.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 p-3 animate-on-scroll animate__animated animate__pulse">
                    <div class="card border-0 shadow-sm h-100 rounded-3">
                        <img class="img-fluid rounded-top-3" src="{{ asset('pmar/assets/img/tts/seguranca.png') }}" alt="">
                        <div class="card-body text-center">
                            <h5 class="card-title titulo fw-bold">SEGURANÇA</h5>
                            <p class="card-text">Câmeras e app com integração direta ao centro de controle de Angra dos Reis.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- BENEFÍCIOS -->
    <section class="py-5 bg-light">
        <div class="container px-4">
            <h2 class="text-center titulo fw-bold mb-4">BENEFÍCIOS DA TTS E DO SDT</h2>
            <div class="row">
                <div class="col-lg-4 mb-4 animate-on-scroll animate__animated animate__pulse">
                    <h4 class="text-center fw-bolder bturista p-2 ">PARA O TURISTA</h4>
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/bturista.png') }}" alt="">
                </div>
                <div class="col-lg-4 mb-4 animate-on-scroll animate__animated animate__pulse">
                    <h4 class="text-center fw-bolder bmorador p-2">PARA O MORADOR</h4>
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/bmorador.png') }}" alt="">
                </div>
                <div class="col-lg-4 mb-4 animate-on-scroll animate__animated animate__pulse">
                    <h4 class="text-center fw-bolder btrade p-2">PARA O TRADE</h4>
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/btrade.png') }}" alt="">
                </div>
            </div>
        </div>
    </section>

    <!-- QUAL O MOTIVO -->
    <section class="py-5">
        <div class="container px-4">
            <h2 class="text-center titulo fw-bold mb-4">QUAL O MOTIVO DA TTS E DO SDT?</h2>
            <div class="row">
                <div class="col mb-2 animate-on-scroll animate__animated animate__fadeInUp">
                    <p>A TTS foi criada para garantir que as belezas naturais de Angra dos Reis sejam conservadas para as próximas gerações e que <strong>o turismo não seja impactado negativamente pela poluição, crescimento desordenado e pela informalidade.</strong></p>

                    <p>O <strong>SDT</strong> foi pensado para <strong> modernizar a gestão do turismo </strong> e criar um observatório com dados em tempo real do turismo para planejamento das políticas públicas do município. Como também <strong>gerar transparência de arrecadação e dos investimentos </strong> em saneamento básico, infraestruturas turísticas, segurança e preservação ambiental.</p>
                </div>
                <!-- Desktop -->
                <div class="col-12 text-center dadosDesktop animate-on-scroll animate__animated animate__pulse">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/dados.png') }}" alt="">
                </div>

                <!-- Mobile -->
                <div class="col-12 col-md-4 col-lg-3 text-center dadosMobile animate-on-scroll animate__animated animate__pulse">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/dados1.png') }}" alt="">
                </div>
                <div class="col-12 col-md-4 col-lg-3 text-center dadosMobile animate-on-scroll animate__animated animate__pulse">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/dados2.png') }}" alt="">
                </div>
            </div>
        </div>
    </section>

    <!-- POPULAÇÃO -->
    <section class="py-5">
        <div class="container px-4">
            <h2 class="text-center titulo fw-bold mb-4">O QUE A POPULAÇÃO ACHA DA TTS E DO SDT?</h2>

            <div class="row g-3 justify-content-center">
                <div class="col-12 col-md-4 col-lg-3 animate-on-scroll animate__animated animate__fadeInUp">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/1.jpg') }}" alt="Imagem 1">
                </div>
                <div class="col-12 col-md-4 col-lg-3 animate-on-scroll animate__animated animate__fadeInUp">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/2.jpg') }}" alt="Imagem 2">
                </div>
                <div class="col-12 col-md-4 col-lg-3 animate-on-scroll animate__animated animate__fadeInUp">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/3.jpg') }}" alt="Imagem 3">
                </div>
                <div class="col-12 col-md-4 col-lg-3 animate-on-scroll animate__animated animate__fadeInUp">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/4.jpg') }}" alt="Imagem 4">
                </div>
                <div class="col-12 col-md-4 col-lg-3 animate-on-scroll animate__animated animate__fadeInUp">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/5.jpg') }}" alt="Imagem 5">
                </div>
                <div class="col-12 col-md-4 col-lg-3 animate-on-scroll animate__animated animate__fadeInUp">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/6.jpg') }}" alt="Imagem 6">
                </div>
                <div class="col-12 col-md-4 col-lg-3 animate-on-scroll animate__animated animate__fadeInUp">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/7.jpg') }}" alt="Imagem 7">
                </div>
                <div class="col-12 col-md-4 col-lg-3 animate-on-scroll animate__animated animate__fadeInUp">
                    <img class="img-fluid" src="{{ asset('pmar/assets/img/tts/8.jpg') }}" alt="Imagem 8">
                </div>
            </div>
        </div>
    </section>
</div>
@endsection