Footer — mega footer with app badges

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

type Link = { label: string; href: string; isNew?: boolean };

const columns: { title: string; links: Link[] }[] = [
  { title: "Product", links: [{ label: "Booking page", href: "/booking" }, { label: "Calendar", href: "/calendar" }, { label: "Reminders", href: "/reminders" }, { label: "Deposits", href: "/deposits", isNew: true }, { label: "Mobile app", href: "/app" }] },
  { title: "For", links: [{ label: "Salons", href: "/for/salons" }, { label: "Clinics", href: "/for/clinics" }, { label: "Fitness studios", href: "/for/fitness" }, { label: "Tutors", href: "/for/tutors" }, { label: "Consultants", href: "/for/consultants" }] },
  { title: "Resources", links: [{ label: "Help centre", href: "/help" }, { label: "Templates", href: "/templates" }, { label: "Webinars", href: "/webinars" }, { label: "Blog", href: "/blog" }, { label: "Changelog", href: "/changelog" }] },
  { title: "Company", links: [{ label: "About", href: "/about" }, { label: "Careers", href: "/careers" }, { label: "Partners", href: "/partners" }, { label: "Press kit", href: "/press" }, { label: "Contact", href: "/contact" }] },
  { title: "Compare", links: [{ label: "vs. paper diary", href: "/compare/paper" }, { label: "vs. spreadsheets", href: "/compare/spreadsheets" }, { label: "vs. DMs", href: "/compare/dms" }, { label: "Switching guide", href: "/switch" }, { label: "Pricing", href: "/pricing" }] },
];

const stores = [
  { label: "Download on the", name: "App Store", href: "https://apps.apple.com/app/your-app-id" },
  { label: "Get it on", name: "Google Play", href: "https://play.google.com/store/apps/details?id=your.app.id" },
];

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

const legal = [["Terms", "/terms"], ["Privacy", "/privacy"], ["Cookie settings", "/cookies"], ["Security", "/security"], ["Sitemap", "/sitemap"]];

export function FooterMega() {
  return (
    <footer className="border-t border-border bg-bg px-5 pb-7 pt-12 font-sans sm:px-10 sm:pt-16">
      <div className="mx-auto max-w-6xl">
        <div className="grid gap-10 lg:grid-cols-[1.25fr_3.75fr] lg:gap-12">
          <div className="grid content-start justify-items-start gap-4">
            <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="text-sm leading-relaxed text-fg-muted">Booking, reminders and deposits for appointment businesses.</p>
            <div className="grid w-full gap-2.5">
              {stores.map((s) => (
                <a key={s.name} href={s.href} aria-label={s.label + " " + s.name}
                  className="inline-flex h-11 items-center rounded-lg border border-neutral-800 bg-neutral-950 px-4 text-neutral-50 transition hover:bg-neutral-800">
                  <span className="leading-tight"><span className="block text-[10.5px] text-neutral-300">{s.label}</span><span className="block text-[15px] font-semibold">{s.name}</span></span>
                </a>
              ))}
            </div>
          </div>
          <nav aria-label="Footer" className="grid grid-cols-2 gap-x-5 gap-y-8 sm:grid-cols-3 lg:grid-cols-5">
            {columns.map((col) => (
              <div key={col.title}>
                <h2 className="mb-3.5 text-[13px] font-semibold text-fg">{col.title}</h2>
                <ul className="grid gap-2.5">
                  {col.links.map((l) => (
                    <li key={l.label}>
                      <a href={l.href} className="text-[13.5px] text-fg-muted transition hover:text-fg">{l.label}</a>
                      {l.isNew && <span className="ml-1.5 rounded-full bg-primary-soft px-1.5 py-px text-[11px] font-medium text-primary-soft-fg">New</span>}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </nav>
        </div>

        <div className="mt-12 flex flex-wrap items-center justify-between gap-x-6 gap-y-4 border-y border-border py-5">
          <div className="flex flex-wrap items-center gap-3">
            <label className="inline-flex items-center gap-2 text-fg-muted">
              <Globe className="size-4" aria-hidden />
              <span className="sr-only">Region</span>
              <select defaultValue="us" className="h-[34px] rounded border border-border-strong bg-bg px-2.5 text-[13px] text-fg">
                <option value="us">United States · English</option><option value="uk">United Kingdom · English</option><option value="es">España · Español</option>
              </select>
            </label>
            <a href="/status" className="inline-flex items-center gap-2 rounded-full border border-border px-3 py-1 text-[12.5px] text-fg-muted">
              <span className="size-[7px] rounded-full bg-success" aria-hidden />All systems normal
            </a>
          </div>
          <div className="flex gap-1">
            {socials.map(({ label, href, icon: Icon }) => (
              <a key={label} href={href} aria-label={"Slotwise on " + label} className="grid size-8 place-items-center rounded text-fg-subtle transition hover:bg-surface-2 hover:text-fg">
                <Icon className="size-4" aria-hidden />
              </a>
            ))}
          </div>
        </div>

        <div className="flex flex-wrap items-center justify-between gap-3 pt-6 text-[13px] text-fg-subtle">
          <p>© {new Date().getFullYear()} Slotwise Inc. Made in small rooms in four countries.</p>
          <nav aria-label="Legal">
            <ul className="flex flex-wrap gap-x-5 gap-y-2">{legal.map(([label, href]) => <li key={label}><a href={href} className="hover:text-fg">{label}</a></li>)}</ul>
          </nav>
        </div>
      </div>
    </footer>
  );
}