\n {/* Section Header */}\n

\n {t.artworks.title}\n

\n {t.artworks.subtitle}\n

\n \n {/* Artwork Grid */}\n

\n {displayedArtworks.map((artwork) => (\n

\n {/* Image */}\n

\n ${artwork.name}\n$ \n {/* Category Badge */}\n

\n \n {artwork.category}\n \n

\n {/* Featured Badge */}\n {artwork.featured && (\n

\n \n ⭐ {t.artworks.featured}\n \n

\n )}\n

\n \n {/* Content */}\n

\n {artwork.name}\n

\n {artwork.artist}\n

\n {artwork.description}\n

\n 📍\n {artwork.location}, {artwork.city}\n

\n ))}\n

\n \n {/* View More Button */}\n

\n \n {t.artworks.viewMore} →\n \n

\n \n {/* City Stats */}\n

\n {[\n { city: \"Eindhoven\", count: \"35+\" },\n { city: \"Best\", count: \"12\" },\n { city: \"Veldhoven\", count: \"9\" },\n { city: \"Helmond\", count: \"15+\" },\n { city: \"Oirschot\", count: \"8+\" },\n { city: \"Lieshout\", count: \"3\" }\n ].map((stat) => (\n

\n {stat.count}\n

\n {stat.city}\n

\n ))}\n

\n );\n}\n",[],[151,170,177],{"_102":186,"_95":187,"_152":188,"_154":171,"_155":137,"_156":189,"_158":159,"_104":190,"_99":32,"_161":181,"_163":191,"_164":22,"_165":-5,"_166":192,"_98":193},"0667522a-bd89-11f0-a175-42dde27851f2","ArtworksGallery.tsx","066752ca-bd89-11f0-a175-42dde27851f2",17,["D",1762705666402],"/** @jsxImportSource https://esm.sh/react@18 */\nimport React, { useState } from \"https://esm.sh/react@18\";\nimport { glowData } from \"../data/glowData.ts\";\n\nexport function ArtworksGallery() {\n const [selectedCategory, setSelectedCategory] = useState(\"all\");\n const [selectedArtwork, setSelectedArtwork] = useState(null);\n\n const categories = [\n { id: \"all\", label: \"Alle\", emoji: \"🎨\" },\n { id: \"projectie\", label: \"Projecties\", emoji: \"🎬\" },\n { id: \"installatie\", label: \"Installaties\", emoji: \"💡\" },\n { id: \"interactief\", label: \"Interactief\", emoji: \"🤝\" },\n { id: \"community\", label: \"Community\", emoji: \"👥\" },\n { id: \"student\", label: \"Student\", emoji: \"🎓\" },\n ];\n\n const filteredArtworks = selectedCategory === \"all\"\n ? glowData.artworks\n : glowData.artworks.filter(artwork => artwork.category === selectedCategory);\n\n return (\n

\n {/* Section Header */}\n

\n Kunstwerken\n

\n Ontdek {glowData.festival.artworks} adembenemende lichtkunstwerken verspreid door Eindhoven en regio\n

\n\n {/* Category Filter */}\n

\n {categories.map((category) => (\n setSelectedCategory(category.id)}\n className={`px-6 py-3 rounded-full font-medium transition-all duration-300 ${\n selectedCategory === category.id\n ? \"bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg scale-105\"\n : \"backdrop-blur-md bg-white/10 border border-white/20 text-white/80 hover:bg-white/20\"\n }`}\n >\n {category.emoji}\n {category.label}\n \n ))}\n

\n\n {/* Artworks Grid */}\n

\n {filteredArtworks.map((artwork) => (\n setSelectedArtwork(artwork)}\n className=\"group cursor-pointer backdrop-blur-md bg-white/5 border border-white/10 rounded-2xl overflow-hidden hover:bg-white/10 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/20\"\n >\n {/* Image */}\n

\n \n

\n \n {/* Category Badge */}\n

\n {categories.find(c => c.id === artwork.category)?.emoji} {artwork.category}\n

\n\n {/* Content */}\n

\n {artwork.name}\n

\n 🎨 {artwork.artist}\n

\n 📍 {artwork.location}\n

\n {artwork.description}\n

\n ))}\n

