// Shared icons & decorative SVGs
const Sparkle = ({ size = 24, className = "", style = {} }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" className={className} style={style}>
    <defs>
      <radialGradient id="sparkleGrad" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor="#ffffff" />
        <stop offset="60%" stopColor="#d8d8dc" />
        <stop offset="100%" stopColor="#5a5a60" />
      </radialGradient>
      <radialGradient id="sparkleCore" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor="#ffffff" />
        <stop offset="100%" stopColor="#ffffff" stopOpacity="0" />
      </radialGradient>
    </defs>
    <path
      d="M50 0 C52 30 70 48 100 50 C70 52 52 70 50 100 C48 70 30 52 0 50 C30 48 48 30 50 0Z"
      fill="url(#sparkleGrad)"
    />
    <circle cx="50" cy="50" r="30" fill="url(#sparkleCore)" opacity="0.6" />
  </svg>
);

const ArrowRight = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14" />
    <path d="m12 5 7 7-7 7" />
  </svg>
);

const Play = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M8 5v14l11-7z" />
  </svg>
);

const Check = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10" fill="rgba(255,255,255,0.08)" />
    <path d="m8 12 3 3 5-6" />
  </svg>
);

const Plus = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
    <path d="M5 12h14" />
    <path d="M12 5v14" />
  </svg>
);

const Cursor = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="white" stroke="black" strokeWidth="1">
    <path d="M5 3l5 18 3-7 7-3z" />
  </svg>
);

// Faux brand wordmarks (NOT real logos) — generic geometric marks + names
const BrandMark = ({ name }) => {
  const marks = {
    Northwind: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 22h20L12 2zm0 6 6 12H6l6-12z"/></svg>,
    Helio: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.93 4.93l2.12 2.12M16.95 16.95l2.12 2.12M4.93 19.07l2.12-2.12M16.95 7.05l2.12-2.12"/></svg>,
    Quanta: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="8" height="8" rx="1"/><rect x="13" y="3" width="8" height="8" rx="4"/><rect x="3" y="13" width="8" height="8" rx="4"/><rect x="13" y="13" width="8" height="8" rx="1"/></svg>,
    Loopline: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M4 12c0-4 3-7 7-7M20 12c0 4-3 7-7 7M9 9l-4 4 4 4M15 15l4-4-4-4"/></svg>,
    Vertex: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3 21 19H3z" opacity=".4"/><path d="M12 8 17 18H7z"/></svg>,
    Pixelade: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="6" height="6"/><rect x="15" y="3" width="6" height="6"/><rect x="9" y="9" width="6" height="6"/><rect x="3" y="15" width="6" height="6"/><rect x="15" y="15" width="6" height="6"/></svg>,
  };
  return <span className="logo-item">{marks[name]}{name}</span>;
};

Object.assign(window, { Sparkle, ArrowRight, Play, Check, Plus, Cursor, BrandMark });
