---
import DefaultFooter from "@astrojs/starlight/components/Footer.astro";
import config from "virtual:starlight/user-config";

import { repo } from "@/config";
import nut from "@/assets/nut.svg";

const isHomepage = Astro.locals.starlightRoute.id === "index.mdx";
const columnStyle = "flex flex-col gap-1 items-center justify-start";
---

{
  isHomepage ? (
    <footer class="pt-[28px]">
      <div class="absolute left-0 w-full">
        <div class="bg-accent-200 h-px" />

        <div class="flex justify-center">
          <img class="relative top-[-20px] size-[40px]" src={nut.src} />
        </div>
      </div>

      <div class="grid grid-cols-3 gap-4 pt-[32px]">
        <div class={columnStyle}>
          <strong>About</strong>

          <a class="no-underline" href="/contact">
            Contact
          </a>
          <a class="no-underline" href="/license">
            License
          </a>
          <a
            class="no-underline"
            href="https://status.trailbase.io/status/main"
          >
            Status
          </a>
        </div>

        <div class={columnStyle}>
          <strong>Developers</strong>

          <a class="no-underline" href="/docs">
            Documentation
          </a>
          <a class="no-underline" href={`${repo}/releases`}>
            Releases
          </a>
          <a
            class="no-underline"
            href="https://hub.docker.com/r/trailbase/trailbase"
          >
            Docker
          </a>
        </div>

        <div class={columnStyle}>
          <strong>Community</strong>

          {config.social?.map(({ href, label }) => (
            <a class="no-underline" href={href}>
              {label}
            </a>
          ))}
        </div>
      </div>
    </footer>
  ) : (
    <DefaultFooter>
      <slot />
    </DefaultFooter>
  )
}
