---
// Import the necessary dependencies
import EmailFooterInput from '@components/ui/forms/input/EmailFooterInput.astro';
import BrandLogo from '@components/BrandLogo.astro';
import { SITE } from '@data/constants';
import { getLocaleFromPath, localizeHref } from '@/i18n';
import { siteCopy } from '@data/site-copy';

const locale = getLocaleFromPath(Astro.url.pathname);
const copy = siteCopy[locale].footer;

type FooterSection = {
  section: string;
  links: Array<{ name: string; url: string }>;
};
---

<footer class="w-full bg-neutral-300 dark:bg-neutral-900">
  <div
    class="mx-auto w-full max-w-[85rem] px-4 py-10 sm:px-6 lg:px-16 lg:pt-20 2xl:max-w-(--breakpoint-2xl)"
  >
    <div class="grid grid-cols-2 gap-6 md:grid-cols-4 lg:grid-cols-5">
      <div class="col-span-full lg:col-span-1">
        {/* Brand Logo */}
        <BrandLogo class="h-auto w-40" />
      </div>
      {/* An array of links for Product and Company sections */}
      {
        copy.sections.map((section: FooterSection) => (
          <div class="col-span-1 min-w-0">
            <h3
              class="break-words font-bold text-neutral-800 dark:text-neutral-200"
            >
              {section.section}
            </h3>
            <ul class="mt-3 grid space-y-3">
              {section.links.map(link => (
                <li>
                  <a
                    href={localizeHref(link.url, locale)}
                    class="inline-flex max-w-full gap-x-2 rounded-lg break-words whitespace-normal text-neutral-600 ring-zinc-500 outline-hidden transition duration-300 hover:text-neutral-500 focus-visible:ring-3 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-300 dark:focus:outline-hidden"
                  >
                    {link.name}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))
      }

      <div class="col-span-2 min-w-0">
        <h3 class="break-words font-bold text-neutral-800 dark:text-neutral-200">
          {copy.conversationTitle}
        </h3>

        <div>
          <EmailFooterInput
            title={copy.contactButton}
            url={localizeHref('/contact', locale)}
          />
          <p class="mt-3 break-words text-sm text-neutral-600 dark:text-neutral-400">
            {copy.conversationContent}
          </p>
        </div>
      </div>
    </div>

    <div
      class="mt-9 grid gap-y-2 sm:mt-12 sm:flex sm:items-center sm:justify-between sm:gap-y-0"
    >
      <div class="flex items-center justify-between">
        <p class="break-words text-sm text-neutral-600 dark:text-neutral-400">
          © <span id="current-year"></span>
          {SITE.title}. {copy.copyrightSuffix}
        </p>
      </div>
    </div>

    <script>
      const year = new Date().getFullYear();
      const element = document.getElementById('current-year');
      element!.innerText = year.toString();
    </script>
  </div>
</footer>