const TemptationBundlingDemo = () => {
  const [studyProgress, setStudyProgress] = useState(0);
  const [videoUnlocked, setVideoUnlocked] = useState(false);
  const [playing, setPlaying] = useState(false);

  const doStudy = () => {
    if (studyProgress < 100) {
      setStudyProgress(p => Math.min(100, p + 20));
      if (studyProgress + 20 >= 100) {
        setVideoUnlocked(true);
      }
    }
  };

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto">
      <h3 className="text-center font-bold text-card-foreground mb-6">誘惑バンドル体験</h3>

      <div className="flex gap-4">
        {/* The 'Should' (Study) */}
        <div className="flex-1 text-center font-bold text-foreground">
          <div className="text-4xl mb-2">📚</div>
          <div className="text-sm mb-2">勉強 (Should)</div>
          <div className="w-full bg-muted h-2 rounded-full mb-4">
            <div className="bg-primary/100 h-2 rounded-full transition-all" style={{width: `${studyProgress}%`}}></div>
          </div>
          <button 
            onClick={doStudy}
            disabled={studyProgress >= 100}
            className={`
              w-full py-2 rounded text-sm text-white transition-all active:scale-95
              ${studyProgress >= 100 ? 'bg-secondary cursor-default' : 'bg-primary hover:bg-primary/90 shadow-md'}
            `}
          >
            {studyProgress >= 100 ? '完了！' : '勉強する'}
          </button>
        </div>

        {/* The 'Want' (Video) */}
        <div className="flex-1 text-center font-bold text-foreground relative">
           
           {/* Lock Overlay */}
           {!videoUnlocked && (
             <div className="absolute inset-0 bg-muted/90 z-10 flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border">
               <div className="text-2xl mb-1">🔒</div>
               <div className="text-[10px] text-muted-foreground">勉強完了で<br/>ロック解除</div>
             </div>
           )}

           <div className="text-4xl mb-2">🎬</div>
           <div className="text-sm mb-2">動画 (Want)</div>
           <div className={`
             w-full h-2 rounded-full mb-4
             ${playing ? 'bg-destructive animate-pulse' : 'bg-muted'}
           `}></div>
           
           <button 
             onClick={() => setPlaying(!playing)}
             disabled={!videoUnlocked}
             className={`
               w-full py-2 rounded text-sm text-white transition-all
               ${!videoUnlocked ? 'bg-gray-300' : playing ? 'bg-destructive animate-pulse' : 'bg-pink-500 hover:bg-pink-600 shadow-lg'}
             `}
           >
             {playing ? '再生中♪' : '見る'}
           </button>
        </div>
      </div>

      <div className="mt-6 p-4 bg-yellow-50 dark:bg-yellow-950 rounded text-xs text-yellow-900 dark:text-yellow-200 leading-relaxed border border-yellow-200 dark:border-yellow-800">
        <strong>解説:</strong><br/>
        「動画を見たい」という欲求を利用して、「勉強する」という行動を駆動しています。<br/>
        先に動画を見せてしまうと、勉強する動機は消滅します（報酬の先食い）。
      </div>
      
      <div className="text-center mt-4">
        <button onClick={() => {setStudyProgress(0); setVideoUnlocked(false); setPlaying(false);}} className="text-xs text-blue-500 underline">リセット</button>
      </div>

    </div>
  );
};

render(<TemptationBundlingDemo />);