---
import { nav, site } from '../config/site';
import Icon from './Icon.astro';

// Build-time copyright year (static export).
const year = new Date().getFullYear();
---

<footer class="mt-auto bg-navy text-slate-300">
  <div class="container-px grid gap-10 py-14 sm:grid-cols-2 lg:grid-cols-4">
    <div class="lg:col-span-2">
      <img src="/workweb-logo-reversed.png" alt="WorkWeb — Recruitment Specialists" width="1176" height="736" class="h-20 w-auto" />
      <p class="mt-4 max-w-sm text-sm text-slate-400">
        Recruitment &amp; selection specialists with almost 30 years of expertise and a national South African footprint.
      </p>
      <div class="mt-5 flex flex-wrap gap-2">
        <span class="inline-flex items-center gap-1.5 rounded-full bg-white/5 px-3 py-1 text-xs font-semibold text-white ring-1 ring-white/15">
          <Icon name="venus" class="h-4 w-4 text-green-bright" />{site.credentials.ownership}
        </span>
        <span class="inline-flex items-center gap-1.5 rounded-full bg-white/5 px-3 py-1 text-xs font-semibold text-white ring-1 ring-white/15">
          <Icon name="award" class="h-4 w-4 text-green-bright" />{site.credentials.bee}
        </span>
      </div>
    </div>

    <div>
      <h2 class="text-sm font-semibold text-white">Explore</h2>
      <ul class="mt-3 space-y-2 text-sm">
        {nav.map((item) => (
          <li><a href={item.href} class="text-slate-400 hover:text-white">{item.label}</a></li>
        ))}
      </ul>
    </div>

    <div>
      <h2 class="text-sm font-semibold text-white">Get in touch</h2>
      <ul class="mt-3 space-y-2 text-sm text-slate-400">
        <li class="flex items-center gap-2"><Icon name="mail" class="h-4 w-4 text-green-bright" /><a href={`mailto:${site.email}`} class="hover:text-white">{site.email}</a></li>
        <li class="flex items-center gap-2"><Icon name="phone" class="h-4 w-4 text-green-bright" /><a href={site.phoneHref} class="hover:text-white">{site.phone}</a></li>
        <li class="flex items-center gap-2"><Icon name="map-pin" class="h-4 w-4 text-green-bright" />{site.location}</li>
      </ul>
      <p class="mt-4 text-xs text-slate-400">
        Software solutions in partnership with <span class="text-slate-300">{site.partner.name}</span> ({site.partner.parent}).
      </p>
    </div>
  </div>

  <div class="border-t border-white/10">
    <div class="container-px flex flex-col items-center justify-between gap-2 py-5 text-xs text-slate-400 sm:flex-row">
      <p>© {year} {site.legalName}. All rights reserved.</p>
      <a href="/privacy" class="hover:text-white">Privacy &amp; POPIA</a>
    </div>
  </div>
</footer>