since3-website/modules/shared/ui/components/site-footer.tsx

import Image from "next/image"
import Link from "next/link"
import { ArrowUp } from "lucide-react"

import { legalNav, mainNav, regions, site } from "@/modules/shared/config/site"

import { LiveClock } from "./live-clock"
import { Magnetic } from "./magnetic"

export function SiteFooter() {
  const year = new Date().getFullYear()

  return (
    <footer data-theme="dark" className="relative overflow-clip pt-24">
      <div className="container-site grid gap-12 font-mono text-label md:grid-cols-12">
        <div className="flex flex-col gap-2 md:col-span-4">
          <p className="text-fg-muted">Kontakt</p>
          <a href={`mailto:${site.email}`} className="w-fit hover:underline">
            {site.email}
          </a>
          <a href={site.phoneHref} className="w-fit hover:underline">
            {site.phone}
          </a>
          <p className="mt-4 text-fg-muted">
            {site.city} <LiveClock className="text-fg tabular-nums" />
          </p>
        </div>

        <nav aria-label="Seitenbereiche" className="md:col-span-2">
          <p className="text-fg-muted">Seite</p>
          <ul className="mt-2 flex flex-col gap-2">
            {mainNav.map((item) => (
              <li key={item.href}>
                <a href={item.href} className="hover:underline">
                  {item.label}
                </a>
              </li>
            ))}
          </ul>
        </nav>

        <div className="md:col-span-4">
          <p className="text-fg-muted">Für Unternehmen in</p>
          <ul className="mt-2 flex flex-wrap gap-x-4 gap-y-2">
            {regions.map((region) => (
              <li key={region}>{region}</li>
            ))}
          </ul>
        </div>

        <div className="flex md:col-span-2 md:justify-end">
          <Magnetic strength={0.4}>
            <a
              href="#top"
              className="grid size-20 place-items-center rounded-full border border-line transition-colors duration-300 hover:bg-fg hover:text-bg"
            >
              <ArrowUp className="size-5" aria-hidden />
              <span className="sr-only">Nach oben</span>
            </a>
          </Magnetic>
        </div>
      </div>

      <div className="container-site mt-20 flex flex-col gap-4 border-t border-line pt-6 font-mono text-label text-fg-muted sm:flex-row sm:justify-between">
        <p>© {year} since3. Gebaut in {site.city}.</p>
        <nav aria-label="Rechtliches">
          <ul className="flex flex-wrap gap-x-6 gap-y-2">
            {legalNav.map((item) => (
              <li key={item.href}>
                <Link href={item.href} prefetch={false} className="hover:text-fg hover:underline">
                  {item.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </div>

      {/* The wordmark as the last, full-width statement of the page */}
      <div className="reveal container-site pt-12 pb-6">
        <Image
          src="/pictures/since3-logo-weiss.svg"
          alt=""
          width={1617}
          height={332}
          className="h-auto w-full"
        />
      </div>
    </footer>
  )
}