@extends('theme')
@section('title', 'Bem-vindo ao Parque Tecnológico do Mar - Prefeitura de Angra dos Reis')

@push('styles')
  <link rel="stylesheet" href="{{ asset('assets/css/pages/home.css') }}" />
@endpush

@section('content')
  <div class="page-wrapper overflow-hidden">
    <section class="banner-section position-relative d-flex align-items-end min-vh-100">
      <div class="position-absolute top-0 start-0 w-100 h-100">
        <img src="../assets/images/sobre-nos/parque-foto.jpg" alt="Imagem da estrutura do parque tecnológico do mar"
          class="img-fluid w-100 h-100 object-fit-cover">
      </div>
      <div class="position-absolute top-0 start-0 w-100 h-100 banner-section-overlay"></div>
      <div class="container">
        <div class="d-flex flex-column gap-4 pb-8 position-relative z-1">
          <div class="row align-items-center">
            <div class="col-xl-4">
              <div class="d-flex align-items-center gap-4" data-aos="fade-up" data-aos-delay="100"
                data-aos-duration="1000">
                <img src="../assets/images/svgs/primary-leaf.svg" alt="" class="img-escura img-fluid animate-spin hero-leaf-icon">
                <p class="mb-0 text-white fs-5 text-opacity-70">Um ecossistema <span class="text-primary">criativo</span>
                  que redefine o cenário econômico de Angra dos Reis.</p>
              </div>
            </div>
          </div>
          <div class="d-flex align-items-end gap-3" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
            <h1 class="mb-0 fs-16 text-white lh-1">Parque TecMar</h1>
            <a href="javascript:void(0)" class="p-1 ps-7 bg-primary rounded-pill">
              <span class="bg-white round-52 rounded-circle d-flex align-items-center justify-content-center">
                <iconify-icon icon="lucide:arrow-up-right" class="fs-8 text-dark"></iconify-icon>
              </span>
            </a>
          </div>
        </div>
      </div>
    </section>

    <section class="stats-facts py-5 py-lg-11 py-xl-12 position-relative overflow-hidden">
      <div class="container">
        <div class="row gap-7 gap-xl-0">
          <div class="col-xl-4 col-xxl-4">
            <div class="d-flex align-items-center gap-7 py-2" data-aos="fade-right" data-aos-delay="100"
              data-aos-duration="1000">
              <span
                class="round-36 flex-shrink-0 text-dark rounded-circle bg-primary hstack justify-content-center fw-medium">01</span>
              <hr class="border-line">
              <span class="badge text-bg-dark">Estatísticas</span>
            </div>
          </div>
          <div class="col-xl-8 col-xxl-7">
            <div class="d-flex flex-column gap-9">
              <div class="row">
                <div class="col-xxl-8">
                  <div class="d-flex flex-column gap-6" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
                    <h2 class="mb-0">Bem-vindo ao coração da inovação em Angra dos Reis! </h2>
                    <p class="fs-5 mb-0">Descubra mais sobre como o Parque pode transformar seu negócio e fazer parte
                      dessa revolução!</p>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-lg-4 mb-7 mb-lg-0">
                  <div class="d-flex flex-column gap-6 pt-9 border-top" data-aos="fade-up" data-aos-delay="200"
                    data-aos-duration="1000">
                    <h2 class="mb-0 fs-14"><span class="count" data-target="6">6</span></h2>
                    <p class="mb-0">Empresas Incubadas</p>
                  </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-7 mb-lg-0">
                  <div class="d-flex flex-column gap-6 pt-9 border-top" data-aos="fade-up" data-aos-delay="300"
                    data-aos-duration="1000">
                    <h2 class="mb-0 fs-14"><span class="count" data-target="200">200</span>+</h2>
                    <p class="mb-0">Alunos Formados</p>
                  </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-7 mb-lg-0">
                  <div class="d-flex flex-column gap-6 pt-9 border-top" data-aos="fade-up" data-aos-delay="400"
                    data-aos-duration="1000">
                    <h2 class="mb-0 fs-14"><span class="count" data-target="400">400</span></h2>
                    <p class="mb-0">Visitas de Alunos</p>
                  </div>
                </div>
              </div>
              <a href="{{ route('sobre-nos') }}" class="btn" data-aos="fade-up" data-aos-delay="500"
                data-aos-duration="1000">
                <span class="btn-text">Quem Somos</span>
                <iconify-icon icon="lucide:arrow-up-right"
                  class="btn-icon bg-white text-dark round-52 rounded-circle hstack justify-content-center fs-7 shadow-sm"></iconify-icon>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="position-absolute bottom-0 start-0" data-aos="zoom-in" data-aos-delay="100" data-aos-duration="1000">
        <img src="../assets/images/backgrounds/stats-facts-bg.svg" alt="" class="img-fluid">
      </div>
    </section>

    <section class="featured-projects py-5 py-lg-11 py-xl-12 bg-light-gray">
      <div class="d-flex flex-column gap-5 gap-xl-11">
        <div class="container">
          <div class="row gap-7 gap-xl-0">
            <div class="col-xl-4 col-xxl-4">
              <div class="d-flex align-items-center gap-7 py-2" data-aos="fade-right" data-aos-delay="100"
                data-aos-duration="1000">
                <span
                  class="round-36 flex-shrink-0 text-dark rounded-circle bg-primary hstack justify-content-center fw-medium">02</span>
                <hr class="border-line">
                <span class="badge text-bg-dark">Espaços</span>
              </div>
            </div>
            <div class="col-xl-8 col-xxl-7">
              <div class="row">
                <div class="col-xxl-8">
                  <div class="d-flex flex-column gap-6" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
                    <h2 class="mb-0">Nossos Espaços</h2>
                    <p class="fs-5 mb-0">Nossos espaços são pensados para promover inovação, pesquisa e colaboração,
                      oferecendo infraestrutura moderna e sustentável para transformar ideias em soluções de impacto.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="featured-projects-slider px-3">
          <div class="owl-carousel owl-theme">
            <div class="item">
              <div class="portfolio d-flex flex-column gap-6">
                <div class="portfolio-img position-relative overflow-hidden rounded-4">
                  <img src="../assets/images/espacos/auditorio.png" alt="Auditório do Parque Tecnológico do Mar"
                    class="img-fluid">
                </div>
                <div class="portfolio-details d-flex flex-column gap-3">
                  <h3 class="mb-0">Auditório</h3>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="portfolio d-flex flex-column gap-6">
                <div class="portfolio-img position-relative overflow-hidden rounded-4">
                  <img src="../assets/images/espacos/coworking.png" alt="Coworking do Parque Tecnológico do Mar"
                    class="img-fluid">
                </div>
                <div class="portfolio-details d-flex flex-column gap-3">
                  <h3 class="mb-0">Coworking</h3>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="portfolio d-flex flex-column gap-6">
                <div class="portfolio-img position-relative overflow-hidden rounded-4">
                  <img src="../assets/images/espacos/espaco-convivio.png"
                    alt="Espaço de convívio do Parque Tecnológico do Mar" class="img-fluid">
                </div>
                <div class="portfolio-details d-flex flex-column gap-3">
                  <h3 class="mb-0">Espaço de Convívio</h3>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="portfolio d-flex flex-column gap-6">
                <div class="portfolio-img position-relative overflow-hidden rounded-4">
                  <img src="../assets/images/espacos/espaco-maker.png"
                    alt="Espaço Maker de convívio do Parque Tecnológico do Mar" class="img-fluid">
                </div>
                <div class="portfolio-details d-flex flex-column gap-3">
                  <h3 class="mb-0">Espaço Maker</h3>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="portfolio d-flex flex-column gap-6">
                <div class="portfolio-img position-relative overflow-hidden rounded-4">
                  <img src="../assets/images/espacos/sala-de-leitura.jfif"
                    alt="Sala de Leitura do Parque Tecnológico do Mar" class="img-fluid">
                </div>
                <div class="portfolio-details d-flex flex-column gap-3">
                  <h3 class="mb-0">Sala de Leitura</h3>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="portfolio d-flex flex-column gap-6">
                <div class="portfolio-img position-relative overflow-hidden rounded-4">
                  <img src="../assets/images/espacos/sala-de-reuniao.jfif"
                    alt="Sala de Reunião do Parque Tecnológico do Mar" class="img-fluid">
                </div>
                <div class="portfolio-details d-flex flex-column gap-3">
                  <h3 class="mb-0">Sala de Reunião</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="services py-5 py-lg-11 py-xl-12 bg-dark" id="services">
      <div class="container">
        <div class="d-flex flex-column gap-5 gap-xl-10">
          <div class="row gap-7 gap-xl-0">
            <div class="col-xl-4 col-xxl-3">
              <div class="d-flex align-items-center gap-7 py-2" data-aos="fade-right" data-aos-delay="100"
                data-aos-duration="1000">
                <span
                  class="round-36 flex-shrink-0 text-dark rounded-circle bg-primary hstack justify-content-center fw-medium">03</span>
                <hr class="border-line bg-white">
                <span class="badge text-dark bg-white">Nossas Áreas</span>
              </div>
            </div>
            <div class="col-xl-8 col-xxl-7">
              <div class="row">
                <div class="col-xxl-8">
                  <div class="d-flex flex-column gap-6" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
                    <h2 class="mb-0 text-white">Nossas Áreas de Atuação</h2>
                    <p class="fs-5 mb-0 text-white text-opacity-70">
                      Promovemos inovação, desenvolvimento sustentável e conexões estratégicas para impulsionar
                      os setores de maior relevância para Angra dos Reis e para o Brasil.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="services-tab">
            <div class="row gap-5 gap-xl-0 align-items-center">
              <div class="col-xl-4 ">
                <div class="px-5 tab-content" data-aos="zoom-in" data-aos-delay="100" data-aos-duration="1000">
                  @php
                    $defaultAreaImages = [
                        0 => '../assets/images/areas/energia-sustentacao.webp',
                        1 => '../assets/images/areas/nautico-e-naval.webp',
                        2 => '../assets/images/areas/sustentabilidade.webp',
                        3 => '../assets/images/areas/petroleo-gas.webp',
                        4 => '../assets/images/areas/turismo.webp',
                        5 => '../assets/images/areas/alimentacao.webp',
                    ];
                  @endphp
                  @forelse($areas ?? [] as $index => $area)
                    @php
                      $tabId = 'area-' . ($index + 1);
                      $imageUrl = $area['imagem'] ?? ($defaultAreaImages[$index] ?? $defaultAreaImages[0]);
                    @endphp
                    <div class="tab-pane {{ $index === 0 ? 'active' : '' }}" id="{{ $tabId }}" role="tabpanel"
                      aria-labelledby="{{ $tabId }}-tab" tabindex="0">
                      <img src="{{ $imageUrl }}" alt="{{ $area['titulo'] ?? 'Área de atuação' }}"
                        class="img-fluid rounded-3" style="height: 550px;">
                    </div>
                  @empty
                    <div class="tab-pane active" id="area-1" role="tabpanel" aria-labelledby="area-1-tab" tabindex="0">
                      <img src="../assets/images/areas/energia-sustentacao.webp" alt="services"
                        class="img-fluid rounded-3" style="height: 550px;">
                    </div>
                  @endforelse
                </div>
              </div>

              <div class="col-xl-8">
                <div class="d-flex flex-column gap-5">
                  <ul class="nav nav-tabs" id="myTab" role="tablist" data-aos="fade-up" data-aos-delay="200"
                    data-aos-duration="1000">
                    @forelse($areas ?? [] as $index => $area)
                      @php
                        $tabId = 'area-' . ($index + 1);
                      @endphp
                      <li
                        class="nav-item py-4 py-lg-8 border-top border-white border-opacity-10 d-flex align-items-center w-100"
                        role="presentation">
                        <div class="row w-100 align-items-center gx-3">
                          <div class="col-lg-6 col-xxl-5">
                            <button
                              class="nav-link fs-10 fw-bold py-1 px-0 border-0 rounded-0 flex-shrink-0 {{ $index === 0 ? 'active' : '' }}"
                              id="{{ $tabId }}-tab" data-bs-toggle="tab" data-bs-target="#{{ $tabId }}" type="button"
                              role="tab" aria-controls="{{ $tabId }}"
                              aria-selected="{{ $index === 0 ? 'true' : 'false' }}">
                              {{ $area['titulo'] ?? 'Área de atuação' }}
                            </button>
                          </div>
                          <div class="col-lg-6 col-xxl-7">
                            <p class="text-white text-opacity-70 mb-0">
                              {{ $area['descricao'] ?? '' }}
                            </p>
                          </div>
                        </div>
                      </li>
                    @empty
                      <li
                        class="nav-item py-4 py-lg-8 border-top border-white border-opacity-10 d-flex align-items-center w-100"
                        role="presentation">
                        <div class="row w-100 align-items-center gx-3">
                          <div class="col-lg-6 col-xxl-5">
                            <button class="nav-link fs-10 fw-bold py-1 px-0 border-0 rounded-0 flex-shrink-0 active"
                              id="area-1-tab" data-bs-toggle="tab" data-bs-target="#area-1" type="button" role="tab"
                              aria-controls="area-1" aria-selected="true">Energia</button>
                          </div>
                          <div class="col-lg-6 col-xxl-7">
                            <p class="text-white text-opacity-70 mb-0">
                              Iniciativas voltadas para eficiência energética e novas tecnologias que fortalecem a
                              matriz energética sustentável da região.
                            </p>
                          </div>
                        </div>
                      </li>
                    @endforelse

                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="partners py-5 py-lg-11">
      <div class="d-flex flex-column gap-8" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
        <h2 class="mb-0 text-center text-dark">Startups Incubadas</h2>
        <div class="marquee w-100 d-flex align-items-center overflow-hidden">
          <div class="marquee-content d-flex align-items-center gap-8">

            @foreach(($startups ?? []) as $startup)
              <div class="marquee-tag hstack justify-content-center">
                <a href="{{ route('startups.show', $startup['slug']) }}">
                  <img src="{{ $startup['logo_url'] ?? '../assets/images/startups/logo-1.png' }}" 
                      alt="{{ $startup['nome'] ?? 'Startup' }}" 
                      class="img-fluid">
                </a>
              </div>
            @endforeach

            {{-- DUPLICAÇÃO PARA LOOP INFINITO --}}
            @foreach(($startups ?? []) as $startup)
              <div class="marquee-tag hstack justify-content-center">
                <a href="{{ route('startups.show', $startup['slug']) }}">
                  <img src="{{ $startup['logo_url'] ?? '../assets/images/startups/logo-1.png' }}" 
                      alt="{{ $startup['nome'] ?? 'Startup' }}" 
                      class="img-fluid">
                </a>
              </div>
            @endforeach
          </div>
        </div>
      </div>
    </section>

    <section id="faq" class="faq py-5 py-lg-11 py-xl-12">
      <div class="container">
        <div class="d-flex flex-column gap-5 gap-xl-11">
          <div class="row gap-7 gap-xl-0">
            <div class="col-xl-4 col-xxl-4">
              <div class="d-flex align-items-center gap-7 py-2" data-aos="fade-right" data-aos-delay="100"
                data-aos-duration="1000">
                <span
                  class="round-36 flex-shrink-0 text-dark rounded-circle bg-primary hstack justify-content-center fw-medium">04</span>
                <hr class="border-line bg-white">
                <span class="badge text-bg-dark">FAQs</span>
              </div>
            </div>
            <div class="col-xl-8 col-xxl-7">
              <div class="row">
                <div class="col-xxl-9">
                  <div class="d-flex flex-column gap-6" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
                    <h2 class="mb-0">Perguntas Frequentes</h2>
                    <p class="fs-5 mb-0 text-opacity-70">
                      Tire suas dúvidas sobre o funcionamento, as áreas de atuação e as oportunidades oferecidas pelo
                      Parque Tecnológico do Mar de Angra dos Reis.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row justify-content-end">
            <div class="col-xl-8">
              <div class="accordion accordion-flush" id="accordionFlushExample" data-aos="fade-up" data-aos-delay="200"
                data-aos-duration="1000">
                @php
                  $faqItems = is_array($faqs ?? null) ? $faqs : [];
                @endphp

                @foreach($faqItems as $index => $faq)
                  @php
                    $collapseId = 'flush-collapse' . ($index + 1);
                  @endphp

                  <div class="accordion-item {{ $loop->last ? 'border-bottom' : '' }}">
                    <h2 class="accordion-header">
                      <button class="accordion-button collapsed fs-8 fw-bold" type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#{{ $collapseId }}"
                        aria-expanded="false"
                        aria-controls="{{ $collapseId }}">
                        {{ $faq['pergunta'] ?? '' }}
                      </button>
                    </h2>

                    <div id="{{ $collapseId }}" class="accordion-collapse collapse"
                      data-bs-parent="#accordionFlushExample">
                      <div class="accordion-body pt-0 fs-5 text-dark">
                        {!! nl2br(e($faq['resposta'] ?? '')) !!}
                      </div>
                    </div>
                  </div>

                @endforeach

              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="noticias" class="featured-projects py-5 py-lg-11 py-xl-12 bg-light-gray">
      <div class="d-flex flex-column gap-5 gap-xl-5">

        <div class="container">
          <div class="row gap-7 gap-xl-0">
            <div class="col-xl-4 col-xxl-4">
              <div class="d-flex align-items-center gap-7 py-2" data-aos="fade-right" data-aos-delay="100"
                data-aos-duration="1000">

                <span
                  class="round-36 flex-shrink-0 text-dark rounded-circle bg-primary hstack justify-content-center fw-medium">
                  05
                </span>

                <hr class="border-line">

                <span class="badge text-bg-dark">Notícias</span>
              </div>
            </div>

            <div class="col-xl-8 col-xxl-7">
              <div class="row">
                <div class="col-xxl-8">
                  <div class="d-flex flex-column gap-6" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">

                    <h2 class="mb-0">Notícias</h2>

                    <p class="fs-5 mb-0">
                      Fique por dentro das novidades, eventos e conquistas do Parque Tecnológico do Mar.
                    </p>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Slider -->
        @if(!empty($noticias) && count($noticias) > 0)

          <div class="featured-projects-slider px-3">
            <div class="owl-carousel owl-theme">

              @foreach($noticias as $noticia)
                <div class="item">
                  <div class="portfolio d-flex flex-column gap-6">

                    @if(!empty($noticia['url']))
                      <a href="{{ $noticia['url'] }}" target="_blank" rel="noopener noreferrer" class="text-decoration-none">

                        <div class="portfolio-img position-relative overflow-hidden rounded-4">
                          <img src="{{ $noticia['foto'] ?? asset('assets/images/news-default-image.png') }}"
                            alt="{{ $noticia['titulo'] ?? 'Notícia' }}" class="img-fluid"
                            onerror="this.src='{{ asset('assets/images/news-default-image.png') }}'">
                        </div>

                      </a>
                    @else
                      <div class="portfolio-img position-relative overflow-hidden rounded-4">
                        <img src="{{ $noticia['foto'] ?? asset('assets/images/news-default-image.png') }}"
                          alt="{{ $noticia['titulo'] ?? 'Notícia' }}" class="img-fluid"
                          onerror="this.src='{{ asset('assets/images/news-default-image.png') }}'">
                      </div>
                    @endif

                    <div class="portfolio-details d-flex flex-column gap-3">

                      @if(!empty($noticia['data']))
                        <small class="text-muted">
                          <i class="fas fa-calendar-alt me-1"></i>
                          {{ $noticia['data'] }}
                        </small>
                      @endif

                      <h5 class="mb-0">
                        {{ $noticia['titulo'] ?? 'Sem título' }}
                      </h5>

                      <!-- <p class="mb-0">
                              {{ $noticia['resumo'] ?? 'Sem resumo disponível.' }}
                            </p> -->

                    </div>

                  </div>
                </div>
              @endforeach

            </div>
          </div>

        @else

          <div class="container">
            <div class="alert alert-info d-flex align-items-center gap-3" role="alert" data-aos="fade-up"
              data-aos-delay="200" data-aos-duration="1000">

              <i class="fas fa-info-circle fs-4"></i>

              <div>
                <strong>Nenhuma notícia disponível no momento.</strong>
                <p class="mb-0 mt-1">
                  As notícias relacionadas ao Parque Tecnológico do Mar serão exibidas aqui assim que estiverem disponíveis.
                </p>
              </div>
            </div>
          </div>

        @endif

        <div class="text-center mt-5">
              <a href="https://angra.rj.gov.br/noticias?q=Parque+Tecnol%C3%B3gico+do+Mar" target="_blank"
                class="btn btn-primary px-5 py-3 rounded-pill fw-semibold">
                Ver Mais Notícias
                <iconify-icon icon="lucide:arrow-right" class="ms-2"></iconify-icon>
              </a>
            </div>

      </div>
    </section>

    <section id="editais" class="py-5 py-lg-11 py-xl-12 section-tech position-relative overflow-hidden">
      <div class="tech-grid"></div>
      <div class="container position-relative">
        <div class="d-flex flex-column gap-5 gap-xl-11">

          <!-- Header -->
          <div class="row gap-7 gap-xl-0">
            <div class="col-xl-4 col-xxl-4">
              <div class="d-flex align-items-center gap-7 py-2" data-aos="fade-right" data-aos-delay="100"
                data-aos-duration="1000">

                <span
                  class="round-36 flex-shrink-0 text-dark rounded-circle bg-primary hstack justify-content-center fw-medium">
                  06
                </span>

                <hr class="border-line bg-white">

                <span class="badge text-bg-dark">Editais</span>
              </div>
            </div>

            <div class="col-xl-8 col-xxl-7">
              <div class="row">
                <div class="col-xxl-8">
                  <div class="d-flex flex-column gap-3" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">

                    <h2 class="mb-0 title-decretos">Oportunidades</h2>

                    <p class="fs-5 mb-0 text-white text-opacity-75">
                      Fique por dentro das oportunidades do Parque Tecnológico do Mar.
                    </p>

                  </div>
                </div>
              </div>
            </div>
          </div>

          @if(!empty($editais) && count($editais) > 0)

            @php
              $editaisLimitados = array_slice($editais, 0, 6);
              $editaisDesktop = array_chunk($editaisLimitados, 3);
              $totalSlidesDesktop = count($editaisDesktop);
            @endphp

            {{-- Desktop: até 6 editais, 3 por rolagem (2 slides) --}}
            <div class="carousel-container d-none d-md-block">
              <div id="editaisCarouselDesktop" class="carousel slide" data-bs-ride="carousel">

                @if($totalSlidesDesktop > 1)
                  <div class="carousel-indicators">
                    @for($i = 0; $i < $totalSlidesDesktop; $i++)
                      <button type="button" data-bs-target="#editaisCarouselDesktop" data-bs-slide-to="{{ $i }}"
                        class="{{ $i === 0 ? 'active' : '' }}" aria-label="Slide {{ $i + 1 }}">
                      </button>
                    @endfor
                  </div>
                @endif

                <div class="carousel-inner">
                  @foreach($editaisDesktop as $slideIndex => $slideEditais)
                    <div class="carousel-item {{ $slideIndex === 0 ? 'active' : '' }}">
                      <div class="container">
                        <div class="row justify-content-center">
                          @foreach($slideEditais as $edital)
                            <div class="col-md-4 mb-4">
                              @include('partials.editais-card', ['edital' => $edital])
                            </div>
                          @endforeach
                        </div>
                      </div>
                    </div>
                  @endforeach
                </div>

                @if($totalSlidesDesktop > 1)
                  <button class="carousel-control-prev" type="button" data-bs-target="#editaisCarouselDesktop" data-bs-slide="prev" aria-label="Anterior">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  </button>
                  <button class="carousel-control-next" type="button" data-bs-target="#editaisCarouselDesktop" data-bs-slide="next" aria-label="Próximo">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  </button>
                @endif
              </div>
            </div>

            {{-- Mobile: 1 card por rolagem, até 6 editais (6 slides) --}}
            @php $totalSlidesMobile = count($editaisLimitados); @endphp
            <div class="carousel-container editais-mobile-carousel d-block d-md-none">
              <div id="editaisCarouselMobile" class="carousel slide" data-bs-ride="carousel">
                @if($totalSlidesMobile > 1)
                  <div class="carousel-indicators">
                    @for($i = 0; $i < $totalSlidesMobile; $i++)
                      <button type="button" data-bs-target="#editaisCarouselMobile" data-bs-slide-to="{{ $i }}"
                        class="{{ $i === 0 ? 'active' : '' }}" aria-label="Slide {{ $i + 1 }}">
                      </button>
                    @endfor
                  </div>
                @endif
                <div class="carousel-inner">
                  @foreach($editaisLimitados as $slideIndex => $edital)
                    <div class="carousel-item {{ $slideIndex === 0 ? 'active' : '' }}">
                      <div class="container px-3">
                        <div class="row justify-content-center">
                          <div class="col-12">
                            @include('partials.editais-card', ['edital' => $edital])
                          </div>
                        </div>
                      </div>
                    </div>
                  @endforeach
                </div>
                @if($totalSlidesMobile > 1)
                  <button class="carousel-control-prev" type="button" data-bs-target="#editaisCarouselMobile" data-bs-slide="prev" aria-label="Anterior">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  </button>
                  <button class="carousel-control-next" type="button" data-bs-target="#editaisCarouselMobile" data-bs-slide="next" aria-label="Próximo">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  </button>
                @endif
              </div>
            </div>
            <div class="text-center mt-5">
              <a href="{{ route('editais') }}"
                class="btn btn-primary px-5 py-3 rounded-pill fw-semibold btn-institucional">
                Ver todas as Oportunidades
                <iconify-icon icon="lucide:arrow-right" class="ms-2"></iconify-icon>
              </a>
            </div>

          @else

            <div class="alert alert-dark border-secondary d-flex align-items-center gap-3" role="alert" data-aos="fade-up"
              data-aos-delay="200" data-aos-duration="1000">

              <i class="fas fa-info-circle fs-4"></i>

              <div>
                <strong>Nenhum edital disponível no momento.</strong>
                <p class="mb-0 mt-1">
                  Os editais do Parque Tecnológico do Mar serão exibidos aqui assim que estiverem disponíveis.
                </p>
              </div>

            </div>

          @endif

        </div>
      </div>
    </section>

    <section id="decretos-leis" class="decretos-leis py-5 py-lg-11 py-xl-12 bg-light-gray">
      <div class="container">
        <div class="d-flex flex-column gap-5 gap-xl-10">

          <div class="row gap-7 gap-xl-0">
            <div class="col-xl-4 col-xxl-4">
              <div class="d-flex align-items-center gap-7 py-2" data-aos="fade-right" data-aos-delay="100"
                data-aos-duration="1000">

                <span
                  class="round-36 flex-shrink-0 text-dark rounded-circle bg-primary hstack justify-content-center fw-medium">
                  07
                </span>

                <hr class="border-line">

                <span class="badge text-bg-dark">Decretos e Leis</span>
              </div>
            </div>

            <div class="col-xl-8 col-xxl-7">
              <div class="row">
                <div class="col-xxl-8">
                  <div class="d-flex flex-column gap-3" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">

                    <h2 class="mb-0">Decretos e Leis</h2>

                    <p class="fs-5 mb-0 text-opacity-70">
                      Conheça a legislação que rege o Parque Tecnológico do Mar e suas atividades institucionais.
                    </p>

                  </div>
                </div>
              </div>
            </div>
          </div>

          @if(count($decretosLeis) > 0)
            <div class="row g-4 mt-4 justify-content-center">
              @foreach($decretosLeis as $index => $decretoLei)
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ 100 + ($index * 100) }}">

                  <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden bg-white">

                    <div class="card-body d-flex flex-column p-4">

                      @if(!empty($decretoLei['numero_lei']))
                        <div class="text-primary fw-semibold small text-uppercase mb-3">
                          {{ $decretoLei['numero_lei'] }}
                        </div>
                      @endif

                      <h5 class="fw-bold text-dark mb-3">
                        {{ $decretoLei['titulo'] }}
                      </h5>

                      <p class="text-body-secondary flex-grow-1">
                        {{ $decretoLei['descricao_resumo'] }}
                      </p>

                      @if(!empty($decretoLei['arquivo_url']))
                        <a href="{{ $decretoLei['arquivo_url'] }}" target="_blank" rel="noopener noreferrer"
                          class="btn btn-primary rounded-pill mt-4 px-4 py-2 fw-medium d-inline-flex align-items-center" title="Baixar documento (PDF)">
                          <iconify-icon icon="lucide:download" class="me-2"></iconify-icon>
                          Baixar documento
                        </a>
                      @endif

                    </div>
                  </div>
                </div>
              @endforeach
            </div>

            <div class="text-center mt-5">
              <a href="{{ route('decretos-leis') }}"
                class="btn btn-primary px-5 py-3 rounded-pill fw-semibold">
                Ver todos os Decretos e Leis
                <iconify-icon icon="lucide:arrow-right" class="ms-2"></iconify-icon>
              </a>
            </div>

          @else
            <div class="alert alert-info d-flex align-items-center gap-3 mt-4">
              <i class="fas fa-info-circle fs-4"></i>
              <span>Nenhum decreto ou lei disponível no momento.</span>
            </div>
          @endif

        </div>
      </div>
    </section>

    <section id="contato" class="get-in-touch py-5 py-lg-11 py-xl-12 section-contato-ecossistema" id="contact">
      <div class="container">
        <div class="d-flex flex-column gap-5 gap-xl-10">
          <div class="row gap-7 gap-xl-0 align-items-center">
            <div class="col-xl-4 col-xxl-4">
              <div class="d-flex align-items-center gap-7 py-2" data-aos="fade-right" data-aos-delay="100"
                data-aos-duration="1000">
                <span
                  class="round-36 flex-shrink-0 text-dark rounded-circle bg-primary hstack justify-content-center fw-medium">08</span>
                <hr class="border-line bg-white">
                <span class="badge text-bg-dark">Contato</span>
              </div>
            </div>
            <div class="col-xl-8 col-xxl-7">
              <div class="row align-items-center text-end" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
                <div class="col">
                  <h2 class="mb-0 title-decretos fw-bold">Faça parte do ecossistema</h2>
                </div>
              </div>
            </div>
          </div>
          <div class="row g-4 align-items-stretch">
            <div class="col-lg-6">
              @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert" data-aos="fade-up"
                  data-aos-delay="100" data-aos-duration="1000">
                  <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
              @endif

              @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert" data-aos="fade-up"
                  data-aos-delay="100" data-aos-duration="1000">
                  <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
              @endif

              @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert" data-aos="fade-up"
                  data-aos-delay="100" data-aos-duration="1000">
                  <i class="fas fa-exclamation-circle me-2"></i>
                  <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                      <li>{{ $error }}</li>
                    @endforeach
                  </ul>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
              @endif

              <form id="form-contato-fale-conosco" action="{{ route('contato') }}" method="POST" class="form-ecossistema" data-aos="fade-up"
                data-aos-delay="200" data-aos-duration="1000">
                @csrf
                {{-- Honeypot --}}
                <div class="form-field-website-hp" aria-hidden="true" style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;">
                  <label for="website_hp">Website</label>
                  <input type="text" name="{{ config('form-security.honeypot_field', 'website') }}" id="website_hp" tabindex="-1" autocomplete="off">
                </div>
                <input type="hidden" name="start_time" id="form-contato-start-time" value="{{ round(microtime(true) * 1000) }}">

                <div class="row g-4">
                  <div class="col-md-6">
                    <label for="contato-nome" class="form-label text-white">Nome</label>
                    <input type="text" name="nome" id="contato-nome" class="form-control rounded-4 form-control-ecossistema @error('nome') is-invalid @enderror"
                      placeholder="Nome" value="{{ old('nome') }}" required>
                    @error('nome')<div class="invalid-feedback">{{ $message }}</div>@enderror
                  </div>
                  <div class="col-md-6">
                    <label for="contato-email" class="form-label text-white">E-mail</label>
                    <input type="email" name="email" id="contato-email" class="form-control rounded-4 form-control-ecossistema @error('email') is-invalid @enderror"
                      placeholder="E-mail" value="{{ old('email') }}" required>
                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                  </div>
                  <div class="col-md-6">
                    <label for="contato-telefone" class="form-label text-white">Telefone</label>
                    <input type="text" name="telefone" id="contato-telefone" class="form-control rounded-4 form-control-ecossistema @error('telefone') is-invalid @enderror"
                      placeholder="Telefone" value="{{ old('telefone') }}">
                    @error('telefone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                  </div>
                  <div class="col-md-6">
                    <label for="contato-cpf-cnpj" class="form-label text-white">CPF/CNPJ</label>
                    <input type="text" name="cpf_cnpj" id="contato-cpf-cnpj" class="form-control rounded-4 form-control-ecossistema @error('cpf_cnpj') is-invalid @enderror"
                      placeholder="CPF/CNPJ" value="{{ old('cpf_cnpj') }}">
                    @error('cpf_cnpj')<div class="invalid-feedback">{{ $message }}</div>@enderror
                  </div>
                  <div class="col-12">
                    <label for="contato-area" class="form-label text-white">Área de interesse / atuação</label>
                    <select name="area_interesse" id="contato-area" class="form-select rounded-4 form-control-ecossistema @error('area_interesse') is-invalid @enderror" required>
                      <option value="">Selecione</option>
                      @foreach(config('form-security.areas_interesse', []) as $area)
                        <option value="{{ $area }}" {{ old('area_interesse') === $area ? 'selected' : '' }}>{{ $area }}</option>
                      @endforeach
                    </select>
                    @error('area_interesse')<div class="invalid-feedback">{{ $message }}</div>@enderror
                  </div>
                  <div class="col-12">
                    <label for="contato-sugestoes" class="form-label text-white">Conecte conosco com sugestões</label>
                    <textarea name="sugestoes" id="contato-sugestoes" class="form-control rounded-4 form-control-ecossistema @error('sugestoes') is-invalid @enderror"
                      rows="4" placeholder="Sugestões ou mensagem">{{ old('sugestoes') }}</textarea>
                    @error('sugestoes')<div class="invalid-feedback">{{ $message }}</div>@enderror
                  </div>
                  <div class="col-12">
                    <div class="form-control rounded-4 form-control-ecossistema py-3 px-4 rounded-3">
                      <p class="mb-2 small text-dark">Declaro estar ciente e concordo com o uso dos meus dados pessoais fornecidos no cadastro do site do Parque Tecnológico do Mar, respeitando a privacidade e a segurança das informações fornecidas de acordo com as disposições da LGPD.</p>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="lgpd_aceite" id="contato-lgpd" value="1" {{ old('lgpd_aceite') ? 'checked' : '' }} required>
                        <label class="form-check-label small text-dark" for="contato-lgpd">Aceito os termos da LGPD</label>
                      </div>
                    </div>
                    @error('lgpd_aceite')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                  </div>
                  @if(config('form-security.recaptcha.enabled', false) && config('form-security.recaptcha.site_key'))
                  <div class="col-12">
                    <div class="g-recaptcha" data-sitekey="{{ config('form-security.recaptcha.site_key') }}"></div>
                    @error('g-recaptcha-response')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                  </div>
                  @endif
                  <div class="col-12">
                    <button type="submit" class="btn btn-ecossistema" id="btn-submit-contato">
                      Solicitar participação
                    </button>
                  </div>
                </div>
              </form>
            </div>
            <div class="col-lg-6" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
              <div class="h-100 rounded-3 overflow-hidden shadow-sm">
                <iframe
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3672.8278436779633!2d-44.23939052468707!3d-22.99335727919424!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9c45bfa4220d9f%3A0x6d2bf75795a084c1!2sParque%20Tecnol%C3%B3gico%20do%20Mar!5e0!3m2!1spt-BR!2sbr!4v1771866741173!5m2!1spt-BR!2sbr"
                  width="100%"
                  height="100%"
                  class="contact-map-iframe"
                  allowfullscreen=""
                  loading="lazy"
                  referrerpolicy="no-referrer-when-downgrade"
                  title="Localização do Parque Tecnológico do Mar - Rua Mafra, s/nº - Jacuecanga, Angra dos Reis - RJ">
                </iframe>
              </div>
              <p class="mx-auto text-center mt-2 mb-0 small text-white text-opacity-90">
                <i class="fas fa-map-marker-alt me-1"></i> Rua Mafra, s/nº - Jacuecanga, Angra dos Reis - RJ
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

  </div>

  @push('scripts')
    <script>
      window.PARQUETECMAR_FLASH = @json(['success' => session('success'), 'error' => session('error')]);
    </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="{{ asset('assets/js/pages/home.js') }}"></script>
    @if(config('form-security.recaptcha.enabled', false) && config('form-security.recaptcha.site_key'))
      <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    @endif
    <script>
      (function () {
        function initAreas() {
          const apiUrl = '{{ rtrim(config('services.angra_api.url', 'https://www.angra.rj.gov.br/api'), '/') }}/parque-tecnologico/areas';

          const tabIds = ['one', 'two', 'three', 'four', 'five', 'six'];

          const titleMap = {
            one: document.querySelector('#one-tab'),
            two: document.querySelector('#two-tab'),
            three: document.querySelector('#three-tab'),
            four: document.querySelector('#four-tab'),
            five: document.querySelector('#five-tab'),
            six: document.querySelector('#six-tab'),
          };

          const imageMap = {
            one: document.querySelector('#one img'),
            two: document.querySelector('#two img'),
            three: document.querySelector('#three img'),
            four: document.querySelector('#four img'),
            five: document.querySelector('#five img'),
            six: document.querySelector('#six img'),
          };

          const descriptionNodes = Array.from(
            document.querySelectorAll('.services #myTab .nav-item p.text-white.text-opacity-70')
          );

          // Verifica se os elementos foram encontrados
          if (!titleMap.one || !imageMap.one || descriptionNodes.length === 0) {
            console.warn('Elementos das áreas não encontrados no DOM', {
              titleMap: titleMap.one,
              imageMap: imageMap.one,
              descriptionNodes: descriptionNodes.length
            });
            return;
          }

          console.log('Buscando áreas da API:', apiUrl);
          fetch(apiUrl)
            .then(function (response) {
              if (!response.ok) {
                throw new Error('Erro ao carregar áreas: ' + response.status);
              }
              return response.json();
            })
            .then(function (areas) {
              if (!Array.isArray(areas) || areas.length === 0) {
                console.warn('Nenhuma área retornada da API');
                return;
              }

              console.log('Áreas recebidas da API:', areas.length, areas);
              const max = Math.min(areas.length, tabIds.length);

              for (let i = 0; i < max; i++) {
                const area = areas[i];
                const id = tabIds[i];

                // Atualiza título da aba
                if (titleMap[id] && area.titulo) {
                  titleMap[id].textContent = area.titulo;
                }

                // Atualiza descrição
                if (descriptionNodes[i] && area.descricao) {
                  descriptionNodes[i].textContent = area.descricao;
                }

                // Atualiza imagem
                if (imageMap[id] && area.imagem) {
                  imageMap[id].setAttribute('src', area.imagem);
                  imageMap[id].setAttribute('alt', area.titulo || imageMap[id].getAttribute('alt') || 'Área');
                }
              }
            })
            .catch(function (error) {
              console.error('Falha ao buscar áreas do Parque Tecnológico:', error);
            });
        }

        // Aguarda o DOM e todos os recursos estarem carregados
        if (document.readyState === 'loading') {
          document.addEventListener('DOMContentLoaded', function() {
            // Pequeno delay para garantir que Bootstrap e outros scripts estejam prontos
            setTimeout(initAreas, 100);
          });
        } else if (document.readyState === 'interactive') {
          setTimeout(initAreas, 100);
        } else {
          // DOM já está completo
          setTimeout(initAreas, 100);
        }
      })();
    </script>
  @endpush
@endsection