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

const Header = () => {
  return (
    <header className="bg-white shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Left side - Logo and main navigation */}
          <div className="flex items-center space-x-8">
            {/* Logo */}
            <Link href="/" className="flex items-center">
              <Image 
                src="/images/logo-splash.svg" 
                alt="3engine Logo" 
                width={100} height={100}
              />
            </Link>

            {/* Main Navigation - Left side */}
            <nav className="hidden md:flex space-x-8">
              <Link href="/" className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium">
                Home
              </Link>
              <Link href="/" className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium">
                Products
              </Link>
              <Link href="/" className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium">
                Solution
              </Link>
            </nav>
          </div>

          {/* Right side navigation */}
          <div className="hidden md:flex items-center space-x-6">
            <Link href="/" className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium">
              Partners
            </Link>
            <a
                href="https://docs.rootxwire.com/index.html"
                target="_blank"
                rel="noopener noreferrer"
                className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium"
            >
                Documentation
            </a>

            <a
                href="https://3engine.rootxwire.com/auth/login/"
                target="_blank"
                rel="noopener noreferrer"
                className="text-gray-700 hover:text-gray-700 px-3 py-2 text-sm font-medium"
            >
                Console
            </a>
            <Link 
              href="/" 
              className="bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
            >
              SignUp
            </Link>
          </div>

          {/* Mobile menu button */}
          <div className="md:hidden">
            <button
              type="button"
              className="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
              aria-expanded="false"
            >
              <span className="sr-only">Open main menu</span>
              <svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      {/* Mobile menu - you can expand this later */}
      <div className="md:hidden hidden">
        <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
          <Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
            Home
          </Link>
          <Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
            Products
          </Link>
          <Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
            Solution
          </Link>
          <Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
            Partners
          </Link>
          <Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
            Documentation
          </Link>
          <Link href="/" className="text-gray-700 hover:text-gray-700 block px-3 py-2 text-sm font-medium">
            Console
          </Link>
          <Link href="/" className="bg-blue-600 text-white hover:bg-blue-700 block px-3 py-2 rounded-md text-sm font-medium mx-3 mt-2">
            SignUp
          </Link>
        </div>
      </div>
    </header>
  );
};

export default Header;