\n\n {/* Results count */}\n

\n {filteredArtworks.length} {filteredArtworks.length === 1 ? 'kunstwerk' : 'kunstwerken'} gevonden\n

\n \n\n {/* Artwork Detail Modal */}\n {selectedArtwork && (\n setSelectedArtwork(null)}\n >\n e.stopPropagation()}\n >\n {/* Modal Image */}\n

\n \n

\n \n {/* Close button */}\n setSelectedArtwork(null)}\n className=\"absolute top-4 right-4 w-10 h-10 backdrop-blur-md bg-white/20 border border-white/30 rounded-full text-white hover:bg-white/30 transition-all\"\n >\n ✕\n \n

\n\n {/* Modal Content */}\n

\n \n {categories.find(c => c.id === selectedArtwork.category)?.emoji} {selectedArtwork.category}\n \n

\n \n

\n {selectedArtwork.name}\n

\n \n

\n 🎨 Artiest: {selectedArtwork.artist}\n

\n 📍 Locatie: {selectedArtwork.location}\n

\n \n

\n {selectedArtwork.description}\n

\n \n \n )}\n

\n );\n}",[],[151,170,187],{"_102":195,"_95":196,"_152":197,"_154":171,"_155":137,"_156":136,"_158":159,"_104":198,"_99":199,"_161":181,"_163":200,"_164":22,"_165":-5,"_166":201,"_98":202},"b668548a-bd93-11f0-9307-42dde27851f2","Footer.tsx","3feb1888-bd89-11f0-b8ce-42dde27851f2",["D",1762710256654],1,"/**\n * Footer Component\n * Links, contact info, copyright\n */\n\nimport React from \"npm:react@18\";\n\ninterface FooterProps {\n lang: string;\n t: any;\n}\n\nexport function Footer({ lang, t }: FooterProps) {\n return (\n \n );\n}\n",[],[151,170,196],{"_102":204,"_95":205,"_152":206,"_154":171,"_155":137,"_156":207,"_158":159,"_104":208,"_99":32,"_161":181,"_163":209,"_164":22,"_165":-5,"_166":210,"_98":211},"6cf9250e-bd93-11f0-90c1-42dde27851f2","Header.tsx","6cf925cc-bd93-11f0-90c1-42dde27851f2",29,["D",1762710133454],"/**\n * Header Component - Navigation Bar\n * Fixed navigation with language toggle\n */\n\nimport React from \"npm:react@18\";\n\ninterface HeaderProps {\n lang: string;\n t: any;\n}\n\nexport function Header({ lang, t }: HeaderProps) {\n const otherLang = lang === \"nl\" ? \"en\" : \"nl\";\n \n return (\n

\n {/* Logo */}\n \n 💡\n

GLOW 2025

20 Years

\n \n \n {/* Desktop Navigation */}\n

\n \n {t.nav.home}\n \n \n {t.nav.artworks}\n \n \n {t.nav.schedule}\n \n \n {t.nav.practical}\n \n \n {/* Language Toggle */}\n \n {t.nav.language}\n \n

\n \n {/* Mobile Menu - Simple Links */}\n

\n \n {t.nav.language}\n \n

\n \n {/* Mobile Navigation Links */}\n

\n \n {t.nav.artworks}\n \n \n {t.nav.schedule}\n \n \n {t.nav.practical}\n \n

\n );\n}\n",[],[151,170,205],{"_102":213,"_95":214,"_152":215,"_154":171,"_155":137,"_156":216,"_158":159,"_104":217,"_99":32,"_161":181,"_163":218,"_164":22,"_165":-5,"_166":219,"_98":220},"77f9b87e-bd93-11f0-914b-42dde27851f2","Hero.tsx","77f9b950-bd93-11f0-914b-42dde27851f2",30,["D",1762710151905],"/**\n * Hero Component - Main Banner with Countdown\n * Server-side rendered countdown and festival stats\n */\n\nimport React from \"npm:react@18\";\n\ninterface HeroProps {\n timeLeft: {\n days: number;\n hours: number;\n minutes: number;\n seconds: number;\n };\n t: any;\n}\n\nexport function Hero({ timeLeft, t }: HeroProps) {\n return (\n

