Sitemap Style Footer

export default function FooterSitemap() {
  const sections = [
    {
      heading: "Products",
      links: ["Workspace", "Automations", "Reports", "Templates", "Mobile app", "Desktop app"],
    },
    {
      heading: "Solutions",
      links: ["For startups", "For agencies", "For enterprise", "For education", "For nonprofits"],
    },
    {
      heading: "Resources",
      links: ["Documentation", "API reference", "Guides", "Webinars", "Case studies", "Release notes"],
    },
    {
      heading: "Company",
      links: ["About", "Careers", "Blog", "Press", "Investors", "Contact"],
    },
    {
      heading: "Support",
      links: ["Help centre", "Community", "System status", "Report a bug", "Accessibility"],
    },
  ];

  return (
    <section className="bg-slate-50 px-6 py-16 dark:bg-zinc-950 md:py-24">
      <footer className="mx-auto max-w-6xl">
        <div className="flex flex-col gap-3 border-b border-slate-200 pb-10 dark:border-zinc-800 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <a href="#" className="inline-flex items-center gap-2" aria-label="Meridian home">
              <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-900 text-white dark:bg-white dark:text-slate-900">
                <svg viewBox="0 0 24 24" fill="none" className="h-5 w-5" aria-hidden="true">
                  <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6" />
                  <path d="M3 12h18M12 3c2.5 2.4 3.8 5.6 3.8 9s-1.3 6.6-3.8 9c-2.5-2.4-3.8-5.6-3.8-9S9.5 5.4 12 3Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
                </svg>
              </span>
              <span className="text-lg font-bold tracking-tight text-slate-900 dark:text-white">
                Meridian
              </span>
            </a>
            <p className="mt-3 max-w-md text-sm leading-relaxed text-slate-600 dark:text-zinc-400">
              Everything your team needs, mapped in one place. Browse the full site index below.
            </p>
          </div>
          <a
            href="#"
            className="inline-flex items-center gap-2 self-start rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-900 transition hover:bg-slate-100 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white dark:hover:bg-zinc-800 sm:self-auto"
          >
            Contact sales
            <svg viewBox="0 0 24 24" fill="none" className="h-4 w-4" aria-hidden="true">
              <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>

        <div className="mt-10 grid grid-cols-2 gap-x-8 gap-y-8 md:grid-cols-3 lg:grid-cols-5">
          {sections.map((section) => (
            <div key={section.heading}>
              <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400 dark:text-zinc-500">
                {section.heading}
              </h3>
              <ul className="mt-4 space-y-3">
                {section.links.map((link) => (
                  <li key={link}>
                    <a
                      href="#"
                      className="text-sm text-slate-600 transition hover:text-slate-900 hover:underline dark:text-zinc-400 dark:hover:text-white"
                    >
                      {link}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-12 flex flex-col gap-4 border-t border-slate-200 pt-8 dark:border-zinc-800 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-sm text-slate-500 dark:text-zinc-500">
            &copy; {new Date().getFullYear()} Meridian Software Inc.
          </p>
          <nav aria-label="Legal">
            <ul className="flex flex-wrap items-center gap-x-6 gap-y-2">
              {["Privacy policy", "Terms of service", "Sitemap"].map((link) => (
                <li key={link}>
                  <a
                    href="#"
                    className="text-sm text-slate-500 transition hover:text-slate-900 dark:text-zinc-500 dark:hover:text-white"
                  >
                    {link}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
        </div>
      </footer>
    </section>
  );
}