// Big character stage. Character media is intentionally kept free of CSS
// transforms so video frames stay sharp during playback.

function CharacterStage({ entity }) {
  const displayArtist = entity.artist || "Цифровий персонаж";

  return (
    <div className="character-stage" style={stageStyles.stage}>
      <div className="stage-character" style={stageStyles.charWrap}>
        {entity.video ? (
          <video
            src={entity.video}
            autoPlay loop muted playsInline
            style={stageStyles.charImg}
          />
        ) : (
          <img
            src={entity.figure}
            alt={displayArtist}
            style={{ ...stageStyles.charImg, filter: entity.tint }}
          />
        )}
      </div>

      <style>{`
        @media (max-width: 768px) {
          .stage-character { height: 96% !important; }
        }
      `}</style>
    </div>
  );
}

const stageStyles = {
  stage: { position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "flex-end", justifyContent: "center", overflow: "hidden", background: "transparent" },
  charWrap: { position: "relative", zIndex: 2, width: "100%", height: "92%", display: "flex", alignItems: "flex-end", justifyContent: "center", background: "transparent" },
  charImg:  { width: "100%", height: "100%", maxHeight: 748, display: "block", objectFit: "contain", background: "transparent", transition: "filter 220ms cubic-bezier(0.2,0.8,0.2,1)" },
};

window.CharacterStage = CharacterStage;