// Brand marks: Cazenove logo + circular graphic element.

const { useEffect } = React;

function CazenoveLogo({ color = '#002A5E' }){
  const paths = window.cazenove_logo_paths || {};
  return (
    <svg viewBox="0 0 141.5 47.1" style={{width:'100%',height:'100%',display:'block'}}>
      <path d={paths.p38761c0} fill={color} />
    </svg>
  );
}

function CazenoveCircle({ stroke='#ffffff', strokeWidth=3 }){
  const p = window.cazenove_graphic_paths || {};
  return (
    <svg viewBox="0 0 1074 1074" style={{width:'100%',height:'100%',display:'block'}} fill="none">
      <path d={p.p6231580}  stroke={stroke} strokeWidth={strokeWidth} />
      <path d={p.p3d208000} stroke={stroke} strokeWidth={strokeWidth} />
    </svg>
  );
}

// Mount nav + footer logos directly (static markup; not part of React app root)
function mountBrand(){
  const navSlot = document.getElementById('nav-logo');
  const heroSlot = document.getElementById('hero-circle');
  const footSlot = document.getElementById('foot-logo');
  if(navSlot)  ReactDOM.createRoot(navSlot).render(<CazenoveLogo color="#ffffff" />);
  if(heroSlot) ReactDOM.createRoot(heroSlot).render(<CazenoveCircle stroke="#d4a96a" strokeWidth={2} />);
  if(footSlot) ReactDOM.createRoot(footSlot).render(<CazenoveLogo color="#0b1f3a" />);
}

Object.assign(window, { CazenoveLogo, CazenoveCircle, mountBrand });