const ScarcityDemo = () => {
  const [stock, setStock] = useState(50);
  const [isScarcityMode, setIsScarcityMode] = useState(false);

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto">
      <div className="flex justify-between items-center mb-6">
        <h3 className="font-bold text-card-foreground">商品詳細ページ</h3>
        <label className="flex items-center space-x-2 text-xs cursor-pointer">
          <input 
            type="checkbox" 
            checked={isScarcityMode} 
            onChange={(e) => { setIsScarcityMode(e.target.checked); setStock(e.target.checked ? 3 : 50); }}
            className="accent-red-500"
          />
          <span>希少性演出ON</span>
        </label>
      </div>

      <div className="flex gap-4 mb-4">
        <div className="w-24 h-32 bg-muted rounded-lg flex items-center justify-center text-4xl">👟</div>
        <div className="flex-1">
          <div className="text-xl font-bold mb-1">Super Cool Sneakers</div>
          <div className="text-muted-foreground text-sm mb-3">¥12,800</div>
          
          {isScarcityMode ? (
            <div className="animate-in pulse text-destructive dark:text-red-400 font-bold text-sm mb-4 flex items-center gap-2">
              <span>🔥</span>
              <span>残りわずか {stock} 点！</span>
              <span className="text-xs font-normal text-muted-foreground">注文殺到中</span>
            </div>
          ) : (
            <div className="text-green-500 font-bold text-sm mb-4 flex items-center gap-2">
              <span>✅</span>
              <span>在庫あり</span>
            </div>
          )}

          <button className={`w-full font-bold py-2 rounded shadow transition ${isScarcityMode ? 'bg-destructive text-destructive-foreground hover:bg-red-700 hover:scale-105' : 'bg-primary text-primary-foreground hover:bg-primary/90'}`}>
            カートに入れる
          </button>
        </div>
      </div>

      <div className="p-4 bg-muted/30 rounded-lg text-sm">
        <p className="font-bold mb-1">解説:</p>
        {isScarcityMode ? (
          <p className="text-red-800">
            「なくなってしまうかも！」という焦りが、熟考するプロセスを飛ばさせ、衝動的な購入アクションに繋がります。
          </p>
        ) : (
          <p className="text-blue-800">
            「在庫あり」なら安心ですが、「いつでも買えるなら、また後でいいか」と離脱（先延ばし）されるリスクも高まります。
          </p>
        )}
      </div>
    </div>
  );
};

render(<ScarcityDemo />);