/* global React */

// ============================================================
// Pszczoła Henrieta – ilustracja głównej wieszczki (v2)
// SVG na bazie henrieta-1.svg, z warstwami animowanymi:
//   - czulki (czulek_prawy, czulek_lewy)
//   - skrzydla (wing_top_*, wing_bottom_*)
//   - gwiazdki (bee-stars)
//   - szklanakula (widoczna tylko podczas buzzing/wieszczenia)
// ============================================================
function Henrieta({ buzzing = false, buzzIdle = false, eyes = "open" }) {
  const cls =
    "henrieta-svg" +
    (buzzing ? " is-buzzing" : "") +
    (buzzIdle && !buzzing ? " is-buzz-idle" : "") +
    (eyes === "closed" ? " is-closed" : "");
  return (
    <svg
      viewBox="0 0 750 417.5"
      xmlns="http://www.w3.org/2000/svg"
      className={cls}
      aria-label="Pszczoła Henrieta"
      preserveAspectRatio="xMidYMid meet"
    >
      <defs>
        <clipPath id="hen-clip">
          <rect width="750" height="417.5" fill="none" />
        </clipPath>
      </defs>
      <g clipPath="url(#hen-clip)">
        <g id="pszczola">
          <g id="skrzydla">
            <g id="skrzydla_prawa">
              <path
                id="wing_top_right"
                fill="#ae84ba"
                d="M719.6,137.1c-25.5-43-107.8-29.7-183.9,29.7-76,59.4-117,142.4-91.4,185.4,25.5,43,107.8,29.7,183.9-29.7,76-59.4,117-142.4,91.4-185.4h0Z"
              />
              <path
                id="wing_top_left"
                fill="#ae84ba"
                d="M25.4,137.1c25.5-43,107.8-29.7,183.9,29.7,76,59.4,116.9,142.4,91.4,185.4-25.5,43-107.8,29.7-183.9-29.7C40.8,263.1,0,180.1,25.4,137.1Z"
              />
            </g>
            <g id="skrzydla_lewa">
              <path
                id="wing_bottom_right"
                fill="#ae84ba"
                d="M644.2,474.9c-18.4,31.1-77.9,21.5-132.8-21.5-54.9-42.9-84.5-102.9-66-133.9s77.9-21.5,132.8,21.5c54.9,42.9,84.5,102.9,66,133.9Z"
              />
              <path
                id="wing_bottom_left"
                fill="#ae84ba"
                d="M100.8,474.9c18.4,31.1,77.9,21.5,132.8-21.5,54.9-42.9,84.5-102.9,66-133.9-18.4-31.1-77.9-21.5-132.8,21.5-54.9,42.9-84.5,102.9-66.1,133.9h0Z"
              />
            </g>
          </g>
          <g id="cialo">
            <path
              id="cialo_2"
              fill="#ffd719"
              d="M371,569.7c106.3,0,192.6-94.1,192.6-210.1s-86.2-210.1-192.6-210.1-192.6,94.1-192.6,210.1,86.2,210.1,192.6,210.1Z"
            />
            <path d="M370.5,387.4c-92.2,0-169.6-17.9-191.6-42.1-.3,4.7-.5,9.5-.5,14.3,0,116.1,86.2,210.1,192.6,210.1s192.6-94.1,192.6-210.1-.2-10.2-.5-15.3c-20.8,24.7-99.1,43.1-192.5,43.1h0Z" />
            <path
              fill="#fdd611"
              d="M370.5,453.4c-84.2,0-156.1-14.9-184.7-36,23,87.9,97.2,152.2,185.2,152.2s162.6-64.8,185.4-153.1c-27.8,21.5-100.5,36.9-185.8,36.9h0Z"
            />
            <path
              id="usmiech"
              fill="none"
              stroke="#000"
              strokeWidth="13.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M402.5,311.5s2.4,30.8-29.7,30.8-29.8-28.7-29.8-28.7"
            />
            <path
              id="oko_prawe"
              d="M469.3,302.5c8.2,0,14.8-6.6,14.8-14.8s-6.6-14.8-14.8-14.8-14.8,6.6-14.8,14.8,6.6,14.8,14.8,14.8Z"
            />
            <path
              id="oko_lewe"
              d="M279.5,309.8c12.2,0,22.1-9.9,22.1-22.1s-9.9-22.1-22.1-22.1-22.1,9.9-22.1,22.1,9.9,22.1,22.1,22.1Z"
            />
            <g id="czulki">
              <path
                id="czulek_prawy"
                fill="none"
                stroke="#000"
                strokeWidth="10.1"
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M421.5,188.1s2.7-83.4,20.3-112.9c17.7-29.5,49.8-16.6,40.6,19.7"
              />
              <path
                id="czulek_lewy"
                fill="none"
                stroke="#000"
                strokeWidth="10.1"
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M320.5,188.1s-26.9-122.5-53-170.3"
              />
            </g>
          </g>
        </g>

        <g className="bee-stars" aria-hidden="true">
          <path
            id="gwiazdka1"
            fill="#ff643c"
            d="M76,255.5l-7.5,3.3c-3.7,1.6-6.6,4.8-7.8,8.7l-3.8,12.4-3.9-12.4c-1.2-3.9-4.1-7-7.8-8.6l-7.5-3.2,7.5-3.3c3.7-1.6,6.6-4.8,7.8-8.7l3.8-12.4,3.9,12.4c1.2,3.9,4.1,7,7.8,8.6l7.6,3.2h0Z"
          />
          <path
            id="gwiazdka2"
            fill="#f26161"
            d="M682.4,151.9l-7.5,3.3c-3.7,1.6-6.6,4.8-7.8,8.7l-3.8,12.4-3.9-12.4c-1.2-3.9-4.1-7-7.8-8.6l-7.5-3.2,7.5-3.3c3.7-1.6,6.6-4.8,7.8-8.7l3.8-12.4,3.9,12.4c1.2,3.9,4.1,7,7.8,8.6l7.5,3.2Z"
          />
          <path
            id="gwiazdka3"
            fill="#ff643c"
            d="M675.5,364.9l-7.5,3.3c-3.7,1.6-6.6,4.8-7.8,8.7l-3.8,12.4-3.9-12.4c-1.2-3.9-4.1-7-7.8-8.6l-7.5-3.2,7.5-3.3c3.7-1.6,6.6-4.8,7.8-8.7l3.8-12.4,3.9,12.4c1.2,3.9,4.1,7,7.8,8.6l7.5,3.2Z"
          />
          <path
            id="gwiazdka4"
            fill="#ff643c"
            d="M173.4,133.2l-5,2.2c-2.5,1.1-4.4,3.2-5.2,5.8l-2.5,8.3-2.6-8.2c-.8-2.6-2.7-4.7-5.2-5.8l-5-2.1,5-2.2c2.5-1.1,4.4-3.2,5.2-5.8l2.5-8.3,2.6,8.2c.8,2.6,2.7,4.7,5.2,5.8l5,2.1h0Z"
          />
          <path
            id="gwiazdka5"
            fill="#ff643c"
            d="M173.4,272.4l-5,2.2c-2.5,1.1-4.4,3.2-5.2,5.8l-2.5,8.3-2.6-8.2c-.8-2.6-2.7-4.7-5.2-5.8l-5-2.1,5-2.2c2.5-1.1,4.4-3.2,5.2-5.8l2.5-8.3,2.6,8.2c.8,2.6,2.7,4.7,5.2,5.8l5,2.1Z"
          />
          <path
            id="gwiazdka6"
            fill="#ff643c"
            d="M600.7,208.7l-5,2.2c-2.5,1.1-4.4,3.2-5.2,5.8l-2.5,8.3-2.6-8.2c-.8-2.6-2.7-4.7-5.2-5.8l-5-2.1,5-2.2c2.5-1.1,4.4-3.2,5.2-5.8l2.5-8.3,2.6,8.2c.8,2.6,2.7,4.7,5.2,5.8l5,2.1Z"
          />
          <path
            id="gwiazdka7"
            fill="#ff643c"
            d="M565.5,79.8l-3.4,1.5c-1.7.7-3,2.2-3.5,3.9l-1.7,5.6-1.8-5.6c-.6-1.8-1.9-3.2-3.6-3.9l-3.4-1.5,3.4-1.5c1.7-.7,3-2.2,3.5-3.9l1.7-5.6,1.8,5.6c.6,1.8,1.9,3.2,3.6,3.9l3.4,1.5Z"
          />
          <path
            fill="#ff643c"
            d="M494.6,146.6c0,3-2.4,5.5-5.4,5.5-3,0-5.5-2.4-5.5-5.4,0-3,2.4-5.5,5.4-5.5,3,0,5.5,2.4,5.5,5.4Z"
          />
          <path
            fill="#ff643c"
            d="M707.9,298.7c0,3-2.4,5.5-5.4,5.5-3,0-5.5-2.4-5.5-5.4s2.4-5.5,5.4-5.5c3,0,5.5,2.4,5.5,5.4Z"
          />
          <path
            fill="#ff643c"
            d="M67.8,68.8c0,3.6-2.9,6.5-6.5,6.5-3.6,0-6.5-2.9-6.5-6.5,0-3.6,2.9-6.5,6.5-6.5,3.6,0,6.5,2.9,6.5,6.5Z"
          />
          <path
            fill="#ff643c"
            d="M45.9,356.3c0,2.3-1.9,4.2-4.2,4.2s-4.2-1.9-4.2-4.2,1.9-4.2,4.2-4.2,4.2,1.9,4.2,4.2Z"
          />
          <path
            fill="#ff643c"
            d="M725.6,338.8c0,2.3-1.9,4.2-4.2,4.2s-4.2-1.9-4.2-4.2,1.9-4.2,4.2-4.2,4.2,1.9,4.2,4.2Z"
          />
        </g>

        <g id="szklanakula">
          <g className="orb-pulse">
            <circle fill="#f0a3c3" cx="374.3" cy="318.2" r="82.5" />
            <path
              fill="#f26161"
              d="M433.1,417.4l-116.7.5c-1.8,0-3.2-1.7-2.8-3.4l6.2-29.8c.3-1.3,1.4-2.3,2.8-2.3l103.9-.5c1.3,0,2.5.9,2.8,2.2l6.5,29.8c.4,1.8-1,3.5-2.8,3.5h0Z"
            />
            <path
              fill="#fffaeb"
              d="M329.6,285.1c0,1.4-1.1,2.5-2.5,2.5-1.4,0-2.5-1.1-2.5-2.5,0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5Z"
            />
            <path
              fill="#e34d4d"
              d="M430,394.5l-110.7.5c-1.3,0-2.3-1-2.3-2.3h0c0-1.3,1-2.3,2.3-2.3l110.7-.5c1.3,0,2.3,1,2.3,2.3h0c0,1.3-1,2.3-2.3,2.3Z"
            />
            <path
              fill="#fffaeb"
              d="M374.1,287.4c-34.4.1-55.1,31.1-55.1,31.1,0,0,21,30.7,55.4,30.6,34.4-.1,55.1-31.1,55.1-31.1,0,0-21-30.7-55.4-30.6h0Z"
            />
            <circle fill="#e34d4d" cx="374.3" cy="318.2" r="20.3" />
            <path
              fill="#223359"
              d="M382.9,318.2c0,4.8-3.8,8.6-8.6,8.6-4.8,0-8.6-3.8-8.6-8.6,0-4.8,3.8-8.6,8.6-8.6,4.8,0,8.6,3.8,8.6,8.6Z"
            />
            <path
              fill="#fffaeb"
              d="M420.1,271.2h-2v-3.2c0-.7-.6-1.3-1.3-1.3-.7,0-1.3.6-1.3,1.3v3.2h-2c-.7,0-1.3.6-1.3,1.3s.6,1.3,1.3,1.3h2v3.2c0,.7.6,1.3,1.3,1.3.7,0,1.3-.6,1.3-1.3v-3.2h2c.7,0,1.3-.6,1.3-1.3s-.6-1.3-1.3-1.3Z"
            />
            <path
              fill="#fffaeb"
              d="M340.4,360.8h-2v-3.2c0-.7-.6-1.3-1.3-1.3-.7,0-1.3.6-1.3,1.3v3.2h-2c-.7,0-1.3.6-1.3,1.3s.6,1.3,1.3,1.3h2v3.2c0,.7.6,1.3,1.3,1.3.7,0,1.3-.6,1.3-1.3v-3.2h2c.7,0,1.3-.6,1.3-1.3s-.6-1.3-1.3-1.3Z"
            />
            <path
              fill="#e34d4d"
              d="M374.7,409.5h0c-1.2,0-2.2-1-2.2-2.1v-3.1c0-1.2.9-2.2,2.1-2.2h0c1.2,0,2.2,1,2.2,2.1v3.1c0,1.2-.9,2.2-2.1,2.2Z"
            />
            <path
              fill="#e34d4d"
              d="M362.2,409.5h0c-1.2,0-2.2-1-2.2-2.1v-3.1c0-1.2.9-2.2,2.1-2.2h0c1.2,0,2.2,1,2.2,2.1v3.1c0,1.2-.9,2.2-2.1,2.2Z"
            />
            <path
              fill="#e34d4d"
              d="M349.8,409.6h0c-1.2,0-2.2-1-2.2-2.1v-3.1c0-1.2.9-2.2,2.1-2.2h0c1.2,0,2.2,1,2.2,2.1v3.1c0,1.2-.9,2.2-2.1,2.2Z"
            />
            <path
              fill="#e34d4d"
              d="M337.3,409.6h0c-1.2,0-2.2-1-2.2-2.1v-3.1c0-1.2.9-2.2,2.1-2.2h0c1.2,0,2.2,1,2.2,2.1v3.1c0,1.2-.9,2.2-2.1,2.2Z"
            />
            <path
              fill="#e34d4d"
              d="M324.8,409.7h0c-1.2,0-2.2-1-2.2-2.1v-3.1c0-1.2.9-2.2,2.1-2.2h0c1.2,0,2.2,1,2.2,2.1v3.1c0,1.2-.9,2.2-2.1,2.2Z"
            />
            <path
              fill="#e34d4d"
              d="M424.5,409.2h0c-1.2,0-2.2-1-2.2-2.1v-3.1c0-1.2.9-2.2,2.1-2.2h0c1.2,0,2.2,1,2.2,2.1v3.1c0,1.2-.9,2.2-2.1,2.2Z"
            />
            <path
              fill="#e34d4d"
              d="M412.1,409.3h0c-1.2,0-2.2-1-2.2-2.1v-3.1c0-1.2.9-2.2,2.1-2.2h0c1.2,0,2.2,1,2.2,2.1v3.1c0,1.2-.9,2.2-2.1,2.2Z"
            />
            <path
              fill="#e34d4d"
              d="M399.6,409.4h0c-1.2,0-2.2-1-2.2-2.1v-3.1c0-1.2.9-2.2,2.1-2.2h0c1.2,0,2.2,1,2.2,2.1v3.1c0,1.2-.9,2.2-2.1,2.2Z"
            />
            <path
              fill="#e34d4d"
              d="M387.2,409.4h0c-1.2,0-2.2-1-2.2-2.1v-3.1c0-1.2.9-2.2,2.1-2.2h0c1.2,0,2.2,1,2.2,2.1v3.1c0,1.2-.9,2.2-2.1,2.2Z"
            />
          </g>
        </g>
      </g>
    </svg>
  );
}

