// =============================================================
// PetHomePanel — small pixel cottage preview on Home
// =============================================================

const PetHomePanel = ({ mood = "happy", onOpen }) => {
  const copy = XM_PET_COPY[mood] || XM_PET_COPY.happy;
  return (
    <button className={`xm-pet-home-card xm-pet-home-card-${mood}`} onClick={onOpen}>
      <div className="xm-pet-home-scene" aria-hidden>
        <div className="xm-pixel-sky"/>
        <div className="xm-pixel-cloud xm-pixel-cloud-a"/>
        <div className="xm-pixel-cloud xm-pixel-cloud-b"/>
        <div className="xm-pixel-tree xm-pixel-tree-a"/>
        <div className="xm-pixel-cottage">
          <span className="xm-pixel-roof"/>
          <span className="xm-pixel-wall"/>
          <span className="xm-pixel-window"/>
          <span className="xm-pixel-door"/>
        </div>
        <div className="xm-pixel-fence"/>
        <div className="xm-pixel-grass"/>
        <div className="xm-pixel-flower xm-pixel-flower-a"/>
        <div className="xm-pixel-flower xm-pixel-flower-b"/>
        <div className="xm-pet-home-pet">
          <PetSprite mood={mood} size={168} compact/>
        </div>
      </div>
      <div className="xm-pet-home-info">
        <div>
          <div className="xm-pet-home-eyebrow">Xiaomo</div>
          <div className="xm-pet-home-title">小抹的小屋</div>
        </div>
        <div className="xm-pet-home-chip">{copy.label}</div>
      </div>
      <div className="xm-pet-home-line">{copy.line}</div>
    </button>
  );
};

Object.assign(window, { PetHomePanel });