// ABGS Logo — real globe mark from brand.
function BrandLogo({ size = 32, withWordmark = false, compact = false, invert = false }) {
  const textColor = invert ? '#fff' : '#0B1220';
  const subColor  = invert ? 'rgba(255,255,255,0.62)' : '#667085';
  const ruleColor = invert ? 'rgba(255,255,255,0.22)' : 'rgba(16,24,40,0.14)';

  // Resolve asset path relative to the page — so it works from
  // /Homepage.html AND from /services/<slug>.html.
  const base = (typeof location !== 'undefined' &&
    location.pathname.indexOf('/services/') >= 0) ? '../assets/' : 'assets/';

  // Enterprise lockup: mark + vertical rule + two-line wordmark
  // (primary "ABGS" in tight uppercase, "AB GROUP SHIPPING" as tracked eyebrow).
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <img src={`${base}abgs-logo.png`} alt="ABGS"
        width={size} height={size}
        style={{ display: 'block', width: size, height: size, objectFit: 'contain',
          flexShrink: 0 }}/>
      {withWordmark && !compact && (
        <>
          <span aria-hidden="true" style={{ width: 1, height: Math.round(size * 0.78),
            background: ruleColor, display: 'inline-block' }}/>
          <div style={{ display: 'flex', flexDirection: 'column',
            lineHeight: 1, gap: 3 }}>
            <div style={{ fontWeight: 700, fontSize: Math.round(size * 0.56),
              letterSpacing: '-0.01em', color: textColor }}>
              ABGS
            </div>
            <div style={{ fontWeight: 600, fontSize: Math.max(9, Math.round(size * 0.22)),
              letterSpacing: '0.18em', color: subColor, textTransform: 'uppercase' }}>
              AB Group Shipping
            </div>
          </div>
        </>
      )}
      {withWordmark && compact && (
        <div style={{ fontWeight: 700, fontSize: 15, letterSpacing: '-0.01em', color: textColor }}>
          ABGS
        </div>
      )}
    </div>
  );
}
window.BrandLogo = BrandLogo;