
'use client';


import Link from "next/link";
import Image from "next/image";
import { useState } from "react";
import { getAppUrl } from "../lib/utils";

const MOBILE_NUMBER = process.env.NEXT_PUBLIC_MOBILE_NUMBER || "+94 11 737 2600";
const APP_URL = getAppUrl();

interface NavbarProps {
  hideNavLinks?: boolean;
}

export default function Navbar({ hideNavLinks = false }: NavbarProps) {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  return (
    <>
      <style jsx>{`
        @media (min-width: 1024px) and (max-width: 1200px) {
          .navbar-logo-wrapper {
            width: 130px !important;
            height: 130px !important;
          }
          .navbar-logo {
            width: 130px !important;
            height: 130px !important;
          }
          :global(.nav-links) {
            gap: 16px !important;
          }
          :global(.nav-link) {
            font-size: 13px !important;
            padding-bottom: 4px !important;
          }
          :global(.auth-buttons) {
            gap: 25px !important;
          }
          :global(.phone-link) {
            width: 130px !important;
            height: 32px !important;
            padding: 0 4px !important;
            gap: 3px !important;
            margin-left: -100px !important;
            margin-right: 0px !important;
          }
          :global(.phone-icon) {
            width: 14px !important;
            height: 14px !important;
          }
          :global(.phone-text) {
            font-size: 10px !important;
          }
          :global(.login-link) {
            font-size: 13px !important;
          }
          :global(.get-started-btn) {
            font-size: 13px !important;
            padding: 0 16px !important;
            height: 32px !important;
            width: auto !important;
            margin-left: -8px !important;
          }
        }
        
        @media (max-width: 450px) {
          .navbar-logo-wrapper {
            width: 100px !important;
            height: 40px !important;
            margin-left: -16px !important;
          }
          .navbar-logo {
            width: 100px !important;
            height: 40px !important;
            max-width: 100px !important;
            max-height: 40px !important;
            margin-left: -15px !important;
          }
          .mobile-right-section {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
          }
          .mobile-menu-button {
            width: 24px !important;
            height: 24px !important;
          }
          .mobile-menu-bar {
            width: 20px !important;
            height: 2px !important;
          }
          .mobile-phone-button {
            display: flex !important;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border: 1px solid #B6BCCD;
            border-radius: 50px;
            background: white;
            font-size: 12px !important;
            font-weight: 600;
            color: #000;
            text-decoration: none;
            white-space: nowrap;
          }
          .mobile-phone-icon {
            width: 14px !important;
            height: 14px !important;
          }
        }
        @media (min-width: 451px) and (max-width: 1023px) {
          .mobile-right-section {
            display: flex !important;
            align-items: center !important;
            gap: 16px !important;
          }
          .mobile-phone-button {
            display: flex !important;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border: 1px solid #B6BCCD;
            border-radius: 50px;
            background: white;
            font-size: 14px !important;
            font-weight: 600;
            color: #000;
            text-decoration: none;
            white-space: nowrap;
          }
          .mobile-phone-icon {
            width: 16px !important;
            height: 16px !important;
          }
        }
        .mobile-phone-button {
          display: none;
        }
        .mobile-right-section {
          display: none;
        }
        @media (max-width: 1023px) {
          .mobile-right-section {
            display: flex !important;
            align-items: center;
          }
        }
        @media (max-width: 1024px) {
          :global(.desktop-phone) {
            display: none !important;
          }
        }
      `}</style>
      <nav className="w-full h-30 flex items-center justify-center">
      <div className="w-full max-w-364.25 flex items-center justify-between px-8 lg:px-8 md:px-6 sm:px-4">
        {/* Logo */}
        <div className="navbar-logo-wrapper w-45 h-50 flex items-center justify-center pt-2 lg:w-45 ">
        <Link href="/">
          <Image
            src="/images/Uniwor-Logo.png"
            alt="Uniwor Logo"
            width={200}
            height={200}
            className="navbar-logo object-contain pt-2 -mt-6.25 lg:w-50 lg:h-50 "
            priority
          />
        </Link>
      </div>

    
      {/* Navigation Links - Desktop */}
      {!hideNavLinks && (
        <div className="nav-links hidden lg:flex items-center gap-11">
          <Link 
            href="#features" 
            style={{ color: '#000000' }}
            className="nav-link text-[16px] font-semibold relative pb-2 border-b border-[#0077B6] transition-all"
          >
            Features
          </Link>
          <Link 
            href="#useuniwor" 
            style={{ color: 'rgba(0, 0, 0, 0.6)' }}
            className="nav-link text-[16px] font-semibold relative pb-2 border-b border-transparent hover:border-[#0077B6] transition-all"
          >
            Industries
          </Link>
          <Link 
            href="#pricing" 
            style={{ color: 'rgba(0, 0, 0, 0.6)' }}
            className="nav-link text-[16px] font-semibold relative pb-2 border-b border-transparent hover:border-[#0077B6] transition-all"
          >
            Pricing
          </Link>
          <Link 
            href="#faq" 
            style={{ color: 'rgba(0, 0, 0, 0.6)' }}
            className="nav-link text-[16px] font-semibold relative pb-2 border-b border-transparent hover:border-[#0077B6] transition-all"
          >
            FAQ
          </Link>
        </div>
      )}

      {/* Auth Buttons - Desktop */}
      <div className="auth-buttons hidden lg:flex items-center gap-10 h-9.75">
        <a 
          href={`tel:${MOBILE_NUMBER}`}
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '8px',
            padding: '0 20px',
            width: '170px',
            height: '39px',
            border: '1px solid #B6BCCD',
            borderRadius: '50px',
            textDecoration: 'none',
            transition: 'all 0.3s ease',
            whiteSpace: 'nowrap',
            marginLeft: '-210px',
            marginRight: '-20px'
          }}
        >
          <svg className="phone-icon" width="18" height="18" viewBox="0 0 24 24" fill="none">
            <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="#0A1931"/>
          </svg>
          <span className="phone-text" style={{ fontSize: '14px', fontWeight: 'bold', color: '#0A1931', whiteSpace: 'nowrap' }}>{MOBILE_NUMBER}</span>
        </a>

        <Link 
          href={`${APP_URL}/login`} 
          className="login-link text-[16px] font-semibold text-[#0077B6] hover:text-accent transition-colors"
        >
          Log In
        </Link>
        <Link 
          href={`${APP_URL}/register`}
          className="get-started-btn px-8 py-2 w-37.75 bg-[#0077B6] text-white rounded-full text-[16px] font-smedium hover:bg-accent transition-colors h-9.75 flex items-center justify-center -ml-5"
        >
          Get Started
        </Link>
      </div>

      {/* Mobile Right Section - Phone & Menu */}
      <div className="mobile-right-section lg:hidden flex items-center gap-4">
        <a href={`tel:${MOBILE_NUMBER}`} className="mobile-phone-button">
          <svg className="mobile-phone-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="#0A1931"/>
          </svg>
          {MOBILE_NUMBER}
        </a>

        {/* Mobile Menu Button */}
        <button
          className="mobile-menu-button flex flex-col gap-1.5 w-8 h-8 items-center justify-center"
          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          aria-label="Toggle menu"
        >
          <span className={`mobile-menu-bar w-6 h-0.5 bg-black transition-all ${isMobileMenuOpen ? 'rotate-45 translate-y-2' : ''}`}></span>
          <span className={`mobile-menu-bar w-6 h-0.5 bg-black transition-all ${isMobileMenuOpen ? 'opacity-0' : ''}`}></span>
          <span className={`mobile-menu-bar w-6 h-0.5 bg-black transition-all ${isMobileMenuOpen ? '-rotate-45 -translate-y-2' : ''}`}></span>
        </button>
      </div>
      </div>

      {/* Mobile Menu */}
      {isMobileMenuOpen && !hideNavLinks && (
        <div className="lg:hidden absolute top-30 left-0 w-full bg-white shadow-lg z-50">
          <div className="flex flex-col px-8 py-6 gap-6">
            <Link 
              href="#features" 
              style={{ color: '#000000' }}
              className="text-[16px] font-semibold relative pb-2 border-b border-[#0077B6] transition-all"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              Features
            </Link>
            <Link 
              href="#useuniwor" 
              style={{ color: 'rgba(0, 0, 0, 0.6)' }}
              className="text-[16px] font-semibold relative pb-2 border-b border-transparent hover:border-[#0077B6] transition-all"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              Industries
            </Link>
            <Link 
              href="#pricing" 
              style={{ color: 'rgba(0, 0, 0, 0.6)' }}
              className="text-[16px] font-semibold relative pb-2 border-b border-transparent hover:border-[#0077B6] transition-all"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              Pricing
            </Link>
            <Link 
              href="#faq" 
              style={{ color: 'rgba(0, 0, 0, 0.6)' }}
              className="text-[16px] font-semibold relative pb-2 border-b border-transparent hover:border-[#0077B6] transition-all"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              FAQ
            </Link>
            <Link 
              href={`${APP_URL}/login`} 
              className="text-[16px] font-semibold text-[#0077B6] hover:text-accent transition-colors"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              Log In
            </Link>
            <Link 
              href={`${APP_URL}/register`}
              className="px-8 py-2 bg-[#0077B6] text-white rounded-full text-[16px] font-smedium hover:bg-accent transition-colors h-9.75 flex items-center justify-center"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              Get Started
            </Link>
          </div>
        </div>
      )}

      {/* Mobile Menu - Legal Pages (Login & Get Started only) */}
      {isMobileMenuOpen && hideNavLinks && (
        <div className="lg:hidden absolute top-30 left-0 w-full bg-white shadow-lg z-50">
          <div className="flex flex-col px-8 py-6 gap-6">
            <Link 
              href={`${APP_URL}/login`} 
              className="text-[16px] font-semibold text-[#0077B6] hover:text-accent transition-colors"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              Log In
            </Link>
            <Link 
              href={`${APP_URL}/register`}
              className="px-8 py-2 bg-[#0077B6] text-white rounded-full text-[16px] font-smedium hover:bg-accent transition-colors h-9.75 flex items-center justify-center"
              onClick={() => setIsMobileMenuOpen(false)}
            >
              Get Started
            </Link>
          </div>
        </div>
      )}
    </nav>
    </>
  );
}
