const Definition = () => {
  return (
    <div className="bg-[#FFF9E5] border border-[#FFE082] rounded-lg p-6 text-slate-800 mb-8">
      <div className="text-[#8B5E3C] font-bold text-xs tracking-widest mb-3 uppercase">UIXHERO Definition</div>
      <div className="text-lg font-medium leading-relaxed">
        問題空間と解決空間とは、「<b>ユーザーが直面している課題や状況（Problem）</b>」と「<b>それに対する具体的な施策・機能・UI（Solution）</b>」を、意図的に分離して扱う思考枠組みである。<br/>
        優れたプロダクト開発では、この2つを同時に議論せず、まず問題空間を十分に探索・定義したうえで、解決空間へと移行する。
      </div>
    </div>
  );
};

render(<Definition />);

const OkNgComparison = () => {
  return (
    <div className="overflow-x-auto my-8">
      {/* PC view table */}
      <table className="w-full border-collapse border rounded-lg hidden md:table">
        <thead className="bg-muted/50">
          <tr className="border-b">
            <th className="text-left p-4 font-bold border-r w-1/6">フェーズ</th>
            <th className="text-left p-4 font-bold border-r w-5/12 text-destructive">解決空間偏重（NG）</th>
            <th className="text-left p-4 font-bold w-5/12 text-primary">問題空間重視（OK）</th>
          </tr>
        </thead>
        <tbody>
          <tr className="border-b hover:bg-muted/10">
            <td className="p-4 font-bold border-r">会議の議題</td>
            <td className="p-4 border-r">「このボタンの色はどうする？」「どんなアニメーションにする？」</td>
            <td className="p-4">「ユーザーはなぜここで迷うのか？」「そもそもこの画面は必要か？」</td>
          </tr>
          <tr className="border-b hover:bg-muted/10">
            <td className="p-4 font-bold border-r">ユーザー調査</td>
            <td className="p-4 border-r">「この機能を使いたいですか？」（解決策の評価）</td>
            <td className="p-4">「普段どのように作業していますか？」（現状の課題発見）</td>
          </tr>
          <tr className="border-b hover:bg-muted/10">
            <td className="p-4 font-bold border-r">失敗した時</td>
            <td className="p-4 border-r">「作り方が悪かった」（UI/バグのせいにする）</td>
            <td className="p-4">「解くべき問題が違っていた」（前提の誤りを認める）</td>
          </tr>
        </tbody>
      </table>

      {/* Mobile view */}
      <div className="md:hidden space-y-4">
        <div className="border rounded-lg p-4">
          <h4 className="font-bold mb-2 border-b pb-1">解決空間偏重（NG）</h4>
          <ul className="space-y-2 text-sm">
            <li><span className="font-bold">会議:</span> 「このボタンの色はどうする？」</li>
            <li><span className="font-bold">調査:</span> 「この機能を使いたいですか？」</li>
            <li><span className="font-bold">失敗:</span> 「作り方が悪かった」</li>
          </ul>
        </div>
        <div className="border rounded-lg p-4 bg-primary/5">
          <h4 className="font-bold mb-2 border-b pb-1 text-primary">問題空間重視（OK）</h4>
          <ul className="space-y-2 text-sm">
            <li><span className="font-bold">会議:</span> 「ユーザーはなぜ迷うのか？」</li>
            <li><span className="font-bold">調査:</span> 「普段どう作業していますか？」</li>
            <li><span className="font-bold">失敗:</span> 「解くべき問題が違っていた」</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

render(<OkNgComparison />);