const EmpathyGapDemo = () => {
  const [state, setState] = useState('normal'); // normal, hungry
  const [cart, setCart] = useState([]);
  const [showResult, setShowResult] = useState(false);

  const items = [
    { name: '🥗 サラダ', type: 'healthy' },
    { name: '🍎 りんご', type: 'healthy' },
    { name: '🍔 ハンバーガー', type: 'junk' },
    { name: '🍟 ポテトL', type: 'junk' },
    { name: '🍰 ケーキ', type: 'junk' },
  ];

  const addToCart = (item) => {
    setCart([...cart, item]);
  };

  const checkout = () => {
    setShowResult(true);
  };

  const reset = () => {
    setCart([]);
    setShowResult(false);
    setState('normal');
  };

  // State-dependent filtering/highlighting logic (simulating attention bias)
  // When hungry, junk food looks more attractive (larger, brighter)
  
  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto text-center">
      <h3 className="font-bold text-card-foreground mb-4">来週の食料品の買い物</h3>

      {!showResult ? (
        <>
          <div className="flex justify-center gap-4 mb-6 bg-muted p-2 rounded-lg inline-flex mx-auto">
            <button 
               onClick={() => setState('normal')}
               className={`px-4 py-1 rounded text-sm ${state === 'normal' ? 'bg-card shadow text-primary font-bold' : 'text-muted-foreground'}`}
            >
              満腹 (冷静)
            </button>
            <button 
               onClick={() => setState('hungry')}
               className={`px-4 py-1 rounded text-sm ${state === 'hungry' ? 'bg-card shadow text-destructive font-bold' : 'text-muted-foreground'}`}
            >
              空腹 (Hot)
            </button>
          </div>

          <div className="grid grid-cols-2 gap-3 mb-6">
            {items.map((item, i) => {
              const isJunk = item.type === 'junk';
              const isHighlighted = state === 'hungry' && isJunk;
              
              return (
                <button
                  key={i}
                  onClick={() => addToCart(item)}
                  className={`
                    p-3 border rounded-lg transition-all hover:bg-muted/30
                    ${isHighlighted ? 'border-destructive/50 bg-destructive/10 scale-105 shadow-md font-bold' : 'border-border'}
                  `}
                >
                  {item.name}
                </button>
              );
            })}
          </div>
          
          <div className="border-t pt-4">
             <div className="text-sm text-muted-foreground mb-2">カゴの中身: {cart.length}点</div>
             <button onClick={checkout} disabled={cart.length === 0} className="bg-primary text-primary-foreground w-full py-2 rounded-lg font-bold disabled:bg-gray-300">
               購入する
             </button>
          </div>
        </>
      ) : (
        <div className="animate-in zoom-in">
           <h4 className="font-bold text-xl mb-4">翌日（冷静になった時）...</h4>
           
           <div className="bg-muted/30 p-4 rounded-lg text-left mb-6 font-mono text-sm">
             {cart.map((item, i) => (
               <div key={i} className={`flex justify-between ${item.type === 'junk' ? 'text-destructive' : 'text-green-500'}`}>
                 <span>{item.name}</span>
                 <span>{item.type === 'junk' ? '後悔...' : 'Good!'}</span>
               </div>
             ))}
           </div>
           
           {state === 'hungry' ? (
             <p className="text-destructive font-bold">
               「なんでこんなにジャンクフードばかり買ったんだ...」<br/>
               <span className="text-xs text-muted-foreground font-normal">これが共感ギャップです。空腹時の判断は信用できません。</span>
             </p>
           ) : (
             <p className="text-primary font-bold">
               「バランスの良い買い物ができた！」<br/>
               <span className="text-xs text-muted-foreground font-normal">冷静な状態での判断は、未来の満足に繋がります。</span>
             </p>
           )}

           <button onClick={reset} className="mt-6 text-muted-foreground text-xs underline">やり直す</button>
        </div>
      )}

    </div>
  );
};

render(<EmpathyGapDemo />);