export function TopBar() {
  return (
    <header className="flex items-center justify-between border-b border-border pb-4">
      <div className="flex items-center gap-3">
        <div className="relative w-8 h-8 rounded-[8px] shadow-card"
             style={{ background: 'linear-gradient(135deg, #e28763 0%, #c96442 100%)' }}>
          <div className="absolute inset-[5px] border-[1.5px] rounded-[4px] border-white/60"
               style={{ clipPath: 'polygon(0 0, 100% 0, 100% 70%, 30% 100%, 0 100%)' }} />
        </div>
        <div>
          <div className="font-semibold text-base leading-tight">LandscapeForge</div>
          <div className="text-[0.7rem] uppercase tracking-wider text-subtle mt-[1px]">
            OpenEnv · Hackathon Apr '26
          </div>
        </div>
      </div>
      <nav className="flex items-center gap-1">
        <a
          href="https://huggingface.co/spaces/mnawfal29/landscapeforge"
          target="_blank"
          rel="noreferrer"
          className="text-sm text-muted hover:text-ink px-3 py-1.5 rounded-md
                     hover:bg-surface border border-transparent
                     hover:border-border transition-colors"
        >
          Space
        </a>
      </nav>
    </header>
  )
}