/* global React */
// Cloud Architect Copilot mark — three connected nodes forming a tiny
// architecture graph. Top node = entry, bottom-left = compute, bottom-right
// = data. Square 32 viewBox, mono-line, scales cleanly from 16px up.

function Logo({ size = 22, stroke = 1.5, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none"
         xmlns="http://www.w3.org/2000/svg" aria-label="Cloud Architect Copilot">
      <path d="M16 9 L9 22"  stroke={color} strokeWidth={stroke} strokeLinecap="round"/>
      <path d="M16 9 L23 22" stroke={color} strokeWidth={stroke} strokeLinecap="round"/>
      <path d="M9 22 L23 22" stroke={color} strokeWidth={stroke} strokeLinecap="round"/>
      <circle cx="16" cy="9"  r="3" fill={color} stroke={color} strokeWidth={stroke}/>
      <circle cx="9"  cy="22" r="3" fill="var(--bg-2, #fff)" stroke={color} strokeWidth={stroke}/>
      <circle cx="23" cy="22" r="3" fill="var(--bg-2, #fff)" stroke={color} strokeWidth={stroke}/>
    </svg>
  );
}

function Wordmark({ size = 22, color = 'currentColor' }) {
  return (
    <span style={{display:'inline-flex', alignItems:'center', gap:8, fontFamily:'var(--font-mono)', fontWeight:600, fontSize:13, letterSpacing:'-0.01em', color}}>
      <Logo size={size} color={color}/>
      <span>Cloud Architect <span style={{color:'var(--ink-2)'}}>Copilot</span></span>
    </span>
  );
}

Object.assign(window, { Logo, Wordmark });