<script setup>
  import logo from "@images/logo.png"
  const router = useRouter()

  const tituloGestor = ref('Gestor')

  const gestoresTitulos = [
    'Recrutador',
    'Promotor',
    'Vendedor',
    'Entregador',
    'Motorista',
    'Prestador de Serviços',
    'Gestor'
  ]

  //Trocando o título do gestor a cada 3 segundos
  let indexGestor = 0

  setInterval(() => {
    tituloGestor.value = gestoresTitulos[indexGestor]
    indexGestor = indexGestor === gestoresTitulos.length - 1 ? 0 : indexGestor + 1
  }, 2000)

  const handleBannerAction = (action) => {
    if (action.startsWith("http")) {
      window.open(action, "_blank")
    } else {
      router.push(action)
    }
  }

  const versionDev = import.meta.env.VITE_VAPP

  const institucionalItens = [
    {
      title: 'Contato',
      action: '/contato'
    },
    {
      title: 'Termos de uso',
      action: '/termos-de-uso'//'/termos-de-uso'
    },
    {
      title: 'Política de privacidade',
      action: '/politica-de-privacidade'
    },
    {
      title: 'Termos e Política de Vagas',
      action: '/termos-politicas-vagas'
    },
    {
      title: 'Termos e Política de Eventos',
      action: '/termos-politicas-eventos'
    },
  ]

  const descubraItens = [
    {
      title: 'Vagas',
      action: '/vagas'
    },
    {
      title: 'Eventos',
      action: '/eventos'
    },
    {
      title: 'Produtos',
      action: 'construcao'//'/produtos'
    },
    {
      title: 'Serviços',
      action: 'construcao'//'/servicos'
    },
    {
      title: 'Seja um gestor',
      action: 'https://gestor.akkiperto.com.br/seja-um-gestor'
    }
  ]

</script>

<template>

  <VRow class="mx-auto" style="margin-top: 80px;">
    <VCol cols="12" class="mx-auto">
      <VCard color="primary">
        <VCardText>
          <h2 class="mb-1 text-center" style="color: white;">
            <VIcon icon="tabler-rocket" />
            Torne-se um {{ tituloGestor }}
          </h2>
          <p class="mb-0 text-center">
            Seja um {{ tituloGestor.toLowerCase() }} no AkkiPerto e alavanque seus resultados.
          </p>
          <p class="mb-3 text-caption text-center"> Painel de controle exclusivo, acompanhamento de resultados, anúncios
            exclusivos e muito mais!
          </p>
          <p class="text-center mb-0">
            <VBtn variant="tonal" color="white"
              @click="handleBannerAction('https://gestor.akkiperto.com.br/seja-um-gestor')">
              Saiba mais
              <VIcon icon="tabler-chevron-right" class="ml-3" />
            </VBtn>
          </p>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>

  <VDivider class="my-10" />

  <VRow>
    <VCol cols="12" md="3">
      <h4 class="mb-3">AkkiPerto</h4>
      <div class="d-flex flex-column">
        <p class="mb-2 link-footer" v-for="item in institucionalItens" :key="item.title"
          @click="handleBannerAction(item.action)" style="cursor: pointer;">
          {{ item.title }}
        </p>
      </div>
    </VCol>

    <VCol cols="12" md="3">
      <h4 class="mb-3">Descubra</h4>
      <div class="d-flex flex-column">
        <p class="mb-2 link-footer" v-for="item in descubraItens" :key="item.title"
          @click="handleBannerAction(item.action)" style="cursor: pointer;">
          {{ item.title }}
        </p>
      </div>
    </VCol>

    <VCol cols="12" md="3">
      <h4 class="mb-3">Redes Sociais</h4>
      <div class="d-flex flex-row gap-3">
        <VBtn variant="tonal" icon color="primary" @click="handleBannerAction('https://www.instagram.com/akkiperto/')">
          <VIcon icon="tabler-brand-instagram" size="24" />
        </VBtn>
        <VBtn variant="tonal" icon color="primary" @click="handleBannerAction('https://www.facebook.com/akkiperto/')">
          <VIcon icon="tabler-brand-facebook" size="24" />
        </VBtn>
      </div>
    </VCol>
  </VRow>

  <VDivider class="my-10" />


  <div class="h-100 d-flex align-center justify-space-between">
    <!--
      👉 Footer: left content -->
    <span class="d-flex align-center flex-row">

      <VImg :src="logo" alt="AkkiPerto" width="70" class="mx-auto cursor-pointer" />
      <div>
        <p class="mb-0" style="font-size: 13px;">AKKI PERTO TECNOLOGIA LTDA - CNPJ 52.028.454/0001-74</p>
        <p class="mb-0" style="font-size: 13px;">Copyright © 2024 - Todos os direitos reservados</p>
        <p class="mb-0 mt-1 text-caption">v{{ versionDev }}</p>
      </div>

    </span>


    <span class="d-md-flex gap-x-4 text-primary d-none">
      <p>Copyright 2024 © <a href="https://akkiperto.com.br/" _blank>
          AkkiPerto</a> - Todos os direitos reservados.
      </p>
    </span>
  </div>
</template>

<style>
  .link-footer {
    cursor: pointer;
    transition: all 0.3s;
  }

  .link-footer:hover {
    color: var(--color-akkiperto);
    font-weight: bold;
  }
</style>