/* global React */
// Vector recreation of the Axana AI logo — transparent background.
// Layout: triangular A mark on top, AXANA AI wordmark below.

function AxanaLogo({ height = 48, withWordmark = true, className = "" }) {
  // Mark dominant; wordmark sits below in a smaller block.
  const w = withWordmark ? 200 : 96;
  const h = withWordmark ? 130 : 96;
  const ratio = w / h;
  return (
    <svg
      className={`brand-logo ${className}`}
      width={height * ratio}
      height={height}
      viewBox={`0 0 ${w} ${h}`}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-label="Axana AI"
      role="img"
    >
      <defs>
        <linearGradient id="axana-violet" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#EFDDFF" />
          <stop offset="40%" stopColor="#C8A2F8" />
          <stop offset="80%" stopColor="#8E5BE0" />
          <stop offset="100%" stopColor="#5E2EAA" />
        </linearGradient>
        <linearGradient id="axana-violet-soft" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#FAF1FF" />
          <stop offset="100%" stopColor="#A476E8" />
        </linearGradient>
      </defs>

      {/* === Mark === */}
      <g transform={withWordmark ? "translate(60 4)" : "translate(8 8)"}>
        {/* Left leg */}
        <path d="M 22 80 L 38 6 L 46 16 L 32 80 Z" fill="url(#axana-violet)" />
        {/* Right leg */}
        <path d="M 66 80 L 50 6 L 42 16 L 56 80 Z" fill="url(#axana-violet)" />
        {/* Apex highlight */}
        <path d="M 38 6 L 44 14 L 50 6 L 47 0 L 41 0 Z" fill="url(#axana-violet-soft)" />
        {/* Crossbar swoosh */}
        <path
          d="M 14 56 Q 44 32 76 46 L 73 53 Q 44 41 17 64 Z"
          fill="url(#axana-violet-soft)"
        />
      </g>

      {/* === Wordmark === */}
      {withWordmark ? (
        <g transform="translate(0 102)">
          <text
            x="100"
            y="20"
            textAnchor="middle"
            fontFamily="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif"
            fontWeight="500"
            fontSize="20"
            letterSpacing="3.5"
            fill="#F1ECF7"
          >
            AXANA AI
          </text>
        </g>
      ) : null}
    </svg>
  );
}

window.AxanaLogo = AxanaLogo;