components/Header.js

import Link from 'next/link';

export default function Header() {
  return (
    <header className="border-b border-gray-800 bg-gray-900/50 backdrop-blur-sm sticky top-0 z-50">
      <div className="container mx-auto px-4 h-16 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 bg-gradient-to-br from-brand-500 to-purple-600 rounded-lg flex items-center justify-center font-bold text-white">
            D
          </div>
          <span className="font-semibold text-lg hidden sm:block">DA Downloader</span>
        </div>

        <nav className="flex items-center">
          <Link 
            href="https://huggingface.co/spaces/akhaliq/anycoder" 
            target="_blank"
            rel="noopener noreferrer"
            className="text-sm font-medium text-gray-400 hover:text-brand-500 transition-colors duration-200"
          >
            Built with anycoder
          </Link>
        </nav>
      </div>
    </header>
  );
}