const SurveyBiasDemo = () => {
  const [mode, setMode] = useState(null); // 'biased' or 'neutral'
  const [rating, setRating] = useState(0);
  const [submitted, setSubmitted] = useState(false);

  // Reset when switching modes
  const switchMode = (m) => {
    setMode(m);
    setRating(0);
    setSubmitted(false);
  };

  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>

      <div className="flex gap-2 mb-8 justify-center">
        <button 
          onClick={() => switchMode('biased')} 
          className={`px-4 py-2 rounded-full text-sm font-bold border ${mode === 'biased' ? 'bg-destructive/10 border-red-200 text-red-700' : 'bg-card text-muted-foreground'}`}
        >
          A. 誘導的な質問
        </button>
        <button 
          onClick={() => switchMode('neutral')} 
          className={`px-4 py-2 rounded-full text-sm font-bold border ${mode === 'neutral' ? 'bg-green-50 border-green-200 text-green-700' : 'bg-card text-muted-foreground'}`}
        >
          B. 中立的な質問
        </button>
      </div>

      {mode && (
        <div className="animate-in fade-in">
          {/* Context: The user just used a feature */}
          <div className="mb-6 p-4 bg-muted/30 rounded text-sm text-muted-foreground italic text-center">
            （あなたは今、新機能を使いましたが、<br/>「可もなく不可もなく、普通」という感想を持っています）
          </div>

          <div className="border p-6 rounded-xl shadow-sm">
            {mode === 'biased' ? (
              <div className="text-center">
                <p className="font-bold text-lg mb-2 text-red-700">素晴らしい新機能はいかがでしたか？</p>
                <p className="text-xs text-muted-foreground mb-4">開発チームが不眠不休で作り上げた自信作です！</p>
                <div className="flex justify-center gap-1 mb-4">
                  {[1, 2, 3, 4, 5].map(star => (
                    <button key={star} onClick={() => setRating(star)} className="text-2xl hover:scale-110 transition">
                      {star <= rating ? '😍' : '😶'}
                    </button>
                  ))}
                </div>
                {rating > 0 && <p className="text-destructive font-bold text-sm">最高です！ ({rating}点)</p>}
              </div>
            ) : (
              <div className="text-center">
                 <p className="font-bold text-lg mb-2 text-card-foreground">新機能の満足度を教えてください</p>
                 <p className="text-xs text-muted-foreground mb-4">今後の改善の参考にさせていただきます。</p>
                 <div className="flex justify-center gap-1 mb-4">
                  {[1, 2, 3, 4, 5].map(star => (
                    <button key={star} onClick={() => setRating(star)} className="text-2xl hover:scale-110 transition text-yellow-400">
                      {star <= rating ? '★' : '☆'}
                    </button>
                  ))}
                 </div>
                 {rating > 0 && <p className="text-muted-foreground font-bold text-sm">{rating}点</p>}
              </div>
            )}
            
            <button 
               onClick={() => setSubmitted(true)}
               disabled={rating === 0 || submitted}
               className="w-full bg-primary text-primary-foreground font-bold py-2 rounded disabled:opacity-50 mt-2"
            >
              回答する
            </button>
          </div>

          {submitted && (
             <div className="mt-4 p-3 bg-primary/10 text-foreground text-sm rounded animate-in zoom-in">
               <p className="font-bold">解説:</p>
               {mode === 'biased' ? (
                 <p>
                   Aの質問は<strong>「素晴らしい」「不眠不休」</strong>という言葉で回答者にプレッシャーをかけています（社会的望まさしさ）。
                   これでは本音の「普通（3点）」ではなく、気を使って「4点か5点」をつけてしまうバイアスがかかります。
                 </p>
               ) : (
                 <p>
                   Bの質問は感情的な言葉を排除し、目的（改善のため）を伝えています。
                   これにより、回答者は気兼ねなく率直な評価（3点など）をつけやすくなります。
                 </p>
               )}
             </div>
          )}
        </div>
      )}
    </div>
  );
};

render(<SurveyBiasDemo />);