'use client'
import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";

export default function Header4() {
  const [isServicesDropdownOpen, setIsServicesDropdownOpen] = useState(false);

  const handleServicesMouseEnter = () => {
    setIsServicesDropdownOpen(true);
  };

  const handleServicesMouseLeave = () => {
    setIsServicesDropdownOpen(false);
  };

  // Service items with ID-based URLs (matching Services component behavior)
  const serviceItems = [
    { id: 11, title: "Data Entry Services", href: "/service-details/11" },
    { id: 12, title: "Data Conversion", href: "/service-details/12" },
    { id: 13, title: "Data Processing", href: "/service-details/13" },
    { id: 14, title: "Receipt Data Entry Services", href: "/service-details/14" },
    { id: 15, title: "Logistics Data Entry Services", href: "/service-details/15" },
    { id: 16, title: "Construction", href: "/#" }
  ];

  const renderServiceLink = (service) => {
    // Disable Construction service (id: 16) same as in Services component
    
    


    return (
      <Link
        href={service.href}
        style={{
          display: 'block',
          padding: '8px 16px',
          color: '#333333',
          textDecoration: 'none',
          fontSize: '14px',
          fontWeight: '500',
          transition: 'all 0.2s ease',
          borderLeft: '3px solid transparent'
        }}
        onMouseEnter={(e) => {
          e.target.style.backgroundColor = '#f8f9ff';
          e.target.style.color = '#28285B';
          e.target.style.borderLeftColor = '#28285B';
          e.target.style.paddingLeft = '20px';
        }}
        onMouseLeave={(e) => {
          e.target.style.backgroundColor = 'transparent';
          e.target.style.color = '#333333';
          e.target.style.borderLeftColor = 'transparent';
          e.target.style.paddingLeft = '16px';
        }}
      >
        {service.title}
      </Link>
    );
  };

  return (
    <header id="header-main" className="header style-3" style={{ backgroundColor: 'white', borderBottom: '1px solid #e5e5e5'}}>
      <div className="header-inner">
        <div className="tf-container">
          <div className="row">
            <div className="col-12">
              <div className="header-inner-wrap">
                <div className="header-left d-flex align-items-center">
                  <div className="header-logo" style={{ display: 'flex', alignItems: 'center' }}>
                    <Link href={`/`} className="site-logo" style={{ display: 'flex', alignItems: 'center' }}>
                      <Image
                        src="/images/logo/keystonesolution.png" // Update this path to match your PNG file location
                        alt="Keystone Logo"
                        width={90}
                        height={40}
                        priority
                        style={{
                          maxWidth: '100%',
                          height: 'auto'
                        }}
                      />
                    </Link>
                  </div>
                  <nav className="main-menu style-3">
                    <ul className="navigation">
                      <li 
                        className="menu-item"
                        style={{ position: 'relative' }}
                        onMouseEnter={handleServicesMouseEnter}
                        onMouseLeave={handleServicesMouseLeave}
                      >
                        <Link 
                          href="/#" 
                          style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: '6px',
                            textDecoration: 'none',
                            color: '#333333',
                            transition: 'color 0.3s ease'
                          }}
                        >
                          Services
                          <svg 
                            width="12" 
                            height="8" 
                            viewBox="0 0 12 8" 
                            fill="none"
                            style={{
                              transform: isServicesDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)',
                              transition: 'transform 0.3s ease'
                            }}
                          >
                            <path 
                              d="M1 1.5L6 6.5L11 1.5" 
                              stroke="currentColor" 
                              strokeWidth="1.5" 
                              strokeLinecap="round" 
                              strokeLinejoin="round"
                            />
                          </svg>
                        </Link>
                        
                        {/* Dropdown Menu */}
                        <div
                          style={{
                            position: 'absolute',
                            top: '100%',
                            left: '0',
                            minWidth: '220px',
                            backgroundColor: '#ffffff',
                            boxShadow: '0 4px 16px rgba(0, 0, 0, 0.1)',
                            borderRadius: '8px',
                            padding: '8px 0',
                            opacity: isServicesDropdownOpen ? '1' : '0',
                            visibility: isServicesDropdownOpen ? 'visible' : 'hidden',
                            transform: isServicesDropdownOpen ? 'translateY(0px)' : 'translateY(-10px)',
                            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                            zIndex: '1000',
                            border: '1px solid rgba(0, 0, 0, 0.08)',
                            backdropFilter: 'blur(20px)',
                            WebkitBackdropFilter: 'blur(20px)'
                          }}
                        >
                          <ul
                            style={{
                              listStyle: 'none',
                              margin: '0',
                              padding: '0'
                            }}
                          >
                            {serviceItems.map((service, index) => (
                              <li key={index}>
                                {renderServiceLink(service)}
                              </li>
                            ))}
                          </ul>
                        </div>
                      </li>
                      <li className="menu-item">
                        <Link href="/about" style={{ color: '#333333', textDecoration: 'none' }}>About</Link>
                      </li>
                      <li className="menu-item">
                        <Link href="/career" style={{ color: '#333333', textDecoration: 'none' }}>Career</Link>
                      </li>
                    </ul>
                  </nav>
                </div>


                <div className="header-right d-flex align-items-center">
                  <Link
                    href={`/contact-us`}
                    className="tf-btn hide-sm rounded-12 h36"
                  >
                    <span className="text-caption">Contact Us</span>
                    <span className="bg-effect" />
                  </Link>
                  <div
                    className="mobile-button"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#menu-mobile"
                    aria-controls="menu-mobile"
                  >
                    <div className="burger">
                      <span />
                      <span />
                      <span />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}