/* global React */
/* ============================================================
   MYTHOS CHROME — Nav + Footer for the Mythos overhaul.
   Same routes as the original site; new voice and skin.
   ============================================================ */
const { useState, useEffect, useRef } = React;

window.MythosNav = function MythosNav({ route, setRoute }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [toolsOpen, setToolsOpen] = useState(false);
  const toolsRef = useRef(null);

  const TOOL_ROUTES = ['revscout-s', 'revtoolbox', 'emi', 'revfield', 'revsizer', 'optimize'];
  const toolLinks = [
    { id: 'emi',        num: '01', label: 'EMI Soil Scanning', sub: 'Soil conductivity at 3 depths' },
    { id: 'revtoolbox', num: '02', label: 'RevToolbox',        sub: 'Data portal + satellite vigour' },
    { id: 'revscout-s', num: '03', label: 'RevScout S',        sub: 'Fruit count + size camera' },
    { id: 'revsizer',   num: '04', label: 'Rev-Sizer',         sub: 'Hand-held caliper' },
    { id: 'revfield',   num: '05', label: 'RevField',          sub: 'Pest & disease scouting' },
    { id: 'optimize',   num: '06', label: 'Precision Go-to Guide', sub: 'Putting the layers to work' },
  ];
  const toolActive = TOOL_ROUTES.includes(route);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    if (!toolsOpen) return;
    const onDoc = (e) => { if (toolsRef.current && !toolsRef.current.contains(e.target)) setToolsOpen(false); };
    const onKey = (e) => { if (e.key === 'Escape') setToolsOpen(false); };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [toolsOpen]);

  useEffect(() => { setToolsOpen(false); setOpen(false); }, [route]);
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const go = (id) => (e) => { e.preventDefault(); setRoute(id); };

  return (
    <nav className={`myth-nav ${scrolled || open ? 'scrolled' : ''}`} aria-label="Main">
      <div className="myth-nav-inner">
        <a className="myth-logo" href="#" onClick={go('home')} aria-label="Revolute Systems — home">
          <window.RevGlyph size={36} />
          <span className="myth-logo-words">
            <span className="myth-logo-name">Revolute Systems</span>
            <span className="myth-logo-tag">Making precision practical</span>
          </span>
        </a>

        <div className="myth-nav-links">
          <a href="#" className={`myth-nav-link ${route === 'home' ? 'active' : ''}`} onClick={go('home')}>Home</a>

          <div className={`myth-dropdown ${toolsOpen ? 'open' : ''}`} ref={toolsRef}>
            <button type="button"
              className={`myth-nav-link ${toolActive ? 'active' : ''}`}
              aria-haspopup="true" aria-expanded={toolsOpen}
              onClick={() => setToolsOpen(o => !o)}>
              The Instruments ▾
            </button>
            <div className="myth-dropdown-panel" role="menu">
              <div className="myth-dropdown-eyebrow">Instruments &amp; Services</div>
              {toolLinks.map(t => (
                <a key={t.id} href="#" role="menuitem"
                  className={`myth-dropdown-item ${route === t.id ? 'active' : ''}`}
                  onClick={(e) => { e.preventDefault(); setToolsOpen(false); setRoute(t.id); }}>
                  <span className="myth-dropdown-item-label">
                    <span className="myth-dropdown-item-num">{t.num}</span>
                    {t.label}
                  </span>
                  <span className="myth-dropdown-item-sub">{t.sub}</span>
                </a>
              ))}
            </div>
          </div>

          <a href="#" className={`myth-nav-link ${route === 'case-study' ? 'active' : ''}`} onClick={go('case-study')}>The Ledger</a>
          <a href="#" className={`myth-nav-link ${route === 'pricing' ? 'active' : ''}`} onClick={go('pricing')}>Pricing</a>
          <a href="#" className={`myth-nav-link ${route === 'contact' ? 'active' : ''}`} onClick={go('contact')}>Contact</a>
        </div>

        <div className="myth-nav-actions">
          <a className="myth-btn myth-btn-ghost" style={{ padding: '11px 18px' }} href="http://revtoolbox.co.za" target="_blank" rel="noreferrer">RevToolbox ↗</a>
          <a className="myth-btn myth-btn-primary" style={{ padding: '11px 18px' }} href="#" onClick={go('contact')}>Begin the reading</a>
          <button className={`myth-burger ${open ? 'open' : ''}`} aria-label="Menu" aria-expanded={open} onClick={() => setOpen(o => !o)}>
            <span></span>
          </button>
        </div>
      </div>

      <div className={`myth-drawer ${open ? 'open' : ''}`} role="dialog" aria-modal="true" aria-hidden={!open}>
        <button className={`myth-drawer-link ${route === 'home' ? 'active' : ''}`} onClick={() => setRoute('home')}>
          <span className="num">00</span><span>Home</span>
        </button>
        {toolLinks.map(t => (
          <button key={t.id} className={`myth-drawer-link ${route === t.id ? 'active' : ''}`} onClick={() => setRoute(t.id)}>
            <span className="num">{t.num}</span><span>{t.label}</span>
          </button>
        ))}
        <button className={`myth-drawer-link ${route === 'case-study' ? 'active' : ''}`} onClick={() => setRoute('case-study')}>
          <span className="num">07</span><span>The Ledger</span>
        </button>
        <button className={`myth-drawer-link ${route === 'pricing' ? 'active' : ''}`} onClick={() => setRoute('pricing')}>
          <span className="num">08</span><span>Pricing</span>
        </button>
        <button className={`myth-drawer-link ${route === 'contact' ? 'active' : ''}`} onClick={() => setRoute('contact')}>
          <span className="num">09</span><span>Contact</span>
        </button>
        <div className="myth-drawer-foot">
          DATAVOICE HOUSE · 16 ELEKTRON AVE<br />
          TECHNOPARK · STELLENBOSCH · ZA<br />
          33°55′12″S 18°51′30″E
        </div>
      </div>
    </nav>
  );
};

