import Image from 'next/image';
import Link from 'next/link';
import React from 'react';

export const Navbar: React.FC = () => {
  return (
    <header className="fixed top-0 left-0 right-0 z-50 flex justify-center p-6 pointer-events-none">
      <nav className="glass-effect px-8 py-4 rounded-full flex items-center gap-8 pointer-events-auto max-w-7xl w-full justify-between">
        <Link href="/" className="flex items-center gap-2 group">
          <div className="relative w-24 h-10 group-hover:scale-110 transition-transform">
            <Image 
              src="/img/logo-white.svg" 
              alt="Cable Creations Logo" 
              fill
              className="object-contain"
            />
          </div>
        </Link>
        
        <div className="hidden md:flex items-center gap-8">
          <Link href="/" className="text-sm font-medium hover:text-primary transition-colors text-white">Home</Link>
        </div>
        
        <Link 
          href="/contact" 
          className="px-6 py-2 rounded-full bg-primary text-white text-sm font-bold hover:shadow-[0_0_15px_rgba(0,113,227,0.4)] transition-all"
        >
          Quote
        </Link>
      </nav>
    </header>
  );
};
