/* Top nav with mega-menu (hover to open). */

const PRODUCT_LIST = [
  { id: 'sdwan', name: 'PQC SD-WAN', desc: 'Quantum-safe site-to-site', icon: 'router' },
  { id: 'ztna', name: 'PQC ZTNA', desc: 'Zero-trust access, post-quantum', icon: 'lock' },
  { id: 'chain', name: 'PQC Blockchain', desc: '100K TPS quantum-safe ledger', icon: 'cube' },
  { id: 'controller', name: 'PQC Controller + SDK', desc: 'Hosted control plane, drop-in', icon: 'cloud' },
  { id: 'edr', name: 'PQC EDR', desc: "World's first PQC endpoint defense", icon: 'shield' },
  { id: 'inspector', name: 'PQC Inspector', desc: 'Audit your stack for quantum risk', icon: 'search' },
];

const TopNav = ({ onNavigate, currentPage }) => {
  const [openMenu, setOpenMenu] = React.useState(null);
  const closeTimer = React.useRef(null);

  const open = (key) => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    setOpenMenu(key);
  };
  const scheduleClose = () => {
    closeTimer.current = setTimeout(() => setOpenMenu(null), 120);
  };

  return (
    <header className="topnav" style={{ position: 'sticky' }}>
      <div className="topnav-inner">
        <a className="topnav-logo" onClick={() => onNavigate('home')} style={{ cursor: 'pointer' }}>
          <span className="glyph">Q</span>
          <span>QSec</span>
        </a>
        <nav className="topnav-links" onMouseLeave={scheduleClose}>
          <a className={`topnav-link ${currentPage === 'home' ? 'active' : ''}`} onClick={() => onNavigate('home')}>
            Home
          </a>
          <a className={`topnav-link ${openMenu === 'products' ? 'active' : ''}`}
             onMouseEnter={() => open('products')}
             onClick={() => onNavigate('product')}>
            Products <Icon name="chevron-down" size={14} />
          </a>
          <a className={`topnav-link ${currentPage === 'solutions' ? 'active' : ''}`}
             onMouseEnter={() => open('solutions')}
             onClick={() => onNavigate('solutions')}>
            Solutions <Icon name="chevron-down" size={14} />
          </a>
          <a className="topnav-link" onClick={() => onNavigate('product')}>Shop</a>
          <a className={`topnav-link ${currentPage === 'developers' ? 'active' : ''}`} onClick={() => onNavigate('developers')}>Developers</a>
          <a className="topnav-link" onClick={() => onNavigate('developers')}>Resources</a>
          <a className={`topnav-link ${currentPage === 'company' ? 'active' : ''}`} onClick={() => onNavigate('company')}>Company</a>
        </nav>
        <div className="topnav-right">
          <button className="topnav-icon-btn" title="Search"><Icon name="search" size={15}/></button>
          <button className="topnav-icon-btn" title="Account"><Icon name="user" size={15}/></button>
          <a className="btn primary sm" onClick={() => onNavigate('product')}>Get started</a>
        </div>
      </div>

      {/* Products mega */}
      <div className={`mega ${openMenu === 'products' ? 'open' : ''}`}
           onMouseEnter={() => open('products')}
           onMouseLeave={scheduleClose}>
        <div className="mega-inner">
          <div>
            <div className="mega-col-title">By product</div>
            <div className="flex-col gap-12">
              <a style={{ fontSize: 13.5, color: 'var(--ink-2)' }}>All products →</a>
              <a style={{ fontSize: 13.5, color: 'var(--ink-2)' }}>Compare</a>
              <a style={{ fontSize: 13.5, color: 'var(--ink-2)' }}>What's new</a>
              <a style={{ fontSize: 13.5, color: 'var(--ink-2)' }}>Roadmap</a>
            </div>
          </div>
          <div>
            <div className="mega-col-title">PQC-Ready Portfolio</div>
            <div className="mega-products">
              {PRODUCT_LIST.map(p => (
                <div key={p.id} className="mega-product" onClick={() => { onNavigate('product'); setOpenMenu(null); }}>
                  <div className="mega-product-thumb">
                    <Icon name={p.icon} size={24} color="var(--accent)"/>
                  </div>
                  <div>
                    <div className="mega-product-name">{p.name}</div>
                    <div className="mega-product-desc">{p.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Solutions mega */}
      <div className={`mega ${openMenu === 'solutions' ? 'open' : ''}`}
           onMouseEnter={() => open('solutions')}
           onMouseLeave={scheduleClose}>
        <div className="mega-inner">
          <div>
            <div className="mega-col-title">By industry</div>
            <ul className="mega-side">
              <li><a onClick={() => { onNavigate('solutions'); setOpenMenu(null); }} style={{ cursor: 'pointer' }}>Government & Defense</a></li>
              <li><a onClick={() => { onNavigate('solutions'); setOpenMenu(null); }} style={{ cursor: 'pointer' }}>Banking & Finance</a></li>
              <li><a onClick={() => { onNavigate('solutions'); setOpenMenu(null); }} style={{ cursor: 'pointer' }}>Telecom & ISP</a></li>
              <li><a onClick={() => { onNavigate('solutions'); setOpenMenu(null); }} style={{ cursor: 'pointer' }}>Healthcare</a></li>
              <li><a onClick={() => { onNavigate('solutions'); setOpenMenu(null); }} style={{ cursor: 'pointer' }}>Critical Infrastructure</a></li>
            </ul>
          </div>
          <div>
            <div className="mega-col-title">By use case</div>
            <div className="mega-products">
              {[
                { name: 'PQC Audit', desc: 'CBOM + risk score + migration plan', icon: 'search', featured: true },
                { name: 'Harvest-now-decrypt-later', desc: 'Stop the data-exfiltration time-bomb', icon: 'shield' },
                { name: 'NIST migration', desc: 'ML-KEM, ML-DSA, SLH-DSA pathways', icon: 'key' },
                { name: 'Hybrid TLS', desc: 'Classical + PQC during transition', icon: 'layers' },
                { name: 'Quantum-safe VPN', desc: 'Drop-in IPsec / Wireguard PQC', icon: 'globe' },
                { name: 'Crypto-agility', desc: 'Swap algorithms without redeploy', icon: 'bolt' },
              ].map((p, i) => (
                <div key={i} className="mega-product" onClick={() => { onNavigate('solutions'); setOpenMenu(null); }}>
                  <div className="mega-product-thumb" style={p.featured ? { background: 'var(--accent-50)', borderColor: 'var(--accent-100)' } : null}>
                    <Icon name={p.icon} size={22} color="var(--accent)"/>
                  </div>
                  <div>
                    <div className="mega-product-name">
                      {p.name}
                      {p.featured && <span style={{ marginLeft: 8, fontSize: 10, color: 'var(--accent)', fontWeight: 600, letterSpacing: 1 }}>NEW</span>}
                    </div>
                    <div className="mega-product-desc">{p.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};

window.TopNav = TopNav;
window.PRODUCT_LIST = PRODUCT_LIST;