Update cointube.jsx

cointube.jsx

@@ -23,7 +23,7 @@ import {
     setLogLevel
 } from 'firebase/firestore';
 
-// --- Configuración de Firebase ---
+// --- Constantes de Firebase ---
 const firebaseConfig = {
     apiKey: "AIzaSyCwJjVJGuOmA_PKRbaTnQDrK-Q07NI_utc",
     authDomain: "insights-5c2d6.firebaseapp.com",
@@ -38,7 +38,6 @@ try {
     app = initializeApp(firebaseConfig);
     auth = getAuth(app);
     db = getFirestore(app);
-    // setLogLevel('debug'); // Descomentar si necesitas ver logs de firebase en consola
 } catch (error) {
     console.error("Error inicializando Firebase:", error);
 }
@@ -49,17 +48,11 @@ const COIN_GOAL = 10000;
 
 export default function App() {
     
+    // Lista de videos inicializada con datos fijos para el primer render
     const [videos, setVideos] = useState([
-        { id: '1', title: 'Pelicula Completa', videoId: 'UtEhewStfMA' }, 
+        { id: '1', title: DEFAULT_VIDEO_TITLE, videoId: DEFAULT_VIDEO_ID }, 
         { id: '2', title: 'Documental Comida', videoId: 'lwiNN7WUw50' },
         { id: '3', title: 'Cine de Arte', videoId: 'GxEx6Kgo6Es' },
-        { id: '4', title: 'Celos Infieles', videoId: '8nqtOYAN9Lo' },
-        { id: '5', title: 'Rescatando Perros', videoId: 'KzyQttgzu1Q' },
-        { id: '6', title: 'Feminismo', videoId: 'YGf2DMGoiiE' },
-        { id: '7', title: 'Recetas Cocina', videoId: 'M6rL0SkFyGo' },
-        { id: '8', title: 'Titeres', videoId: 'pb12nP7Ples' },
-        { id: '9', title: 'Comedia', videoId: 'yUUUY0GVMeU' },        
-        { id: '10', title: 'Experimento', videoId: '0KefumC4bY8' },              
     ]);
     
     const [user, setUser] = useState(null);
@@ -95,7 +88,7 @@ export default function App() {
         return () => unsubscribeAuth();
     }, []);
 
-    // 2. Perfil
+    // 2. Perfil de Usuario
     useEffect(() => {
         if (!userId || !db) return;
         const profileRef = doc(db, 'users', userId);
@@ -116,6 +109,32 @@ export default function App() {
         return () => unsubscribeProfile();
     }, [userId, user]); 
 
+    // 3. Videos de Firebase (RESTAURADO: Carga dinámica)
+    useEffect(() => {
+        if (!db) return;
+        const videosRef = collection(db, 'videos');
+        const q = query(videosRef, orderBy('createdAt', 'desc'), limit(100)); // Límite para evitar sobrecarga
+        
+        const unsubscribeVideos = onSnapshot(q, (snapshot) => {
+            if (snapshot.empty) {
+                // Si no hay videos, se añade el por defecto solo en la base de datos
+                addDoc(videosRef, {
+                    title: DEFAULT_VIDEO_TITLE,
+                    videoId: DEFAULT_VIDEO_ID,
+                    addedBy: "system",
+                    createdAt: serverTimestamp()
+                }).catch(e => console.error(e));
+            } else {
+                const videoList = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+                setVideos(videoList);
+            }
+        }, (error) => {
+            console.error("Error listening to videos:", error);
+        });
+
+        return () => unsubscribeVideos();
+    }, []);
+    
     // 4. API YouTube
     useEffect(() => {
         if (!window.YT) {
@@ -129,6 +148,7 @@ export default function App() {
         }
     }, []);
 
+    // --- Lógica de Monedas ---
     const saveCoinBuffer = useCallback(() => {
         if (localCoinBufferRef.current > 0 && userId) {
             const coinsToSave = localCoinBufferRef.current;
@@ -155,6 +175,7 @@ export default function App() {
         }
     }, [saveCoinBuffer]);
 
+    // --- Player Events ---
     const onPlayerReady = useCallback((event) => {
         playerRef.current = event.target;
         playerRef.current.playVideo();
@@ -173,6 +194,7 @@ export default function App() {
         }
     }, [startCoinInterval, stopCoinInterval, currentVideoId, userId]);
 
+    // 5. Inicializar Player
     useEffect(() => {
         if (ytApiReady && userId && !playerRef.current) {
             try {
@@ -202,6 +224,7 @@ export default function App() {
         }
     };
 
+    // --- FUNCIONES DE LOGIN (SIN ANÓNIMO) ---
     const handleGoogleLogin = async () => {
         const provider = new GoogleAuthProvider();
         try {
@@ -219,22 +242,46 @@ export default function App() {
 
     if (!authReady) {
         return (
-            <div className="flex flex-col items-center justify-center h-full w-full text-white">
+            <div className="flex flex-col items-center justify-center h-full w-full">
                 <div className="spinner mb-4"></div>
-                <p>Cargando CoinTube...</p>
+                <p className="text-lg text-gray-400">Conectando...</p>
             </div>
         );
     }
 
+    // --- Renderizado de Login (SIN BOTÓN ANÓNIMO) ---
     if (authReady && !user) {
         return (
             <div className="flex flex-col items-center justify-center h-full w-full bg-gray-900 p-4">
                 <div className="max-w-md w-full bg-gray-800 rounded-2xl shadow-2xl p-8 text-center border border-gray-700">
-                    <h1 className="text-3xl font-bold text-white mb-2">Bienvenido a CoinTube</h1>
-                    <p className="text-gray-400 mb-8 text-sm">Gana monedas viendo videos.</p>
-                    <button onClick={handleGoogleLogin} className="w-full flex items-center justify-center px-4 py-3 bg-white text-gray-800 font-bold rounded-lg hover:bg-gray-100 transition-all duration-200 shadow-md">
+                    <div className="flex justify-center mb-6">
+                        <div className="bg-blue-600 p-4 rounded-full shadow-lg">
+                            <svg className="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            </svg>
+                        </div>
+                    </div>
+                    <h1 className="text-3xl font-bold text-white mb-2 tracking-tight">Bienvenido a CoinTube</h1>
+                    <p className="text-gray-400 mb-8 text-sm leading-relaxed">
+                        Descubre contenido increíble, gana monedas virtuales por cada minuto que ves y promociona tus propios videos.
+                    </p>
+                    <button 
+                        onClick={handleGoogleLogin} 
+                        className="w-full flex items-center justify-center px-4 py-3 bg-white text-gray-800 font-bold rounded-lg hover:bg-gray-100 transition-all duration-200 shadow-md"
+                    >
+                        <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
+                            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+                        </svg>
                         Continuar con Google
                     </button>
+                    
+                    <p className="mt-6 text-xs text-gray-500">
+                        Al continuar, aceptas nuestros términos de servicio.
+                    </p>
                 </div>
             </div>
         );
@@ -252,10 +299,11 @@ export default function App() {
         PromoComponent = <PromoUnlocked userId={userId} />;
     }
 
+    // --- App Principal ---
     return (
-        <div className="h-full w-full max-w-7xl mx-auto flex flex-col p-4 md:p-6 text-white">
+        <div className="h-full w-full max-w-7xl mx-auto flex flex-col p-4 md:p-6">
             <header className="flex flex-col md:flex-row justify-between items-center pb-4 mb-4 border-b border-gray-700">
-                <h1 className="text-3xl font-bold">Coin<span className="text-blue-500">Tube</span></h1>
+                <h1 className="text-3xl font-bold text-white">Coin<span className="text-blue-500">Tube</span></h1>
                 <div className="flex items-center space-x-4 mt-4 md:mt-0">
                     <div className="flex flex-col items-end">
                          <span className="text-sm text-gray-400">{userProfile?.name || user?.email || 'Usuario'}</span>
@@ -263,46 +311,71 @@ export default function App() {
                             {(userProfile?.coins || 0).toLocaleString()} Monedas
                          </span>
                     </div>
-                    <button onClick={handleLogout} className="px-4 py-2 bg-gray-700 text-sm font-medium rounded-lg hover:bg-gray-600">Salir</button>
+                    <button 
+                        onClick={handleLogout} 
+                        className="px-4 py-2 bg-gray-700 text-white text-sm font-medium rounded-lg hover:bg-gray-600 transition-colors"
+                    >
+                        Salir
+                    </button>
                 </div>
             </header>
 
             <nav className="flex space-x-1 mb-6 rounded-lg bg-gray-800 p-1 max-w-lg mx-auto">
-                <button onClick={() => setCurrentTab('ganar')} className={`flex-1 py-2 px-4 rounded-lg text-sm ${currentTab === 'ganar' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}>Ganar</button>
-                <button onClick={() => setCurrentTab('promocionar')} className={`flex-1 py-2 px-4 rounded-lg text-sm ${currentTab === 'promocionar' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}>Promocionar</button>
-                <button onClick={() => setCurrentTab('ranking')} className={`flex-1 py-2 px-4 rounded-lg text-sm ${currentTab === 'ranking' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}>Ranking</button>
+                <button 
+                    onClick={() => setCurrentTab('ganar')}
+                    className={`flex-1 py-2 px-4 rounded-lg text-center font-medium text-sm transition-colors ${currentTab === 'ganar' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
+                >
+                    Ganar Monedas
+                </button>
+                <button 
+                    onClick={() => setCurrentTab('promocionar')}
+                    className={`flex-1 py-2 px-4 rounded-lg text-center font-medium text-sm transition-colors ${currentTab === 'promocionar' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
+                >
+                    Promocionar Video
+                </button>
+                <button 
+                    onClick={() => setCurrentTab('ranking')}
+                    className={`flex-1 py-2 px-4 rounded-lg text-center font-medium text-sm transition-colors ${currentTab === 'ranking' ? 'bg-blue-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
+                >
+                    Ranking
+                </button>
             </nav>
 
-            <main className={`${currentTab === 'ganar' ? 'flex' : 'hidden'} flex-1 flex-col lg:flex-row gap-6`}>
+            {/* SECCIÓN GANAR MONEDAS */}
+            <main className={`${currentTab === 'ganar' ? 'flex' : 'hidden'} flex-1 flex-col lg:flex-row gap-6 overflow-hidden`}>
                 <div className="lg:w-2/3 flex flex-col">
-                    <div className="w-full bg-black rounded-lg shadow-2xl overflow-hidden aspect-video">
-                        <div id="player" className="w-full h-full"></div>
+                    <div className="w-full bg-black rounded-lg shadow-2xl overflow-hidden">
+                        <div className="aspect-video w-full">
+                            <div id="player" className="w-full h-full"></div>
+                        </div>
                     </div>
                     <div className="mt-4 p-4 bg-gray-800 rounded-lg">
-                        <h3 className="text-lg font-semibold">{currentVideoTitle}</h3>
+                        <h3 className="text-lg font-semibold text-white">{currentVideoTitle}</h3>
                     </div>
                 </div>
-                <aside className="lg:w-1/3 flex flex-col bg-gray-800 rounded-lg shadow-lg p-4 max-h-[500px]">
-                    <h2 className="text-xl font-semibold mb-4 pb-2 border-b border-gray-700">Videos</h2>
+                <aside className="lg:w-1/3 flex flex-col bg-gray-800 rounded-lg shadow-lg p-4">
+                    <h2 className="text-xl font-semibold mb-4 pb-2 border-b border-gray-700">Videos Disponibles</h2>
                     <div className="flex-1 overflow-y-auto space-y-2 pr-2">
                         {videos.map((video) => (
                             <button 
                                 key={video.id}
                                 onClick={() => loadVideo(video)}
-                                className="w-full text-left px-4 py-3 bg-gray-700 rounded-lg hover:bg-gray-600 disabled:opacity-50"
+                                className="w-full text-left px-4 py-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
                                 disabled={video.videoId === currentVideoId}
                             >
-                                {video.title}
+                                {video.title || `Video ID: ${video.videoId}`}
                             </button>
                         ))}
                     </div>
                 </aside>
             </main>
 
+            {/* SECCIÓN PROMOCIONAR VIDEO */}
             <main className={`${currentTab === 'promocionar' ? 'flex' : 'hidden'} flex-1 flex-col items-center justify-center`}>
                 {PromoComponent} 
             </main>
 
+            {/* SECCIÓN RANKING */}
             <main className={`${currentTab === 'ranking' ? 'flex' : 'hidden'} flex-1 flex-col items-center justify-start py-4 overflow-auto`}>
                 <Leaderboard db={db} currentUserId={userId} />
             </main>
@@ -310,7 +383,8 @@ export default function App() {
     );
 }
 
-// --- Sub-Componentes (Sin Cambios, lógica protegida) ---
+// --- Sub-Componentes ---
+
 function Leaderboard({ db, currentUserId }) {
     const [ranking, setRanking] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -319,8 +393,15 @@ function Leaderboard({ db, currentUserId }) {
     useEffect(() => {
         if (!db) return;
         setLoading(true);
+
         try {
-            const q = query(collection(db, 'users'), orderBy('coins', 'desc'), limit(10));
+            // Consulta: top 10 usuarios ordenados por monedas
+            const q = query(
+                collection(db, 'users'),
+                orderBy('coins', 'desc'),
+                limit(10) 
+            );
+
             const unsubscribe = onSnapshot(q, (snapshot) => {
                 const users = [];
                 snapshot.forEach((doc) => {
@@ -333,75 +414,152 @@ function Leaderboard({ db, currentUserId }) {
                 });
                 setRanking(users);
                 setLoading(false);
+                setError(null);
             }, (err) => {
                 console.error("Error ranking:", err);
-                setError("Requiere índice en Firebase o permiso insuficiente.");
+                setError("No se pudo cargar el ranking. (Revisar consola y reglas de Firebase)");
                 setLoading(false);
             });
             return () => unsubscribe();
         } catch (e) {
-            setError(e.message);
+            console.error("Error al iniciar consulta de ranking:", e);
+            setError("Error interno al iniciar el ranking.");
             setLoading(false);
         }
     }, [db]);
 
-    if (loading) return <div className="p-8">Cargando ranking...</div>;
-    if (error) return <div className="p-8 text-red-400">Error: {error} (Revisa la consola F12 para crear el índice)</div>;
+    if (loading) return <div className="text-center p-8 text-gray-400">Cargando ranking...</div>;
+    if (error) return <div className="text-center p-8 text-red-400">{error}</div>;
 
     return (
         <div className="w-full max-w-lg bg-gray-800 rounded-xl shadow-2xl p-6">
-            <h2 className="text-3xl font-bold mb-6 text-center">🏆 Ranking 🏆</h2>
-            <ul className="space-y-3">
-                {ranking.map((user, index) => (
-                    <li key={user.id} className={`flex justify-between p-4 rounded-lg ${user.id === currentUserId ? 'bg-blue-600' : 'bg-gray-700'}`}>
-                        <span>#{index + 1} {user.name}</span>
-                        <span>{(user.coins || 0).toLocaleString()} 💰</span>
-                    </li>
-                ))}
-            </ul>
+            <h2 className="text-3xl font-bold text-white mb-6 pb-2 border-b border-gray-700 text-center">🏆 Ranking de Monedas 🏆</h2>
+            
+            {ranking.length === 0 ? (
+                <div className="text-center p-8 text-gray-400">Aún no hay usuarios en el ranking.</div>
+            ) : (
+                <ul className="space-y-3">
+                    {ranking.map((user, index) => (
+                        <li 
+                            key={user.id} 
+                            className={`flex items-center justify-between p-4 rounded-lg transition-all duration-200 ${user.id === currentUserId 
+                                ? 'bg-blue-600 shadow-lg ring-2 ring-blue-400' 
+                                : 'bg-gray-700 hover:bg-gray-600'
+                            }`}
+                        >
+                            <div className="flex items-center space-x-4">
+                                <span className={`text-xl font-extrabold w-6 text-center ${index < 3 ? 'text-yellow-400' : 'text-gray-400'}`}>
+                                    {index + 1}.
+                                </span>
+                                <span className={`text-lg font-medium truncate ${user.id === currentUserId ? 'text-white' : 'text-gray-200'}`}>
+                                    {user.id === currentUserId ? `${user.name} (Tú)` : user.name}
+                                </span>
+                            </div>
+                            <span className={`text-xl font-bold ${user.id === currentUserId ? 'text-yellow-200' : 'text-yellow-400'}`}>
+                                {(user.coins || 0).toLocaleString()} 💰
+                            </span>
+                        </li>
+                    ))}
+                </ul>
+            )}
         </div>
     );
 }
 
 function GoalLocked({ coinGoal, currentCoins }) {
     return (
-        <div className="text-center p-8 bg-gray-800 rounded-lg max-w-lg">
+        <div className="text-center p-8 bg-gray-800 rounded-lg shadow-xl max-w-lg">
+            <svg className="w-16 h-16 text-yellow-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8c1.657 0 3 1.343 3 3s-1.343 3-3 3-1.343-3-3-3 3 1.343 3 3v4m-6 0h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path></svg>
             <h2 className="text-2xl font-bold mb-2 text-yellow-400">¡Meta de Monedas!</h2>
-            <p className="text-gray-300">Acumulado: {(currentCoins || 0).toLocaleString()} / {coinGoal.toLocaleString()}</p>
-            <p className="text-blue-400 text-sm mt-2">Sigue viendo videos.</p>
+            <p className="text-gray-300">
+                ¡Felicidades! Desbloqueaste la promoción por ver el video, pero el servicio requiere un mínimo de monedas.
+            </p>
+            <p className="text-gray-100 text-lg mt-4 font-semibold">
+                Acumulado: {(currentCoins || 0).toLocaleString()} / {coinGoal.toLocaleString()} Monedas
+            </p>
+            <p className="text-blue-400 text-sm mt-2 font-bold">
+                ¡Debes seguir viendo videos hasta juntar {coinGoal.toLocaleString()} monedas!
+            </p>
         </div>
     );
 }
 
 function PromoLocked({ defaultTitle }) {
     return (
-        <div className="text-center p-8 bg-gray-800 rounded-lg max-w-lg">
+        <div className="text-center p-8 bg-gray-800 rounded-lg shadow-xl max-w-lg">
+            <svg className="w-16 h-16 text-yellow-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
             <h2 className="text-2xl font-bold mb-2">Sección Bloqueada</h2>
-            <p className="text-gray-300">Debes ver el video: "{defaultTitle}"</p>
+            <p className="text-gray-300">
+                Para poder promocionar tu propio video, primero debes ver el video predeterminado ("{defaultTitle}") por completo.
+            </p>
+            <p className="text-gray-400 text-sm mt-4">¡Ve a "Ganar Monedas", búscalo en la lista y míralo hasta el final!</p>
         </div>
     );
 }
 
 function PromoUnlocked({ userId }) {
-    // (El código de PromoUnlocked que ya tenías, sin cambios lógicos)
     const [url, setUrl] = useState('');
-    const [message, setMessage] = useState({ text: '', type: '' });
+    const [message, setMessage] = useState({ text: '', type: 'success' });
+
+    const extractYouTubeID = (url) => {
+        const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+        const match = url.match(regex);
+        return match ? match[1] : null;
+    };
 
     const handleSubmit = async (e) => {
         e.preventDefault();
-        // ... lógica de envío ...
-        // Para simplificar en esta respuesta, asumo que la lógica es la misma de antes
-        // Si necesitas que te la repita completa, avísame, pero el error de pantalla blanca no estaba aquí.
-        setMessage({text: "Función lista (Simulada para brevedad)", type: 'success'});
+        const videoId = extractYouTubeID(url);
+        
+        if (!videoId) {
+            setMessage({ text: "URL de YouTube no válida.", type: 'error' });
+            return;
+        }
+        const title = `Video de usuario (${videoId.substring(0, 5)}...)`;
+
+        try {
+            const videosRef = collection(db, 'videos');
+            await addDoc(videosRef, {
+                title: title,
+                videoId: videoId,
+                addedBy: userId,
+                createdAt: serverTimestamp()
+            });
+            setMessage({ text: "¡Video agregado con éxito!", type: 'success' });
+            setUrl('');
+        } catch (error) {
+            console.error(error);
+            setMessage({ text: "Error al agregar el video.", type: 'error' });
+        }
     };
 
     return (
-        <div className="text-center p-8 bg-gray-800 rounded-lg max-w-lg">
-            <h2 className="text-2xl font-bold mb-2">¡Desbloqueado!</h2>
+        <div className="text-center p-8 bg-gray-800 rounded-lg shadow-xl max-w-lg w-full">
+            <svg className="w-16 h-16 text-green-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path></svg>
+            <h2 className="text-2xl font-bold mb-2">¡Sección Desbloqueada!</h2>
+            <p className="text-gray-300 mb-6">
+                Pega el enlace de un video de YouTube para agregarlo a la lista pública.
+            </p>
             <form onSubmit={handleSubmit} className="flex flex-col space-y-4">
-                <input type="url" placeholder="URL de YouTube..." className="p-2 bg-gray-700 rounded text-white" value={url} onChange={e=>setUrl(e.target.value)} />
-                <button type="submit" className="bg-blue-600 p-2 rounded font-bold">Promocionar</button>
-                {message.text && <p>{message.text}</p>}
+                <input 
+                    type="url" 
+                    placeholder="https://www.youtube.com/watch?v=..." 
+                    className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500" 
+                    required
+                    value={url}
+                    onChange={(e) => setUrl(e.target.value)}
+                />
+                <button 
+                    type="submit" 
+                    className="w-full px-6 py-2 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors"
+                >
+                    Promocionar Video
+                </button>
+                {message.text && (
+                    <p className={`text-sm ${message.type === 'success' ? 'text-green-500' : 'text-red-500'}`}>
+                        {message.text}
+                    </p>
+                )}
             </form>
         </div>
     );