<script setup>
  useHead({
    title: 'Inspin Digital | Partners',
    meta: [
      { 
        name: 'description', 
        content: `See the software Inspin Digital uses and the people we support.` 
      },      
    ],
  })

  const route = useRoute()

  const software = await queryContent('software').sort({ priority: 1 }).find()
  const companies = await queryContent('companies').sort({ priority: 1 }).find()  

</script>

<template>
  <div class="partners center">
    
    <!-- Hero -->
    <div class="heading">
      <div class="msg">
        <h2>Partners</h2>
        <p>See the software we use and people we support.</p>
      </div>
    </div>

    <!-- Categories -->
    <div class="categories">
      <NuxtLink to="/partners/#software" :class="route.hash === '#software' || route.hash === '' ? 'selected' : ''">Software</NuxtLink>
      <NuxtLink to="/partners/#companies" :class="route.hash === '#companies' ? 'selected' : ''">Companies</NuxtLink>
    </div>

    <!-- Content -->
    <div class="lists">
      <div v-if="route.hash === '#software' || route.hash === ''" class="links">
        <PartnersCard :sites="software" />
      </div>
      <div v-if="route.hash === '#companies'" class="links">
        <PartnersCard :sites="companies" />
      </div>
    </div>

  </div>
</template>