Fix upcoming specials display on genre pages

app/[genre]/page.tsx

@@ -18,6 +18,17 @@ export default async function GenrePage({ params }: PageProps) {
     const genres = await prisma.genre.findMany({ orderBy: { name: 'asc' } });
     const specials = await prisma.special.findMany({ orderBy: { name: 'asc' } });
 
+    const now = new Date();
+    const activeSpecials = specials.filter(s => {
+        const isStarted = !s.launchDate || s.launchDate <= now;
+        const isEnded = s.endDate && s.endDate < now;
+        return isStarted && !isEnded;
+    });
+
+    const upcomingSpecials = specials.filter(s => {
+        return s.launchDate && s.launchDate > now;
+    });
+
     return (
         <>
             <div style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
@@ -40,12 +51,12 @@ export default async function GenrePage({ params }: PageProps) {
                     ))}
 
                     {/* Separator if both exist */}
-                    {genres.length > 0 && specials.length > 0 && (
+                    {genres.length > 0 && activeSpecials.length > 0 && (
                         <span style={{ color: '#d1d5db' }}>|</span>
                     )}
 
                     {/* Specials */}
-                    {specials.map(s => (
+                    {activeSpecials.map(s => (
                         <Link
                             key={s.id}
                             href={`/special/${s.name}`}
@@ -59,6 +70,23 @@ export default async function GenrePage({ params }: PageProps) {
                         </Link>
                     ))}
                 </div>
+
+                {/* Upcoming Specials */}
+                {upcomingSpecials.length > 0 && (
+                    <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
+                        Coming soon: {upcomingSpecials.map(s => (
+                            <span key={s.id} style={{ marginLeft: '0.5rem' }}>
+                                ★ {s.name} ({s.launchDate ? new Date(s.launchDate).toLocaleDateString('de-DE', {
+                                    day: '2-digit',
+                                    month: '2-digit',
+                                    year: 'numeric',
+                                    timeZone: process.env.TZ
+                                }) : ''})
+                                {s.curator && <span style={{ fontStyle: 'italic', marginLeft: '0.25rem' }}>Curated by {s.curator}</span>}
+                            </span>
+                        ))}
+                    </div>
+                )}
             </div>
             <Game dailyPuzzle={dailyPuzzle} genre={decodedGenre} />
         </>