const PersonaCompare = () => {
  const [mode, setMode] = useState('data'); // data | persona

  return (
    <div className="p-6 bg-card rounded-xl shadow-lg border max-w-lg mx-auto">
      <div className="flex justify-center mb-6 bg-muted p-1 rounded-lg w-fit mx-auto">
        <button
          onClick={() => setMode('data')}
          className={`px-4 py-1.5 rounded-md text-sm font-bold transition-all ${mode === 'data' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
        >
          統計データ (Attributes)
        </button>
        <button
          onClick={() => setMode('persona')}
          className={`px-4 py-1.5 rounded-md text-sm font-bold transition-all ${mode === 'persona' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
        >
          ペルソナ (Story)
        </button>
      </div>

      <div className="min-h-[300px]">
        {mode === 'data' ? (
          <div className="space-y-4 animate-in fade-in duration-300">
            <div className="bg-gray-100 dark:bg-gray-800 p-4 rounded font-mono text-sm border-l-4 border-gray-500">
              <h4 className="font-bold mb-2">Target Segment A</h4>
              <ul className="list-disc pl-4 space-y-1">
                <li>Age: 30-35</li>
                <li>Gender: Male</li>
                <li>Occupation: Corporate Sales</li>
                <li>Income: 5-6M JPY</li>
                <li>Device: iPhone (Latest)</li>
                <li>Usage: Commute (Morning/Evening)</li>
                <li>Pain Point: Lack of time</li>
              </ul>
            </div>
            <p className="text-sm text-muted-foreground">
              ※情報は正確ですが、「どんな生活をしているか」「具体的に何に困っているか」が想像しにくく、共感が生まれにくい状態です。
            </p>
          </div>
        ) : (
          <div className="space-y-4 animate-in fade-in duration-300">
            <div className="bg-white dark:bg-gray-900 border rounded-lg overflow-hidden shadow-sm">
              <div className="h-24 bg-gradient-to-r from-blue-500 to-cyan-400 p-4 flex items-end">
                <h4 className="text-white font-bold text-xl drop-shadow-md">田中 サトシ (32)</h4>
              </div>
              <div className="p-5">
                <div className="flex gap-2 mb-4 text-xs font-bold text-muted-foreground uppercase tracking-wider">
                  <span>営業職</span>
                  <span>•</span>
                  <span>毎朝8:00の満員電車</span>
                </div>
                <p className="text-sm leading-relaxed mb-4">
                  「毎朝の通勤電車は唯一のインプット時間。でも満員電車でスマホを取り出すのもやっと。だから、<span className="bg-yellow-100 dark:bg-yellow-900/30 font-bold px-1">片手だけで操作できて、5分で要点がわかるニュースアプリ</span>じゃないと使わないかな。」
                </p>
                <div className="bg-blue-50 dark:bg-blue-900/20 p-3 rounded text-sm text-blue-800 dark:text-blue-200">
                  <strong>Goal:</strong> クライアントとの雑談のネタを、訪問前にサクッと仕入れたい。
                </div>
              </div>
            </div>
            <p className="text-sm text-muted-foreground">
              ※「片手操作UI」「5分要約機能」などの具体的なアイデアが湧きやすくなります。これが共感（Empathy）の力です。
            </p>
          </div>
        )}
      </div>
    </div>
  );
};

render(<PersonaCompare />);