/* global React */

const { useEffect: useChromeEffect, useState: useChromeState } = React;

const NAV_OFFERS = [
  {
    label: "Company Brain",
    detail: "A connected memory for your organisation",
    href: "/companybrain.html",
  },
  {
    label: "Website Builds",
    detail: "Sharp websites, live in days",
    href: "/offers/website-builds.html",
  },
  {
    label: "AI Agent Setup",
    detail: "Useful agents inside your existing workflow",
    href: "/offers/ai-agent-setup.html",
  },
  {
    label: "AI Product Sprints",
    detail: "Find and shape the right agent product",
    href: "/offers/ai-product-sprints.html",
  },
];

const NAV_INDUSTRIES = [
  {
    label: "Building",
    detail: "Connected knowledge and agents for project work",
    href: "/industries/building.html",
  },
  {
    label: "Healthcare",
    detail: "AI systems built around clinical judgment",
    href: "/industries/healthcare.html",
  },
  {
    label: "Accounting",
    detail: "AI systems for firms built on trust and accuracy",
    href: "/industries/accounting.html",
  },
];

function HMLogo() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="10.5" stroke="currentColor" strokeWidth="1.5" />
      <path d="M12 1.5 V 22.5" stroke="currentColor" strokeWidth="1.5" />
      <rect x="12.5" y="2" width="9.5" height="20" fill="currentColor" />
    </svg>
  );
}

function HMNavArrow() {
  return (
    <svg className="arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function DesktopDropdown({ id, label, items, open, setOpen }) {
  const isOpen = open === id;

  return (
    <div
      className={"nav-dropdown" + (isOpen ? " is-open" : "")}
      onMouseEnter={() => setOpen(id)}
      onMouseLeave={() => setOpen(null)}
    >
      <button
        className="nav-dropdown-toggle"
        type="button"
        aria-haspopup="true"
        aria-expanded={isOpen}
        onClick={() => setOpen(isOpen ? null : id)}
      >
        {label}
        <span className="nav-chevron" aria-hidden="true">⌄</span>
      </button>
      <div className="nav-dropdown-menu">
        <div className="nav-dropdown-k">{label}</div>
        {items.map((item) => (
          <a href={item.href} key={item.href} onClick={() => setOpen(null)}>
            <span>{item.label}</span>
            <small>{item.detail}</small>
          </a>
        ))}
      </div>
    </div>
  );
}

function MobileGroup({ label, items, closeMenu }) {
  return (
    <div className="nav-mobile-group">
      <div className="nav-mobile-label">{label}</div>
      {items.map((item) => (
        <a href={item.href} onClick={closeMenu} key={item.href}>
          <span>{item.label}</span>
          <span aria-hidden="true">→</span>
        </a>
      ))}
    </div>
  );
}

function HMNav() {
  const [menuOpen, setMenuOpen] = useChromeState(false);
  const [dropdownOpen, setDropdownOpen] = useChromeState(null);
  const closeMenu = () => {
    setMenuOpen(false);
    setDropdownOpen(null);
  };

  useChromeEffect(() => {
    const closeOnEscape = (event) => {
      if (event.key === "Escape") closeMenu();
    };
    window.addEventListener("keydown", closeOnEscape);
    return () => window.removeEventListener("keydown", closeOnEscape);
  }, []);

  return (
    <nav className="nav">
      <div className="shell nav-inner">
        <a href="/" className="logo" onClick={closeMenu}>
          <HMLogo />
          <span>Half&nbsp;Machine</span>
        </a>
        <div className="nav-links">
          <a href="/#thesis">Thesis</a>
          <DesktopDropdown
            id="offers"
            label="Offers"
            items={NAV_OFFERS}
            open={dropdownOpen}
            setOpen={setDropdownOpen}
          />
          <DesktopDropdown
            id="industries"
            label="Industries"
            items={NAV_INDUSTRIES}
            open={dropdownOpen}
            setOpen={setDropdownOpen}
          />
          <a href="/#work">Work</a>
        </div>
        <a href="/contact.html#form" className="nav-cta">
          Get in touch
          <HMNavArrow />
        </a>
        <button
          className={"nav-menu-toggle" + (menuOpen ? " active" : "")}
          type="button"
          aria-label={menuOpen ? "Close menu" : "Open menu"}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((value) => !value)}
        >
          <span />
          <span />
        </button>
      </div>
      {menuOpen && (
        <div className="nav-mobile-panel">
          <a href="/#thesis" onClick={closeMenu}>Thesis</a>
          <MobileGroup label="Offers" items={NAV_OFFERS} closeMenu={closeMenu} />
          <MobileGroup label="Industries" items={NAV_INDUSTRIES} closeMenu={closeMenu} />
          <a href="/#work" onClick={closeMenu}>Work</a>
          <a href="/contact.html#form" className="nav-mobile-cta" onClick={closeMenu}>
            Get in touch <HMNavArrow />
          </a>
        </div>
      )}
    </nav>
  );
}

window.HMNav = HMNav;