components/Navbar.js

import { useState } from 'react';
import { Menu, X, Sparkles } from 'lucide-react';

export default function Navbar() {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-surface-950/80 backdrop-blur-xl border-b border-white/5">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-400 to-pink-500 flex items-center justify-center">
              <Sparkles className="w-4 h-4 text-white" />
            </div>
            <span className="text-xl font-bold tracking-tight">lovable</span>
          </div>

          <div className="hidden md:flex items-center gap-8">
            <a href="#features" className="text-sm text-surface-300 hover:text-white transition-colors">Features</a>
            <a href="#demo" className="text-sm text-surface-300 hover:text-white transition-colors">Demo</a>
            <a href="#how-it-works" className="text-sm text-surface-300 hover:text-white transition-colors">How it works</a>
            <a href="#pricing" className="text-sm text-surface-300 hover:text-white transition-colors">Pricing</a>
          </div>

          <div className="hidden md:flex items-center gap-4">
            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" className="text-sm text-surface-300 hover:text-white transition-colors">
              Built with anycoder
            </a>
            <button className="px-4 py-2 text-sm font-medium bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 rounded-lg transition-all duration-200 shadow-lg shadow-brand-500/25">
              Start Building
            </button>
          </div>

          <button
            className="md:hidden text-surface-300 hover:text-white"
            onClick={() => setMobileOpen(!mobileOpen)}
          >
            {mobileOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>
      </div>

      {mobileOpen && (
        <div className="md:hidden bg-surface-950/95 backdrop-blur-xl border-b border-white/5 animate-slide-up">
          <div className="px-4 py-4 space-y-3">
            <a href="#features" className="block text-sm text-surface-300 hover:text-white py-2" onClick={() => setMobileOpen(false)}>Features</a>
            <a href="#demo" className="block text-sm text-surface-300 hover:text-white py-2" onClick={() => setMobileOpen(false)}>Demo</a>
            <a href="#how-it-works" className="block text-sm text-surface-300 hover:text-white py-2" onClick={() => setMobileOpen(false)}>How it works</a>
            <a href="#pricing" className="block text-sm text-surface-300 hover:text-white py-2" onClick={() => setMobileOpen(false)}>Pricing</a>
            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" className="block text-sm text-brand-400 hover:text-brand-300 py-2">
              Built with anycoder
            </a>
            <button className="w-full px-4 py-2 text-sm font-medium bg-gradient-to-r from-brand-500 to-brand-600 rounded-lg">
              Start Building
            </button>
          </div>
        </div>
      )}
    </nav>
  );
}