// Grason-Stadler SEO Dashboard — Icons (sidebar + UI)
const Ico = ({ name, size = 16 }) => {
  const paths = {
    overview: <><rect x="2" y="2" width="5" height="5" rx="1"/><rect x="9" y="2" width="5" height="5" rx="1"/><rect x="2" y="9" width="5" height="5" rx="1"/><rect x="9" y="9" width="5" height="5" rx="1"/></>,
    keywords: <><path d="M2 8h12M5 4h9M5 12h9"/><circle cx="2.5" cy="4" r="0.7" fill="currentColor"/><circle cx="2.5" cy="12" r="0.7" fill="currentColor"/></>,
    pages: <><path d="M3 2h7l3 3v9H3V2Z"/><path d="M10 2v3h3"/></>,
    backlinks: <><path d="M6 8a3 3 0 0 1 0-4l2-1a3 3 0 0 1 4 4l-1 1M10 8a3 3 0 0 1 0 4l-2 1a3 3 0 0 1-4-4l1-1"/></>,
    technical: <><circle cx="8" cy="8" r="2"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3 3l1.5 1.5M11.5 11.5L13 13M3 13l1.5-1.5M11.5 4.5L13 3"/></>,
    ai: <><path d="M4 11V5a4 4 0 0 1 8 0v6"/><path d="M4 8h8M6 11v3M10 11v3"/></>,
    competitors: <><path d="M2 13V6l3-3 3 3 3-2 3 2v7"/><path d="M2 13h12"/></>,
    settings: <><circle cx="8" cy="8" r="2.5"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2"/></>,
    search: <><circle cx="6.5" cy="6.5" r="4"/><path d="M9.5 9.5L13 13"/></>,
    download: <><path d="M8 2v9M4 7l4 4 4-4M2 13h12"/></>,
    filter: <><path d="M2 3h12l-4 6v4l-4 1V9L2 3Z"/></>,
    arrow: <><path d="M3 8h10M9 4l4 4-4 4"/></>,
    up: <><path d="M3 10l5-5 5 5"/></>,
    down: <><path d="M3 6l5 5 5-5"/></>,
    close: <><path d="M3 3l10 10M13 3L3 13"/></>,
    chev: <><path d="M5 6l3 3 3-3"/></>,
    plus: <><path d="M8 3v10M3 8h10"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name] || null}
    </svg>
  );
};

const BrandLogo = ({ height = 22, brand }) => {
  const tile = (brand && brand.logoTile) || "psf";
  const name = (brand && brand.logoName) || "network";
  return (
    <svg viewBox="0 0 280 72" style={{ height, width: "auto" }} aria-label={`${tile}${name}`}>
      <rect x="2" y="6" width="60" height="60" rx="2" fill="currentColor"/>
      <text x="32" y="46" fontFamily="Inter, sans-serif" fontSize="22" fontWeight="700" letterSpacing="-0.5" fill="var(--paper, #FBFAF7)" textAnchor="middle">{tile}</text>
      <text x="74" y="48" fontFamily="Inter, sans-serif" fontSize="30" fontWeight="500" letterSpacing="-0.8" fill="currentColor">{name}</text>
    </svg>
  );
};

Object.assign(window, { Ico, BrandLogo });