// src/components/common/Header.jsx
import { useState } from "react";
import { Link, NavLink } from "react-router-dom";
import { Menu, Search, X, ChevronDown } from "lucide-react";
import "../../styles/gcm-premium.css";
import "../../styles/gcm-event.css";
import "../../styles/gcm-members.css";

const navItems = [
  {
    label: "About Us",
    path: "/about",
    children: [
      ["The Chamber", "/about"],
      ["Leadership", "/about/leadership"],
      ["Governance", "/about/governance"],
    ],
  },
  {
    label: "Membership",
    path: "/members",
    children: [
     // ["Members Directory", "/members"],
     // ["Become a Member", "/membership"],
     // ["Member Services", "/members/services"],
    ],
  },
  {
    label: "Advocacy",
    path: "/advocacy",
    children: [
      ["Policy Priorities", "/advocacy"],
      ["Submissions", "/advocacy/submissions"],
      ["Industry Positions", "/advocacy/positions"],
    ],
  },
  {
    label: "ESG & Sustainability",
    path: "/esg",
    children: [
      ["ESG Overview", "/esg"],
      ["Responsible Mining", "/esg/responsible-mining"],
      ["Community Impact", "/esg/community-impact"],
    ],
  },
  { label: "Resources", path: "/resources" },
  {
    label: "News & Events",
    path: "/newsroom",
    children: [
      ["Newsroom", "/media/newsroom"],
      ["Gallery", "/media/gallery"],
      ["Videos", "/media/videos"],
      ["Events", "/events"],
      ["Publications", "/publications"],
      ["Tenders", "/tenders"],
    ],
  },
  { label: "Contact", path: "/contact" },
];

export default function Header() {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <>
      <header className="gcm-header">
        <div className="gcm-container gcm-header__inner">
          <Link to="/" className="gcm-brand" aria-label="Ghana Chamber of Mines Home">
           <img
              src={`${import.meta.env.BASE_URL}assets/photos/gcm_advanced_logo_transparent.png`}
              alt="Ghana Chamber of Mines"
              className="gcm-brand__logo"
            />

            <div className="gcm-brand__text">
              <strong>Ghana Chamber</strong>
              <span>of Mines</span>
            </div>
          </Link>

          <nav className="gcm-nav" aria-label="Main navigation">
            {navItems.map((item) => (
              <div className="gcm-nav__item" key={item.label}>
                <NavLink to={item.path} className="gcm-nav__link">
                  {item.label}
                  {item.children && <ChevronDown size={14} />}
                </NavLink>

                {item.children && (
                  <div className="gcm-dropdown">
                    {item.children.map(([label, path]) => (
                      <NavLink to={path} className="gcm-dropdown__link" key={path}>
                        {label}
                      </NavLink>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </nav>

          <button className="gcm-search-btn" type="button" aria-label="Search">
            <Search size={20} />
          </button>

          <button
            className="gcm-mobile-btn"
            type="button"
            aria-label="Open menu"
            onClick={() => setMobileOpen(true)}
          >
            <Menu size={24} />
          </button>
        </div>
      </header>

      <div className={mobileOpen ? "gcm-mobile-drawer open" : "gcm-mobile-drawer"}>
        <button
          className="gcm-mobile-close"
          type="button"
          aria-label="Close menu"
          onClick={() => setMobileOpen(false)}
        >
          <X size={22} />
        </button>

        <Link to="/" className="gcm-mobile-brand" onClick={() => setMobileOpen(false)}>
          <img src="/assets/photos/logo.png" alt="Ghana Chamber of Mines" />
          <span>Ghana Chamber of Mines</span>
        </Link>

        <nav className="gcm-mobile-nav">
          {navItems.map((item) => (
            <div key={item.label}>
              <NavLink
                to={item.path}
                className="gcm-mobile-nav__link"
                onClick={() => setMobileOpen(false)}
              >
                {item.label}
              </NavLink>

              {item.children && (
                <div className="gcm-mobile-subnav">
                  {item.children.map(([label, path]) => (
                    <NavLink
                      to={path}
                      key={path}
                      className="gcm-mobile-subnav__link"
                      onClick={() => setMobileOpen(false)}
                    >
                      {label}
                    </NavLink>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>
      </div>

      {mobileOpen && <button className="gcm-backdrop" onClick={() => setMobileOpen(false)} />}
    </>
  );
}