\n {/* Main Title */}\n

\n {t.hero.title}\n

\n {t.hero.subtitle}\n

\n {t.hero.edition}\n

\n \n {/* Countdown */}\n

\n {t.hero.countdown.title}\n

\n {timeLeft.days}\n

\n {t.hero.countdown.days}\n

\n {timeLeft.hours}\n

\n {t.hero.countdown.hours}\n

\n {timeLeft.minutes}\n

\n {t.hero.countdown.minutes}\n

\n {timeLeft.seconds}\n

\n {t.hero.countdown.seconds}\n

\n \n {/* Festival Stats */}\n

{t.hero.stats.artworks}

{t.hero.stats.cities}

750K+

{t.hero.stats.visitors}

5 km

{t.hero.stats.route}

\n \n {/* CTA Button */}\n

\n {t.hero.dates}\n

\n \n {t.hero.cta}\n \n

\n );\n}\n",[],[151,170,214],{"_102":222,"_95":223,"_152":224,"_154":171,"_155":137,"_156":225,"_158":159,"_104":226,"_99":32,"_161":181,"_163":227,"_164":22,"_165":-5,"_166":228,"_98":229},"f71e23f2-bd88-11f0-a798-42dde27851f2","HeroSection.tsx","f71e24a6-bd88-11f0-a798-42dde27851f2",16,["D",1762705640748],"/** @jsxImportSource https://esm.sh/react@18 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18\";\nimport { glowData } from \"../data/glowData.ts\";\n\nexport function HeroSection() {\n const [timeLeft, setTimeLeft] = useState({\n days: 0,\n hours: 0,\n minutes: 0,\n seconds: 0,\n });\n\n useEffect(() => {\n const calculateTimeLeft = () => {\n const eventDate = new Date(glowData.festival.dates.start + \"T18:30:00\");\n const now = new Date();\n const difference = eventDate.getTime() - now.getTime();\n\n if (difference > 0) {\n setTimeLeft({\n days: Math.floor(difference / (1000 * 60 * 60 * 24)),\n hours: Math.floor((difference / (1000 * 60 * 60)) % 24),\n minutes: Math.floor((difference / 1000 / 60) % 60),\n seconds: Math.floor((difference / 1000) % 60),\n });\n }\n };\n\n calculateTimeLeft();\n const timer = setInterval(calculateTimeLeft, 1000);\n\n return () => clearInterval(timer);\n }, []);\n\n const timeUnits = [\n { value: timeLeft.days, label: \"dagen\" },\n { value: timeLeft.hours, label: \"uren\" },\n { value: timeLeft.minutes, label: \"minuten\" },\n { value: timeLeft.seconds, label: \"seconden\" },\n ];\n\n return (\n

\n {/* Animated background gradient */}\n

\n\n {/* Content */}\n

\n {/* Main Title */}\n

\n {glowData.festival.name}\n

\n {glowData.festival.theme}\n

\n 20^e editie • {glowData.festival.dates.start.split('-')[2]}-{glowData.festival.dates.end.split('-')[2]} november\n

\n\n {/* Countdown Timer */}\n

Countdown tot opening

