components/Header.jsx

import Link from 'next/link';

export default function Header() {
  return (
    <header className="bg-marine-blue text-white shadow-lg">
      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
        <Link href="/" className="text-2xl font-bold flex items-center">
          <svg className="w-8 h-8 mr-2 text-marine-gold" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2L3 7v11h14V7l-7-5z"/>
          </svg>
          SABMARINE
        </Link>
        <nav className="hidden md:flex space-x-6">
          <Link href="/" className="hover:text-marine-gold transition-colors">Home</Link>
          <Link href="/services" className="hover:text-marine-gold transition-colors">Services</Link>
          <Link href="/about" className="hover:text-marine-gold transition-colors">About</Link>
          <Link href="/contact" className="hover:text-marine-gold transition-colors">Contact</Link>
        </nav>
        <div className="text-sm">
          <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" className="hover:text-marine-gold transition-colors">
            Built with anycoder
          </a>
        </div>
      </div>
    </header>
  );
}