// ============================================================
// Footer Component
// ============================================================
const Footer = () => {
  const year = new Date().getFullYear();

  const scrollTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });

  return (
    <footer className="py-10 px-6 border-t border-gray-100 dark:border-gray-800" role="contentinfo">
      <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
        {/* Logo / Brand */}
        <div className="flex items-center gap-2">
          <span className="font-mono font-bold text-bordeaux">{'<RW />'}</span>
          <span className="text-sm text-gray-400 dark:text-gray-600">
            &copy; {year} Rob Willemsen. All rights reserved.
          </span>
        </div>

        {/* Nav shortcuts */}
        <nav aria-label="Footer navigation">
          <ul className="flex items-center gap-6 text-sm text-gray-500 dark:text-gray-400" role="list">
            {['About', 'Skills', 'Projects', 'Contact'].map((label) => (
              <li key={label}>
                <a
                  href={`#${label.toLowerCase()}`}
                  onClick={(e) => {
                    e.preventDefault();
                    const el = document.getElementById(label.toLowerCase());
                    if (el) el.scrollIntoView({ behavior: 'smooth' });
                  }}
                  className="hover:text-bordeaux transition-colors"
                >
                  {label}
                </a>
              </li>
            ))}
          </ul>
        </nav>

        {/* Back to top */}
        <button
          id="back-to-top"
          onClick={scrollTop}
          className="w-9 h-9 rounded-full border border-gray-200 dark:border-gray-700 flex items-center justify-center text-gray-400 dark:text-gray-500 hover:border-bordeaux hover:text-bordeaux hover:-translate-y-1 transition-all"
          aria-label="Back to top"
        >
          <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
          </svg>
        </button>
      </div>
    </footer>
  );
};