const DoorInFaceDemo = () => {
  const [step, setStep] = useState('initial'); // initial, high_req, refused, accepted_low, accepted_high

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto text-center">
      <h3 className="font-bold text-card-foreground mb-6">プレミアム会員のご案内</h3>

      {step === 'initial' && (
         <button onClick={() => setStep('high_req')} className="bg-primary text-primary-foreground px-6 py-2 rounded font-bold">
           詳細を見る
         </button>
      )}

      {step === 'high_req' && (
        <div className="animate-in zoom-in bg-gradient-to-b from-yellow-50 to-white p-6 rounded-xl border border-yellow-200 text-yellow-900 dark:text-yellow-900">
           <div className="text-4xl mb-2">💎</div>
           <h4 className="text-xl font-bold text-yellow-800 mb-2">プラチナプラン</h4>
           <p className="text-sm text-yellow-800 mb-4 font-bold">
             全ての機能が無制限！<br/>
             圧倒的な成長をお約束します。
           </p>
           <div className="text-3xl font-black text-yellow-900 mb-6">¥50,000 <span className="text-sm font-normal">/月</span></div>
           
           <div className="space-y-3">
             <button 
               onClick={() => setStep('accepted_high')} 
               className="w-full bg-yellow-400 text-yellow-900 font-bold py-3 rounded-lg hover:bg-yellow-500"
             >
               申し込む
             </button>
             <button 
               onClick={() => setStep('refused')} 
               className="w-full text-muted-foreground text-sm underline hover:text-muted-foreground"
             >
               高すぎるので結構です
             </button>
           </div>
        </div>
      )}

      {step === 'refused' && (
        <div className="animate-in slide-in-from-bottom bg-card p-6 rounded-xl border-2 border-green-100 shadow-2xl relative">
           <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-bold whitespace-nowrap">
             🙇 お待ちください！
           </div>
           
           <p className="text-sm text-muted-foreground mt-4 mb-4">
             ご予算に合いませんでしたか？<br/>
             では、基本機能に絞った<strong>「ライトプラン」</strong>はいかがでしょう？
           </p>
           
           <div className="text-2xl font-black text-green-500 mb-4">¥980 <span className="text-sm font-normal text-muted-foreground">/月</span></div>

           <div className="space-y-3">
             <button 
               onClick={() => setStep('accepted_low')} 
               className="w-full bg-green-600 text-white font-bold py-3 rounded-lg hover:bg-green-600 shadow-lg transform hover:scale-105 transition"
             >
               それなら申し込む
             </button>
             <button 
                onClick={() => setStep('initial')}
                className="text-xs text-muted-foreground"
             >
               それでも要らない
             </button>
           </div>
           <div className="mt-4 text-xs bg-muted/30 p-2 rounded text-left">
             <span className="font-bold">解説:</span><br/>
             5万円を見た後だと、980円が「タダ同然」に見えませんか？（アンカリング効果も働いています）。そして断った直後の提案なので「話くらいは聞いてやるか」という心理になります。
           </div>
        </div>
      )}

      {(step === 'accepted_high' || step === 'accepted_low') && (
        <div className="animate-in fade-in py-8">
           <div className="text-6xl mb-4">🎉</div>
           <p className="font-bold text-card-foreground">
             {step === 'accepted_high' ? 'すごい！太っ腹ですね！' : 'ご契約ありがとうございます！'}
           </p>
           <button onClick={() => setStep('initial')} className="mt-6 text-blue-500 underline text-sm">リセット</button>
        </div>
      )}
    </div>
  );
};

render(<DoorInFaceDemo />);