'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: "/service-details/16" }
];
const renderServiceLink = (service) => {
// Disable Construction service (id: 16) same as in Services component
const isDisabled = service.id === 16;
if (isDisabled) {
return (
{service.title}
);
}
return (
{
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}
);
};
return (
);
}