// Brand marks for ClearCoat — copied from the Ecosystem direction
const EcoConstellation = ({ size = 56, color, accent }) => {
  const c = color || '#4ea6ff';
  const a = accent || '#8a5cf6';
  const gid = 'ecG_' + Math.random().toString(36).slice(2, 8);
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{display:'block'}}>
      <defs>
        <linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor={c} />
          <stop offset="1" stopColor={a} />
        </linearGradient>
      </defs>
      <line x1="50" y1="50" x2="22" y2="22" stroke={c} strokeWidth="2.5" opacity="0.55"/>
      <line x1="50" y1="50" x2="82" y2="28" stroke={a} strokeWidth="2.5" opacity="0.55"/>
      <line x1="50" y1="50" x2="72" y2="82" stroke={c} strokeWidth="2.5" opacity="0.55"/>

      <rect x="10" y="10" width="24" height="24" rx="7" ry="7" fill={c} opacity="0.9"/>
      <circle cx="22" cy="22" r="3.5" fill="#ffffff"/>

      <circle cx="82" cy="28" r="12" fill={a}/>
      <circle cx="82" cy="28" r="4" fill="#ffffff"/>

      <rect x="62" y="72" width="20" height="20" rx="4" ry="4" fill={c} opacity="0.9" transform="rotate(45 72 82)"/>
      <circle cx="72" cy="82" r="3.5" fill="#ffffff"/>

      <rect x="34" y="34" width="32" height="32" rx="10" ry="10" fill={`url(#${gid})`} />
      <rect x="44" y="44" width="12" height="12" rx="4" ry="4" fill="#ffffff"/>
    </svg>
  );
};

const CCWordmark = ({ size = 22, color = '#0b1220', accent }) => (
  <span style={{
    fontFamily:"'Geist',sans-serif",
    fontSize:size, color, lineHeight:1, whiteSpace:'nowrap',
    letterSpacing:'-0.035em', fontWeight:600,
    display:'inline-flex', alignItems:'baseline',
  }}>
    <span>Clear</span>
    <span style={{color: accent || color}}>C</span>
    <span>oat</span>
  </span>
);

// Square logo (drawn — generic, not Square Inc's actual mark) for the connector card
const SquareLogo = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" style={{display:'block'}}>
    <rect x="3" y="3" width="18" height="18" rx="4" fill="#0b1220"/>
    <rect x="9" y="9" width="6" height="6" rx="1.2" fill="#ffffff"/>
  </svg>
);

Object.assign(window, { EcoConstellation, CCWordmark, SquareLogo });