// Drawer.jsx — full-screen overlay menu, slides down from top.
const { useEffect: useEffectD } = React;

function Drawer({ open, onClose, onNavigate, route }) {
  useEffectD(() => {
    if (open) document.body.classList.add("no-scroll");
    else document.body.classList.remove("no-scroll");
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  const go = (path) => (e) => {
    e.preventDefault();
    onNavigate(path);
    onClose();
  };

  const links = [
    { idx: "01", label: "Index",            path: "/" },
    { idx: "02", label: "Aviation Status",  path: "/platform/aviation" },
    { idx: "03", label: "AviationMax",      path: "/platform/aviationmax" },
    { idx: "04", label: "Capabilities",     path: "/capabilities" },
    { idx: "05", label: "Company",          path: "/about" },
    { idx: "06", label: "Contact",          path: "/contact" },
  ];

  return (
    <div className={"drawer " + (open ? "open" : "")} aria-hidden={!open}>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: "16px var(--pad-x)", borderBottom: "1px solid var(--line)"
      }}>
        <Logo onClick={go("/")} />
        <button className="x-close" onClick={onClose} aria-label="Close menu">
          Close
          <span className="x">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M1 1 L11 11 M11 1 L1 11" stroke="currentColor" strokeWidth="1.4" />
            </svg>
          </span>
        </button>
      </div>

      <div className="drawer-inner">
        <div className="drawer-list">
          {links.map((l) => (
            <a key={l.path} href={"#" + l.path} className="drawer-link" onClick={go(l.path)}>
              <span>{l.label}</span>
              <span className="idxno">{l.idx}</span>
            </a>
          ))}
        </div>

        <div className="drawer-side">
          <div className="drawer-block">
            <div className="label">Operating Domain</div>
            <div className="h3" style={{ marginBottom: 8 }}>U.S. Defense.<br/>Aviation. Government.</div>
            <div className="mute" style={{ fontSize: 14 }}>
              Veteran-owned. Operating from Reno, Nevada since 2014.
            </div>
          </div>
          <div className="drawer-block">
            <div className="label">Get in touch</div>
            <a href="mailto:info@luli.us" className="h3" style={{ display: "block", marginBottom: 6 }}>info@luli.us</a>
            <div className="mute tabular" style={{ fontSize: 14 }}>(775) 223-4416</div>
            <div className="mute" style={{ fontSize: 14 }}>450 Sinclair St · Reno, NV 89501</div>
          </div>
          <div className="drawer-block">
            <div className="label">Programs</div>
            <a href="#/contact" onClick={go("/contact")} className="drawer-link" style={{ fontSize: 22, padding: "8px 0" }}>
              <span>DOD SkillBridge</span>
              <span className="idxno">→</span>
            </a>
            <a href="#/contact" onClick={go("/contact")} className="drawer-link" style={{ fontSize: 22, padding: "8px 0", borderBottom: "none" }}>
              <span>Careers</span>
              <span className="idxno">→</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Drawer = Drawer;