import React from 'react';

function App() {
  return (
    <div className="min-h-screen bg-gray-900 text-white">
      <header className="bg-gray-800 border-b border-gray-700 px-6 py-4">
        <h1 className="text-2xl font-bold">AvanzaCast Studio</h1>
        <p className="text-sm text-gray-400">Estudio de Transmisión en Vivo</p>
      </header>

      <main className="p-6">
        <div className="max-w-7xl mx-auto">
          <div className="bg-gray-800 rounded-lg p-8 text-center">
            <h2 className="text-3xl font-bold mb-4">🎥 Estudio Virtual</h2>
            <p className="text-gray-300 mb-6">
              El módulo de broadcast studio estará disponible próximamente.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
              <div className="bg-gray-700 p-4 rounded">
                <h3 className="font-bold mb-2">📹 WebRTC</h3>
                <p className="text-sm text-gray-400">Transmisión en tiempo real</p>
              </div>
              <div className="bg-gray-700 p-4 rounded">
                <h3 className="font-bold mb-2">🎬 Escenas</h3>
                <p className="text-sm text-gray-400">Control de overlays y cámaras</p>
              </div>
              <div className="bg-gray-700 p-4 rounded">
                <h3 className="font-bold mb-2">📡 Multistream</h3>
                <p className="text-sm text-gray-400">YouTube, Facebook, Twitch</p>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

export default App;
