"use client";

import { Brain, Code, GitBranch, Book } from "lucide-react";

export default function Navigation() {
  return (
    <nav 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">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center gap-8">
            <div className="flex items-center gap-2">
              <Brain className="w-8 h-8 text-blue-500" />
              <span className="text-xl font-bold">Visualisable.ai</span>
            </div>
            
            <div className="hidden md:flex gap-6">
              <a href="#explorer" className="flex items-center gap-2 text-gray-300 hover:text-white transition-colors">
                <Code className="w-4 h-4" />
                <span>Explorer</span>
              </a>
              <a href="#lab" className="flex items-center gap-2 text-gray-300 hover:text-white transition-colors">
                <GitBranch className="w-4 h-4" />
                <span>Lab</span>
              </a>
              <a href="#docs" className="flex items-center gap-2 text-gray-300 hover:text-white transition-colors">
                <Book className="w-4 h-4" />
                <span>Docs</span>
              </a>
            </div>
          </div>
          
          <div className="flex items-center gap-4">
            <button className="px-4 py-2 text-sm text-gray-300 hover:text-white transition-colors">
              Sign In
            </button>
            <button className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
              Get Started
            </button>
          </div>
        </div>
      </div>
    </nav>
  );
}