// components/Navbar.tsx
'use client';

import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';

const navigation = [
  { name: 'Solution', href: '/solution' },
  { name: 'Service', href: '/service' },
  { name: 'Tarifs', href: '/tarifs' },
];

export default function Navbar() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const pathname = usePathname();

  return (
    <header className="sticky top-0 z-50 w-full bg-white/80 backdrop-blur-md border-b border-gray-200">
      <nav className="mx-auto flex max-w-7xl items-center justify-between p-4 lg:px-8" aria-label="Global">
        {/* Logo */}
        <div className="flex lg:flex-1">
          <Link href="/" className="flex items-center gap-2 text-xl font-semibold text-gray-900 hover:text-gray-600 transition-colors">
            <Image 
              src="/logo.png" 
              alt="Optimizi Tech Logo" 
              width={32} 
              height={32}
              className="w-8 h-8 object-contain"
            />
            Optimizi Tech
          </Link>
        </div>

        {/* Desktop navigation */}
        <div className="hidden lg:flex lg:gap-x-8">
          {navigation.map((item) => {
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.name}
                href={item.href}
                className={`text-sm font-medium transition-colors hover:text-gray-900 ${
                  isActive ? 'text-gray-900' : 'text-gray-600'
                }`}
              >
                {item.name}
              </Link>
            );
          })}
        </div>

        {/* Desktop buttons */}
        <div className="hidden lg:flex lg:flex-1 lg:justify-end lg:gap-x-4">
          {/* ERP button */}
          <Link
            href="https://erp.optimizitech.com/"
            target="_blank"
            rel="noopener noreferrer"
            className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-300 transition-colors"
          >
            ERP
          </Link>
          {/* Demo button */}
          <Link
            href="/demande-demo"
            className="rounded-md bg-black px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black transition-colors"
          >
            Demander une démo
          </Link>
        </div>

        {/* Mobile menu button */}
        <div className="flex lg:hidden">
          <button
            type="button"
            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            <span className="sr-only">Toggle menu</span>
            {mobileMenuOpen ? (
              <XMarkIcon className="h-6 w-6" aria-hidden="true" />
            ) : (
              <Bars3Icon className="h-6 w-6" aria-hidden="true" />
            )}
          </button>
        </div>
      </nav>

      {/* Mobile menu */}
      {mobileMenuOpen && (
        <div className="lg:hidden">
          <div className="space-y-1 px-4 pb-3 pt-2">
            {navigation.map((item) => {
              const isActive = pathname === item.href;
              return (
                <Link
                  key={item.name}
                  href={item.href}
                  className={`block rounded-md px-3 py-2 text-base font-medium transition-colors ${
                    isActive
                      ? 'bg-gray-100 text-gray-900'
                      : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
                  }`}
                  onClick={() => setMobileMenuOpen(false)}
                >
                  {item.name}
                </Link>
              );
            })}
            {/* Mobile buttons */}
            <div className="space-y-2 pt-4">
              <Link
                href="https://erp.optimizitech.com/"
                target="_blank"
                rel="noopener noreferrer"
                className="block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-center text-base font-semibold text-gray-700 shadow-sm hover:bg-gray-50 transition-colors"
                onClick={() => setMobileMenuOpen(false)}
              >
                ERP
              </Link>
              <Link
                href="/demande-demo"
                className="block w-full rounded-md bg-black px-3 py-2 text-center text-base font-semibold text-white shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black transition-colors"
                onClick={() => setMobileMenuOpen(false)}
              >
                Demander une démo
              </Link>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}