"use client";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import React from "react";

export default function Mobilemenu() {
  const pathname = usePathname();
  const isActive = (link) => link.split("/")[1] == pathname.split("/")[1];

  // Service items matching Header4 component
  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 isServiceActive = () => {
    return serviceItems.some(service => pathname.includes(service.href));
  };

  return (
    <div className="offcanvas offcanvas-start canvas-mb" id="menu-mobile">
      <div className="offcanvas-header top-nav-mobile justify-content-between">
        <Link href={`/`} className="logo">
          <Image
            src="/images/logo/keystonesolution.png" // Update this path to match your PNG file location
            alt="Keystone Logo"
            width={100}
            height={35}
            priority
            style={{
              maxWidth: '100%',
              height: 'auto'
            }}
          />
        </Link>
        <div className="close-menu" data-bs-dismiss="offcanvas">
          <i className="icon-times-solid" />
        </div>
      </div>
      <div className="mb-canvas-content">
        <div className="mb-body">
          <div className="mb-content-top">
            <ul className="nav-ul-mb" id="wrapper-menu-navigation">
              {/* Services Menu Item with Dropdown */}
              <li className={`nav-mb-item ${isServiceActive() ? "active" : ""}`}>
                <a
                  href="#dropdown-menu-services"
                  className="collapsed mb-menu-link"
                  data-bs-toggle="collapse"
                  aria-expanded="true"
                  aria-controls="dropdown-menu-services"
                >
                  <span>Services</span>
                  <span className="btn-open-sub" />
                </a>
                <div
                  id="dropdown-menu-services"
                  className="collapse"
                  data-bs-parent="#menu-mobile"
                >
                  <ul className="sub-nav-menu">
                    {serviceItems.map((service) => {
                      // Disable Construction service (id: 16) same as in Header4
                      
                      
                      return (
                        <li key={service.id}>
                          <Link
                            href={service.href}
                            className={`sub-nav-link ${
                              isActive(service.href) ? "active" : ""
                            }`}
                          >
                            {service.title}
                          </Link>
                        </li>
                      );
                    })}
                  </ul>
                </div>
              </li>

              {/* About Menu Item */}
              <li className={`nav-mb-item ${isActive("/about") ? "active" : ""}`}>
                <Link href={`/about`} className="mb-menu-link">
                  About
                </Link>
              </li>

              {/* Career Menu Item */}
              <li className={`nav-mb-item ${isActive("/career") ? "active" : ""}`}>
                <Link href={`/career`} className="mb-menu-link">
                  Career
                </Link>
              </li>

              {/* Contact Menu Item */}
              <li className={`nav-mb-item ${isActive("/contact-us") ? "active" : ""}`}>
                <Link href={`/contact-us`} className="mb-menu-link">
                  Contact
                </Link>
              </li>
            </ul>
          </div>

          {/* Updated contact information and buttons */}
          <div className="mb-other-content">
            <ul className="mb-info mb_20">
              <li>
                <p className="text_mono-gray">
                  Address:
                  <a
                    target="_blank"
                    href="https://www.google.com/maps?q=No.3A,1stFloor,BalajiNagar,Dharapadavedu,Vellore-632007,TamilNadu,India"
                  >
                    <span className="fw-5 text_mono-gray-5">
                      No. 3A, 1st Floor, Balaji Nagar, Dharapadavedu, Vellore - 632007, Tamil Nadu, India
                    </span>
                  </a>
                </p>
              </li>
              <li>
                <p className="text_mono-gray">
                  Email:
                  <a href="mailto:info@keystonesolution.in">
                    <span className="fw-5 text_mono-gray-5">
                      info@keystonesolution.in
                    </span>
                  </a>
                </p>
              </li>
              <li>
                <p className="text_mono-gray">
                  Phone:
                  <a href="tel:+919095450005">
                    <span className="fw-5 text_mono-gray-5">
                      +91 90954 50005
                    </span>
                  </a>
                </p>
              </li>
            </ul>
            <div className="mb-wrap-btn d-flex gap_12">
              <Link href={`/about`} className="tf-btn">
                <span>Get Started</span>
                <span className="bg-effect" />
              </Link>
              <Link href={`/contact-us`} className="tf-btn">
                <span>Contact Us</span>
                <span className="bg-effect" />
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}