---
import Icon from "./Icon.astro";
import { SITE, categories } from "../lib/blog-data.js";

const { flush = false } = Astro.props;
---

<footer class:list={[flush ? "mt-0" : "mt-24", "border-t border-border/60"]}>
  <div class="mx-auto grid max-w-6xl gap-10 px-5 py-12 md:grid-cols-4">
    <div class="md:col-span-2">
      <div class="font-serif text-lg font-semibold">{SITE.name}</div>
      <p class="mt-3 max-w-sm text-sm leading-relaxed text-muted-foreground">
        {SITE.description}
      </p>
      <div class="mt-4 flex items-center gap-3 text-muted-foreground">
        <a href="/rss.xml" aria-label="RSS" class="hover:text-foreground"><Icon name="rss" class="h-4 w-4" /></a>
        <a href="https://x.com/" aria-label={`${SITE.name} on X`} class="hover:text-foreground"><Icon name="twitter" class="h-4 w-4" /></a>
      </div>
    </div>
    <div>
      <div class="text-xs font-medium uppercase tracking-wider text-muted-foreground">Sections</div>
      <ul class="mt-3 space-y-2 text-sm">
        {
          categories.slice(0, 5).map((category) => (
            <li>
              <a href={`/categories/${category.slug}`} class="text-foreground/80 hover:text-foreground">
                {category.name}
              </a>
            </li>
          ))
        }
      </ul>
    </div>
    <div>
      <div class="text-xs font-medium uppercase tracking-wider text-muted-foreground">The site</div>
      <ul class="mt-3 space-y-2 text-sm">
        <li><a href="/about" class="hover:text-foreground">About</a></li>
        <li><a href="/faq" class="hover:text-foreground">FAQ</a></li>
        <li><a href="/contact" class="hover:text-foreground">Contact</a></li>
        <li><a href="/blog" class="hover:text-foreground">Archive</a></li>
        <li><a href="/rss.xml" class="hover:text-foreground">RSS feed</a></li>
      </ul>
    </div>
  </div>
  <div class="border-t border-border/60">
    <div class="mx-auto flex max-w-6xl flex-col items-start justify-between gap-2 px-5 py-5 text-xs text-muted-foreground sm:flex-row sm:items-center">
      <div>&copy; {new Date().getFullYear()} {SITE.name}.</div>
      <div>Set in Fraunces &amp; Inter.</div>
    </div>
  </div>
</footer>