const EndowmentDemo = () => {
  const [step, setStep] = useState('offer'); // offer, owned, threat, decision
  
  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto text-center">
      
      {step === 'offer' && (
        <div className="animate-in fade-in">
          <h3 className="font-bold text-card-foreground mb-4">ボーナスチャンス！</h3>
          <div className="text-6xl mb-6">💎</div>
          <p className="text-muted-foreground mb-6">
            今なら、プレミアム会員限定の<br/>
            <strong>「魔法の宝石」</strong>を無料で差し上げます。
          </p>
          <button
            onClick={() => setStep('owned')}
            className="bg-yellow-400 text-yellow-900 px-8 py-3 rounded-full font-bold hover:bg-yellow-300 shadow-md transform hover:scale-105 transition"
          >
            受け取る
          </button>
        </div>
      )}

      {step === 'owned' && (
        <div className="animate-in zoom-in">
          <h3 className="font-bold text-card-foreground mb-2">受け取りました！</h3>
          <div className="bg-yellow-50 dark:bg-yellow-950 border-2 border-yellow-200 dark:border-yellow-800 p-6 rounded-xl mb-6 shadow-inner">
             <div className="text-6xl mb-2 drop-shadow-lg">💎</div>
             <div className="font-bold text-yellow-800">My Precious Gem</div>
             <p className="text-xs text-yellow-600 mt-2">これは「あなた」のものです。</p>
          </div>
          <button
            onClick={() => setStep('threat')}
            className="text-primary underline text-sm"
          >
            次へ進む
          </button>
        </div>
      )}
      
      {step === 'threat' && (
        <div className="animate-in shake">
          <h3 className="font-bold text-destructive mb-4 text-xl">⚠️ 警告！</h3>
          <p className="text-card-foreground mb-6 font-bold">
            無料期間が終了しました。<br/>
            会員登録をしない場合、<br/>
            <span className="text-destructive text-lg">あなたの宝石は没収されます。</span>
          </p>
          
          <div className="bg-muted p-4 rounded-lg mb-6 opacity-50 grayscale">
             <div className="text-4xl text-muted-foreground">💎</div>
             <div className="text-xs text-muted-foreground mt-1 line-through">My Precious Gem</div>
          </div>

          <div className="space-y-3">
            <button
              onClick={() => setStep('decision')}
              className="w-full bg-primary text-primary-foreground px-6 py-3 rounded-lg font-bold hover:bg-primary/90 shadow-lg"
            >
              宝石を守る（会員登録）
            </button>
            <button
              onClick={() => setStep('offer')}
              className="w-full text-muted-foreground text-sm hover:text-destructive"
            >
              宝石を捨てる（最初に戻る）
            </button>
          </div>
        </div>
      )}

      {step === 'decision' && (
        <div className="animate-in fade-in">
           <div className="text-6xl mb-4">👍</div>
           <p className="text-foreground font-bold mb-4">
             これが授かり効果です。
           </p>
           <p className="text-sm text-muted-foreground bg-muted/30 p-4 rounded text-left">
             最初に「宝石を買いますか？」と聞かれるよりも、
             一度手に入れて「自分のもの」と思ってから「没収される」と言われた方が、
             強く抵抗（守りたい欲求）を感じませんでしたか？
             <br/><br/>
             ユーザーに一度価値を体験・所有させることは、最強のコンバージョン施策です。
           </p>
           <button
            onClick={() => setStep('offer')}
            className="mt-6 text-blue-500 underline text-xs"
          >
            リセット
          </button>
        </div>
      )}

    </div>
  );
};

render(<EndowmentDemo />);