window.MythosFooter = function MythosFooter({ setRoute }) {
  const go = (id) => (e) => { e.preventDefault(); setRoute(id); };
  return (
    <footer className="myth-footer">
      <div className="myth-container">
        <div className="myth-footer-grid">
          <div>
            <window.RevWordmark variant="light" height={52} />
            <p className="myth-footer-blurb">
              Tree-level precision agriculture for orchards. Every block has a story written in soil, canopy and fruit — we read it, and write the next chapter in millimetres.
            </p>
          </div>
          <div>
            <h5>The Instruments</h5>
            <ul>
              <li><a href="#" onClick={go('emi')}>EMI Soil Scanning</a></li>
              <li><a href="#" onClick={go('revtoolbox')}>RevToolbox &amp; Satellite</a></li>
              <li><a href="#" onClick={go('revscout-s')}>RevScout S</a></li>
              <li><a href="#" onClick={go('revsizer')}>Rev-Sizer Caliper</a></li>
              <li><a href="#" onClick={go('revfield')}>RevField App</a></li>
              <li><a href="#" onClick={go('optimize')}>Precision Go-to Guide</a></li>
            </ul>
          </div>
          <div>
            <h5>The Record</h5>
            <ul>
              <li><a href="#" onClick={go('case-study')}>The Ledger — case study</a></li>
              <li><a href="#" onClick={go('optimize')}>Variable Rate Nitrogen</a></li>
              <li><a href="#" onClick={go('optimize')}>Yield Estimation</a></li>
              <li><a href="#" onClick={go('optimize')}>Fruit Size Management</a></li>
              <li><a href="#" onClick={go('optimize')}>Irrigation Optimising</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#" onClick={go('pricing')}>Pricing</a></li>
              <li><a href="#" onClick={go('contact')}>Contact</a></li>
              <li><a href="http://revtoolbox.co.za" target="_blank" rel="noreferrer">RevToolbox Login ↗</a></li>
              <li><a href="https://revfruitsizing.co.za/" target="_blank" rel="noreferrer">RevFruitsizing Login ↗</a></li>
            </ul>
            <div className="myth-footer-address">
              Datavoice House, 16 Elektron Avenue<br />
              Technopark, Stellenbosch<br />
              Western Cape, South Africa
            </div>
          </div>
        </div>
        <div className="myth-footer-bottom">
          <span>© 2026 Revolute Systems</span>
          <span>Written in Stellenbosch · 33°55′12″S 18°51′30″E</span>
        </div>
      </div>
    </footer>
  );
};