feat: add event page with Socket.IO integration and ticket purchasing functionality

app/event/[id]/page.tsx

@@ -0,0 +1,347 @@
+"use client";
+import { useEffect, useState, useRef } from "react";
+import { useParams, useRouter } from "next/navigation";
+import Link from "next/link";
+
+export default function EventPage() {
+  const params = useParams();
+  const router = useRouter();
+  const eventId = params.id as string;
+
+  const [connected, setConnected] = useState(false);
+  const [position, setPosition] = useState<number | null>(null);
+  const [estimatedWait, setEstimatedWait] = useState<number | null>(null);
+  const [activeUsers, setActiveUsers] = useState(0);
+  const [hasAccess, setHasAccess] = useState(false);
+  const [tokenExpiry, setTokenExpiry] = useState<number | null>(null);
+  const [eventData, setEventData] = useState<any>(null);
+  const [selectedTicket, setSelectedTicket] = useState<string>("Normal");
+  const [quantity, setQuantity] = useState(1);
+  const [purchasing, setPurchasing] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const socketRef = useRef<any>(null);
+
+  // Load event data
+  useEffect(() => {
+    if (!eventId) return;
+    
+    fetch(`/api/events?id=${eventId}`)
+      .then(res => res.json())
+      .then(data => {
+        if (data.error) {
+          router.push('/');
+          return;
+        }
+        setEventData(data);
+        setLoading(false);
+        if (data.tickets && data.tickets.length > 0) {
+          setSelectedTicket(data.tickets[0].type);
+        }
+      })
+      .catch(error => {
+        console.error('Error loading event:', error);
+        router.push('/');
+      });
+  }, [eventId, router]);
+
+  // Socket.IO connection
+  useEffect(() => {
+    if (!eventId || loading) return;
+    
+    let mounted = true;
+    
+    // Initialize Socket.IO server
+    fetch('/api/socketio')
+      .then(() => {
+        return import("socket.io-client");
+      })
+      .then(({ io }) => {
+        if (!mounted) return;
+        const socketPort = process.env.NEXT_PUBLIC_SOCKET_PORT || "4000";
+        const socket = io(`http://localhost:${socketPort}`, {
+          autoConnect: true 
+        });
+        socketRef.current = socket;
+
+        socket.on("connect", () => {
+          setConnected(true);
+          socket.emit("join_event", { eventId });
+        });
+
+        socket.on("disconnect", () => {
+          setConnected(false);
+          setPosition(null);
+          setHasAccess(false);
+          setTokenExpiry(null);
+        });
+
+        socket.on("queue_update", (data: any) => {
+          setPosition(data.position ?? null);
+          setEstimatedWait(data.estimatedWait ?? null);
+          setActiveUsers(data.activeCount ?? 0);
+        });
+
+        socket.on("granted", (data: any) => {
+          setHasAccess(true);
+          setTokenExpiry(data.expiresAt ? Date.parse(data.expiresAt) : Date.now() + 15 * 60 * 1000);
+          try {
+            localStorage.setItem("event_token", data.token);
+          } catch (e) {}
+        });
+
+        socket.on("revoked", () => {
+          setHasAccess(false);
+          setTokenExpiry(null);
+          localStorage.removeItem("event_token");
+        });
+      })
+      .catch(error => {
+        console.error("Socket initialization error:", error);
+      });
+
+    return () => {
+      mounted = false;
+      if (socketRef.current) socketRef.current.disconnect();
+    };
+  }, [eventId, loading]);
+
+  // Token expiry timer
+  useEffect(() => {
+    if (!tokenExpiry) return;
+    const id = setInterval(() => {
+      const msLeft = tokenExpiry - Date.now();
+      if (msLeft <= 0) {
+        setHasAccess(false);
+        setTokenExpiry(null);
+        localStorage.removeItem("event_token");
+      }
+    }, 1000);
+    return () => clearInterval(id);
+  }, [tokenExpiry]);
+
+  const tryBuy = async () => {
+    if (!hasAccess || purchasing) return;
+    
+    setPurchasing(true);
+    
+    try {
+      const token = localStorage.getItem("event_token");
+      if (!token) {
+        alert("Nincs érvényes token!");
+        return;
+      }
+
+      const response = await fetch('/api/purchase', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          eventId,
+          ticketType: selectedTicket,
+          quantity,
+          token
+        })
+      });
+
+      const result = await response.json();
+      
+      if (response.ok) {
+        alert(`🎉 Sikeres vásárlás!\\n\\nJegyek: ${quantity}x ${selectedTicket}\\nÖsszeg: ${result.totalPrice.toLocaleString()} Ft\\nRendelés ID: ${result.orderId}`);
+        // Refresh event data
+        const eventResponse = await fetch(`/api/events?id=${eventId}`);
+        const eventData = await eventResponse.json();
+        setEventData(eventData);
+      } else {
+        alert(`Hiba: ${result.error}`);
+      }
+    } catch (error) {
+      console.error('Purchase error:', error);
+      alert('Hiba történt a vásárlás során!');
+    } finally {
+      setPurchasing(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center">
+        <div className="text-white text-2xl">Loading event...</div>
+      </div>
+    );
+  }
+
+  const timeLeft = tokenExpiry ? Math.max(0, tokenExpiry - Date.now()) : 0;
+  const minutesLeft = Math.floor(timeLeft / 60000);
+  const secondsLeft = Math.floor((timeLeft % 60000) / 1000);
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 relative overflow-hidden">
+      {/* Background Effects */}
+      <div className="absolute inset-0 opacity-10">
+        <div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-white/5 to-transparent"></div>
+      </div>
+      
+      <div className="relative z-10 flex flex-col min-h-screen">
+        {/* Header */}
+        <header className="p-6 text-center">
+          <div className="mb-4">
+            <Link href="/" className="inline-flex items-center text-white/60 hover:text-white transition-colors">
+              ← Vissza az eseményekhez
+            </Link>
+          </div>
+          <div className="inline-flex items-center gap-2 text-white/60 text-sm mb-2">
+            <div className={`w-2 h-2 rounded-full ${connected ? 'bg-green-400 animate-pulse' : 'bg-red-400'}`}></div>
+            {connected ? 'Kapcsolódva' : 'Nincs kapcsolat'}
+          </div>
+          <h1 className="text-4xl md:text-6xl font-bold text-white mb-2">
+            🎵 {eventData?.event?.name || eventId}
+          </h1>
+          <p className="text-xl text-white/80">{eventData?.event?.description}</p>
+        </header>
+
+        {/* Main Content */}
+        <main className="flex-1 flex items-center justify-center p-6">
+          <div className="w-full max-w-2xl">
+            {/* Queue Status Card */}
+            <div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-white/20">
+              <div className="text-center mb-8">
+                {position ? (
+                  <>
+                    <div className="text-6xl font-bold text-white mb-4">#{position}</div>
+                    <p className="text-xl text-white/80">Helyed a várakozási sorban</p>
+                    {estimatedWait && (
+                      <p className="text-white/60 mt-2">
+                        Becsült várakozási idő: <span className="font-mono">{Math.ceil(estimatedWait)}s</span>
+                      </p>
+                    )}
+                  </>
+                ) : hasAccess ? (
+                  <>
+                    <div className="text-6xl mb-4">🎫</div>
+                    <p className="text-2xl font-bold text-green-400 mb-2">Hozzáféred engedélyezve!</p>
+                    <p className="text-white/80">Most vásárolhatsz jegyeket</p>
+                  </>
+                ) : (
+                  <>
+                    <div className="text-6xl mb-4">⏳</div>
+                    <p className="text-xl text-white/80">Csatlakozás a sorhoz...</p>
+                  </>
+                )}
+              </div>
+
+              {/* Stats Grid */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+                <div className="bg-white/5 rounded-2xl p-4 text-center">
+                  <div className="text-2xl font-bold text-white">{activeUsers}</div>
+                  <div className="text-sm text-white/60">Aktív felhasználó</div>
+                </div>
+                <div className="bg-white/5 rounded-2xl p-4 text-center">
+                  <div className="text-2xl font-bold text-white">{position || '—'}</div>
+                  <div className="text-sm text-white/60">Pozíció</div>
+                </div>
+                <div className="bg-white/5 rounded-2xl p-4 text-center">
+                  <div className="text-2xl font-bold text-white">
+                    {estimatedWait ? `${Math.ceil(estimatedWait)}s` : '—'}
+                  </div>
+                  <div className="text-sm text-white/60">Várható idő</div>
+                </div>
+              </div>
+
+              {/* Purchase Form */}
+              {hasAccess && (
+                <div className="space-y-4 mb-6">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label className="block text-white/80 text-sm mb-2">Jegytípus</label>
+                      <select
+                        value={selectedTicket}
+                        onChange={(e) => setSelectedTicket(e.target.value)}
+                        className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-white"
+                      >
+                        {eventData?.tickets?.map((ticket: any) => (
+                          <option key={ticket.type} value={ticket.type} className="bg-gray-800">
+                            {ticket.type} - {ticket.price.toLocaleString()} Ft
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                    <div>
+                      <label className="block text-white/80 text-sm mb-2">Darabszám</label>
+                      <input
+                        type="number"
+                        min="1"
+                        max="10"
+                        value={quantity}
+                        onChange={(e) => setQuantity(parseInt(e.target.value))}
+                        className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-white"
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Action Button */}
+              <div className="space-y-4">
+                <button
+                  onClick={tryBuy}
+                  disabled={!hasAccess || purchasing}
+                  className={`w-full py-4 px-6 rounded-2xl font-bold text-lg transition-all duration-300 ${
+                    hasAccess && !purchasing
+                      ? 'bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl transform hover:scale-105' 
+                      : 'bg-white/10 text-white/50 cursor-not-allowed'
+                  }`}
+                >
+                  {purchasing ? '⏳ Vásárlás...' : hasAccess ? '🎫 Jegyvásárlás' : '⏳ Várakozás...'}
+                </button>
+
+                {/* Token Timer */}
+                {hasAccess && tokenExpiry && (
+                  <div className="bg-orange-500/20 border border-orange-400/30 rounded-xl p-4 text-center">
+                    <div className="text-orange-300 font-semibold">
+                      ⏰ Hozzáférés lejár: {minutesLeft}:{secondsLeft.toString().padStart(2, '0')}
+                    </div>
+                    <div className="text-orange-200/80 text-sm mt-1">
+                      Használd ki a lehetőséget!
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Ticket Prices */}
+            {eventData?.tickets && (
+              <div className="mt-8 bg-white/5 backdrop-blur-lg rounded-2xl p-6 border border-white/10">
+                <h3 className="text-white font-bold text-lg mb-4 text-center">🎟️ Jegytípusok</h3>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  {eventData.tickets.map((ticket: any, index: number) => {
+                    const available = ticket.total_quantity - ticket.sold_quantity;
+                    const colors = ['text-green-400', 'text-yellow-400', 'text-purple-400'];
+                    const borders = ['border-green-400/30', 'border-yellow-400/30', 'border-purple-400/30'];
+                    
+                    return (
+                      <div key={ticket.type} className={`bg-white/5 rounded-xl p-4 text-center ${index === 1 ? borders[index] + ' border' : ''}`}>
+                        <div className="text-white font-bold">{ticket.type}</div>
+                        <div className={`text-2xl font-bold ${colors[index % 3]}`}>
+                          {ticket.price.toLocaleString()} Ft
+                        </div>
+                        <div className="text-white/60 text-sm">
+                          {available > 0 ? `${available} db elérhető` : 'Elfogyott'}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        </main>
+
+        {/* Footer */}
+        <footer className="p-4 text-center text-white/40 text-sm">
+          WebSocket + JWT alapú várakozási rendszer • {eventData?.event?.name}
+        </footer>
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -1,149 +1,32 @@
 "use client";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
+import Link from "next/link";
 
 export default function Home() {
-  const [connected, setConnected] = useState(false);
-  const [position, setPosition] = useState<number | null>(null);
-  const [estimatedWait, setEstimatedWait] = useState<number | null>(null);
-  const [activeUsers, setActiveUsers] = useState(0);
-  const [hasAccess, setHasAccess] = useState(false);
-  const [tokenExpiry, setTokenExpiry] = useState<number | null>(null);
-  const [eventData, setEventData] = useState<any>(null);
-  const [selectedTicket, setSelectedTicket] = useState<string>("Normal");
-  const [quantity, setQuantity] = useState(1);
-  const [purchasing, setPurchasing] = useState(false);
-  const socketRef = useRef<any>(null);
+  const [events, setEvents] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
 
-  // Load event data
+  // Load all events
   useEffect(() => {
-    fetch('/api/events?id=pamkutya')
+    fetch('/api/events')
       .then(res => res.json())
-      .then(data => setEventData(data))
-      .catch(console.error);
-  }, []);
-
-  useEffect(() => {
-    let mounted = true;
-    
-    // Először inicializáljuk a Socket.IO szervert
-    fetch('/api/socketio')
-      .then(() => {
-        // dynamic import to avoid bundling issues on server
-        return import("socket.io-client");
-      })
-      .then(({ io }) => {
-        if (!mounted) return;
-        const socketPort = process.env.NEXT_PUBLIC_SOCKET_PORT || "4000";
-        const socket = io(`http://localhost:${socketPort}`, {
-          autoConnect: true 
-        });
-        socketRef.current = socket;
-
-        socket.on("connect", () => {
-          setConnected(true);
-          // join a named event (example eventId: pamkutya)
-          socket.emit("join_event", { eventId: "pamkutya" });
-        });
-
-        socket.on("disconnect", () => {
-          setConnected(false);
-          setPosition(null);
-          setHasAccess(false);
-          setTokenExpiry(null);
-        });
-
-        socket.on("queue_update", (data: any) => {
-          setPosition(data.position ?? null);
-          setEstimatedWait(data.estimatedWait ?? null);
-          setActiveUsers(data.activeCount ?? 0);
-        });
-
-        socket.on("granted", (data: any) => {
-          // { token, expiresAt }
-          setHasAccess(true);
-          setTokenExpiry(data.expiresAt ? Date.parse(data.expiresAt) : Date.now() + 15 * 60 * 1000);
-          // store token locally for API calls
-          try {
-            localStorage.setItem("event_token", data.token);
-          } catch (e) {}
-        });
-
-        socket.on("revoked", () => {
-          setHasAccess(false);
-          setTokenExpiry(null);
-          localStorage.removeItem("event_token");
-        });
+      .then(data => {
+        setEvents(data.events || []);
+        setLoading(false);
       })
       .catch(error => {
-        console.error("Socket inicializálási hiba:", error);
+        console.error('Error loading events:', error);
+        setLoading(false);
       });
-
-    return () => {
-      mounted = false;
-      if (socketRef.current) socketRef.current.disconnect();
-    };
   }, []);
 
-  useEffect(() => {
-    if (!tokenExpiry) return;
-    const id = setInterval(() => {
-      const msLeft = tokenExpiry - Date.now();
-      if (msLeft <= 0) {
-        setHasAccess(false);
-        setTokenExpiry(null);
-        localStorage.removeItem("event_token");
-      }
-    }, 1000);
-    return () => clearInterval(id);
-  }, [tokenExpiry]);
-
-  const tryBuy = async () => {
-    if (!hasAccess || purchasing) return;
-    
-    setPurchasing(true);
-    
-    try {
-      const token = localStorage.getItem("event_token");
-      if (!token) {
-        alert("Nincs érvényes token!");
-        return;
-      }
-
-      const response = await fetch('/api/purchase', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          eventId: 'pamkutya',
-          ticketType: selectedTicket,
-          quantity,
-          token
-        })
-      });
-
-      const result = await response.json();
-      
-      if (response.ok) {
-        alert(`🎉 Sikeres vásárlás!\n\nJegyek: ${quantity}x ${selectedTicket}\nÖsszeg: ${result.totalPrice.toLocaleString()} Ft\nRendelés ID: ${result.orderId}`);
-        // Refresh event data to show updated availability
-        const eventResponse = await fetch('/api/events?id=pamkutya');
-        const eventData = await eventResponse.json();
-        setEventData(eventData);
-      } else {
-        alert(`Hiba: ${result.error}`);
-      }
-    } catch (error) {
-      console.error('Purchase error:', error);
-      alert('Hiba történt a vásárlás során!');
-    } finally {
-      setPurchasing(false);
-    }
-  };
-
-  const timeLeft = tokenExpiry ? Math.max(0, tokenExpiry - Date.now()) : 0;
-  const minutesLeft = Math.floor(timeLeft / 60000);
-  const secondsLeft = Math.floor((timeLeft % 60000) / 1000);
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center">
+        <div className="text-white text-2xl">Loading events...</div>
+      </div>
+    );
+  }
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 relative overflow-hidden">
@@ -155,148 +38,49 @@ export default function Home() {
       <div className="relative z-10 flex flex-col min-h-screen">
         {/* Header */}
         <header className="p-6 text-center">
-          <div className="inline-flex items-center gap-2 text-white/60 text-sm mb-2">
-            <div className={`w-2 h-2 rounded-full ${connected ? 'bg-green-400 animate-pulse' : 'bg-red-400'}`}></div>
-            {connected ? 'Kapcsolódva' : 'Nincs kapcsolat'}
-          </div>
           <h1 className="text-4xl md:text-6xl font-bold text-white mb-2">
-            🎵 Pam Kutya
+            🎵 Koncert Jegyek
           </h1>
-          <p className="text-xl text-white/80">Legendás Underground Koncert</p>
+          <p className="text-xl text-white/80">Válassz egy eseményt</p>
         </header>
 
         {/* Main Content */}
         <main className="flex-1 flex items-center justify-center p-6">
-          <div className="w-full max-w-2xl">
-            {/* Queue Status Card */}
-            <div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-white/20">
-              <div className="text-center mb-8">
-                {position ? (
-                  <>
-                    <div className="text-6xl font-bold text-white mb-4">#{position}</div>
-                    <p className="text-xl text-white/80">Helyed a várakozási sorban</p>
-                    {estimatedWait && (
-                      <p className="text-white/60 mt-2">
-                        Becsült várakozási idő: <span className="font-mono">{Math.ceil(estimatedWait)}s</span>
-                      </p>
-                    )}
-                  </>
-                ) : hasAccess ? (
-                  <>
-                    <div className="text-6xl mb-4">🎫</div>
-                    <p className="text-2xl font-bold text-green-400 mb-2">Hozzáféred engedélyezve!</p>
-                    <p className="text-white/80">Most vásárolhatsz jegyeket</p>
-                  </>
-                ) : (
-                  <>
-                    <div className="text-6xl mb-4">⏳</div>
-                    <p className="text-xl text-white/80">Csatlakozás a sorhoz...</p>
-                  </>
-                )}
+          <div className="w-full max-w-6xl">
+            {events.length === 0 ? (
+              <div className="text-center text-white/60">
+                <div className="text-6xl mb-4">🎪</div>
+                <p className="text-xl">Jelenleg nincsenek elérhető események</p>
               </div>
-
-              {/* Stats Grid */}
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
-                <div className="bg-white/5 rounded-2xl p-4 text-center">
-                  <div className="text-2xl font-bold text-white">{activeUsers}</div>
-                  <div className="text-sm text-white/60">Aktív felhasználó</div>
-                </div>
-                <div className="bg-white/5 rounded-2xl p-4 text-center">
-                  <div className="text-2xl font-bold text-white">{position || '—'}</div>
-                  <div className="text-sm text-white/60">Pozíció</div>
-                </div>
-                <div className="bg-white/5 rounded-2xl p-4 text-center">
-                  <div className="text-2xl font-bold text-white">
-                    {estimatedWait ? `${Math.ceil(estimatedWait)}s` : '—'}
-                  </div>
-                  <div className="text-sm text-white/60">Várható idő</div>
-                </div>
-              </div>
-
-              {/* Purchase Form */}
-              {hasAccess && (
-                <div className="space-y-4 mb-6">
-                  <div className="grid grid-cols-2 gap-4">
-                    <div>
-                      <label className="block text-white/80 text-sm mb-2">Jegytípus</label>
-                      <select
-                        value={selectedTicket}
-                        onChange={(e) => setSelectedTicket(e.target.value)}
-                        className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-white"
-                      >
-                        {eventData?.tickets?.map((ticket: any) => (
-                          <option key={ticket.type} value={ticket.type} className="bg-gray-800">
-                            {ticket.type} - {ticket.price.toLocaleString()} Ft
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                    <div>
-                      <label className="block text-white/80 text-sm mb-2">Darabszám</label>
-                      <input
-                        type="number"
-                        min="1"
-                        max="10"
-                        value={quantity}
-                        onChange={(e) => setQuantity(parseInt(e.target.value))}
-                        className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-white"
-                      />
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              {/* Action Button */}
-              <div className="space-y-4">
-                <button
-                  onClick={tryBuy}
-                  disabled={!hasAccess || purchasing}
-                  className={`w-full py-4 px-6 rounded-2xl font-bold text-lg transition-all duration-300 ${
-                    hasAccess && !purchasing
-                      ? 'bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl transform hover:scale-105' 
-                      : 'bg-white/10 text-white/50 cursor-not-allowed'
-                  }`}
-                >
-                  {purchasing ? '⏳ Vásárlás...' : hasAccess ? '🎫 Jegyvásárlás' : '⏳ Várakozás...'}
-                </button>
-
-                {/* Token Timer */}
-                {hasAccess && tokenExpiry && (
-                  <div className="bg-orange-500/20 border border-orange-400/30 rounded-xl p-4 text-center">
-                    <div className="text-orange-300 font-semibold">
-                      ⏰ Hozzáférés lejár: {minutesLeft}:{secondsLeft.toString().padStart(2, '0')}
-                    </div>
-                    <div className="text-orange-200/80 text-sm mt-1">
-                      Használd ki a lehetőséget!
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Ticket Prices */}
-            {eventData?.tickets && (
-              <div className="mt-8 bg-white/5 backdrop-blur-lg rounded-2xl p-6 border border-white/10">
-                <h3 className="text-white font-bold text-lg mb-4 text-center">🎟️ Jegytípusok</h3>
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                  {eventData.tickets.map((ticket: any, index: number) => {
-                    const available = ticket.total_quantity - ticket.sold_quantity;
-                    const colors = ['text-green-400', 'text-yellow-400', 'text-purple-400'];
-                    const borders = ['border-green-400/30', 'border-yellow-400/30', 'border-purple-400/30'];
-                    
-                    return (
-                      <div key={ticket.type} className={`bg-white/5 rounded-xl p-4 text-center ${index === 1 ? borders[index] + ' border' : ''}`}>
-                        <div className="text-white font-bold">{ticket.type}</div>
-                        <div className={`text-2xl font-bold ${colors[index % 3]}`}>
-                          {ticket.price.toLocaleString()} Ft
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                {events.map((event) => (
+                  <Link key={event.id} href={`/event/${event.id}`}>
+                    <div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-white/20 hover:bg-white/15 transition-all duration-300 hover:scale-105 cursor-pointer">
+                      <div className="text-center">
+                        <div className="text-4xl mb-4">🎵</div>
+                        <h2 className="text-2xl font-bold text-white mb-4">{event.name}</h2>
+                        <p className="text-white/80 mb-6">{event.description}</p>
+                        
+                        <div className="space-y-3">
+                          <div className="flex justify-between items-center bg-white/5 rounded-xl p-3">
+                            <span className="text-white/60">Max egyidejű:</span>
+                            <span className="text-white font-semibold">{event.max_concurrent_users} fő</span>
+                          </div>
+                          
+                          <div className="flex justify-between items-center bg-white/5 rounded-xl p-3">
+                            <span className="text-white/60">Jegytípusok:</span>
+                            <span className="text-white font-semibold">{event.ticket_types || 0} db</span>
+                          </div>
                         </div>
-                        <div className="text-white/60 text-sm">
-                          {available > 0 ? `${available} db elérhető` : 'Elfogyott'}
+
+                        <div className="mt-6 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white py-3 px-6 rounded-2xl font-bold transition-all duration-300">
+                          🎫 Jegyvásárlás
                         </div>
                       </div>
-                    );
-                  })}
-                </div>
+                    </div>
+                  </Link>
+                ))}
               </div>
             )}
           </div>
@@ -304,9 +88,9 @@ export default function Home() {
 
         {/* Footer */}
         <footer className="p-4 text-center text-white/40 text-sm">
-          WebSocket + JWT alapú várakozási rendszer • Demo célokra
+          WebSocket + JWT alapú várakozási rendszer • Válassz egy eseményt a jegyvásárláshoz
         </footer>
       </div>
     </div>
   );
-}
+}