// app.jsx — shell: hash router, nav, footer, tweaks panel, theme propagation
// Pages are imported from pages.jsx (and individual scaffold files).

const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "topoIntensity": "medium",
  "topoMotion": true,
  "contourStyle": "terrain",
  "logoTreatment": "wordmark",
  "density": "comfortable",
  "droneLayer": false
}/*EDITMODE-END*/;

// ───────────── Logo ─────────────
function Logo({ treatment }) {
  const wm = (
    <span className="nav-logo-text">
      <span>ERGANE</span>
      <span style={{ color: 'var(--text-3)', padding: '0 4px' }}>/</span>
      <span>SYSTEMS</span>
    </span>
  );
  if (treatment === 'ring') {
    return (
      <a href="#/" className="nav-logo" aria-label="Ergane Systems">
        <span className="ring" />
        {wm}
      </a>
    );
  }
  if (treatment === 'chevron') {
    return (
      <a href="#/" className="nav-logo" aria-label="Ergane Systems">
        <span className="chev" />
        {wm}
      </a>
    );
  }
  if (treatment === 'bracket') {
    return (
      <a href="#/" className="nav-logo" aria-label="Ergane Systems">
        <span style={{ color: 'var(--wp)', fontFamily: 'var(--f-mono)' }}>[</span>
        {wm}
        <span style={{ color: 'var(--wp)', fontFamily: 'var(--f-mono)' }}>]</span>
      </a>
    );
  }
  return (
    <a href="#/" className="nav-logo" aria-label="Ergane Systems">{wm}</a>
  );
}

// ───────────── Nav ─────────────
function Nav({ route, treatment }) {
  const [menuOpen, setMenuOpen] = useState(false);

  const links = [
    ['#/',          'Home'],
    ['#/platform',  'Platform'],
    ['#/use-cases', 'Mission Sets'],
    ['#/about',     'About'],
  ];

  // The drawer is only reachable below 720px, where the toggle renders. Close it
  // whenever the route changes so it never survives a navigation.
  useEffect(() => { setMenuOpen(false); }, [route]);

  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <Logo treatment={treatment} />
        <nav className="nav-links" aria-label="primary">
          {links.map(([h, label]) => (
            <a key={h} href={h} className={route === h ? 'active' : ''}>{label}</a>
          ))}
        </nav>
        <div className="nav-actions">
          <a className="btn" href="mailto:info@erganesystems.com" style={{ padding: '10px 16px', fontSize: 11 }}>
            Contact
          </a>
          <button
            className="nav-toggle"
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((o) => !o)}
          >
            <span className="nav-toggle-bar" />
            <span className="nav-toggle-bar" />
            <span className="nav-toggle-bar" />
          </button>
        </div>
      </div>

      {menuOpen && (
        <nav className="nav-drawer" aria-label="primary mobile">
          <div className="wrap">
            {links.map(([h, label]) => (
              <a key={h} href={h} className={route === h ? 'active' : ''}>{label}</a>
            ))}
          </div>
        </nav>
      )}
    </header>
  );
}

// ───────────── Footer ─────────────
function Footer() {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-col">
            <div className="foot-mark">ERGANE / SYSTEMS</div>
            <p className="foot-disclaim" style={{ marginTop: 14 }}>
              Autonomous Mission Coordination. ADOS is the orchestration layer for
              autonomous systems — across SOF, conventional military, civilian
              search and rescue, law enforcement, and government partners.
            </p>
            <div className="meta" style={{ marginTop: 22 }}>info@erganesystems.com</div>
          </div>
          <div className="foot-col">
            <h4>Platform</h4>
            <ul>
              <li><a href="#/platform">ADOS overview</a></li>
              <li><a href="#/platform">Core services</a></li>
              <li><a href="#/platform">Autonomy patterns</a></li>
              <li><a href="#/platform">Node family</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Programs</h4>
            <ul>
              <li><a href="#/use-cases">Mission sets</a></li>
              <li><a href="#/about">About</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Notice</h4>
            <ul>
              <li><span className="muted-2">Capabilities described reflect a mix of validated, in-development, and planned features. Defense-related disclosures comply with ITAR/EAR where applicable.</span></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2026 Ergane Systems LLC</div>
          <div>Made in CONUS</div>
        </div>
      </div>
    </footer>
  );
}

