import React, { useState } from "react";
import logo from "../assets/logo.png";
import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";
import { Link, NavLink } from "react-router";

const Navbar: React.FC = () => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const toggleMobileMenu = () => {
    setMobileMenuOpen(!mobileMenuOpen);
  };

  return (
    <nav className="relative after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10">
      <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8 lg:pt-5">
        <div className="relative flex h-16 items-center justify-center sm:justify-between">
          <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
            <button
              type="button"
              onClick={toggleMobileMenu}
              aria-expanded={mobileMenuOpen}
              className="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-white/5 hover:text-white focus:outline-2 focus:-outline-offset-1 focus:outline-indigo-500"
            >
              <span className="absolute -inset-0.5"></span>
              <span className="sr-only">{mobileMenuOpen ? 'Close main menu' : 'Open main menu'}</span>
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                data-slot="icon"
                aria-hidden="true"
                className={`size-6 ${mobileMenuOpen ? 'hidden' : 'block'}`}
              >
                <path
                  d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                data-slot="icon"
                aria-hidden="true"
                className={`size-6 ${mobileMenuOpen ? 'block' : 'hidden'}`}
              >
                <path
                  d="M6 18 18 6M6 6l12 12"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </button>
          </div>
          <img className="h-9 w-auto" src={logo} alt="Visworks365" />
          <div className="hidden sm:ml-6 sm:block">
            <div className="flex space-x-4">
              <NavLink className="px-3 py-2 text-md font-medium" to="/">
                Home
              </NavLink>
              <NavLink className="px-3 py-2 text-md font-medium" to="/services">
                Services
              </NavLink>
              <NavLink className="px-3 py-2 text-md font-medium" to="/projects">
                Projects
              </NavLink>
              <NavLink className="px-3 py-2 text-md font-medium" to="/about-us">
                About Us
              </NavLink>
              <NavLink className="px-3 py-2 text-md font-medium" to="/blog">
                Blog
              </NavLink>
            </div>
          </div>
          <div className="absolute inset-y-0 right-0 items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0 hidden lg:flex">
            <a
              href="#"
              title="Facebook Link"
              className="relative rounded-full ml-2 p-2 border bg-white hover:bg-red-700 focus:outline-2 focus:outline-offset-2"
            >
              <Facebook size={16} />
            </a>
            <a
              href="#"
              title="Twitter Link"
              className="relative rounded-full ml-2 p-2 border bg-white hover:bg-red-700 focus:outline-2 focus:outline-offset-2"
            >
              <Twitter size={16} />
            </a>
            <a
              href="#"
              title="Instagram Link"
              className="relative rounded-full ml-2 p-2 border bg-white hover:bg-red-700 focus:outline-2 focus:outline-offset-2"
            >
              <Instagram size={16} />
            </a>
            <a
              href="#"
              title="LinkedIn Link"
              className="relative rounded-full ml-2 p-2 border bg-white hover:bg-red-700 focus:outline-2 focus:outline-offset-2"
            >
              <Linkedin size={16} />
            </a>
          </div>
        </div>
      </div>

      {mobileMenuOpen && (
        <div id="mobile-menu" className="fixed inset-0 z-50 sm:hidden">
          {/* Full Screen Menu */}
          <div className="fixed inset-0 bg-gradient-to-br from-red-700 via-red-600 to-red-800 flex flex-col">
            {/* Header with close button */}
            <div className="flex items-center justify-between px-4 py-4 bg-white border-b border-gray/20">
              <img className="h-9 w-auto" src={logo} alt="Visworks365" />
              <button
                onClick={toggleMobileMenu}
                className="p-2 rounded-md text-red-700 hover:bg-red-50"
              >
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  className="size-6"
                >
                  <path
                    d="M6 18 18 6M6 6l12 12"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </button>
            </div>

            {/* Navigation Links */}
            <div className="flex-1 flex flex-col justify-center px-8 space-y-2">
              <NavLink
                to="/"
                onClick={toggleMobileMenu}
                className={({ isActive }) =>
                  `text-2xl font-semibold py-4 px-4 rounded-lg transition-all ${
                    isActive
                      ? 'bg-white text-red-700 shadow-lg'
                      : 'text-white hover:bg-white/10 hover:pl-6'
                  }`
                }
              >
                Home
              </NavLink>
              <NavLink
                to="/services"
                onClick={toggleMobileMenu}
                className={({ isActive }) =>
                  `text-2xl font-semibold py-4 px-4 rounded-lg transition-all ${
                    isActive
                      ? 'bg-white text-red-700 shadow-lg'
                      : 'text-white hover:bg-white/10 hover:pl-6'
                  }`
                }
              >
                Services
              </NavLink>
              <NavLink
                to="/projects"
                onClick={toggleMobileMenu}
                className={({ isActive }) =>
                  `text-2xl font-semibold py-4 px-4 rounded-lg transition-all ${
                    isActive
                      ? 'bg-white text-red-700 shadow-lg'
                      : 'text-white hover:bg-white/10 hover:pl-6'
                  }`
                }
              >
                Projects
              </NavLink>
              <NavLink
                to="/about-us"
                onClick={toggleMobileMenu}
                className={({ isActive }) =>
                  `text-2xl font-semibold py-4 px-4 rounded-lg transition-all ${
                    isActive
                      ? 'bg-white text-red-700 shadow-lg'
                      : 'text-white hover:bg-white/10 hover:pl-6'
                  }`
                }
              >
                About Us
              </NavLink>
              <NavLink
                to="/blog"
                onClick={toggleMobileMenu}
                className={({ isActive }) =>
                  `text-2xl font-semibold py-4 px-4 rounded-lg transition-all ${
                    isActive
                      ? 'bg-white text-red-700 shadow-lg'
                      : 'text-white hover:bg-white/10 hover:pl-6'
                  }`
                }
              >
                Blog
              </NavLink>
            </div>

            {/* Social Icons */}
            <div className="px-8 py-6 border-t border-white/20">
              <div className="flex justify-center gap-4">
                <a
                  href="#"
                  title="Facebook Link"
                  className="p-3 rounded-full bg-white text-red-700 hover:bg-red-900 hover:text-white transition-colors"
                >
                  <Facebook size={20} />
                </a>
                <a
                  href="#"
                  title="Twitter Link"
                  className="p-3 rounded-full bg-white text-red-700 hover:bg-red-900 hover:text-white transition-colors"
                >
                  <Twitter size={20} />
                </a>
                <a
                  href="#"
                  title="Instagram Link"
                  className="p-3 rounded-full bg-white text-red-700 hover:bg-red-900 hover:text-white transition-colors"
                >
                  <Instagram size={20} />
                </a>
                <a
                  href="#"
                  title="LinkedIn Link"
                  className="p-3 rounded-full bg-white text-red-700 hover:bg-red-900 hover:text-white transition-colors"
                >
                  <Linkedin size={20} />
                </a>
              </div>
            </div>
          </div>
        </div>
      )}
    </nav>
  );
};

export { Navbar };
