const ReciprocityDemo = () => {
  const [mode, setMode] = useState('taker'); // taker, giver
  const [liked, setLiked] = useState(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 justify-center gap-4 mb-6">
        <button 
           onClick={() => {setMode('taker'); setLiked(false);}}
           className={`px-4 py-2 rounded text-sm font-bold ${mode === 'taker' ? 'bg-destructive text-destructive-foreground' : 'bg-muted'}`}
        >
          A. いきなり要求 (Taker)
        </button>
        <button 
           onClick={() => {setMode('giver'); setLiked(false);}}
           className={`px-4 py-2 rounded text-sm font-bold ${mode === 'giver' ? 'bg-primary/100 text-white' : 'bg-muted'}`}
        >
          B. 先に提供 (Giver)
        </button>
      </div>

      <div className={`p-6 rounded-xl border-2 transition-all ${mode === 'taker' ? 'border-border bg-muted/30' : 'border-blue-100 bg-primary/10'}`}>
        
        {mode === 'taker' ? (
          <div className="text-center">
            <div className="text-4xl mb-2">😤</div>
            <h4 className="font-bold text-card-foreground mb-2">「いいね」してください！</h4>
            <p className="text-xs text-muted-foreground mb-4">
              有益な情報を発信しています。<br/>
              まずはフォローと「いいね」をお願いします。<br/>
              話はそれからです。
            </p>
          </div>
        ) : (
          <div className="text-center">
            <div className="text-4xl mb-2">🎁</div>
            <h4 className="font-bold text-card-foreground mb-2">これ、役立つと思います。</h4>
            <div className="bg-card p-3 rounded mb-4 text-left text-xs text-muted-foreground shadow-sm">
              <strong>【無料配布】UXチェックリスト完全版</strong><br/>
              登録不要でダウンロードできます。<br/>
              あなたのプロジェクトに自由に使ってください！
            </div>
            <p className="text-xs text-primary mb-4">
              いつもありがとうございます。<br/>
              もし気に入ったら...
            </p>
          </div>
        )}

        <button 
          onClick={() => setLiked(!liked)}
          className={`
            w-full py-3 rounded-full font-bold transition-all flex items-center justify-center gap-2
            ${liked 
              ? 'bg-pink-500 text-white shadow-lg scale-95' 
              : 'bg-card border hover:bg-muted/30 text-muted-foreground'
            }
          `}
        >
          {liked ? '❤️ ありがとうございました！' : '♡ 「いいね」でお返しする'}
        </button>

      </div>

      <div className="mt-4 text-xs text-muted-foreground text-center">
        {mode === 'taker' 
          ? "「なんでお前に？」と反発したくなりませんか？" 
          : "「貰いっ放しは悪いな」という心理が働きませんか？"}
      </div>

    </div>
  );
};

render(<ReciprocityDemo />);