<script setup>
  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">
        <h3>Our partners</h3>
        <p>See the software we use and people we support.</p>
      </div>
    </div>

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

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

  </div>
</template>