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

// Social profiles come from site.config.json -> author.sameAs, which is also
// what feeds the Person JSON-LD. One list, not two.
const socials = (authors[0]?.sameAs ?? []).map((href) => {
  const host = new URL(href).hostname.replace(/^www\./, "");
  const label = host.split(".")[0];
  return { href, label: label.charAt(0).toUpperCase() + label.slice(1) };
});

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-5 flex flex-wrap items-center gap-x-5 gap-y-2">
        {
          socials.map((s) => (
            <a
              href={s.href}
              target="_blank"
              rel="noopener noreferrer"
              class="ca-quiet font-mono text-xs tracking-[0.1em] text-muted-foreground uppercase hover:text-foreground"
            >
              {s.label}
            </a>
          ))
        }
        <a
          href="/rss.xml"
          class="ca-quiet font-mono text-xs tracking-[0.1em] text-muted-foreground uppercase hover:text-foreground"
          >RSS</a
        >
      </div>
    </div>
    <div>
      <div class="text-xs font-medium uppercase tracking-wider text-muted-foreground">Services</div>
      <ul class="mt-3 space-y-2 text-sm">
        {
          [
            { label: "Automation", href: "/services#automation" },
            { label: "Website Design", href: "/services#website-design" },
            { label: "Digital Marketing", href: "/services#digital-marketing" },
            { label: "For Law Firms", href: "/services" },
          ].map((s) => (
            <li>
              <a
                href={s.href}
                class="text-foreground/80 hover:text-foreground"
              >
                {s.label}
              </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="/projects" class="hover:text-foreground">Projects</a></li>
        <li><a href="/resume" class="hover:text-foreground">Resume</a></li>
        <li><a href="/contact" class="hover:text-foreground">Contact</a></li>
        <li><a href="/changelog" class="hover:text-foreground">Changelog</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>