components/Header.js

import Link from 'next/link'

export default function Header() {
  return (
    <header className="sticky top-0 z-50 bg-white/90 backdrop-blur-md shadow-sm border-b border-stone-200">
      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 bg-palestine-red rounded-lg flex items-center justify-center shadow-md">
            <span className="text-white font-serif font-bold text-xl">P</span>
          </div>
          <h1 className="text-xl font-bold text-stone-800 hidden sm:block">
            Palestine Lexicon
          </h1>
        </div>
        <Link 
          href="https://huggingface.co/spaces/akhaliq/anycoder" 
          target="_blank"
          rel="noopener noreferrer"
          className="text-sm font-medium text-palestine-red hover:text-red-800 transition-colors flex items-center gap-1"
        >
          Built with anycoder
          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
          </svg>
        </Link>
      </div>
    </header>
  )
}