import { Link } from 'react-router-dom';

const footerLinks = [
  { label: 'Support', to: '/support' },
  { label: 'Leaderboard', to: '/leaderboard' },
];

export function Footer() {
  return (
    <footer className="relative border-t border-[#1a1a2a] bg-bg-base">
      <div className="absolute top-0 left-0 right-0 h-px" style={{ background: 'linear-gradient(90deg, transparent 10%, #ff6b2c20 50%, transparent 90%)' }} />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <div className="flex flex-col md:flex-row items-center justify-between gap-6">
          <Link to="/" className="inline-block">
            <span className="text-lg font-black tracking-tight text-[#f0f0f5] font-display">
              tapper<span className="text-[#ff6b2c]">.</span>
            </span>
          </Link>

          <div className="flex items-center gap-6">
            {footerLinks.map((link) => (
              <Link key={link.to} to={link.to} className="text-sm text-[#5a5a72] hover:text-[#a0a0b8] transition-colors font-medium">
                {link.label}
              </Link>
            ))}
          </div>

          <p className="text-xs text-[#3a3a4e] font-medium">
            &copy; {new Date().getFullYear()} tapper. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  );
}
