/* Paragmatiq Nav + Footer, distinct from Paragmatiq. */

const { useState: useStateChrome, useEffect: useEffectChrome } = React;

/* ----- Geometric mark (different from Paragmatiq's mark) ----- */
function ParagmatiqMark({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 28 28" fill="none" aria-hidden="true">
      {/* Stacked triangles, a quietly geometric, stable identity */}
      <path d="M 14 2 L 26 14 L 14 26 L 2 14 Z" stroke="#C9A14A" strokeWidth="1.6" />
      <path d="M 14 7 L 21 14 L 14 21 L 7 14 Z" stroke="#C9A14A" strokeWidth="1.6" fill="#0A1F44" />
      <circle cx="14" cy="14" r="1.8" fill="#C9A14A" />
    </svg>
  );
}

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

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

  const productItems = [
    { to: '/products/voice',  num: '01', title: 'Paragmatiq Voice',  desc: 'Capture, thread, transcribe, recognise.' },
    { to: '/products/safe',   num: '02', title: 'Paragmatiq Safe',   desc: 'Safety event detection.' },
    { to: '/products/ops',    num: '03', title: 'Paragmatiq Ops',    desc: 'Procedural verification.' },
    { to: '/products/signal', num: '04', title: 'Paragmatiq Signal', desc: 'Custom intelligence.' },
  ];
  const solutionItems = [
    { to: '/solutions/permit-to-work',        title: 'Permit-to-Work',           desc: 'Verified in conversation.' },
    { to: '/solutions/procedural-compliance', title: 'Procedural Compliance',    desc: 'Real-time, not quarterly audit.' },
    { to: '/solutions/shift-handover',        title: 'Shift Handover Integrity', desc: 'Nothing falls between shifts.' },
    { to: '/solutions/alarm-response',        title: 'Alarm Response',           desc: 'Every event timed.' },
    { to: '/solutions/incident-detection',    title: 'Incident Reconstruction',  desc: 'Every transmission, in order.' },
    { to: '/solutions/custom-detection',      title: 'Custom Event Detection',   desc: 'Your concepts, watched.' },
    { to: '/solutions/multilingual-operations', title: 'Multilingual Operations', desc: 'Six languages, one record.' },
  ];
  const platformItems = [
    { to: '/platform/understanding',     num: '01', title: 'Understanding',          desc: 'The intelligence layer.' },
    { to: '/platform/data-sovereignty',  num: '02', title: 'Data Sovereignty',       desc: 'Local AI. No external providers.' },
    { to: '/platform/security',          num: '03', title: 'Security & Compliance', desc: 'Regulated environments.' },
    { to: '/platform/multi-site',        num: '04', title: 'Multi-Site',             desc: 'Every site, every channel.' },
    { to: '/platform/integrations',      num: '05', title: 'Integrations',           desc: 'PTT, identity, reporting.' },
  ];
  const industryItems = [
    { to: '/industries/energy',             title: 'Energy & Utilities' },
    { to: '/industries/aviation',           title: 'Aviation' },
    { to: '/industries/construction',       title: 'Construction & Heavy' },
    { to: '/industries/emergency-services', title: 'Emergency Services' },
    { to: '/industries/mining',             title: 'Mining' },
    { to: '/industries/defense',            title: 'Defense' },
    { to: '/industries/logistics',          title: 'Logistics & Ports' },
  ];

  const renderDropdown = (key, items, foot) => (
    <div className={'dropdown ' + (open === key ? 'open' : '')}>
      {items.map((it) => (
        <Link key={it.to} to={it.to} className="dropdown-row" onClick={() => setOpen(null)}>
          {it.num && <span className="num">{it.num}</span>}
          {!it.num && <span className="num">›</span>}
          <span>
            <div className="title">{it.title}</div>
            {it.desc && <div className="desc">{it.desc}</div>}
          </span>
          <span className="arrow">→</span>
        </Link>
      ))}
      {foot}
    </div>
  );

  const isActive = (prefix) => path.startsWith(prefix);

  return (
    <header className="topbar">
      <div className="container topbar-inner">
        <Link to="/" className="brand-mark">
          <ParagmatiqMark />
          <span>Paragmatiq</span>
          <span className="mark-suffix">Systems</span>
        </Link>

        <nav className="nav-links" aria-label="Primary">
          <div className="nav-item-wrap" style={{ position: 'relative' }}>
            <button className={'nav-item ' + (isActive('/products') ? 'active' : '')} onClick={() => setOpen(open === 'products' ? null : 'products')}>
              Products <span className="chev" />
            </button>
            {renderDropdown('products', productItems, <div className="dropdown-foot"><span>FOUR MODULES · ONE PLATFORM</span><Link to="/products" onClick={() => setOpen(null)}>View all →</Link></div>)}
          </div>

          <div className="nav-item-wrap" style={{ position: 'relative' }}>
            <button className={'nav-item ' + (isActive('/solutions') ? 'active' : '')} onClick={() => setOpen(open === 'solutions' ? null : 'solutions')}>
              Solutions <span className="chev" />
            </button>
            {renderDropdown('solutions', solutionItems, <div className="dropdown-foot"><span>USE CASES</span><Link to="/solutions" onClick={() => setOpen(null)}>View all →</Link></div>)}
          </div>

          <div className="nav-item-wrap" style={{ position: 'relative' }}>
            <button className={'nav-item ' + (isActive('/industries') ? 'active' : '')} onClick={() => setOpen(open === 'industries' ? null : 'industries')}>
              Industries <span className="chev" />
            </button>
            {renderDropdown('industries', industryItems, <div className="dropdown-foot"><span>SEVEN VERTICALS</span><Link to="/industries" onClick={() => setOpen(null)}>View all →</Link></div>)}
          </div>

          <div className="nav-item-wrap" style={{ position: 'relative' }}>
            <button className={'nav-item ' + (isActive('/platform') ? 'active' : '')} onClick={() => setOpen(open === 'platform' ? null : 'platform')}>
              Platform <span className="chev" />
            </button>
            {renderDropdown('platform', platformItems, <div className="dropdown-foot"><span>UNDER EVERY MODULE</span><Link to="/platform" onClick={() => setOpen(null)}>View all →</Link></div>)}
          </div>

          <Link to="/about" className={'nav-item ' + (isActive('/about') ? 'active' : '')}>About</Link>
        </nav>

        <div className="nav-right">
          <span className="site-indicator">PARAGMATIQ.COM</span>
          <Link to="/demo" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 12 }}>Request Pilot <span className="arrow">→</span></Link>
        </div>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <Link to="/" className="brand-mark">
              <ParagmatiqMark size={24} />
              <span>Paragmatiq</span>
              <span className="mark-suffix">Systems</span>
            </Link>
            <p className="footer-tag">Industrial voice intelligence on infrastructure you control. Sovereign deployment, no external AI providers.</p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 4 }}>
              <span className="chip chip-dark chip-dot">SOVEREIGN DEPLOYMENT</span>
              <span className="chip chip-dark">NO EXTERNAL AI</span>
            </div>
          </div>
          <div className="footer-col">
            <h5>Products</h5>
            <ul>
              <li><Link to="/products/voice">Paragmatiq Voice</Link></li>
              <li><Link to="/products/safe">Paragmatiq Safe</Link></li>
              <li><Link to="/products/ops">Paragmatiq Ops</Link></li>
              <li><Link to="/products/signal">Paragmatiq 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/emergency-services">Emergency Services</Link></li>
              <li><Link to="/industries">All industries →</Link></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Platform & Co.</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="/about">About</Link></li>
              <li><Link to="/contact">Contact</Link></li>
              <li><Link to="/demo">Request a Pilot</Link></li>
            </ul>
          </div>
        </div>

        <div className="footer-meta">
          <div>
            © 2026 PARAGMATIQ SYSTEMS LTD<br/>
            INDUSTRIAL VOICE INTELLIGENCE · SOVEREIGN DEPLOYMENT ON YOUR INFRASTRUCTURE.<br/>
            REGISTERED OFFICE · TBC · HELLO@PARAGMATIQ.COM · SUPPORT BY ARRANGEMENT
          </div>
          <div className="footer-legal-row">
            <Link to="/legal/privacy">Privacy</Link>
            <Link to="/legal/terms">Terms</Link>
            <Link to="/legal/cookies">Cookies</Link>
            <a href="/ai/" style={{ opacity: 0.55 }}>AI-readable overview</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

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