const SelectiveAttentionDemo = () => {
  const [name, setName] = useState('');
  const [isStarted, setIsStarted] = useState(false);

  const comments = [
    "こんにちは！今日はいい天気ですね。",
    "新しい機能が追加されました。",
    "システムメンテナンスのお知らせ。",
    `${name ? name : 'あなた'}さん、特別なお知らせがあります！`, // Target
    "来週の予定を確認してください。",
    "アンケートにご協力ください。",
    "セキュリティアップデート。",
    "お得なキャンペーン実施中。",
  ];

  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>

      {!isStarted ? (
        <div className="text-center">
           <input 
             type="text" 
             placeholder="あなたの名前を入力" 
             className="border p-2 rounded mb-4 w-full text-center"
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
           <button 
             onClick={() => setIsStarted(true)} 
             className="bg-primary text-primary-foreground px-6 py-2 rounded font-bold disabled:opacity-50"
             disabled={!name}
           >
             開始
           </button>
        </div>
      ) : (
        <div className="animate-in fade-in">
          <p className="text-xs text-muted-foreground mb-4 text-center">
            以下のリストをざっと眺めてください。<br/>
            どの行が一番最初に目に飛び込んできましたか？
          </p>

          <div className="space-y-2 bg-muted/30 p-4 rounded-xl h-64 overflow-y-auto">
            {comments.map((text, i) => (
              <div 
                key={i} 
                className={`
                  p-3 rounded border text-sm transition-all duration-500
                  ${text.includes(name) 
                    ? 'bg-yellow-100 border-yellow-300 font-bold text-yellow-900 dark:text-yellow-900 transform scale-105 shadow-md' 
                    : 'bg-card border-border/50 text-muted-foreground'
                  }
                `}
              >
                {text}
              </div>
            ))}
          </div>
          
          <div className="mt-4 p-3 bg-primary/10 text-xs text-blue-800 rounded">
            <strong>解説:</strong><br/>
            自分の名前（または関心事）が含まれている情報は、脳が優先的に処理し、背景から浮かび上がって見えます。<br/>
            これが「あなたへのおすすめ」「○○さん、こんにちは」というパーソナライゼーションが強力な理由です。
          </div>
          <button onClick={() => setIsStarted(false)} className="block mx-auto mt-4 text-xs text-muted-foreground underline">戻る</button>
        </div>
      )}
    </div>
  );
};

render(<SelectiveAttentionDemo />);