/* global React */
const { useState: useStateNav } = React;

/* ============================================================
   NavBar with hover mega-menu (modules suite)
============================================================ */
const NAV_MODULES = [
  { glyph: "A", title: "Lithora Atlas",    body: "Decision system across every app. Risk integrates here." },
  { glyph: "P", title: "Lithora Prospect", body: "Prospectivity, concession evaluation, 3D subsurface." },
  { glyph: "F", title: "Lithora Forge",    body: "Scenario planning, drilling, production monitoring." },
  { glyph: "F", title: "Lithora Flow",     body: "Procurement, logistics, material flow." },
];

function NavBar({ onBookDemo, onJump }) {
  const [open, setOpen] = useStateNav(false);
  return (
    <nav className="nav" data-screen-label="01 Nav">
      <div className="nav-logo" onClick={() => onJump("top")}>
        <img src="assets/lithora-mark.png" alt="Lithora" />
        <span className="wordmark">LITHORA</span>
      </div>

      <div className="nav-links">
        <button
          className="nav-link"
          onMouseEnter={() => setOpen(true)}
          onMouseLeave={() => setOpen(false)}
          onClick={() => onJump("suite")}
        >
          Suite <span className="caret">▾</span>
          <div
            className={"mega " + (open ? "open" : "")}
            onMouseEnter={() => setOpen(true)}
            onMouseLeave={() => setOpen(false)}
          >
            <div className="mega-grid" style={{ gridTemplateColumns: "repeat(2, 1fr)" }}>
              {NAV_MODULES.map(m => (
                <div className="mega-item" key={m.title}>
                  <div className="mega-item-head">
                    <span className="mega-item-glyph">{m.glyph}</span>
                    <span className="mega-item-title">{m.title}</span>
                  </div>
                  <div className="mega-item-body">{m.body}</div>
                </div>
              ))}
            </div>
            <div className="mega-foot">
              <span className="mega-foot-l">Four apps · Atlas is always on</span>
              <a className="mega-foot-link" onClick={(e) => { e.preventDefault(); onJump("suite"); }}>
                Compose your suite →
              </a>
            </div>
          </div>
        </button>
        <button className="nav-link" onClick={() => onJump("prospect")}>Prospectivity</button>
        <button className="nav-link" onClick={() => onJump("lifecycle")}>Lifecycle</button>
        <button className="nav-link" onClick={() => onJump("drillholes")}>Live data</button>
        <button className="nav-link" onClick={() => onJump("proof")}>Customers</button>
      </div>

      <div className="nav-right">
        <button className="nav-link" onClick={onBookDemo}>Sign in</button>
        <button className="nav-cta" onClick={onBookDemo}>
          <span className="nav-cta-dot" />
          Book a demo
        </button>
      </div>
    </nav>
  );
}

window.NavBar = NavBar;