import Link from "next/link";

import { Wordmark } from "@/components/wordmark";

export function SiteFooter() {

  return (

    <footer className="mt-24 flex flex-col gap-4 border-t border-[var(--line)] pt-8 sm:flex-row sm:items-center sm:justify-between">

      <Link href="/" className="text-xl">

        <Wordmark />

      </Link>

      <nav className="flex flex-wrap gap-x-6 gap-y-2">

        <Link href="/" className="kicker text-bone hover:text-gold">

          Cities

        </Link>

        <Link href="/tickets" className="kicker text-bone hover:text-gold">

          My Tickets

        </Link>

        <Link href="/about" className="kicker text-bone hover:text-gold">

          About

        </Link>

      </nav>

      <span className="kicker text-ash">Chicago Stepping. Your City.</span>

    </footer>

  );

}