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

import directus from '@lib/directus';
import BrandLogo from '@components/ui/logos/BrandLogo.astro';
import Image from '@components/ui/images/Image.astro';
import { NavigationLinks, FooterLinks } from '@/config';
import footerImg from '@images/flowers.png';

const global = await directus.request(readSingleton('site_global'));
const currentYear = new Date().getFullYear();
---

<footer
  class="w-full overflow-hidden bg-stone-300/40 dark:bg-stone-800/20"
  transition:animate="none"
>
  <div class="relative px-4 pt-16 pb-12 sm:px-6">
    <div class="mx-auto max-w-[85rem]">
      <div class="grid grid-cols-1 gap-10 md:grid-cols-12">
        <!-- Brand section -->
        <div class="col-span-1 md:col-span-3">
          <a href="/" class="group inline-block">
            <div class="flex items-center">
              <div class="mx-auto aspect-square overflow-hidden rounded-lg">
                <BrandLogo class="max-h-[40px] max-w-[40px] rounded-full" />
              </div>

              <span class="ml-3 text-xl font-bold text-neutral-800 dark:text-neutral-200">
                {global.name}
              </span>
            </div>
          </a>

          <p class="mt-4 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400">
            {global.about}
          </p>
        </div>
        <!-- Left links -->
        <div class="col-span-1 md:col-span-2">
          <h3
            class="after:bg-steel dark:after:bg-bermuda relative inline-block pb-2 text-sm font-semibold tracking-wider text-neutral-800 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-[''] dark:text-neutral-100"
          >
            Blog
          </h3>
          <ul class="mt-4 space-y-3">
            {
              NavigationLinks.map((link) => (
                <li>
                  <a
                    href={link.url}
                    class="group flex items-center text-base text-neutral-600 transition-colors hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200"
                  >
                    <span class="relative inline-block overflow-hidden">
                      <span class="relative z-10">{link.name}</span>
                    </span>
                  </a>
                </li>
              ))
            }
          </ul>
        </div>
        <!-- Right links -->
        <div class="col-span-1 md:col-span-3">
          <h3
            class="after:bg-steel dark:after:bg-bermuda relative inline-block pb-2 text-sm font-semibold tracking-wider text-neutral-800 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-[''] dark:text-neutral-100"
          >
            Other
          </h3>
          <ul class="mt-4 space-y-3">
            {
              FooterLinks.map((link) => (
                <li>
                  <a
                    href={link.url}
                    class="group flex items-center text-base text-neutral-600 transition-colors hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200"
                  >
                    <span class="relative inline-block overflow-hidden">
                      <span class="relative z-10">{link.name}</span>
                    </span>
                  </a>
                </li>
              ))
            }
          </ul>
        </div>
        <!-- Right image -->
        <div class="col-span-3 mt-10 flex justify-center md:mt-0">
          <div class="-mt-10 hidden max-h-[460px] max-w-[220px] scale-80 md:block">
            <Image
              src={footerImg}
              alt={global.footer_image_alt}
              class="h-full w-full object-cover object-center"
              draggable="false"
              loading="eager"
              format="webp"
              quality="low"
              widths={[440]}
              disableBlur={true}
            />
          </div>
        </div>
      </div>
      <!-- Bottom section -->
      <div class="mt-12 border-t border-neutral-400/30 pt-8 dark:border-neutral-600/50">
        <div class="flex flex-col items-center justify-between gap-4 md:flex-row">
          <p class="text-sm text-neutral-600 dark:text-neutral-400">
            &copy; {currentYear} All rights reserved.
          </p>

          <div class="flex items-center space-x-2">
            <span class="text-xs text-neutral-500 dark:text-neutral-400">Built with </span>
            <a
              href="https://astro.build"
              target="_blank"
              rel="noopener noreferrer"
              class="group inline-flex items-center text-xs text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
            >
              <svg class="mr-1 h-4 w-4 text-[#FF5D01]" viewBox="0 0 36 36" fill="none">
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M8.833 22.958c.622-1.185 1.832-1.918 3.18-1.918 2.292 0 4.145 1.86 4.145 4.153 0 1.34-.626 2.54-1.601 3.303 1.223-1.299 1.97-3.048 1.97-4.971 0-3.994-3.243-7.233-7.242-7.233-2.818 0-5.26 1.6-6.469 3.933.78-2.912 3.428-5.06 6.577-5.06 3.75 0 6.79 3.035 6.79 6.78 0 2.606-1.468 4.868-3.616 6.002a4.163 4.163 0 0 0 2.285-3.724c0-2.293-1.853-4.153-4.145-4.153-1.348 0-2.558.733-3.18 1.918l1.306-3.03Z"
                  fill="currentColor"></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M22.155 12.056c-.622 1.185-1.832 1.918-3.18 1.918-2.292 0-4.145-1.86-4.145-4.153 0-1.34.626-2.54 1.601-3.303-1.223 1.299-1.97 3.048-1.97 4.971 0 3.994 3.243 7.233 7.242 7.233 2.818 0 5.26-1.6 6.469-3.933-.78 2.912-3.428 5.06-6.577 5.06-3.75 0-6.79-3.035-6.79-6.78 0-2.606 1.468-4.868 3.616-6.002a4.163 4.163 0 0 0-2.285 3.724c0 2.293 1.853 4.153 4.145 4.153 1.348 0 2.558-.733 3.18-1.918l-1.306 3.03Z"
                  fill="currentColor"></path>
              </svg>
              <span class="relative">
                Astro
                <span
                  class="absolute bottom-0 left-0 h-0.5 w-0 bg-[#FF5D01] transition-all duration-300 group-hover:w-full"
                >
                </span>
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>