function BrandWord() {
  return (
    <Link to="/" className="brand-mark">
      <img src="assets/logo2.png" alt="Cortexa Labs" style={{ height: 36, width: 'auto', display: 'block' }} />
      <span>Cortexa Labs</span>
    </Link>
  );
}

/* NAV DATA */
const NAV = [
  {
    label: 'Products',
    items: [
      { num: '01', title: 'Cortexa Voice',  desc: 'The foundation. Your radios become structured data.', to: '/products/voice' },
      { num: '02', title: 'Cortexa Safe',   desc: 'Safety intelligence that doesn\u2019t miss what was said.', to: '/products/safe' },
      { num: '03', title: 'Cortexa Ops',    desc: 'The right communications, in the right order, at the right time.', to: '/products/ops' },
      { num: '04', title: 'Cortexa Signal', desc: 'You define what matters. Cortexa finds it.', to: '/products/signal' },
    ],
    foot: { label: 'All products', to: '/products' },
  },
  {
    label: 'Solutions',
    items: [
      { num: '01', title: 'Permit-to-Work & Confined-Space',     desc: 'Compliance verified in conversation.', to: '/solutions/permit-to-work' },
      { num: '02', title: 'Procedural Communication Compliance', desc: 'Operator rounds, startup, shutdown, switching.', to: '/solutions/procedural-compliance' },
      { num: '03', title: 'Shift Handover Integrity',            desc: 'Nothing falls between shifts.', to: '/solutions/shift-handover' },
      { num: '04', title: 'Gas, Fire & Hazard Alarm Response',   desc: 'Hazard language, escalated in seconds.', to: '/solutions/alarm-response' },
      { num: '05', title: 'Incident Detection & Reconstruction', desc: 'Every incident, end to end.', to: '/solutions/incident-detection' },
      { num: '06', title: 'Custom Event Detection',              desc: 'You define what matters.', to: '/solutions/custom-detection' },
      { num: '07', title: 'Multilingual Field Operations',       desc: 'Six languages, automatic.', to: '/solutions/multilingual-operations' },
    ],
    foot: { label: 'All solutions', to: '/solutions' },
  },
  {
    label: 'Industries',
    items: [
      { num: '01', title: 'Energy & Utilities',      desc: 'Refineries, generation, transmission.', to: '/industries/energy' },
      { num: '02', title: 'Aviation',                desc: 'Ramp, MRO, ground handling.', to: '/industries/aviation' },
      { num: '03', title: 'Mining',                  desc: 'Surface and underground.', to: '/industries/mining' },
      { num: '04', title: 'Construction',            desc: 'Multi-site, multilingual crews.', to: '/industries/construction' },
      { num: '05', title: 'Emergency Services',      desc: 'Fire, EMS, dispatch.', to: '/industries/emergency-services' },
      { num: '06', title: 'Defense',                 desc: 'Multi-agency operations.', to: '/industries/defense' },
      { num: '07', title: 'Logistics & Ports',       desc: 'Cargo, ramp, terminal control.', to: '/industries/logistics' },
    ],
    foot: { label: 'All industries', to: '/industries' },
  },
  {
    label: 'Platform',
    items: [
      { num: '01', title: 'How Cortexa Understands',   desc: 'The intelligence layer beneath every module.', to: '/platform/understanding' },
      { num: '02', title: 'Data Sovereignty & Local AI', desc: 'No external AI. No data egress. Ever.', to: '/platform/data-sovereignty' },
      { num: '03', title: 'Security & Compliance',     desc: 'Built for regulated environments.', to: '/platform/security' },
      { num: '04', title: 'Multi-Site & Multi-Channel', desc: 'Every site, every channel, one plane.', to: '/platform/multi-site' },
      { num: '05', title: 'Integrations',              desc: 'PTT/PMR, identity, reporting.', to: '/platform/integrations' },
    ],
    foot: { label: 'Platform overview', to: '/platform' },
  },
];

