---
import { Image } from 'astro:assets';
import { readSingleton } from '@directus/sdk';

import BrandLogo from '@components/images/BrandLogo.astro';
import directus from '@lib/directus';
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="bg-background-accent w-full overflow-hidden"
  transition:animate="none"
>
  <div class="relative px-4 sm:px-6 pt-16 pb-12">
    <div class="max-w-340 mx-auto">
      <div class="grid grid-cols-1 md:grid-cols-12 gap-10">
        <!-- 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">
                <BrandLogo class="rounded-lg max-h-10 max-w-10"/>
              </div>
              <span class="text-header text-lg lg:text-2xl font-semibold leading-tight tracking-tight text-balance ml-3">
                {global.name}
              </span>
            </div>
          </a>
          <p class="text-primary text-sm lg:text-base text-pretty leading-relaxed mt-4">
            {global.about}
          </p>
        </div>
        <!-- Left links -->
        <div class="col-span-1 md:col-span-2">
          <h3 class="relative inline-block text-header after:bg-main text-sm uppercase font-semibold tracking-wider pb-2 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-['']">
            Site
          </h3>
          <ul class="mt-4 space-y-3">
            {NavigationLinks.map((link) => (
            <li>
              <a
                href={link.url}
                class="inline-flex items-center text-secondary hover:text-secondary-hover text-base transition-all duration-300 overflow-hidden"
              >
                {link.name}
              </a>
            </li>
            ))}
          </ul>
        </div>
        <!-- Right links -->
        <div class="col-span-1 md:col-span-3">
          <h3 class="relative inline-block text-header after:bg-main text-sm uppercase font-semibold tracking-wider pb-2 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-['']">
            Other
          </h3>
          <ul class="mt-4 space-y-3">
           {FooterLinks.map((link) => (
            <li>
              <a
                href={link.url}
                class="inline-flex items-center text-secondary hover:text-secondary-hover text-base transition-all duration-300 overflow-hidden"
              >
                {link.name}
              </a>
            </li>
           ))}
          </ul>
        </div>
        <!-- Right image -->
        <div class="flex justify-center col-span-4 mt-10 md:mt-0">
          <div class="md:block max-h-115 max-w-55 -mt-10 scale-80 hidden">
            <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]}
              inferSize={true}
            />
          </div>
        </div>
      </div>
      <!-- Bottom section -->
      <div class="border-t border-divider pt-8 mt-12">
        <div class="flex flex-col md:flex-row items-center justify-between gap-4">
          <p class="text-secondary text-sm">
            &copy; {currentYear} All rights reserved.
          </p>
          <div class="flex items-center">
            <span class="text-secondary text-sm">
              Weather provided by
            </span>
            <a
              href="https://open-meteo.com/"
              target="_blank"
              rel="noopener noreferrer"
              class="group inline-flex items-center text-secondary hover:text-secondary-hover text-sm transition-all duration-300"
            >
              <span class="relative underline ml-1">
                Open-Meteo.
              </span>
            </a>
            <div class="ml-4"/>
            <span class="text-secondary text-sm">
              Built with
            </span>
            <a
              href="https://astro.build"
              target="_blank"
              rel="noopener noreferrer"
              class="group inline-flex items-center text-secondary hover:text-secondary-hover text-sm transition-all duration-300"
            >
              <span class="relative underline ml-1">
                Astro.
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>