const ReactiveGuide = () => {
  const [hasInteracted, setHasInteracted] = useState(false);
  const [isFavorite, setIsFavorite] = useState(false);

  // ユーザーのアクションに「反応」する
  const handleInteraction = () => {
    setIsFavorite(!isFavorite);
    setHasInteracted(true);
  };

  return (
    <div className="p-12 bg-card rounded-xl flex flex-col items-center justify-center border border-border/50 shadow-sm">
      <div className="relative">
        <button
          onClick={handleInteraction}
          className={`
            p-4 rounded-full transition-all duration-300 transform hover:scale-110 active:scale-95
            ${isFavorite ? 'bg-pink-100 text-pink-500' : 'bg-muted text-muted-foreground hover:bg-muted'}
          `}
          aria-label="Toggle Favorite"
        >
          <svg className="w-8 h-8" fill={isFavorite ? 'currentColor' : 'none'} stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
        </button>

        {/* 
          [Reactive Element]
          まだインタラクションがない(hasInteracted === false)状態で、
          ユーザーが迷っている、あるいは注目させたい場合に表示する。
          
          ここでは「マウスオーバー」などのトリガーではなく、
          「まだ使ったことがない」という状態に対してヒントを出している。
        */ }
        {!hasInteracted && (
          <div className="absolute top-1/2 left-full ml-4 w-48 animate-bounce-horizontal">
            <div className="bg-gray-900 text-white text-xs p-3 rounded-lg shadow-xl relative">
              <div className="absolute top-1/2 right-full transform -translate-y-1/2 border-8 border-transparent border-r-gray-900"></div>
              <p className="font-bold mb-1 text-white">Save for later!</p>
              <p className="text-gray-200 leading-tight">Click this heart to create your personal collection.</p>
            </div>
          </div>
        )}
        
        {/* インタラクション後は、成功メッセージ（フィードバック）に切り替わる */}
        {hasInteracted && isFavorite && (
          <div className="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 whitespace-nowrap z-10">
             <span className="text-xs font-bold text-pink-500 bg-pink-50 px-2 py-1 rounded animate-fade-in-up">
               Added to collection!
             </span>
          </div>
        )}
      </div>
      
      <p className="mt-8 text-sm text-muted-foreground text-center max-w-xs">
        ユーザーがまだ機能を使っていない時だけ、右側にガイドが表示されています。
        一度使うとガイドは消え、ユーザーの邪魔をしません。
      </p>
    </div>
  );
};

render(<ReactiveGuide />);