const StatusQuoDemo = () => {
  const [layout, setLayout] = useState('classic'); // 'classic' or 'modern'
  const [count, setCount] = useState(0);

  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>
        <div className="text-xs font-bold bg-primary/20 text-blue-800 px-2 py-1 rounded">
          クリック数: {count}
        </div>
      </div>

      {layout === 'classic' ? (
        <div className="animate-in fade-in">
          <div className="bg-muted p-4 rounded-lg border-2 border-border mb-4 h-48 flex flex-col justify-between">
            <div className="text-center text-muted-foreground font-bold mb-2">Classic Layout (Ver 1.0)</div>
            <div className="grid grid-cols-2 gap-2">
              <button onClick={() => setCount(c => c + 1)} className="bg-card border rounded p-2 text-sm shadow hover:bg-muted/30">Menu A</button>
              <button onClick={() => setCount(c => c + 1)} className="bg-card border rounded p-2 text-sm shadow hover:bg-muted/30">Menu B</button>
              <button onClick={() => setCount(c => c + 1)} className="bg-card border rounded p-2 text-sm shadow hover:bg-muted/30">Menu C</button>
              <button onClick={() => setCount(c => c + 1)} className="bg-card border rounded p-2 text-sm shadow hover:bg-muted/30">Menu D</button>
            </div>
          </div>
          
          <div className="bg-yellow-50 dark:bg-yellow-950 p-4 rounded border border-yellow-200 dark:border-yellow-800">
            <p className="text-sm font-bold text-yellow-800 dark:text-yellow-200 mb-2">🎉 新しいレイアウトが登場！</p>
            <p className="text-xs text-yellow-700 dark:text-yellow-300 mb-3">
              ボタンが大きくなり、作業効率が20%アップします。<br/>
              今すぐ切り替えますか？
            </p>
            <div className="flex gap-2">
              <button 
                onClick={() => setLayout('modern')}
                className="bg-primary text-primary-foreground text-xs px-3 py-2 rounded hover:bg-primary/90 transition"
              >
                新しいデザインを試す
              </button>
              <button className="text-muted-foreground text-xs px-2 hover:text-muted-foreground underline">
                今はやめておく
              </button>
            </div>
          </div>
        </div>
      ) : (
        <div className="animate-in fade-in">
          <div className="bg-indigo-50 dark:bg-indigo-950 p-4 rounded-lg border-2 border-indigo-200 dark:border-indigo-800 mb-4 h-48 flex flex-col justify-center gap-4">
             <div className="text-center text-indigo-400 font-bold mb-2">Modern Layout (Ver 2.0)</div>
             <div className="flex justify-center gap-4">
               <button onClick={() => setCount(c => c + 1)} className="w-16 h-16 rounded-full bg-indigo-500 text-white font-bold shadow-lg hover:bg-indigo-600 flex items-center justify-center">A</button>
               <button onClick={() => setCount(c => c + 1)} className="w-16 h-16 rounded-full bg-indigo-500 text-white font-bold shadow-lg hover:bg-indigo-600 flex items-center justify-center">B</button>
               <button onClick={() => setCount(c => c + 1)} className="w-16 h-16 rounded-full bg-indigo-500 text-white font-bold shadow-lg hover:bg-indigo-600 flex items-center justify-center">C+</button>
             </div>
          </div>

          <div className="text-center">
            <p className="text-sm text-muted-foreground mb-2">どうですか？ 使いやすいですか？</p>
            <button 
              onClick={() => setLayout('classic')}
              className="text-muted-foreground text-xs underline hover:text-destructive"
            >
              前のデザインに戻す (慣れない...)
            </button>
          </div>
        </div>
      )}
      
      <p className="mt-6 text-xs text-muted-foreground text-center">
        「戻す」ボタンがあると安心しませんか？<br/>
        現状維持バイアスを乗り越えるには、「いつでも戻れる」という安心感が鍵です。
      </p>
    </div>
  );
};

render(<StatusQuoDemo />);