function Nav() {
  const { navigate } = useRouter();
  const [open, setOpen] = useState(null);

  useEffect(() => {
    const onDocClick = (e) => {
      if (!e.target.closest('.nav-item') && !e.target.closest('.dropdown')) setOpen(null);
    };
    document.addEventListener('click', onDocClick);
    return () => document.removeEventListener('click', onDocClick);
  }, []);

  return (
    <header className="topbar">
      <div className="container-wide topbar-inner">
        <BrandWord />

        <nav className="nav-links" onMouseLeave={() => setOpen(null)}>
          {NAV.map((group) => (
            <div key={group.label} style={{ position: 'relative' }}>
              <button
                className="nav-item"
                onMouseEnter={() => setOpen(group.label)}
                onClick={() => setOpen(open === group.label ? null : group.label)}
                aria-expanded={open === group.label}
              >
                {group.label}
                <span className="chev" />
              </button>
              <div className={'dropdown ' + (open === group.label ? 'open' : '')}>
                {group.items.map((item) => (
                  <Link key={item.to} to={item.to} className="dropdown-row" onClick={() => setOpen(null)}>
                    <span className="num">{item.num}</span>
                    <span>
                      <div className="title">{item.title}</div>
                      <div className="desc">{item.desc}</div>
                    </span>
                  </Link>
                ))}
                <div className="dropdown-foot">
                  <span>{group.label.toUpperCase()}</span>
                  <Link to={group.foot.to} onClick={() => setOpen(null)}>{group.foot.label} →</Link>
                </div>
              </div>
            </div>
          ))}
          <Link to="/about" className="nav-item">About</Link>
          <Link to="/contact" className="nav-item">Contact</Link>
        </nav>

        <Link to="/demo" className="btn btn-primary">
          Request a Pilot <span className="arrow">→</span>
        </Link>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container-wide">
        <div className="footer-grid">
          <div className="footer-col">
            <div className="brand-mark">
              <img src="assets/logo2.png" alt="Cortexa Labs" style={{ height: 36, width: 'auto', display: 'block' }} />
              <span style={{ color: '#fff' }}>Cortexa Labs</span>
            </div>
            <p className="footer-tag">
              Industrial voice intelligence. Every transmission, structured. Runs on your own infrastructure.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 24, flexWrap: 'wrap' }}>
              <span className="chip" style={{ color: 'var(--slate-300)' }}>EN</span>
              <span className="chip" style={{ color: 'var(--slate-300)' }}>AR</span>
              <span className="chip" style={{ color: 'var(--slate-300)' }}>ES</span>
              <span className="chip" style={{ color: 'var(--slate-300)' }}>FR</span>
              <span className="chip" style={{ color: 'var(--slate-300)' }}>NL</span>
              <span className="chip" style={{ color: 'var(--slate-300)' }}>DE</span>
            </div>
          </div>

          <div className="footer-col">
            <h5>Products</h5>
            <ul>
              <li><Link to="/products/voice">Cortexa Voice</Link></li>
              <li><Link to="/products/safe">Cortexa Safe</Link></li>
              <li><Link to="/products/ops">Cortexa Ops</Link></li>
              <li><Link to="/products/signal">Cortexa Signal</Link></li>
            </ul>
          </div>

          <div className="footer-col">
            <h5>Solutions</h5>
            <ul>
              <li><Link to="/solutions/permit-to-work">Permit-to-Work</Link></li>
              <li><Link to="/solutions/procedural-compliance">Procedural Compliance</Link></li>
              <li><Link to="/solutions/shift-handover">Shift Handover</Link></li>
              <li><Link to="/solutions">All solutions</Link></li>
            </ul>
          </div>

          <div className="footer-col">
            <h5>Industries</h5>
            <ul>
              <li><Link to="/industries/energy">Energy & Utilities</Link></li>
              <li><Link to="/industries/aviation">Aviation</Link></li>
              <li><Link to="/industries/construction">Construction</Link></li>
              <li><Link to="/industries">All industries</Link></li>
            </ul>
          </div>

          <div className="footer-col">
            <h5>Platform</h5>
            <ul>
              <li><Link to="/platform/understanding">Understanding</Link></li>
              <li><Link to="/platform/data-sovereignty">Data Sovereignty</Link></li>
              <li><Link to="/platform/security">Security</Link></li>
              <li><Link to="/platform/integrations">Integrations</Link></li>
            </ul>
          </div>

          <div className="footer-col">
            <h5>Company</h5>
            <ul>
              <li><Link to="/about">About</Link></li>
              <li><Link to="/contact">Contact</Link></li>
              <li><Link to="/demo">Request a Pilot</Link></li>
              <li><Link to="/legal/privacy">Privacy</Link></li>
              <li><Link to="/legal/terms">Terms</Link></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2026 Cortexa Labs Ltd · Registered in England and Wales · Company No. {'{CRN}'}</span>
          <span>Industrial Voice Intelligence · v1.0</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Footer, BrandWord });