---
import { readSingleton } from '@directus/sdk';

import directus from '@lib/directus';
import FeaturesCard from '@components/ui/cards/FeaturesCard.astro';

const global = await directus.request(readSingleton('site_global'));
---

<section class="mx-auto mb-20 max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
  <div
    class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0 lg:gap-x-24"
  >
    <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
      <div class="grid gap-3 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3">
        <FeaturesCard
          title="Cloud Engineer"
          description="Full stack and cloud engineer."
          url="/about"
          icon="mdi:cloud-outline"
        />
        <FeaturesCard
          title="Homelab"
          description="Tinkering, testing, deploying, etc, etc ..."
          url="/categories/homelab/"
          icon="mdi:home-variant-outline"
        />
        <FeaturesCard
          title="Email"
          description={`Send me a message.`}
          url=`mailto:${global.email}`
          icon="mdi:email-fast"
        />
      </div>
    </div>
  </div>
</section>