const DualCodingDemo = () => {
  const [mode, setMode] = useState('text'); // 'text' | 'dual'

  const items = [
    { label: 'ホーム', icon: '🏠' },
    { label: '検索', icon: '🔍' },
    { label: '通知', icon: '🔔' },
    { label: 'メッセージ', icon: '✉️' },
    { label: 'お気に入り', icon: '⭐' },
    { label: 'プロフィール', icon: '👤' },
    { label: 'セキュリティ', icon: '🔒' },
    { label: '設定', icon: '⚙️' },
  ];

  return (
    <div className="p-6 bg-card rounded-xl shadow-lg border max-w-lg mx-auto">
      <h3 className="font-bold text-lg mb-4 text-center">探索スピード実験</h3>
      <p className="text-sm text-center mb-6 text-muted-foreground">
        「設定」メニューを探してください。<br/>どちらが瞬時に見つかりますか？
      </p>

      <div className="flex justify-center gap-4 mb-8">
        <button 
          onClick={() => setMode('text')} 
          className={`px-4 py-2 rounded-full text-sm font-bold transition-colors ${mode === 'text' ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}
        >
          テキストのみ (Verbal)
        </button>
        <button 
          onClick={() => setMode('dual')} 
          className={`px-4 py-2 rounded-full text-sm font-bold transition-colors ${mode === 'dual' ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}
        >
          二重符号化 (Dual Coding)
        </button>
      </div>

      <div className="bg-background border rounded-lg overflow-hidden shadow-inner">
        {items.map((item, i) => (
          <div key={i} className="flex items-center p-3 border-b last:border-0 hover:bg-muted/50 cursor-pointer transition-colors group">
            {mode === 'dual' && (
              <div className="mr-3 p-2 bg-blue-50 dark:bg-blue-900/30 rounded-md group-hover:scale-110 transition-transform text-xl flex items-center justify-center w-10 h-10">
                {item.icon}
              </div>
            )}
            <span className={`font-medium ${mode === 'dual' ? 'text-base' : 'text-sm pl-2'}`}>
              {item.label}
            </span>
          </div>
        ))}
      </div>

      <div className="mt-6 text-sm text-muted-foreground bg-muted p-4 rounded">
        <strong>解説:</strong> テキストのみの場合、ユーザーは文字を「読んで」探す必要があります。アイコン付きの場合、ユーザーは「形（歯車の形）」を周辺視野で捉えられるため、読むよりも早く「設定」の場所に目星をつけることができます。
      </div>
    </div>
  );
};

render(<DualCodingDemo />);