// Shared UI for the SN43 dashboard: brand mark, slim nav, footer, icons.
// Stripped from the full graphite frontend — no router, no internal links.

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>
  );
};

// Slim nav: brand mark + subnet tag on the left, external links on the right.
// No internal routing — this site is a single page.
window.Nav = function Nav() {
  const subnetId = (window.__ENV && window.__ENV.SUBNET_ID) || 43;
  return (
    <nav className="nav">
      <div className="nav-left">
        <div className="brand">
          <BrandMark />
          <span>graphite</span>
        </div>
        <span
          className="mono"
          style={{
            marginLeft: 14,
            paddingLeft: 14,
            borderLeft: '1px solid var(--border, rgba(255,255,255,0.08))',
            color: 'var(--fg-dim)',
            fontSize: 12,
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
          }}
        >
          Subnet {subnetId} · Metagraph
        </span>
      </div>
      <div className="nav-right">
        <a
          className="btn btn-ghost"
          href="https://taostats.io/subnets/43"
          target="_blank"
          rel="noopener noreferrer"
        >View on Taostats</a>
      </div>
    </nav>
  );
};

window.Footer = function Footer() {
  const year = new Date().getFullYear();
  const subnetId = (window.__ENV && window.__ENV.SUBNET_ID) || 43;
  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>
            Bittensor Subnet {subnetId} — a decentralized network of independent
            contributors building a continuously-verified knowledge graphs.
          </div>
          <div className="footer-cols">
            <div className="footer-col">
              <div className="footer-col-h">Subnet</div>
              <a href="https://taostats.io/subnets/43" target="_blank" rel="noopener noreferrer">Taostats</a>
              <a href="https://github.com/GraphiteAI/FinancialKnowledgeGraph" target="_blank" rel="noopener noreferrer">GitHub</a>
            </div>
          </div>
        </div>
        <div className="footer-base">
          <span>© {year} GRAPHITE AI · DASHBOARD.GRAPHITE-AI.NET</span>
        </div>
      </div>
    </footer>
  );
};

// Inline icon set — same as the main frontend, kept verbatim so any styles
// referencing icon paths still work.
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" /></>,
    arrow: <><path d="M5 12h14M13 6l6 6-6 6" /></>,
    check: <path d="m5 12 5 5L20 7" />,
  };
  return <svg {...common}>{paths[name]}</svg>;
};