\n {timeUnits.map((unit, index) => (\n \n

\n {String(unit.value).padStart(2, \"0\")}\n

\n {unit.label}\n

\n ))}\n

\n\n {/* Key Info Cards */}\n

🎨

{glowData.festival.artworks}

kunstwerken

👥

{glowData.festival.visitors}

bezoekers

🚶

{glowData.festival.routeLength}

route

\n\n {/* CTA Button */}\n

\n \n Ontdek de kunstwerken\n \n

\n \n\n {/* Scroll indicator */}\n

\n \n \n \n

\n );\n}",[],[151,170,223],{"_102":231,"_95":232,"_152":233,"_154":171,"_155":137,"_156":234,"_158":159,"_104":235,"_99":199,"_161":236,"_163":237,"_164":22,"_165":-5,"_166":238,"_98":239},"8c1ec926-bd8d-11f0-9c57-42dde27851f2","HomePage.tsx","cabe288e-bd88-11f0-b79e-42dde27851f2",23,["D",1762707608725],"script","/** @jsxImportSource https://esm.sh/react@18 */\nimport React from \"https://esm.sh/react@18\";\nimport { glowData } from \"../data/glowData.ts\";\nimport { Navigation } from \"./Navigation.tsx\";\nimport { HeroSection } from \"./HeroSection.tsx\";\nimport { ArtworksGallery } from \"./ArtworksGallery.tsx\";\nimport { InfoSection } from \"./InfoSection.tsx\";\nimport { PracticalInfo } from \"./PracticalInfo.tsx\";\nimport { Footer } from \"./Footer.tsx\";\n\nexport function HomePage() {\n // Calculate time left on server-side (static)\n const endDate = new Date('2025-11-15T23:00:00');\n const now = new Date();\n const difference = endDate.getTime() - now.getTime();\n \n const timeLeft = difference > 0 ? {\n days: Math.floor(difference / (1000 * 60 * 60 * 24)),\n hours: Math.floor((difference / (1000 * 60 * 60)) % 24),\n minutes: Math.floor((difference / 1000 / 60) % 60),\n seconds: Math.floor((difference / 1000) % 60)\n } : { days: 0, hours: 0, minutes: 0, seconds: 0 };\n \n return (\n <>\n \n \n \n \n {/* Live Status Banner */}\n

\n \n

🎉 GLOW 2025 - 20 Jaar Jubileum!

\n 8 - 15 November 2025 | Dagelijks 18:30 - 23:00\n

\n 750.000+\n

Bezoekers Verwacht

\n 87\n

Kunstwerken

\n 20\n

Jaar Jubileum

\n \n {/* Quick Actions */}\n

\n \n \n Bekijk Kunstwerken\n \n \n \n Plan je Bezoek\n \n \n \n Officiële Website\n \n

\n \n \n \n {/* Schedule Section */}\n

\n 📅 Programma Highlights\n

\n {glowData.schedule.daily.slice(0, 4).map((day, index) => (\n

\n {day.day}\n

{day.date}

\n \n {event}\n

\n ))}\n

\n En nog veel meer events gedurende het hele festival!\n

\n \n \n \n \n {/* Photography Tips */}\n

\n \n 📸 Fotografie Tips\n

\n {glowData.tips.photography.map((tip, index) => (\n

\n \n

{tip}

\n ))}\n

\n \n {/* Familie Tips */}\n

\n \n 👨‍👩‍👧‍👦 Voor Families\n

\n {glowData.tips.family.map((tip, index) => (\n

\n \n

{tip}

\n ))}\n

\n \n {/* Call to Action */}\n

\n ✨ Klaar voor een Magische Avond?\n

\n Ervaar 20 jaar lichtkunst in het centrum van Eindhoven. Gratis toegang!\n

\n \n \n Officiële Website\n \n \n \n Praktische Info\n \n

\n \n

\n {t.artworks.title}\n

\n {artwork.name}\n

\n Kunstwerken\n

\n {artwork.name}\n

\n {selectedArtwork.name}\n

\n {t.hero.title}\n

\n {glowData.festival.name}\n

Countdown tot opening

🎉 GLOW 2025 - 20 Jaar Jubileum!

\n 📅 Programma Highlights\n

{day.date}

\n \n 📸 Fotografie Tips\n

\n \n 👨‍👩‍👧‍👦 Voor Families\n

\n ✨ Klaar voor een Magische Avond?\n

\n {t.practical.admission.title}\n

\n {t.practical.routes.title}\n

\n {t.practical.routes.eindhoven}\n

\n {t.practical.routes.best}\n

\n {t.practical.transport.title}\n

\n ✓ {t.practical.transport.recommended}\n

\n {t.practical.accessibility.title}\n

\n 🚻 {t.practical.accessibility.restrooms}:\n

\n {t.practical.maps.title}\n

\n {t.practical.warnings.title}\n

\n {parking.name}\n

Tip:

\n {t.schedule.eindhovenHelmond}\n

\n {t.schedule.regional}\n

\n {event.name}\n

kamenxrider

glowEindhoven2025