const SkeuomorphismDemo = () => {
  const [style, setStyle] = useState('neu'); // 'flat' or 'neu' or 'skeuo'

  return (
    <div className={`p-10 rounded-xl transition-colors duration-500 ${
      style === 'neu' ? 'bg-[#e0e5ec]' : 
      style === 'skeuo' ? 'bg-gradient-to-br from-gray-700 to-gray-900' : 'bg-card'
    }`}>
      
      <div className="flex justify-center gap-4 mb-12">
        {['flat', 'neu', 'skeuo'].map(s => (
          <button
            key={s}
            onClick={() => setStyle(s)}
            className={`px-3 py-1 text-xs rounded-full capitalize ${
              style === s 
                ? 'bg-primary text-primary-foreground font-bold' 
                : 'bg-transparent border border-gray-400 text-muted-foreground'
            }`}
          >
            {s}
          </button>
        ))}
      </div>

      <div className="flex justify-center items-center gap-8">
        {/* Play Button */}
        <button 
          className={`
            w-20 h-20 rounded-full flex items-center justify-center transition-all active:scale-95
            ${style === 'flat' && 'bg-primary/100 text-white shadow-none hover:bg-primary'}
            ${style === 'neu' && 'bg-[#e0e5ec] text-gray-600 shadow-[9px_9px_16px_rgb(163,177,198,0.6),-9px_-9px_16px_rgba(255,255,255,0.5)] active:shadow-[inset_9px_9px_16px_rgb(163,177,198,0.6),inset_-9px_-9px_16px_rgba(255,255,255,0.5)]'}
            ${style === 'skeuo' && 'bg-gradient-to-b from-gray-100 to-gray-400 border border-gray-500 shadow-xl text-card-foreground active:bg-gradient-to-t'}
          `}
        >
          <svg className="w-8 h-8 ml-1" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
        </button>

        {/* Card / Display */}
        <div className={`
          w-48 h-24 rounded-xl flex flex-col items-center justify-center
          ${style === 'flat' && 'border-2 border-border/50 text-card-foreground'}
          ${style === 'neu' && 'bg-[#e0e5ec] text-gray-600 shadow-[inset_6px_6px_12px_rgb(163,177,198,0.6),inset_-6px_-6px_12px_rgba(255,255,255,0.5)]'}
          ${style === 'skeuo' && 'bg-black border-4 border-border shadow-inner text-green-400 font-mono'}
        `}>
          <span className="text-xs mb-1 opacity-70">
            {style === 'skeuo' ? 'DIGITAL AUDIO' : 'Status'}
          </span>
          <span className="font-bold text-lg">
            {style === 'skeuo' ? '00:01:23' : 'Playing...'}
          </span>
        </div>
      </div>

      <p className={`text-center mt-12 text-xs max-w-sm mx-auto ${
        style === 'neu' ? 'text-gray-600' : 'text-muted-foreground'
      }`}>
        {style === 'flat' && "Flat: 清潔でモダンですが、ボタンの「押せる感」は弱めです。"}
        {style === 'neu' && "Neumorphism: 光と影だけで凹凸を表現。柔らかく触りたくなります。"}
        {style === 'skeuo' && "Skeuomorphism: 物理的なメタファー（プラスチックや液晶）が強く、使い方が直感的に分かります。"}
      </p>
    </div>
  );
};

render(<SkeuomorphismDemo />);