import Link from "next/link";
import { Coins } from "lucide-react";

export default function Footer() {
  return (
    <footer className="border-t border-line bg-surface/60">
      <div className="mx-auto flex w-full max-w-6xl flex-col items-center justify-between gap-4 px-5 py-8 text-sm text-ink-soft sm:flex-row sm:px-8">
        <div className="flex items-center gap-2">
          <Coins className="h-4 w-4 text-[#0d7a57]" />
          <span className="font-display font-semibold text-ink">
            Entscheid<span className="italic text-[#0d7a57]">omat</span>
          </span>
          <span aria-hidden>·</span>
          <span>© {new Date().getFullYear()}</span>
        </div>
        <p>
          Gebaut für alle, die sich (manchmal) nicht entscheiden können.
        </p>
        <nav aria-label="Rechtliches" className="flex items-center gap-4">
          <Link href="/impressum" className="transition-colors hover:text-[#0d7a57]">
            Impressum
          </Link>
          <Link href="/datenschutz" className="transition-colors hover:text-[#0d7a57]">
            Datenschutz
          </Link>
        </nav>
      </div>
    </footer>
  );
}