import { Link } from 'react-router';
import { motion } from 'motion/react';

export default function Navbar() {
  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-white/95 border-b border-slate-100">
      <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
        <Link to="/" className="flex items-center gap-2">
          <span className="font-serif text-3xl font-black tracking-[0.05em] bg-gradient-to-r from-[#4F1DA1] to-[#021341] bg-clip-text text-transparent">INFINITH</span>
        </Link>
        <div className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
          <a href="#solution" className="hover:text-primary-900 transition-colors">Solution</a>
          <a href="#modules" className="hover:text-primary-900 transition-colors">Modules</a>
          <a href="#use-cases" className="hover:text-primary-900 transition-colors">Use Cases</a>
        </div>
        <div className="flex items-center gap-4">
          <button className="px-6 py-3 text-sm font-medium text-white rounded-full transition-all shadow-sm hover:shadow-md bg-gradient-to-r from-[#4F1DA1] to-[#021341] hover:opacity-90">
            Login
          </button>
        </div>
      </div>
    </nav>
  );
}