// Shared UI: brand mark, nav, footer, icons.

window.BrandMark = function BrandMark({ size = 22 }) {
  return (
    <svg className="brand-mark" width={size} height={size} viewBox="0 0 22 22" fill="none">
      <circle cx="11" cy="11" r="2.8" fill="#7c7cff" />
      <circle cx="4" cy="5.5" r="1.6" fill="#ff9a5b" />
      <circle cx="18" cy="5.5" r="1.6" fill="#5ed694" />
      <circle cx="4" cy="16.5" r="1.6" fill="#ff6d6d" />
      <circle cx="18" cy="16.5" r="1.6" fill="#ffd66d" />
      <g stroke="rgba(255,255,255,0.35)" strokeWidth="0.7">
        <line x1="11" y1="11" x2="4" y2="5.5" />
        <line x1="11" y1="11" x2="18" y2="5.5" />
        <line x1="11" y1="11" x2="4" y2="16.5" />
        <line x1="11" y1="11" x2="18" y2="16.5" />
      </g>
    </svg>
  );
};

window.Nav = function Nav({ route, navigate }) {
  const metagraphOn = !!(window.__ENV && window.__ENV.METAGRAPH_ENABLED);
  const links = [
    { id: 'graphs', label: 'Knowledge Graphs' },
    { id: 'portal', label: 'Portal' },
    { id: 'pricing', label: 'Pricing' },
  ];
  if (metagraphOn) links.unshift({ id: 'metagraph', label: 'Metagraph' });

  // Mobile drawer state. The CSS only reveals the burger at <=760px, so on
  // desktop the toggle is just dead weight (display:none). Close on route
  // change so tapping a link doesn't leave the drawer hanging.
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => { setOpen(false); }, [route]);
  React.useEffect(() => {
    // Lock body scroll while the drawer is open so the page doesn't slide
    // around behind it.
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, [open]);

  return (
    <>
      <nav className="nav">
        {/* Backdrop lives inside .nav so it sits in the same stacking
            context as the drawer below — fixed an issue where the drawer
            was inaccessible on mobile because the backdrop (rendered
            outside .nav at the document root) covered it. */}
        <div className={'nav-burger-backdrop' + (open ? ' open' : '')} onClick={() => setOpen(false)} />
        <div className="nav-left">
          <a className="brand" href="#/" onClick={(e) => { e.preventDefault(); navigate('/'); }}>
            <BrandMark />
            <span>graphite</span>
          </a>
          <div className={'nav-links' + (open ? ' open' : '')}>
            {links.map((l) => {
              // External links (Docs → Swagger) open in a new tab.
              if (l.external && l.href) {
                return (
                  <a key={l.id} className="nav-link" href={l.href} target="_blank" rel="noopener noreferrer" onClick={() => setOpen(false)}>
                    {l.label}
                  </a>
                );
              }
              return (
                <a
                  key={l.id}
                  className={'nav-link' + (route.startsWith('/' + l.id) ? ' active' : '')}
                  href={'#/' + l.id}
                  onClick={(e) => {
                    e.preventDefault();
                    navigate('/' + l.id);
                    setOpen(false);
                  }}
                >{l.label}</a>
              );
            })}
          </div>
        </div>
        <div className="nav-right">
          <a className="btn btn-accent" href="#/pricing" onClick={(e) => { e.preventDefault(); navigate('/pricing'); }}>Get access</a>
          <button
            className="nav-burger"
            aria-label={open ? 'Close menu' : 'Open menu'}
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
          >
            <BurgerIcon open={open} />
          </button>
        </div>
      </nav>
    </>
  );
};

function BurgerIcon({ open }) {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
      {open ? (
        <>
          <line x1="6" y1="6" x2="18" y2="18" />
          <line x1="18" y1="6" x2="6" y2="18" />
        </>
      ) : (
        <>
          <line x1="4" y1="7" x2="20" y2="7" />
          <line x1="4" y1="12" x2="20" y2="12" />
          <line x1="4" y1="17" x2="20" y2="17" />
        </>
      )}
    </svg>
  );
}

window.Footer = function Footer({ navigate }) {
  // Only render links that point somewhere real. Placeholders removed
  // rather than rendered as inert "#" anchors — the user complained
  // (rightly) about fake links.
  const docs = window.api ? window.api.docsUrl() : null;
  const status = window.api ? window.api.statusUrl() : null;
  const year = new Date().getFullYear();
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-row">
          <div className="footer-brand">
            <div className="brand" style={{marginBottom:14}}>
              <BrandMark />
              <span>graphite</span>
            </div>
            Structured world knowledge, continuously verified. Built for analysts, agents, and applications that need to reason — not just retrieve.
          </div>
          <div className="footer-cols">
            <div className="footer-col">
              <div className="footer-col-h">Product</div>
              <a href="#/graphs" onClick={(e)=>{e.preventDefault();navigate('/graphs');}}>Knowledge graphs</a>
              <a href="#/graphs/financial" onClick={(e)=>{e.preventDefault();navigate('/graphs/financial');}}>Financial</a>
              <a href="#/metagraph" onClick={(e)=>{e.preventDefault();navigate('/metagraph');}}>Metagraph</a>
              <a href="#/pricing" onClick={(e)=>{e.preventDefault();navigate('/pricing');}}>Pricing</a>
            </div>
            <div className="footer-col">
              <div className="footer-col-h">Developers</div>
              <a href="#/portal" onClick={(e)=>{e.preventDefault();navigate('/portal');}}>API portal</a>
              {docs && <a href={docs} target="_blank" rel="noopener noreferrer">API reference</a>}
              {status && <a href={status} target="_blank" rel="noopener noreferrer">Status</a>}
              <a href="mailto:team@graphite-ai.net">Contact</a>
            </div>
          </div>
        </div>
        <div className="footer-base">
          <span>© {year} GRAPHITE AI · GRAPH.GRAPHITE-AI.NET</span>
        </div>
      </div>
    </footer>
  );
};

// Small inline icon set
window.Icon = function Icon({ name, size = 18, ...rest }) {
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', ...rest };
  const paths = {
    search: <><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></>,
    plus: <><path d="M12 5v14M5 12h14" /></>,
    minus: <><path d="M5 12h14" /></>,
    chev: <path d="m9 6 6 6-6 6" />,
    chevDown: <path d="m6 9 6 6 6-6" />,
    arrow: <><path d="M5 12h14M13 6l6 6-6 6" /></>,
    check: <path d="m5 12 5 5L20 7" />,
    node: <><circle cx="6" cy="6" r="2.5" /><circle cx="18" cy="18" r="2.5" /><circle cx="18" cy="6" r="2.5" /><path d="M8 7l8 9M8 6h8" /></>,
    sparkle: <><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.5 5.5l2 2M16.5 16.5l2 2M5.5 18.5l2-2M16.5 7.5l2-2"/></>,
    shield: <path d="M12 3 5 6v6c0 4 3 7 7 9 4-2 7-5 7-9V6l-7-3z" />,
    bolt: <path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z" />,
    layers: <><path d="m12 3 9 5-9 5-9-5 9-5z"/><path d="m3 13 9 5 9-5"/><path d="m3 17 9 5 9-5"/></>,
  };
  return <svg {...common}>{paths[name]}</svg>;
};