"use client";

/**
 * Tarot-themed character: mystical figure holding a glowing tarot card.
 * Pure SVG + CSS animations — float, glow pulse, subtle sway.
 */
export function TarotCharacter({ className }: { className?: string }) {
  return (
    <div className={className} aria-hidden>
      <svg
        viewBox="0 0 200 240"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className="w-full h-full max-w-[200px] max-h-[240px] mx-auto block animate-tarot-float"
      >
        {/* Robe / body */}
        <path
          d="M60 95 L100 180 L140 95 Q140 70 100 70 Q60 70 60 95 Z"
          className="fill-primary/20"
        />
        <path
          d="M65 92 L100 172 L135 92 Q135 72 100 72 Q65 72 65 92 Z"
          className="fill-primary/30"
        />
        {/* Head */}
        <circle cx="100" cy="52" r="28" className="fill-primary/25" />
        <circle cx="100" cy="50" r="24" className="fill-muted" />
        {/* Hood / scarf */}
        <ellipse cx="100" cy="48" rx="32" ry="18" className="fill-primary/40" />
        {/* Arm holding card */}
        <path
          d="M135 85 Q165 75 172 95 Q178 108 165 118 L140 125"
          stroke="currentColor"
          strokeWidth="8"
          strokeLinecap="round"
          className="text-primary/30 animate-tarot-sway"
          fill="none"
        />
        {/* Tarot card */}
        <g className="animate-tarot-glow" transform="translate(152, 88)">
          <rect
            x="0"
            y="0"
            width="44"
            height="64"
            rx="4"
            className="fill-card stroke-primary/50"
            strokeWidth="2"
          />
          {/* Moon/crescent symbol on card */}
          <path
            d="M22 24 Q32 32 22 40 Q12 32 22 24"
            className="fill-primary/40"
          />
          <circle cx="28" cy="30" r="6" className="fill-background" />
          {/* Star */}
          <path
            d="M22 48 L24 52 L28 52 L25 55 L26 60 L22 57 L18 60 L19 55 L16 52 L20 52 Z"
            className="fill-primary/50"
          />
        </g>
        {/* Glow behind card */}
        <ellipse
          cx="174"
          cy="120"
          rx="35"
          ry="45"
          className="fill-primary/20 animate-tarot-glow-pulse"
        />
      </svg>
    </div>
  );
}