const FootInDoorDemo = () => {
  const [strategy, setStrategy] = useState('none'); // 'direct', 'gradual'
  const [step, setStep] = useState(0);

  const reset = () => {
    setStrategy('none');
    setStep(0);
  };

  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>

      {strategy === 'none' && (
        <div className="space-y-4">
          <p className="text-center text-sm text-muted-foreground mb-4">アプローチ方法を選んでください</p>
          <button onClick={() => {setStrategy('direct'); setStep(1);}} className="w-full text-left p-4 bg-muted rounded hover:bg-muted">
            <strong>A. 直球勝負</strong><br/>
            <span className="text-xs">「署名して、1000円寄付してください！」</span>
          </button>
          <button onClick={() => {setStrategy('gradual'); setStep(1);}} className="w-full text-left p-4 bg-primary/10 rounded hover:bg-primary/20 border border-primary/30">
            <strong>B. フット・イン・ザ・ドア</strong><br/>
            <span className="text-xs">まずは「署名してください」だけお願いする</span>
          </button>
        </div>
      )}

      {/* STRATEGY A: DIRECT */}
      {strategy === 'direct' && step === 1 && (
        <div className="animate-in fade-in bg-card border p-6 rounded-xl text-center">
           <div className="text-4xl mb-4">🌳</div>
           <p className="mb-4 font-bold">森を守る活動にご協力ください</p>
           <p className="text-sm text-muted-foreground mb-6">
             活動資金として<strong className="text-destructive">1,000円の寄付</strong>と、<br/>賛同の署名をお願いします。
           </p>
           <div className="space-y-2">
             <button onClick={() => setStep(99)} className="w-full bg-green-600 text-white font-bold py-3 rounded opacity-50 cursor-not-allowed" title="ハードルが高い">
               寄付して署名する
             </button>
             <button onClick={reset} className="w-full text-muted-foreground text-sm underline">
               断る（ハードルが高い...）
             </button>
           </div>
        </div>
      )}

      {/* STRATEGY B: GRADUAL */}
      {strategy === 'gradual' && step === 1 && (
        <div className="animate-in fade-in bg-card border p-6 rounded-xl text-center">
           <div className="text-4xl mb-4">🌳</div>
           <p className="mb-2 font-bold">森を守る活動にご協力ください</p>
           <p className="text-sm text-muted-foreground mb-6">
             あなたの署名が力になります。<br/>
             1分で終わります。
           </p>
           <button onClick={() => setStep(2)} className="w-full bg-primary text-primary-foreground font-bold py-3 rounded hover:bg-primary/90 shadow max-w-xs mx-auto">
             署名する（無料）
           </button>
           <div className="mt-2 text-xs text-muted-foreground">※ ハードルが低いのでYESと言いやすい</div>
        </div>
      )}

      {strategy === 'gradual' && step === 2 && (
        <div className="animate-in slide-in-from-right bg-primary/10 border border-primary/30 p-6 rounded-xl text-center">
           <div className="text-4xl mb-2">👏</div>
           <p className="font-bold text-foreground mb-2">ありがとうございます！</p>
           <p className="text-sm text-blue-800 mb-6">
             あなたは環境保護のサポーターになりました（自己認識の形成）。<br/>
             <br/>
             もしよろしければ、<strong className="text-destructive">1,000円の寄付</strong>で<br/>
             より直接的な支援をしませんか？
           </p>
           <div className="space-y-2">
             <button onClick={() => setStep(99)} className="w-full bg-green-600 text-white font-bold py-3 rounded hover:bg-green-700 shadow-lg animate-pulse">
               寄付もする
             </button>
             <button onClick={reset} className="text-xs text-muted-foreground underline">
               今回はやめる
             </button>
           </div>
           <div className="mt-4 text-xs bg-card p-2 rounded text-left text-muted-foreground">
             <strong>解説:</strong><br/>
             一度「署名」という行動でコミットしたため、「私は環境を大切にする人だ」という一貫性を保とうとして、次の「寄付」のお願いも断りにくくなりました。
           </div>
        </div>
      )}

      {step === 99 && (
        <div className="text-center animate-in zoom-in">
           <h2 className="text-2xl font-bold mb-4">成功！🎉</h2>
           <p className="text-muted-foreground">小さなイエスが、大きな成果を生みました。</p>
           <button onClick={reset} className="mt-8 text-blue-500 underline">最初に戻る</button>
        </div>
      )}

    </div>
  );
};

render(<FootInDoorDemo />);