import { useLocation, Link } from 'react-router-dom'
import { useRef } from 'react'
import { useNavFix } from '../../hooks/useNavFix'

const NAV_ITEMS = [
  { label: 'HOME', path: '/' },
  { label: 'ABOUT US', path: '/about' },
  { label: 'SERVICES', path: '/service' },
  { label: 'PROJECT', path: '/project' },
  { label: 'CONTACT', path: '/contact' },
]

export default function Header() {
  const { pathname } = useLocation()
  const ref = useRef(null)
  useNavFix(ref)

  const isActive = (path) => {
    if (path === '/') return pathname === '/'
    return pathname.startsWith(path)
  }

  return (
    <header ref={ref}>
      <style id="elementor-post-945">{`
.elementor-945 .elementor-element.elementor-element-1697af5{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-945 .elementor-element.elementor-element-a628d9c .header-top{background:#ED1C24;}.elementor-945 .elementor-element.elementor-element-a628d9c .main-menu>ul>li>a, .elementor-945 .elementor-element.elementor-element-a628d9c .main-menu ul.sub-menu li a{font-size:15px;font-weight:600;}
      `}</style>
      <div className="elementor elementor-945" data-elementor-id="945" data-elementor-type="wp-post">
        <div className="elementor-element elementor-element-1697af5 e-con-full e-flex e-con e-parent" data-e-type="container" data-element_type="container" data-id="1697af5">
          <div className="elementor-element elementor-element-a628d9c elementor-widget elementor-widget-rakarheader" data-e-type="widget" data-element_type="widget" data-id="a628d9c" data-widget_type="rakarheader.default">
            <div className="elementor-widget-container">

              {/* Mobile Menu */}
              <div className="th-menu-wrapper">
                <div className="th-menu-area text-center">
                  <button className="th-menu-toggle"><i className="fas fa-times"></i></button>
                  <div className="mobile-logo">
                    <a href="/"><img alt="logo" src="/assets/images/logo_pe-Rd-Wh-001.svg" /></a>
                  </div>
                  <div className="th-mobile-menu">
                    <ul>
                      {NAV_ITEMS.map(item => (
                        <li key={item.path} className={`menu-item menu-item-type-post_type menu-item-object-page ${isActive(item.path) ? 'current-menu-item' : ''}`}>
                          <Link to={item.path} {...(isActive(item.path) ? { 'aria-current': 'page' } : {})}>{item.label}</Link>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>

              {/* Search Popup */}
              <div className="popup-search-box d-none d-lg-block">
                <button className="searchClose"><i className="fas fa-times"></i></button>
                <form action="index.html" method="get">
                  <input name="s" placeholder="What are you looking for?" required="" type="search" value="" />
                  <button type="submit"><i className="fas fa-search"></i></button>
                </form>
              </div>

              {/* Main Header */}
              <div className="th-header header-layout5">
                {/* Top Bar */}
                <div className="header-top">
                  <div className="container">
                    <div className="row justify-content-center justify-content-lg-between align-items-center gy-2">
                      <div className="col-auto d-none d-lg-block">
                        <div className="header-links">
                          <ul>
                            <li><i className="fas fa-location-dot text-white"></i> <a href="https://maps.app.goo.gl/5bMqkGpNXNo1K9yC7" target="_blank" rel="noopener noreferrer">Al Qusais Industrial Area-3, Dubai, UAE</a></li>
                            <li><i className="fas fa-clock text-white"></i> Monday to Saturday: 8 am - 5 pm</li>
                          </ul>
                        </div>
                      </div>
                      <div className="col-auto">
                        <div className="header-links">
                          <ul>
                            <li><i className="fas fa-headset" style={{ color: '#fff' }}></i> <a href="tel:+97143200869">TALK TO US</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Sticky Nav */}
                <div className="sticky-wrapper">
                  <div className="container">
                    <div className="menu-area">
                      <div className="row align-items-start justify-content-between">
                        <div className="col-auto d-none d-lg-block">
                          <div className="header-logo">
                            <a href="/"><img alt="logo_pe Rd Wh 70" src="/assets/images/logo_pe-Rd-Wh-70.png" /></a>
                          </div>
                        </div>
                        <div className="col">
                          <div className="menu-wrap">
                            <div className="header-logo d-block d-lg-none">
                              <a href="/"><img alt="logo_pe new bk 70" src="/assets/images/logo_pe-new-bk-70.png" /></a>
                            </div>
                            <nav className="main-menu d-none d-lg-inline-block">
                              <ul className="rakar-menu">
                                {NAV_ITEMS.map(item => (
                                  <li key={item.path} className={`menu-item menu-item-type-post_type menu-item-object-page ${isActive(item.path) ? 'current-menu-item' : ''}`}>
                                    <Link to={item.path} {...(isActive(item.path) ? { 'aria-current': 'page' } : {})}>{item.label}</Link>
                                  </li>
                                ))}
                              </ul>
                            </nav>
                            <button className="simple-icon searchBoxToggler d-none d-lg-inline-block" type="button"><i className="far fa-search"></i></button>
                            <button className="th-menu-toggle d-block d-lg-none" type="button"><i className="far fa-bars"></i></button>
                          </div>
                        </div>
                        <div className="col-auto d-none d-xl-block">
                          <div className="header-button">
                            <a className="th-btn rounded-12 style3 th_btn" href="/contact">Get A Quote<i className="fas fa-arrow-right ms-2"></i></a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </header>
  )
}
