/* Octodus clone — icons & brand logos (ported from octomatica, read-only reference) */

function Icon({ name, size = 22, stroke = 1.7 }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    product:    <><path d="M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z"/><path d="M3 7.5 12 12l9-4.5M12 21v-9"/></>,
    content:    <><path d="M4 5h16M4 12h10M4 19h7"/><path d="m16 17 4-4 2 2-4 4h-2z"/></>,
    automation: <><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></>,
    analytics:  <><path d="M4 19V5M4 19h16M9 16V9M14 16v-4M19 16V7"/></>,
    arrow:      <path d="M5 12h14M13 6l6 6-6 6"/>,
    tg:         <path d="M21.5 4.5 2.5 11.8c-1 .4-1 1.7.1 2l4.6 1.3 1.7 5.2c.3.9 1.4 1 2 .3l2.4-2.6 4.8 3.5c.7.5 1.7.1 1.9-.8L23 5.7c.2-1-.7-1.7-1.5-1.2Z"/>,
    check:      <path d="M20 6 9 17l-5-5"/>,
    spark:      <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M18 6l-2.5 2.5M8.5 15.5 6 18"/>,
    play:       <path d="M7 4v16l13-8z"/>,
    chev:       <path d="m6 9 6 6 6-6"/>,
    shield:     <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/>,
    insta:      <><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="5"/><circle cx="17.5" cy="6.5" r="1.3"/></>,
    tiktok:     <path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/>,
  };
  return <svg {...p}>{paths[name] || null}</svg>;
}

const BRAND_NAMES = {
  telegram:"Telegram", github:"GitHub", google:"Google", vercel:"Vercel", docker:"Docker",
  gumroad:"Gumroad", notion:"Notion",
};

function BrandLogo({ name, size = 26 }) {
  const sv = (children, vb = "0 0 24 24") => (
    <svg width={size} height={size} viewBox={vb} fill="none" aria-hidden="true" style={{ display:"block" }}>{children}</svg>
  );
  switch (name) {
    case "telegram": return sv(<>
      <circle cx="12" cy="12" r="12" fill="#229ED9" />
      <path fill="#fff" d="M5.6 11.8 16.4 7.1c.5-.2 1 .1.84.86l-1.85 8.62c-.13.6-.5.74-.99.46l-2.7-2-1.3 1.25c-.15.14-.27.26-.55.26l.2-2.78 5.05-4.56c.22-.19-.05-.3-.34-.11l-6.24 3.92-2.69-.84c-.58-.18-.6-.58.13-.86z" />
    </>);
    case "github": return sv(<path fill="var(--ink)" d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.82-.26.82-.58v-2c-3.34.72-4.04-1.6-4.04-1.6-.55-1.4-1.34-1.77-1.34-1.77-1.08-.74.09-.73.09-.73 1.2.08 1.83 1.23 1.83 1.23 1.07 1.83 2.8 1.3 3.49 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.11-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6.01 0c2.29-1.55 3.3-1.23 3.3-1.23.66 1.66.25 2.88.12 3.18.78.84 1.24 1.91 1.24 3.22 0 4.61-2.8 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.21.69.82.57A12 12 0 0 0 12 .3" />);
    case "google": return sv(<>
      <path fill="#4285F4" d="M23.5 12.27c0-.82-.07-1.6-.2-2.36H12v4.47h6.46a5.5 5.5 0 0 1-2.4 3.62v3h3.88c2.27-2.1 3.56-5.18 3.56-8.73z" />
      <path fill="#34A853" d="M12 24c3.24 0 5.96-1.08 7.94-2.9l-3.88-3c-1.08.72-2.45 1.16-4.06 1.16-3.12 0-5.77-2.11-6.71-4.94H1.28v3.09A12 12 0 0 0 12 24z" />
      <path fill="#FBBC05" d="M5.29 14.32a7.2 7.2 0 0 1 0-4.61V6.62H1.28a12 12 0 0 0 0 10.78z" />
      <path fill="#EA4335" d="M12 4.75c1.77 0 3.35.6 4.6 1.8l3.43-3.43A11.98 11.98 0 0 0 1.28 6.62l4.01 3.1C6.23 6.86 8.88 4.74 12 4.74z" />
    </>);
    case "vercel": return sv(<path fill="var(--ink)" d="M12 3 22.5 21H1.5z" />);
    case "docker": return sv(<path fill="#2496ED" d="M23.4 9.6c-.6-.42-2.05-.57-3.16-.36-.14-1-.7-1.88-1.7-2.66l-.57-.42-.38.6c-.5.74-.7 1.78-.6 2.66.04.32.18.9.5 1.4-.32.18-.92.42-1.7.42H.6c-.32 1.94.22 4.45 1.68 6.06C3.7 18.4 5.86 19.2 8.7 19.2c6.14 0 10.7-2.82 12.83-7.96 0 0 .04 0 .04 0 .84.02 2.62-.02 3.5-1.8l.32-.6zM3.6 8.04h2.1v2.1H3.6zm0-2.7h2.1v2.1H3.6zm2.84 2.7h2.1v2.1h-2.1zm0-2.7h2.1v2.1h-2.1zm2.84 2.7h2.1v2.1h-2.1zm0-2.7h2.1v2.1h-2.1zm2.84 2.7h2.1v2.1h-2.1zm0-2.7h2.1v2.1h-2.1zm2.84 2.7h2.1v2.1h-2.1z" />);
    case "notion": return sv(<>
      <rect width="24" height="24" rx="5" fill="var(--ink)" />
      <path fill="var(--surface)" d="M8 7.2v9.6h1.5V10l4.7 6.8H16V7.2h-1.5v6.6L9.9 7.2z" />
    </>);
    case "gumroad": return sv(<>
      <rect width="24" height="24" rx="6" fill="#FF90E8"/>
      <text x="12" y="12" dominantBaseline="central" textAnchor="middle" fontFamily="system-ui, sans-serif" fontWeight="800" fontSize="14" fill="#000">g</text>
    </>);
    default: return sv(<rect width="24" height="24" rx="6" fill="var(--line-2)" />);
  }
}

Object.assign(window, { Icon, BrandLogo, BRAND_NAMES });
