/* HuginnDB — hawk-eye rune mark
   Monoline, geometric, aggressive.
   When `animated`, the iris tracks left↔right and the eye blinks. */

const __huginnAnimStyle = `
  .huginn-gaze {
    transform-box: fill-box;
    transform-origin: center;
    animation: huginn-gaze 7s ease-in-out infinite;
  }
  @keyframes huginn-gaze {
    0%, 12%   { transform: translateX(0); }
    22%, 38%  { transform: translateX(-7px); }
    48%, 50%  { transform: translateX(0); }
    60%, 76%  { transform: translateX(7px); }
    88%, 100% { transform: translateX(0); }
  }

  .huginn-blink {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: huginn-blink 5.3s ease-in-out infinite;
  }
  @keyframes huginn-blink {
    0%, 18%, 22%, 56%, 58%, 92%, 96%, 100% { transform: scaleY(1); }
    20%, 57%, 94% { transform: scaleY(0.04); }
  }

  /* Animated eyelid line — appears briefly during the blink */
  .huginn-lid {
    opacity: 0;
    animation: huginn-lid 5.3s ease-in-out infinite;
  }
  @keyframes huginn-lid {
    0%, 18%, 22%, 56%, 58%, 92%, 96%, 100% { opacity: 0; }
    20%, 57%, 94% { opacity: 0.9; }
  }

  .huginn-glow-pulse {
    animation: huginn-glow 4.5s ease-in-out infinite;
  }
  @keyframes huginn-glow {
    0%, 100% { filter: drop-shadow(0 0 50px oklch(0.72 0.15 240 / 0.18)); }
    50%      { filter: drop-shadow(0 0 90px oklch(0.72 0.15 240 / 0.34)); }
  }
`;

if (typeof document !== "undefined" && !document.getElementById("__huginn-anim-style")) {
  const s = document.createElement("style");
  s.id = "__huginn-anim-style";
  s.textContent = __huginnAnimStyle;
  document.head.appendChild(s);
}

const HuginnMark = ({ size = 64, stroke = 1.5, withFrame = true, withRunes = false, animated = false }) => {
  const s = size;
  return (
    <svg
      viewBox="0 0 100 100"
      width={s}
      height={s}
      fill="none"
      stroke="currentColor"
      strokeWidth={stroke}
      strokeLinecap="square"
      strokeLinejoin="miter"
      aria-label="HuginnDB"
    >
      {/* Outer diamond frame (nordic lozenge) */}
      {withFrame && (
        <g opacity="0.55">
          <path d="M50 4 L96 50 L50 96 L4 50 Z" />
          {/* corner runes — small tick marks */}
          <path d="M50 4 L50 11" />
          <path d="M50 89 L50 96" />
          <path d="M4 50 L11 50" />
          <path d="M89 50 L96 50" />
        </g>
      )}

      {/* Inner angular eye — sharp almond with aggressive top brow */}
      {/* Top brow: hard angled line, slightly raised on outer edge */}
      <path d="M18 38 L42 30 L58 30 L82 38" strokeWidth={stroke * 1.4} />

      {/* Bottom lid: shallower curve, geometric */}
      <path d="M18 38 L34 56 L66 56 L82 38" />

      {/* Iris + pupil — animatable group */}
      <g className={animated ? "huginn-blink" : ""}>
        <g className={animated ? "huginn-gaze" : ""}>
          {/* Iris — diamond/lozenge shape (angular rather than circle) */}
          <path d="M50 32 L66 43 L50 54 L34 43 Z" />
          {/* Pupil — vertical slit (raptor) */}
          <path d="M50 36 L50 50" strokeWidth={stroke * 1.6} />
        </g>
      </g>

      {/* Eyelid line — appears during the blink */}
      {animated && (
        <path
          className="huginn-lid"
          d="M22 43 L50 43 L78 43"
          strokeWidth={stroke * 1.5}
        />
      )}

      {/* Brow strike — extra angular slash above outer corner */}
      <path d="M62 24 L82 30" strokeWidth={stroke * 1.2} />
      <path d="M38 24 L18 30" strokeWidth={stroke * 1.2} />

      {/* Small rune marks flanking the eye, if enabled */}
      {withRunes && (
        <g opacity="0.55">
          {/* Left rune: vertical with two diagonals (like Tiwaz / Algiz mix) */}
          <path d="M8 64 L8 76 M8 70 L4 74 M8 70 L12 74" />
          {/* Right rune: vertical with single diagonal */}
          <path d="M92 64 L92 76 M92 68 L96 64" />
        </g>
      )}
    </svg>
  );
};

/* Compact lockup: mark + wordmark */
const HuginnLockup = ({ size = 28, showAlpha = true }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
    <HuginnMark size={size} stroke={1.6} withFrame={true} />
    <span style={{ fontWeight: 600, letterSpacing: "-0.01em", fontSize: 17 }}>
      HuginnDB
      {showAlpha && (
        <span
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            fontWeight: 500,
            color: "var(--warn)",
            border: "1px solid color-mix(in oklab, var(--warn) 40%, transparent)",
            padding: "2px 6px",
            borderRadius: 4,
            marginLeft: 10,
            verticalAlign: "middle",
            textTransform: "uppercase",
            letterSpacing: "0.08em",
          }}
        >
          alpha
        </span>
      )}
    </span>
  </span>
);

window.HuginnMark = HuginnMark;
window.HuginnLockup = HuginnLockup;