---
/**
 * Footer.astro
 * ---------------------------------------------------------------------------
 * Minimal footer on a deep night-sky surface: a faint static starfield accent,
 * the Patiun seal beside the name, social links, the copyright with the
 * "a Patiun LLC company" line, and
 * the spec microcopy "Built with intention. Powered by caffeine." No emojis.
 */
import Icon from '@components/Icon.astro';
import StarField from '@components/mystic/StarField.astro';
import { socials, footerMicrocopy, siteIdentity } from '@lib/site';
const year = new Date().getFullYear();
const socialList = Object.values(socials);
---

<footer
  class="relative overflow-hidden border-t"
  style="border-color: color-mix(in srgb, var(--color-gold) 55%, transparent); background: var(--color-surface-sunken);"
>
  {/* Faint static starfield — carries the night-sky treatment into the footer. */}
  <StarField
    class="pointer-events-none absolute inset-0 h-full w-full"
    style="color: var(--color-accent); opacity:.35;"
    density="sparse"
  />
  <div class="container-prose relative z-10 flex flex-col items-center gap-6 py-10 text-center sm:flex-row sm:justify-between sm:text-left">
    <div class="flex items-center gap-3">
      <img src="/brand/patiun-seal.svg" alt="" width="72" height="72" class="h-[72px] w-[72px] shrink-0" />
      <div class="flex flex-col gap-1">
        <p class="font-display text-sm font-bold uppercase tracking-[0.14em]" style="color: var(--color-text);">
          {siteIdentity.name}
        </p>
        <p class="font-eyebrow text-xs italic" style="color: var(--color-text-subtle);">
          {footerMicrocopy}
        </p>
      </div>
    </div>

    <ul class="flex items-center gap-2">
      {socialList.map((s) => (
        <li>
          <a
            href={s.href}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={s.label}
            title={s.label}
            class="inline-flex h-10 w-10 items-center justify-center rounded-lg border transition-colors hover:bg-[color-mix(in_srgb,var(--color-accent)_15%,transparent)]"
            style="color: var(--color-text-muted); border-color: var(--color-border);"
          >
            <Icon name={s.icon} class="h-5 w-5" />
          </a>
        </li>
      ))}
    </ul>
  </div>
  <div class="container-prose relative z-10 pb-8 text-center text-xs" style="color: var(--color-text-subtle);">
    &copy; {year} {siteIdentity.name} · {siteIdentity.lockupLine}. All rights reserved.
  </div>
</footer>