import { Link } from 'react-router-dom';
import { Feather } from 'lucide-react';

const Navbar = () => {
  return (
    <header className="border-b bg-cream-50">
      <div className="container mx-auto px-4">
        <div className="flex h-16 items-center justify-between">
          <Link to="/" className="flex items-center space-x-2">
            <Feather className="h-6 w-6 text-sage-700" />
            <span className="font-cormorant text-xl text-sage-900">Austen's Wedding Guide</span>
          </Link>

          <nav className="flex items-center space-x-6">
            <Link to="/blogs" className="text-sage-700 hover:text-sage-900 transition-colors">
              Character Blogs
            </Link>
            <Link to="/quiz" className="text-sage-700 hover:text-sage-900 transition-colors">
              Bride Quiz
            </Link>
            <Link to="/dear-jane" className="text-sage-700 hover:text-sage-900 transition-colors">
              Dear Jane
            </Link>
            <Link to="/vendors" className="text-sage-700 hover:text-sage-900 transition-colors">
              Vendors
            </Link>
            <Link to="/success-stories" className="text-sage-700 hover:text-sage-900 transition-colors">
              Success Stories
            </Link>
            <Link to="/market-calculator" className="text-sage-700 hover:text-sage-900 transition-colors">
              Market Value
            </Link>
            <Link
              to="/analysis"
              className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
            >
              Literary Analysis
            </Link>
          </nav>
        </div>
      </div>
    </header>
  );
}

export default Navbar;