const AestheticDemo = () => {
  const [mode, setMode] = useState('ugly'); // ugly, beautiful
  const [val, setVal] = useState('0');

  const input = (n) => setVal(val === '0' ? n : val + n);
  const clear = () => setVal('0');

  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-8">
        <button 
           onClick={() => setMode('ugly')}
           className={`px-4 py-2 rounded text-sm font-bold ${mode === 'ugly' ? 'bg-secondary text-secondary-foreground' : 'bg-muted'}`}
        >
          A. 機能重視 (Ugly)
        </button>
        <button 
           onClick={() => setMode('beautiful')}
           className={`px-4 py-2 rounded text-sm font-bold ${mode === 'beautiful' ? 'bg-pink-500 text-white' : 'bg-muted text-muted-foreground'}`}
        >
          B. 美しさ重視 (Beautiful)
        </button>
      </div>

      <div className="flex justify-center">
        {mode === 'ugly' ? (
          /* Ugly Calculator */
          <div className="bg-gray-300 border-4 border-black p-2 w-48 font-mono">
             <div className="bg-green-800 text-green-100 text-right p-1 mb-2 border border-inset border-gray-600 font-bold font-mono">
               {val}
             </div>
             <div className="grid grid-cols-3 gap-1">
               {[1,2,3,4,5,6,7,8,9].map(n => (
                 <button key={n} onClick={() => input(String(n))} className="bg-muted border border-black text-black text-xs h-8 active:bg-secondary">
                   {n}
                 </button>
               ))}
               <button onClick={clear} className="col-span-3 bg-red-700 text-white border border-black text-xs h-8">CLR</button>
             </div>
          </div>
        ) : (
          /* Beautiful Calculator */
          <div className="bg-gradient-to-br from-gray-900 to-gray-800 p-6 rounded-3xl shadow-2xl w-64 transform transition-all hover:scale-105">
             <div className="text-right text-white text-3xl font-light mb-6 tracking-wider opacity-90">
               {val}
             </div>
             <div className="grid grid-cols-3 gap-3">
               {[1,2,3,4,5,6,7,8,9].map(n => (
                 <button 
                   key={n} 
                   onClick={() => input(String(n))}
                   className="w-12 h-12 rounded-full bg-gray-700 text-white text-lg font-medium shadow-md hover:bg-gray-600 active:scale-95 transition-all mx-auto"
                 >
                   {n}
                 </button>
               ))}
               <button 
                 onClick={clear}
                 className="col-span-3 mt-2 text-xs text-pink-400 font-bold tracking-widest hover:text-pink-300 transition-colors uppercase"
               >
                 Clear
               </button>
             </div>
          </div>
        )}
      </div>

      <p className="mt-8 text-xs text-muted-foreground text-center">
        {mode === 'ugly' 
          ? "「使いにくそう」「バグりそう」と感じませんか？" 
          : "「サクサク動きそう」「触りたい」と感じませんか？"}
        <br/>
        <span className="font-bold">※機能（コード）は全く同じです。</span>
      </p>

    </div>
  );
};

render(<AestheticDemo />);