const TabsDemo = () => {
  const [activeTab, setActiveTab] = useState('photos');

  const tabs = [
    { id: 'photos', label: 'Photos', icon: '📷' },
    { id: 'music', label: 'Music', icon: '🎵' },
    { id: 'settings', label: 'Settings', icon: '⚙️' },
  ];

  return (
    <div className="p-8 bg-muted rounded-xl">
      <div className="text-sm text-muted-foreground mb-4 p-4 border border-primary/30 bg-primary/10 rounded">
        <strong>メンタルモデル:</strong> 現実の書類フォルダのように、上の「耳」を押すと手前の紙が入れ替わる感覚。
      </div>

      <div className="w-full max-w-md mx-auto bg-card rounded-xl shadow-lg overflow-hidden flex flex-col h-64">
        {/* Tab Headers */}
        <div className="flex bg-muted border-b border-border">
          {tabs.map(tab => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`
                flex-1 py-3 px-4 text-sm font-medium transition-all duration-200 relative
                ${activeTab === tab.id 
                  ? 'bg-card text-primary shadow-[0_-2px_10px_rgba(0,0,0,0.05)] z-10' 
                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'}
              `}
            >
              <span className="mr-2">{tab.icon}</span>
              {tab.label}
              
              {/* Active Indicator (Top Border) */}
              {activeTab === tab.id && (
                <div className="absolute top-0 left-0 w-full h-0.5 bg-primary/100" />
              )}
            </button>
          ))}
        </div>

        {/* Tab Content */}
        <div className="flex-1 p-6 relative">
          {tabs.map(tab => (
            <div
              key={tab.id}
              className={`
                absolute inset-0 p-6 flex flex-col items-center justify-center text-center transition-all duration-300
                ${activeTab === tab.id ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-4 scale-95 pointer-events-none'}
              `}
            >
              <div className="text-4xl mb-4">{tab.icon}</div>
              <h3 className="text-xl font-bold text-card-foreground mb-2">{tab.label} Library</h3>
              <p className="text-muted-foreground text-sm">
                This is the content for the {tab.label.toLowerCase()} section.
                Matches expected behavior.
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

render(<TabsDemo />);