// brand.jsx — VOVO wordmark, pin motif, line-icon set. Shared via window.
const { useState } = React;

/* VOVO official wordmark (pins). currentColor driven. */
function VovoMark({ height = 34, color = "currentColor" }) {
  const w = (height / 211) * 885;
  return (
    <svg height={height} viewBox="0 0 885 211" fill="none" style={{ width: w, height, display: "block", color }} aria-label="VOVO">
      <g fill="currentColor">
        <path fillRule="evenodd" clipRule="evenodd" d="M774.949 0C796.021 0 814.535 4.50545 831.238 13.4928C847.919 22.4802 860.937 34.9311 870.293 50.823C879.648 66.7378 884.326 84.6452 884.326 104.567C884.326 124.489 879.648 142.826 870.293 158.854C860.937 174.882 847.919 187.446 831.238 196.57C814.557 205.67 795.779 210.243 774.949 210.243L772.98 210.252C752.699 209.977 734.469 205.43 718.309 196.592C701.628 187.491 688.543 174.904 679.077 158.876C669.611 142.848 664.867 124.873 664.867 104.952C664.867 85.0299 669.656 67.0552 679.254 51.0272C688.852 34.9995 701.914 22.5029 718.485 13.4928C735.056 4.50546 753.878 0.000110233 774.949 0ZM774.378 41.2157C774.343 41.2163 774.307 41.2167 774.271 41.2175C772.4 41.2595 770.528 41.6719 768.77 42.4676C768.712 42.4939 768.653 42.5209 768.595 42.548C768.583 42.5539 768.57 42.5598 768.557 42.5657C767.528 43.0506 766.548 43.6639 765.645 44.4028L713.693 85.3277C707.553 90.1642 706.496 99.0618 711.332 105.202C716.168 111.342 725.066 112.398 731.206 107.561L733.248 105.952C733.243 107.629 733.241 109.395 733.241 111.258V121.649C733.241 139.599 733.242 148.574 738.121 154.668C739.144 155.945 740.304 157.106 741.581 158.128C747.674 163.007 756.65 163.007 774.599 163.007C792.549 163.007 801.524 163.007 807.618 158.128C808.895 157.106 810.056 155.945 811.078 154.668C815.957 148.574 815.957 139.599 815.957 121.649V111.258C815.957 109.395 815.956 107.629 815.95 105.952L817.992 107.561C824.132 112.398 833.03 111.342 837.867 105.202C842.703 99.0617 841.645 90.1642 835.505 85.3277L783.552 44.4028C782.836 43.817 782.072 43.3105 781.273 42.884C781.26 42.8768 781.246 42.8691 781.232 42.8619C781.047 42.7638 780.86 42.6694 780.671 42.5799C780.64 42.5653 780.609 42.5509 780.578 42.5366C780.532 42.5151 780.486 42.4938 780.439 42.4729C778.679 41.6736 776.802 41.2594 774.926 41.2175C774.892 41.2167 774.857 41.2163 774.822 41.2157C774.748 41.2146 774.673 41.2148 774.599 41.2149C774.526 41.2148 774.452 41.2147 774.378 41.2157Z" />
        <path fillRule="evenodd" clipRule="evenodd" d="M331.907 0C388.726 0.00017319 443.629 40.2393 443.629 100.518C443.629 162.831 381.39 210.231 331.907 210.231L330.749 210.245C281.648 209.52 219.463 162.856 219.463 100.903C219.463 40.5044 275.141 0.000170863 331.907 0ZM331.572 40.3706C316.561 40.3885 302.17 46.0578 291.554 56.1355C280.937 66.2133 274.961 77.1621 274.936 91.4173C274.936 118.109 318.999 162.725 331.548 162.726C344.097 162.726 388.161 118.11 388.161 91.4173C388.149 77.1623 382.181 66.21 371.566 56.1301C360.952 46.0505 346.583 40.3825 331.572 40.3706Z" />
        <path d="M214.066 7.03727C216.641 7.03736 218.393 9.64968 217.417 12.0323L143.531 192.245C140.743 199.042 134.125 203.482 126.778 203.482H90.896C83.5493 203.482 76.9307 199.043 74.1436 192.246L0.274367 12.0836C-0.702572 9.7009 1.04984 7.08854 3.62503 7.08854H57.6007C59.0696 7.08867 60.3929 7.976 60.9505 9.33499L106.499 120.345C107.421 122.591 110.602 122.591 111.524 120.345L157.12 9.28283C157.678 7.92431 159.001 7.03727 160.469 7.03727H214.066Z" />
        <path d="M659.47 7.03727C662.045 7.03736 663.798 9.64968 662.821 12.0323L588.935 192.245C586.148 199.042 579.529 203.482 572.182 203.482H536.3C528.953 203.482 522.335 199.043 519.548 192.246L445.679 12.0836C444.702 9.7009 446.454 7.08854 449.029 7.08854H503.005C504.474 7.08866 505.797 7.976 506.355 9.33499L551.903 120.345C552.825 122.591 556.006 122.591 556.928 120.345L602.524 9.28283C603.082 7.9243 604.405 7.03727 605.874 7.03727H659.47Z" />
      </g>
    </svg>
  );
}

