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

  <style>
    .portfolio-img {
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      margin: auto
    }

    .portfolio-img img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  </style>

  <div class="page-wrapper overflow-hidden">

    <section class="banner-section banner-inner-section position-relative overflow-hidden d-flex align-items-end  "
      style="background-image: url(../assets/images/startups/home_bg.png); background-size: cover; background-position: top center; background-repeat: no-repeat;">
      <div class="container">
        <div class="d-flex flex-column gap-4 pb-5 pb-xl-10 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-fluid animate-spin">
                <p class="mb-0 text-white fs-5 text-opacity-70">Ideias que nascem <span class="text-primary">com propósito</span>, crescem com
                 inovação e transformam o futuro da economia azul.</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">Startups</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="segments py-5">
      <div class="container">
        <h2 class="text-center mb-5 fw-bold">Segmentos das Startups</h2>
        <div class="row g-4 justify-content-center align-content-center text-center">
          @php
            $currentSegment = $segmento ?? null;
          @endphp

          <div class="col-6 col-md-2">
            <button
              class="segment-card segment-tecnologia {{ $currentSegment === 'tecnologia' || !$currentSegment ? 'active' : '' }} p-4 rounded-4 shadow-sm text-white bg-gradient d-flex flex-column align-items-center justify-content-center hover-card w-100 border-0"
              data-segment="tecnologia">
              <h6 class="mt-2">Tecnologia</h6>
            </button>
          </div>

          <div class="col-6 col-md-2">
            <button
              class="segment-card segment-energia {{ $currentSegment === 'energia' ? 'active' : '' }} p-4 rounded-4 shadow-sm text-white bg-gradient d-flex flex-column align-items-center justify-content-center hover-card w-100 border-0"
              data-segment="energia">
              <h6 class="mt-2">Energia</h6>
            </button>
          </div>

          <div class="col-6 col-md-2">
            <button
              class="segment-card segment-logistica {{ $currentSegment === 'logistica' ? 'active' : '' }} p-4 rounded-4 shadow-sm text-white bg-gradient d-flex flex-column align-items-center justify-content-center hover-card w-100 border-0"
              data-segment="logistica">
              <h6 class="mt-2">Logística</h6>
            </button>
          </div>

          <div class="col-6 col-md-2">
            <button
              class="segment-card segment-sustentabilidade {{ $currentSegment === 'sustentabilidade' ? 'active' : '' }} p-4 rounded-4 shadow-sm text-white bg-gradient d-flex flex-column align-items-center justify-content-center hover-card w-100 border-0"
              data-segment="sustentabilidade">
              <h6 class="mt-2">Sustentabilidade</h6>
            </button>
          </div>

          <div class="col-6 col-md-2">
            <button
              class="segment-card segment-nautica {{ $currentSegment === 'nautica_naval' ? 'active' : '' }} p-4 rounded-4 shadow-sm text-white bg-gradient d-flex flex-column align-items-center justify-content-center hover-card w-100 border-0"
              data-segment="nautica_naval">
              <h6 class="mt-2">Náutica & Naval</h6>
            </button>
          </div>

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

    <section class="project pt-3 pb-5 mb-5">
      <div class="container">
        <div class="row align-items-center justify-content-center" id="startup-list">
          @forelse($startups ?? [] as $startup)
            @php
              $segmentKey = $startup['segmento']['key'] ?? 'tecnologia';
              $segmentLabel = $startup['segmento']['label'] ?? 'Segmento';
              $segmentColor = $startup['segmento']['color'] ?? '#43D2F5';
            @endphp

            <div class="col-lg-3 mb-7 startup-item" data-segment="{{ $segmentKey }}">
              <div class="portfolio d-flex flex-wrap gap-6">
                <div class="portfolio-img position-relative overflow-hidden">
                  @if(!empty($startup['logo_url']))
                    <img src="{{ $startup['logo_url'] }}" alt="{{ $startup['nome'] ?? 'Startup' }}" class="img-fluid w-100">
                  @else
                    <img src="../assets/images/startups/logo-1.png" alt="{{ $startup['nome'] ?? 'Startup' }}" class="img-fluid w-100">
                  @endif
                  <div class="portfolio-overlay justify-content-center align-items-center">
                    {{-- Sempre usa rota local, independente de ambiente; slug vem da API --}}
                    @if(!empty($startup['slug'] ?? null))
                      <a href="{{ route('startups.show', $startup['slug']) }}"
                        class="position-absolute top-50 start-50 translate-middle round-64 rounded-circle hstack justify-content-center"
                        style="background-color: {{ $segmentColor }};">
                        <iconify-icon icon="lucide:arrow-up-right" class="fs-8 text-dark"></iconify-icon>
                      </a>
                    @endif
                  </div>
                </div>
                <div class="portfolio-details d-flex flex-column gap-3">
                  <h3 class="mb-0">{{ $startup['nome'] ?? '' }}</h3>
                  <div class="hstack gap-2">
                    <span class="badge text-dark border">{{ $segmentLabel }}</span>
                  </div>
                </div>
              </div>
            </div>
          @empty
            <div class="col-lg-3 mb-7 startup-item" data-segment="">
              <h5 class="text-center">Nenhuma Startup Encontrada!</h5>
            </div>
          @endforelse

        </div>

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

@endsection