got-gaming/components/layout/Footer.tsx

"use client";

import Link from "next/link";

export default function Footer() {
  return (
    <footer
      className="w-full py-6 px-4 sm:px-8 border-t relative z-10"
      style={{
        backgroundColor: "var(--background)",
        borderColor: "color-mix(in srgb, var(--gray-800) 30%, transparent)",
      }}
    >
      <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
        <div
          className="text-xs text-center sm:text-left"
          style={{ color: "var(--muted-foreground)" }}
        >
          © {new Date().getFullYear()} Game of Tech - Peaksys
        </div>
        <div className="flex items-center gap-6">
          <Link
            href="/style-guide"
            className="text-xs uppercase tracking-widest transition"
            style={{ color: "var(--muted-foreground)" }}
            onMouseEnter={(e) =>
              (e.currentTarget.style.color = "var(--accent-color)")
            }
            onMouseLeave={(e) =>
              (e.currentTarget.style.color = "var(--muted-foreground)")
            }
          >
            Style Guide
          </Link>
        </div>
      </div>
    </footer>
  );
}