/* Full lockup with Russian tagline (poster style) */
function VovoLockup({ height = 40, color = "var(--orange)", tagColor = "var(--orange)", center = false }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: center ? "center" : "flex-start", gap: 6 }}>
      <VovoMark height={height} color={color} />
      <div style={{
        fontSize: Math.max(9, height * 0.255), fontWeight: 600, letterSpacing: ".02em",
        color: tagColor, textTransform: "lowercase", whiteSpace: "nowrap",
      }}>магазины и мастера у дома</div>
    </div>
  );
}

/* Map pin marker (filled), used as decorative motif */
function PinShape({ size = 64, fill = "var(--orange)", className }) {
  return (
    <svg width={size} height={size * 1.28} viewBox="0 0 64 82" fill="none" className={className} style={{ display: "block" }}>
      <path d="M32 0C14.33 0 0 14.33 0 32c0 22 26 44.4 30.2 47.9a2.8 2.8 0 0 0 3.6 0C38 76.4 64 54 64 32 64 14.33 49.67 0 32 0Z" fill={fill} />
      <circle cx="32" cy="30" r="12" fill="#fff" />
    </svg>
  );
}

/* ---- line icons (stroke 1.8, 24 grid) ---- */
const Ic = {};
function mkIcon(name, paths) {
  Ic[name] = ({ size = 26, color = "currentColor", sw = 1.8 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">{paths}</svg>
  );
}
mkIcon("free", <><path d="M12 3 4 6v6c0 4.5 3.2 7.3 8 9 4.8-1.7 8-4.5 8-9V6l-8-3Z" /><path d="m9 12 2 2 4-4" /></>);
mkIcon("orders", <><path d="M6 2h9l3 3v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Z" /><path d="M9 8h6M9 12h6M9 16h4" /></>);
mkIcon("near", <><path d="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z" /><circle cx="12" cy="10" r="2.6" /></>);
mkIcon("wallet", <><rect x="3" y="6" width="18" height="13" rx="3" /><path d="M3 9h18M16 13.5h2" /></>);
mkIcon("noFee", <><circle cx="12" cy="12" r="9" /><path d="M8 8l8 8M9 9h.01M15 15h.01" /></>);
mkIcon("phone", <><path d="M5 4h4l1.5 4.5L8 11a13 13 0 0 0 5 5l2.5-2.5L20 15v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1Z" /></>);
mkIcon("store", <><path d="M4 9h16v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9Z" /><path d="M3 9 5 4h14l2 5M4 9a2.5 2.5 0 0 0 4.5 0 2.5 2.5 0 0 0 5 0 2.5 2.5 0 0 0 4.5 0" /></>);
mkIcon("clock", <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>);
mkIcon("chart", <><path d="M4 20V4M4 20h16" /><path d="M8 16l3.5-4 3 2.5L20 8" /></>);
mkIcon("user", <><circle cx="12" cy="8" r="3.6" /><path d="M5 20a7 7 0 0 1 14 0" /></>);
mkIcon("check", <><path d="m5 12 4 4 10-11" /></>);
mkIcon("star", <><path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 17l-5.2 2.6 1-5.8L3.5 9.7l5.9-.9L12 3.5Z" /></>);
mkIcon("settings", <><circle cx="12" cy="12" r="3" /><path d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" /></>);
mkIcon("hand", <><path d="M7 11V6a1.5 1.5 0 0 1 3 0v4m0 0V4.5a1.5 1.5 0 0 1 3 0V10m0 0V6a1.5 1.5 0 0 1 3 0v6c0 4-2.5 7-6 7s-6-2-7-5l-1-2.5a1.5 1.5 0 0 1 2.6-1.4L7 11Z" /></>);
mkIcon("arrow", <><path d="M5 12h14M13 6l6 6-6 6" /></>);
mkIcon("drop", <><path d="M12 3c3 4 6 7 6 10a6 6 0 0 1-12 0c0-3 3-6 6-10Z" /></>);
mkIcon("bolt", <><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z" /></>);
mkIcon("sofa", <><path d="M5 11V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3" /><path d="M3 12a2 2 0 0 1 2 2v3h14v-3a2 2 0 1 1 2-2v6H3v-6Z" /></>);
mkIcon("door", <><rect x="6" y="3" width="12" height="18" rx="1" /><path d="M4 21h16M14 12h.01" /></>);
mkIcon("ac", <><rect x="3" y="5" width="18" height="7" rx="2" /><path d="M6 9h8M7 16c0 1.5 1 2 1 3M12 16c0 1.5 1 2 1 3M17 16c0 1.5 1 2 1 3" /></>);
mkIcon("wrench", <><path d="M15 3a5 5 0 0 0-4.6 7L3 17.4 6.6 21l7.4-7.4A5 5 0 1 0 15 3Z" /><path d="M9.5 14.5 6 18" /></>);
mkIcon("roller", <><rect x="6" y="3" width="14" height="6" rx="1" /><path d="M6 6H4v4h9v3M11 13h3v8h-3z" /></>);
mkIcon("cart", <><circle cx="9" cy="20" r="1.4" /><circle cx="17" cy="20" r="1.4" /><path d="M2 3h3l2.4 12.5a1 1 0 0 0 1 .8h8.2a1 1 0 0 0 1-.8L21 7H6" /></>);
mkIcon("calendar", <><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 9h18M8 3v4M16 3v4" /></>);
mkIcon("doc", <><path d="M6 2h8l4 4v16a0 0 0 0 1 0 0H6a0 0 0 0 1 0 0V2Z" /><path d="M14 2v4h4M8 13h8M8 17h6" /></>);
mkIcon("briefcase", <><rect x="3" y="7" width="18" height="13" rx="2" /><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18" /></>);
mkIcon("users", <><circle cx="9" cy="8" r="3" /><path d="M2 20a7 7 0 0 1 14 0M16 5.5a3 3 0 0 1 0 5.6M22 20a7 7 0 0 0-4-6.3" /></>);
mkIcon("hardhat", <><path d="M3 18a9 9 0 0 1 18 0M10 5.5A2.5 2.5 0 0 1 14 5.5M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M2 18h20v2H2z" /></>);
mkIcon("region", <><path d="M3 6 9 4l6 2 6-2v14l-6 2-6-2-6 2V6Z" /><path d="M9 4v14M15 6v14" /></>);
mkIcon("ruble", <><path d="M8 12h6a4 4 0 0 0 0-8H8v16M6 12h6M6 16h6" /></>);
mkIcon("toggle", <><path d="M9 3 5 7l4 4M5 7h10a4 4 0 0 1 0 8h-3M15 21l4-4-4-4" /></>);
mkIcon("photo", <><rect x="3" y="6" width="18" height="14" rx="2" /><circle cx="12" cy="13" r="3.2" /><path d="M8 6l1.5-2h5L16 6" /></>);
mkIcon("plus", <><path d="M12 5v14M5 12h14" /></>);
mkIcon("minus", <><path d="M5 12h14" /></>);
mkIcon("pin2", <><path d="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z" /><circle cx="12" cy="10" r="2.6" /></>);
mkIcon("list", <><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01" /></>);

Object.assign(window, { VovoMark, VovoLockup, PinShape, Ic });