keystone/components/headers/Header4.jsx

'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' }}>
                      <svg
                        width="160"
                        height={40}
                        viewBox="0 0 150 40"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        style={{ display: 'block' }}
                      >
                        <path
                          d="M18.2183 15.7033L29.395 34.7289C29.4936 34.8967 29.6741 34.9994 29.8687 34.9985L41.1397 34.9463C41.3308 34.9455 41.5075 34.8448 41.6058 34.6809L47.5 24.8527L35.944 24.8365C35.7518 24.8362 35.5738 24.7349 35.4754 24.5698L23.9713 5.2667C23.8727 5.10131 23.6944 5 23.5019 5L12.3005 5C12.1083 5 11.9302 5.10099 11.8315 5.26594L5.91087 15.1639L0.167756 24.7208C0.0644005 24.8928 0.0636223 25.1076 0.165723 25.2804L5.75222 34.7316C5.85055 34.8979 6.02941 35 6.22264 35L16.7708 35C17.1948 35 17.4573 34.538 17.2402 34.1738L5.91087 15.1639L17.276 15.1639C17.6635 15.1639 18.022 15.3691 18.2183 15.7033Z"
                          fill="#28285B"
                        />
                        <text
                          x="55"
                          y="20"
                          fontFamily="Arial, sans-serif"
                          fontSize="22"
                          fontWeight="600"
                          fill="#121416"
                          dominantBaseline="central"
                        >
                          Keystone
                        </text>
                      </svg>
                    </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: '4px',
                            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>
  );
}