function SmartCityKiosk() {
  const [activeTab, setActiveTab] = React.useState('transit');
  
  // Simulated API Data for the Kiosk
  const transitTimes = [
    { line: 'A', dest: 'Inwood-207 St', min: '2 min', color: 'bg-blue-600' },
    { line: 'C', dest: '168 St', min: '5 min', color: 'bg-blue-600' },
    { line: 'E', dest: 'Jamaica Center', min: '8 min', color: 'bg-blue-600' },
  ];

  return (
    <div className="bg-gray-900 rounded-xl overflow-hidden shadow-2xl max-w-sm mx-auto border-4 border-gray-800 h-[450px] flex flex-col font-sans">
      {/* Kiosk Header */}
      <div className="bg-[#2D3282] p-4 text-white flex justify-between items-center shadow-md">
        <div>
          <h2 className="font-bold text-lg leading-tight">NYC Metro Hub</h2>
          <p className="text-xs text-blue-200">Terminal 4 • Kiosk ID: UE-804</p>
        </div>
        <div className="text-right">
          <p className="text-sm font-semibold">{new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p>
          <p className="text-[10px] text-blue-200">68°F • Cloudy</p>
        </div>
      </div>

      {/* Navigation Tabs */}
      <div className="flex bg-gray-800 text-sm">
        <button 
          onClick={() => setActiveTab('transit')}
          className={`flex-1 py-3 text-center transition-colors ${activeTab === 'transit' ? 'bg-gray-700 text-white font-bold border-b-2 border-[#9EA4D3]' : 'text-gray-400 hover:text-white'}`}
        >
          Transit
        </button>
        <button 
          onClick={() => setActiveTab('map')}
          className={`flex-1 py-3 text-center transition-colors ${activeTab === 'map' ? 'bg-gray-700 text-white font-bold border-b-2 border-[#9EA4D3]' : 'text-gray-400 hover:text-white'}`}
        >
          Wayfinding
        </button>
      </div>

      {/* Dynamic Content Area */}
      <div className="flex-1 bg-gray-100 p-4 overflow-y-auto">
        {activeTab === 'transit' ? (
          <div className="space-y-3">
            <h3 className="font-bold text-gray-800 text-sm uppercase tracking-wider mb-2">Live Departures</h3>
            {transitTimes.map((train, i) => (
              <div key={i} className="bg-white p-3 rounded-lg shadow-sm flex items-center justify-between border border-gray-100">
                <div className="flex items-center gap-3">
                  <span className={`w-8 h-8 rounded-full ${train.color} text-white flex items-center justify-center font-bold text-sm`}>
                    {train.line}
                  </span>
                  <span className="font-medium text-gray-800">{train.dest}</span>
                </div>
                <span className="text-[#2D3282] font-bold">{train.min}</span>
              </div>
            ))}
          </div>
        ) : (
          <div className="h-full flex flex-col items-center justify-center text-center p-4">
            <div className="w-16 h-16 bg-[#9EA4D3] rounded-full flex items-center justify-center mb-4 shadow-lg shadow-blue-500/30">
              <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
              </svg>
            </div>
            <h3 className="font-bold text-gray-800 mb-2">Interactive Map Loading...</h3>
            <p className="text-sm text-gray-500">Connecting to Universal Equations mapping API cluster...</p>
          </div>
        )}
      </div>
      
      {/* CTA Footer */}
      <div className="bg-white p-3 border-t border-gray-200">
        <button className="w-full bg-[#9EA4D3] hover:bg-[#2D3282] text-white font-bold py-3 rounded-lg transition-colors shadow-md text-sm">
          Tap for Audio Assistance
        </button>
      </div>
    </div>
  );
}