Footer — centred logo and socials

import { Instagram, Linkedin, Twitter, Youtube } from "lucide-react";

const links = [["Features", "/features"], ["Pricing", "/pricing"], ["Customers", "/customers"], ["Help", "/help"], ["Careers", "/careers"], ["Contact", "/contact"]];

const socials = [
  { label: "Instagram", href: "#", icon: Instagram },
  { label: "X", href: "#", icon: Twitter },
  { label: "LinkedIn", href: "#", icon: Linkedin },
  { label: "YouTube", href: "#", icon: Youtube },
];

export function FooterCentered() {
  return (
    <footer className="border-t border-border bg-surface px-5 pb-7 pt-12 font-sans sm:px-10 sm:pt-16">
      <div className="mx-auto grid max-w-6xl justify-items-center gap-5 text-center">
        <a href="/" className="inline-flex items-center gap-2 text-base font-semibold tracking-tight text-fg">
          <span className="size-6 rounded-sm bg-primary" aria-hidden />Slotwise
        </a>
        <p className="max-w-[44ch] text-sm leading-relaxed text-fg-muted">Online booking for salons, studios and clinics. Clients pick a time, you get on with your day.</p>
        <nav aria-label="Footer">
          <ul className="flex flex-wrap justify-center gap-x-7 gap-y-2.5">
            {links.map(([label, href]) => (
              <li key={label}><a href={href} className="text-[13.5px] text-fg-muted transition hover:text-fg">{label}</a></li>
            ))}
          </ul>
        </nav>
        <div className="flex gap-2">
          {socials.map(({ label, href, icon: Icon }) => (
            <a key={label} href={href} aria-label={"Slotwise on " + label}
              className="grid size-10 place-items-center rounded-full border border-border text-fg-subtle transition hover:bg-surface-2 hover:text-fg">
              <Icon className="size-[17px]" aria-hidden />
            </a>
          ))}
        </div>
        <p className="mt-3 w-full border-t border-border pt-6 text-[13px] text-fg-subtle">
          © {new Date().getFullYear()} Slotwise · <a href="/privacy" className="hover:text-fg">Privacy</a> · <a href="/terms" className="hover:text-fg">Terms</a>
        </p>
      </div>
    </footer>
  );
}