// hex frame dla wielkiej liczby (na ekranie wyniku — bez zmian)
function HexFrame() {
  return (
    <svg viewBox="0 0 200 200" className="hex-frame">
      <defs>
        <linearGradient id="hexbord" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#FFCB47" />
          <stop offset="100%" stopColor="#7A4E03" />
        </linearGradient>
      </defs>
      <polygon
        points="100,8 178,52 178,148 100,192 22,148 22,52"
        fill="none"
        stroke="url(#hexbord)"
        strokeWidth="2"
      />
      <polygon
        points="100,18 168,57 168,143 100,182 32,143 32,57"
        fill="none"
        stroke="#F4B41A"
        strokeWidth="0.6"
        opacity="0.5"
      />
      <g fill="#F4B41A">
        <circle cx="100" cy="8" r="3" />
        <circle cx="178" cy="52" r="3" />
        <circle cx="178" cy="148" r="3" />
        <circle cx="100" cy="192" r="3" />
        <circle cx="22" cy="148" r="3" />
        <circle cx="22" cy="52" r="3" />
      </g>
      <g fontFamily="serif" fill="#F4B41A" fontSize="10">
        <text x="92" y="36" textAnchor="middle">✦</text>
        <text x="92" y="172" textAnchor="middle">✦</text>
      </g>
    </svg>
  );
}

// mała ikonka na kartach (sześciokąt z numerem rzymskim) — bez zmian
function CardSigil({ glyph }) {
  return (
    <svg viewBox="0 0 24 24" width="16" height="16">
      <polygon
        points="12,2 21,7 21,17 12,22 3,17 3,7"
        fill="none"
        stroke="#F4B41A"
        strokeWidth="1.2"
      />
      <text
        x="12"
        y="15"
        fontSize="7"
        textAnchor="middle"
        fill="#F4B41A"
        fontFamily="Cinzel, serif"
        fontWeight="700"
      >
        {glyph || "•"}
      </text>
    </svg>
  );
}

Object.assign(window, { Henrieta, HexFrame, CardSigil });
