// Logo.jsx — Знак (горы + крест) и логотип-локап «Северо-Осетинская миссия»
// Реальный знак из Figma (single-path SVG, viewBox 521x201).
const LOGOMARK_PATH = "M 253.955 112.135 C 244.409 122.466 235.68 133.23 227.867 144.483 C 224.517 149.304 226.388 153.507 230.15 156.836 L 279.549 200.54 L 213.911 162.758 C 209.55 160.247 209.956 154.002 211.999 150.205 C 213.622 147.193 215.541 145.336 215.396 141.222 L 178.172 165.846 C 163.68 175.434 149.476 184.527 134.062 192.492 C 126.4 196.454 118.586 198.944 109.892 201.09 L 142.715 178.543 C 148.988 174.231 154.03 168.928 159.264 163.432 L 168.694 155.213 C 165.681 152.702 162.249 150.48 158.301 149.82 C 154.078 155.577 149.813 160.247 144.221 164.209 L 133.822 171.569 C 138.595 165.213 153.362 150.26 148.451 146.45 L 129.351 131.614 C 126.909 129.715 122.734 128.91 119.659 130.829 L 62.144 166.789 C 41.558 178.715 21.604 190.587 0 201.097 L 71.808 148.919 L 119.714 114.982 C 122.424 113.173 125.389 112.678 128.429 114.088 L 179.733 149.38 C 202.355 131.228 224.386 113.985 247.985 96.948 L 248.109 44.935 L 217.164 44.859 L 217.061 29.721 L 248.068 29.721 L 248.02 0.062 L 262.725 0 L 262.739 29.7 L 293.388 29.652 L 293.436 44.839 L 262.739 44.901 L 262.766 91.466 L 300.287 120.994 C 303.148 123.243 305.851 124.598 309.806 123.841 C 314.243 123.552 320.165 122.583 324.305 125.265 L 360.519 148.72 L 401.781 122.631 C 404.573 120.863 407.648 121.475 410.372 123.195 L 506.054 190.236 L 521.007 201.124 L 501.088 191.089 L 411.692 140.438 C 408.831 138.822 405.646 136.305 402.51 138.547 L 393.018 145.329 C 390.074 147.433 390.226 150.384 391.849 153.19 L 397.847 163.556 C 391.416 159.463 387.062 154.607 381.497 149.614 C 378.588 149.002 374.812 151.361 372.583 153.514 L 383.973 162.552 L 428.819 201.049 C 408.659 190.965 390.136 179.926 371.029 168.563 L 318.872 137.536 C 316.058 136.628 312.489 137.467 309.765 139.235 L 337.793 174.348 C 312.172 154.683 288.491 133.663 264.782 111.901 C 261.865 109.225 257.057 108.73 253.928 112.114 L 253.955 112.135 Z";

function Logomark({ color = "var(--terracotta)", width = 56 }) {
  return (
    <svg viewBox="0 0 521.007 201.124" width={width} style={{ display: "block" }} aria-hidden="true">
      <path d={LOGOMARK_PATH} fill={color} fillRule="nonzero"
        style={{ transition: "fill .28s cubic-bezier(.22,1,.36,1)" }} />
    </svg>
  );
}

// Полный локап: знак сверху, многострочное начертание Bounded с короткой чертой.
function Logo({ color = "var(--terracotta)", markWidth = 46, fontSize = 17, stacked = true, onClick }) {
  return (
    <div onClick={onClick} style={{
      display: "flex", flexDirection: stacked ? "column" : "row",
      alignItems: stacked ? "flex-start" : "center", gap: stacked ? 10 : 12,
      cursor: onClick ? "pointer" : "default", userSelect: "none", color,
    }}>
      <Logomark color={color} width={markWidth} />
      <div style={{
        fontFamily: "var(--font-display)", fontWeight: 700, textTransform: "uppercase",
        lineHeight: 0.94, fontSize, letterSpacing: ".01em", color,
      }}>
        СЕВЕРО<span style={{
          display: "inline-block", height: Math.max(2, fontSize/8), width: fontSize*1.9,
          background: color, verticalAlign: "middle", marginLeft: 7,
          transform: "translateY(-" + (fontSize*0.28) + "px)",
        }} /><br/>ОСЕТИНСКАЯ<br/>МИССИЯ
      </div>
    </div>
  );
}

// Латинский крест — компактный, лаконичный (для деликатных вотермарков)
function CrossMark({ color = "var(--terracotta)", width = 90 }) {
  return (
    <svg viewBox="0 0 80 96" width={width} style={{ display: "block" }} aria-hidden="true">
      <path d="M33 0 h14 v26 h27 v14 h-27 v56 h-14 v-56 h-27 v-14 h27 z" fill={color} />
    </svg>
  );
}

Object.assign(window, { Logo, Logomark, CrossMark, LOGOMARK_PATH });