// ───────────── Hash router ─────────────
function useRoute() {
  const [hash, setHash] = useState(window.location.hash || '#/');
  useEffect(() => {
    const onHash = () => {
      setHash(window.location.hash || '#/');
      // scroll to top on navigation
      window.scrollTo(0, 0);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return hash;
}

// ───────────── Tweaks panel ─────────────
function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Topography" />
      <TweakRadio  label="Intensity" value={t.topoIntensity}
                   options={['subtle', 'medium', 'heavy']}
                   onChange={(v) => { setTweak('topoIntensity', v); window.__topo && window.__topo.set('intensity', v); }} />
      <TweakToggle label="Motion" value={t.topoMotion}
                   onChange={(v) => { setTweak('topoMotion', v); window.__topo && window.__topo.set('motion', v); }} />
      <TweakSelect label="Style" value={t.contourStyle}
                   options={['terrain', 'probability', 'layered']}
                   onChange={(v) => { setTweak('contourStyle', v); window.__topo && window.__topo.set('style', v); }} />

      <TweakSection label="Tactical" />
      <TweakToggle label="Drone layer" value={t.droneLayer}
                   onChange={(v) => { setTweak('droneLayer', v); window.__drones && window.__drones.set('active', v); }} />

      <TweakSection label="Brand" />
      <TweakSelect label="Logo treatment" value={t.logoTreatment}
                   options={['wordmark', 'ring', 'chevron', 'bracket']}
                   onChange={(v) => setTweak('logoTreatment', v)} />

      <TweakSection label="Layout" />
      <TweakRadio  label="Density" value={t.density}
                   options={['comfortable', 'compact']}
                   onChange={(v) => setTweak('density', v)} />
    </TweaksPanel>
  );
}

// Dev-only gate: the panel renders on localhost and nowhere else. There is no
// query-string escape hatch — it is not reachable on the deployed site.
function showTweaks() {
  if (typeof window === 'undefined') return false;
  const host = window.location.hostname;
  return host === 'localhost' || host === '127.0.0.1' || host === '';
}

// ───────────── App ─────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const route = useRoute();

  // Propagate tweaks to topo + body data-attrs
  useEffect(() => {
    if (window.__topo) {
      window.__topo.set('intensity', t.topoIntensity);
      window.__topo.set('motion',    t.topoMotion);
      window.__topo.set('style',     t.contourStyle);
    }
  }, [t.topoIntensity, t.topoMotion, t.contourStyle]);

  useEffect(() => {
    if (window.__drones) window.__drones.set('active', t.droneLayer);
  }, [t.droneLayer]);

  useEffect(() => {
    document.body.setAttribute('data-density', t.density);
  }, [t.density]);

  let Page;
  if      (route === '#/platform')  Page = window.PagePlatform;
  else if (route === '#/use-cases') Page = window.PageUseCases;
  else if (route === '#/about')     Page = window.PageAbout;
  else                              Page = window.PageHome;

  return (
    <>
      <Nav route={route} treatment={t.logoTreatment} />
      <main className="page" data-screen-label={pageLabel(route)}>
        {Page ? <Page /> : <div className="wrap" style={{ padding: '120px 0' }}>Loading…</div>}
      </main>
      <Footer />
      {showTweaks() && <TweaksUI t={t} setTweak={setTweak} />}
    </>
  );
}

function pageLabel(route) {
  if (route === '#/platform')  return '02 Platform';
  if (route === '#/use-cases') return '03 Mission Sets';
  if (route === '#/about')     return '05 About';
  return '01 Home';
}

// Mount
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);