// Pineapple Robot mascot — uses uploaded PNG asset.
// Held-pose robot dance: snaps quickly into a pose, holds, snaps to the next.
// 4 keyframes at 0/25/50/75 with brief 0.1s ease-out transitions, longer holds.
// Total cycle 1.6s. CSS-only.

const Mascot = ({ size = 300 }) => {
  const w = size;
  const h = size * 1.18;

  return (
    <div className="prm-wrap" style={{ position: "relative", width: w, height: h }}>
      <div className="prm-pose" style={{ width: "100%", height: "100%" }}>
        <img
          src="assets/mascot.png"
          alt="Pineapple Robot mascot"
          style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }}
        />
      </div>

      <style>{`
        /* Held-pose dance — 1.6s cycle, ~0.1s eased snaps, then hold.
           Each pose holds ~0.3s before snapping to the next.
           Snap windows: 0%→6.25%, 25%→31.25%, 50%→56.25%, 75%→81.25%
           (6.25% of 1.6s ≈ 0.1s) */
        @keyframes prm-pose {
          /* Pose A — left lean + tilt */
          0%      { transform: translate(-8px, 0) rotate(-4deg); }
          6.25%   { transform: translate(-8px, 0) rotate(-4deg); }
          /* Pose B — neutral */
          25%     { transform: translate(0, 0) rotate(0deg); }
          31.25%  { transform: translate(0, 0) rotate(0deg); }
          /* Pose C — right lean + tilt */
          50%     { transform: translate(8px, 0) rotate(4deg); }
          56.25%  { transform: translate(8px, 0) rotate(4deg); }
          /* Pose D — small hop up */
          75%     { transform: translate(0, -10px) rotate(0deg); }
          81.25%  { transform: translate(0, -10px) rotate(0deg); }
          /* loop back to A */
          100%    { transform: translate(-8px, 0) rotate(-4deg); }
        }
        .prm-pose {
          animation: prm-pose 1.6s ease-out infinite;
          transform-origin: 50% 90%;
        }
      `}</style>
    </div>
  );
};

window.Mascot = Mascot;