const { useState: useState_n, useEffect: useEffect_n, useRef: useRef_n } = React;
const { Link: Link_n } = ReactRouterDOM;

const MENU_GROUPS = [
  { key: 'platform', label: 'Platform', items: [
    { label: 'Attack Surface', desc: 'Web · API · mobile · cloud', href: '/#platform' },
    { label: 'AI Red Team', desc: 'Autonomous LLM & agent pentesting', href: '/#ai-red-team' },
    { label: 'Method', desc: 'Recon → exploit → report', href: '/#method' },
    { label: 'Threat Feed', desc: 'Live, validated findings', href: '/#feed' },
  ]},
  { key: 'resources', label: 'Resources', items: [
    { label: 'Documentation', desc: 'Guides, API reference, SDKs', href: 'https://docs.cyrion.ai', external: true },
    { label: 'Blog', desc: 'Research & engineering notes', href: '/blog' },
    { label: 'FAQ', desc: 'Common questions, answered', href: '/#faq' },
  ]},
  { key: 'company', label: 'Company', items: [
    { label: 'About', desc: 'Mission, story, team', href: '/about' },
    { label: 'Careers', desc: 'Open roles & culture', href: '/careers' },
    { label: 'Trust Center', desc: 'Security, compliance, policies', href: '/trust-center' },
    { label: 'Contact', desc: 'Talk to our team', href: '/contact' },
  ]},
];

function NavDropdown({ group, openKey, setOpenKey }) {
  const open = openKey === group.key;
  return (
    <div className={`navitem${open ? ' open' : ''}`}>
      <button className="navlink-btn" aria-expanded={open} onClick={() => setOpenKey(open ? null : group.key)}>
        {group.label}
        <svg className="chev" width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 3.5 5 6.5 8 3.5" stroke="currentColor" strokeWidth="1.3" /></svg>
      </button>
      <div className="navdrop">
        {group.items.map((it) => (
          it.external ? (
            <a key={it.label} href={it.href} className="navdrop-item" target="_blank" rel="noopener noreferrer" onClick={() => setOpenKey(null)}>
              <span className="t">{it.label}<span className="dim" style={{ fontSize: 11 }}>↗</span></span>
              <span className="d">{it.desc}</span>
            </a>
          ) : (
            <Link_n key={it.label} to={it.href} className="navdrop-item" onClick={() => setOpenKey(null)}>
              <span className="t">{it.label}</span>
              <span className="d">{it.desc}</span>
            </Link_n>
          )
        ))}
      </div>
    </div>
  );
}

function Navbar() {
  const [scrolled, setScrolled] = useState_n(false);
  const [open, setOpen] = useState_n(false);
  const [openKey, setOpenKey] = useState_n(null);
  const [mobileGroup, setMobileGroup] = useState_n(null);
  const navRef = useRef_n(null);

  useEffect_n(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect_n(() => {
    const onClick = (e) => { if (navRef.current && !navRef.current.contains(e.target)) setOpenKey(null); };
    const onKey = (e) => { if (e.key === 'Escape') setOpenKey(null); };
    document.addEventListener('mousedown', onClick);
    document.addEventListener('keydown', onKey);
    return () => { document.removeEventListener('mousedown', onClick); document.removeEventListener('keydown', onKey); };
  }, []);

  return (
    <header ref={navRef} style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? 'rgba(10,11,13,0.78)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'all 220ms ease',
    }}>
      <div className="page" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64 }}>
        <Link_n to="/" style={{ display: 'flex', alignItems: 'center', gap: 12, color: 'var(--ink)' }}>
          <span style={{ color: 'var(--accent)' }}><LogoMark size={22} /></span>
          <span style={{ fontWeight: 600, letterSpacing: '0.04em', fontSize: 14 }}>CYRION<span style={{ color: 'var(--accent)' }}>/</span>AI</span>
        </Link_n>

        <nav className="navlinks hide-md">
          {MENU_GROUPS.map((g) => <NavDropdown key={g.key} group={g} openKey={openKey} setOpenKey={setOpenKey} />)}
          <Link_n to="/#pricing" className="navsimple">Pricing</Link_n>
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <a className="btn btn-ghost hide-md" href="https://app.cyrion.ai/login" style={{ whiteSpace: 'nowrap' }}>Sign in</a>
          <Link_n className="btn btn-primary hide-md" to="/#access" style={{ whiteSpace: 'nowrap' }}>Request access<span style={{ fontSize: 14, lineHeight: 1, marginLeft: 2 }}>→</span></Link_n>
          <button className="btn btn-ghost show-md-only" aria-label="Toggle menu" aria-expanded={open} onClick={() => setOpen((v) => !v)}>{open ? 'Close' : 'Menu'}</button>
        </div>
      </div>

      {open && (
        <div className="show-md-only" style={{ borderTop: '1px solid var(--line)', background: 'var(--bg)', maxHeight: 'calc(100vh - 64px)', overflowY: 'auto' }}>
          <div className="page col" style={{ padding: '10px var(--gutter) 22px' }}>
            {MENU_GROUPS.map((g) => (
              <div key={g.key} className={`mnav-group${mobileGroup === g.key ? ' open' : ''}`}>
                <button className="mnav-head" onClick={() => setMobileGroup(mobileGroup === g.key ? null : g.key)}>
                  {g.label}
                  <svg className="chev" width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 3.5 5 6.5 8 3.5" stroke="currentColor" strokeWidth="1.3" /></svg>
                </button>
                <div className="mnav-panel">
                  {g.items.map((it) => (
                    it.external ? (
                      <a key={it.label} href={it.href} target="_blank" rel="noopener noreferrer" onClick={() => setOpen(false)}>{it.label}</a>
                    ) : (
                      <Link_n key={it.label} to={it.href} onClick={() => setOpen(false)}>{it.label}</Link_n>
                    )
                  ))}
                </div>
              </div>
            ))}
            <Link_n to="/#pricing" onClick={() => setOpen(false)} style={{ padding: '14px 0', fontSize: 14, color: 'var(--ink-mute)', borderBottom: '1px solid var(--line)' }}>Pricing</Link_n>
            <div className="row" style={{ gap: 10, marginTop: 16 }}>
              <a className="btn btn-ghost" style={{ flex: 1, justifyContent: 'center' }} href="https://app.cyrion.ai/login">Sign in</a>
              <Link_n className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} to="/#access" onClick={() => setOpen(false)}>Request access</Link_n>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}

Object.assign(window, { Navbar });