// Inline SVG so the wordmark <text> element uses the page's Outfit webfont
// (SVGs loaded via <img> are isolated and fall back to Arial — which renders blurry/wrong).
function BMLogo({ height = 38, tone = 'blue', style = {} }) {
  // tone: 'blue' | 'white'
  const wordColor = tone === 'white' ? '#FFFFFF' : '#0878D8';
  const iconBg = tone === 'white' ? '#FFFFFF' : '#0878D8';
  const iconStroke = tone === 'white' ? '#0878D8' : '#FFFFFF';
  // Native aspect: 680 × 138 — let the browser compute width from height + viewBox
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height={height}
      viewBox="0 0 680 138"
      preserveAspectRatio="xMidYMid meet"
      shapeRendering="geometricPrecision"
      textRendering="geometricPrecision"
      role="img"
      aria-label="BlueMoso"
      style={{ display: 'block', height: `${height}px`, width: 'auto', ...style }}
    >
      <g transform="translate(10,10)">
        {/* Icon background — 118×118 rounded square */}
        <rect x="0" y="0" width="118" height="118" rx="12.746" ry="12.746" fill={iconBg} />
        {/* Bamboo line work — same paths as source SVG, stroke recolored by tone */}
        <g fill="none" stroke={iconStroke} strokeWidth="4" strokeMiterlimit="4" strokeLinecap="butt">
          <path transform="matrix(0.749698,-0.00736965,0.00736965,0.749698,82,7)" d="M 0.818392 4.675833 C 8.799381 1.106986 16.776548 1.107246 24.760312 4.676716" />
          <path transform="matrix(0.749733,0.00147992,-0.00147992,0.749733,82.3,36.4)" d="M 0.830904 4.676395 C 8.665193 1.107582 16.496107 1.107754 24.334066 4.676893" />
          <path transform="matrix(-0.0204888,-0.749454,0.749454,-0.0204888,96.13,39.5)" d="M 0.556146 4.777308 C 13.333343 1.071582 26.103052 1.071472 38.865275 4.776978" />
          <path transform="matrix(-0.0181348,0.749515,-0.749515,-0.0181348,88,10.2)" d="M 0.562635 4.780647 C 13.241669 1.075843 25.932178 1.076282 38.628825 4.776882" />
          <path transform="matrix(-0.749727,-0.0033712,0.0033712,-0.749727,67.35,111.5)" d="M 0.815515 4.678198 C 8.797174 1.109771 16.779228 1.105141 24.756536 4.679961" />
          <path transform="matrix(-0.749731,-0.0021706,0.0021706,-0.749731,67.32,81.9)" d="M 0.829396 4.680833 C 8.665604 1.104789 16.496545 1.108168 24.332609 4.680519" />
          <path transform="matrix(0.0186134,0.749503,-0.749503,0.0186134,53.5,78.75)" d="M 0.558531 4.77843 C 13.330847 1.072124 26.09974 1.071313 38.859872 4.781074" />
          <path transform="matrix(0.0228362,-0.749387,0.749387,0.0228362,61.4,108.2)" d="M 0.558596 4.777799 C 13.300003 1.074316 26.055137 1.071358 38.808693 4.779817" />
          <path transform="matrix(-0.749734,0,0,-0.749734,67.32,76.3)" d="M 0.823432 4.61139 C 8.544916 1.130991 16.261191 1.130991 23.982675 4.61139" />
          <path transform="matrix(0.749734,-0.00023917,0.00023917,0.749734,48.23,41.7)" d="M 0.781876 4.609227 C 8.968176 1.131439 17.153368 1.12884 25.337449 4.60664" />
          <path transform="matrix(0.0168878,0.749544,-0.749544,0.0168878,53.97,44.68)" d="M 0.559375 4.732167 C 13.076079 1.089918 25.594091 1.090537 38.108201 4.733908" />
          <path transform="matrix(0.0114728,-0.749647,0.749647,0.0114728,61.44,73.2)" d="M 0.567476 4.73133 C 12.871711 1.08827 25.179582 1.087496 37.485956 4.734296" />
          <path transform="matrix(-0.749727,-0.0033712,0.0033712,-0.749727,101.18,111.9)" d="M 0.818705 4.677939 C 8.795154 1.109536 16.777208 1.104905 24.759726 4.679702" />
          <path transform="matrix(-0.749731,-0.0021706,0.0021706,-0.749731,101.15,82.3)" d="M 0.827358 4.6806 C 8.663581 1.109767 16.499717 1.107921 24.330571 4.680287" />
          <path transform="matrix(0.0186134,0.749503,-0.749503,0.0186134,87.33,79.15)" d="M 0.558828 4.776422 C 13.331015 1.075324 26.099909 1.074513 38.86017 4.779066" />
          <path transform="matrix(0.0228362,-0.749387,0.749387,0.0228362,95.23,108.6)" d="M 0.55842 4.77983 C 13.299827 1.076347 26.054961 1.073389 38.813566 4.776482" />
          <path transform="matrix(-0.749734,0,0,-0.749734,101.15,76.7)" d="M 0.821426 4.611152 C 8.542911 1.130752 16.264395 1.130752 23.98588 4.611152" />
          <path transform="matrix(0.749734,-0.00023917,0.00023917,0.749734,82.06,42.1)" d="M 0.783891 4.609463 C 8.964981 1.131673 17.150173 1.129074 25.334254 4.606874" />
          <path transform="matrix(0.0168878,0.749544,-0.749544,0.0168878,87.81,45.08)" d="M 0.559652 4.730157 C 13.076357 1.087908 25.594368 1.088528 38.108478 4.731899" />
          <path transform="matrix(0.0114728,-0.749647,0.749647,0.0114728,95.28,73.6)" d="M 0.567259 4.733349 C 12.871494 1.090289 25.179365 1.089515 37.48566 4.731105" />
        </g>
        {/* Lower bamboo cluster — heavier strokes */}
        <g transform="translate(8,72)" fill="none" stroke={iconStroke} strokeWidth="12" strokeMiterlimit="4" strokeLinecap="butt">
          <path transform="matrix(-0.255071,-0.00114695,0.00114695,-0.255071,25.259223,39.950604)" d="M 2.456933 13.869188 C 25.901991 3.380633 49.363591 3.382337 72.826418 13.874368" />
          <path transform="matrix(-0.255073,-0.000738478,0.000738478,-0.255073,25.221919,10.350065)" d="M 2.48757 13.876968 C 25.520467 3.381269 48.537793 3.375887 71.57022 13.876047" />
          <path transform="matrix(0.00633264,0.254995,-0.254995,0.00633264,11.423819,7.148575)" d="M 1.669578 14.173134 C 39.226368 3.279624 76.757787 3.277238 114.263835 14.165976" />
          <path transform="matrix(0.00776931,-0.254955,0.254955,0.00776931,19.25668,36.645725)" d="M 1.677559 14.171495 C 39.127722 3.270594 76.60386 3.277674 114.10504 14.162121" />
        </g>
        {/* Wordmark — uses the page's Outfit webfont because the SVG is inline */}
        <text
          x="144"
          y="100"
          fontSize="88"
          fill={wordColor}
          fontFamily="'Outfit', system-ui, sans-serif"
          fontWeight="600"
          letterSpacing="-1.5"
        >BlueMoso</text>
      </g>
    </svg>
  );
}

Object.assign(window, { BMLogo });