(.+?)<\/h2>\s*$/); if (h2Match) { return `

${h2Match[1].trim()}

`; } return block.replace(/\*\*(.+?)\*\*/g, "$1"); }).join("\n\n"); } function toLocationUrl(plaatsnaam, landnaam) { if (!plaatsnaam || !landnaam) return "#"; return `/location?country=${encodeURIComponent( landnaam )}&city=${encodeURIComponent(plaatsnaam)}`; } function goToPage(newPage) { if (newPage < 1 || newPage > totalPages) return; setPage(newPage); window.scrollTo({ top: 0, behavior: "smooth" }); } function LeafletMap({ lat, lng, mapKey }) { const [showMap, setShowMap] = React.useState(false); const mapRef = React.useRef(null); const leafletMapRef = React.useRef(null); React.useEffect(() => { function onScroll() { if (!showMap) { const el = document.getElementById(`map-${mapKey}`); if (el) { const rect = el.getBoundingClientRect(); if (rect.top < window.innerHeight && rect.bottom > 0) { setShowMap(true); } } } } window.addEventListener("scroll", onScroll); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, [showMap, mapKey]); React.useEffect(() => { if (showMap && typeof window !== "undefined" && !window.leafletLoaded) { if (!document.getElementById("leaflet-css")) { const link = document.createElement("link"); link.id = "leaflet-css"; link.rel = "stylesheet"; link.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"; document.head.appendChild(link); } if (!document.getElementById("leaflet-js")) { const script = document.createElement("script"); script.id = "leaflet-js"; script.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"; script.async = true; script.onload = () => { window.leafletLoaded = true; }; document.body.appendChild(script); } } }, [showMap]); React.useEffect(() => { if (!showMap || typeof lat !== "number" || typeof lng !== "number") return; const mapId = `leaflet-map-${mapKey}`; let interval; let destroyed = false; function tryInitMap() { if (window.L && document.getElementById(mapId) && !leafletMapRef.current) { leafletMapRef.current = window.L.map(mapId).setView([lat, lng], 10); window.L.tileLayer( "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap", maxZoom: 18 } ).addTo(leafletMapRef.current); window.L.marker([lat, lng]).addTo(leafletMapRef.current); } } if (showMap && typeof window !== "undefined") { interval = setInterval(() => { if (destroyed) return; tryInitMap(); if (leafletMapRef.current) { clearInterval(interval); } }, 100); } return () => { destroyed = true; if (interval) clearInterval(interval); if (leafletMapRef.current) { leafletMapRef.current.remove(); leafletMapRef.current = null; } }; }, [showMap, lat, lng, mapKey]); if (!showMap) { return /* @__PURE__ */ React.createElement( "div", { id: `map-${mapKey}`, className: "w-full h-[180px] bg-[#e0e0e0] flex items-center justify-center rounded-lg" }, /* @__PURE__ */ React.createElement("span", { className: "text-[#0077b6] font-bold" }, "Kaart laden...") ); } if (typeof lat !== "number" || typeof lng !== "number") { return /* @__PURE__ */ React.createElement("div", { className: "w-full h-[180px] bg-[#ffe0e0] flex items-center justify-center rounded-lg" }, /* @__PURE__ */ React.createElement("span", { className: "text-[#d32f2f] font-bold" }, "Locatie niet gevonden")); } return /* @__PURE__ */ React.createElement( "div", { id: `leaflet-map-${mapKey}`, ref: mapRef, className: "w-full h-[180px] rounded-lg" } ); } return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("head", null, /* @__PURE__ */ React.createElement( "script", { async: true, src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1834912221133485", crossOrigin: "anonymous" } )), /* @__PURE__ */ React.createElement(HeaderMetBlauweKleur, null), /* @__PURE__ */ React.createElement("div", { className: "min-h-screen bg-[#fffbe9] font-roboto flex flex-col items-center py-8 px-2" }, /* @__PURE__ */ React.createElement("h1", { className: "text-3xl md:text-5xl font-bold text-[#0077b6] mb-2 mt-4 drop-shadow font-roboto mt-[90px] md:mt-4" }, "Latest Dart Locations"), /* @__PURE__ */ React.createElement("p", { className: "text-[#0099c6] text-lg md:text-xl mb-8 font-roboto text-center mt-[20px] md:mt-0" }, "Discover where others have thrown their dart!"), loading && locations.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "text-[#0077b6] font-bold text-xl my-8" }, "Loading..."), error && /* @__PURE__ */ React.createElement("div", { className: "text-[#d32f2f] font-bold text-xl my-8" }, error), !loading && !error && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-[1200px]" }, locations.filter((loc) => loc.title && loc.article).map((loc, idx) => /* @__PURE__ */ React.createElement(React.Fragment, { key: loc.id || idx }, idx === 1 && /* @__PURE__ */ React.createElement("div", { className: "block sm:hidden w-full mb-4" }, /* @__PURE__ */ React.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React.createElement( "script", { async: true, src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1834912221133485", crossOrigin: "anonymous" } ), /* @__PURE__ */ React.createElement( "ins", { className: "adsbygoogle", style: { display: "block" }, "data-ad-format": "fluid", "data-ad-layout-key": "-6r+ed+2h-1m-4v", "data-ad-client": "ca-pub-1834912221133485", "data-ad-slot": "4508344732" } ), /* @__PURE__ */ React.createElement("script", null, `(adsbygoogle = window.adsbygoogle || []).push({});`))), /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-4 flex flex-col items-stretch" }, /* @__PURE__ */ React.createElement("div", { className: "w-full h-[180px] rounded-lg overflow-hidden mb-3" }, /* @__PURE__ */ React.createElement( LeafletMap, { lat: loc.lat, lng: loc.lng, mapKey: `${loc.lat}-${loc.lng}-${loc.id || idx}` } )), /* @__PURE__ */ React.createElement("div", { className: "font-bold text-[#0077b6] text-lg mb-1" }, loc.plaatsnaam && loc.landnaam ? `${loc.plaatsnaam}, ${loc.landnaam}` : loc.landnaam || "Unknown location"), /* @__PURE__ */ React.createElement("div", { className: "text-[#888] text-sm mb-2" }, "Lat:", " ", typeof loc.lat === "number" ? loc.lat.toFixed(5) : "?", ", Lng:", " ", typeof loc.lng === "number" ? loc.lng.toFixed(5) : "?"), /* @__PURE__ */ React.createElement("div", { className: "font-bold text-[#222] mb-1" }, loc.title || "No title"), /* @__PURE__ */ React.createElement( "div", { className: "text-[#444] text-sm mb-3", style: { minHeight: 60 } }, /* @__PURE__ */ React.createElement( "div", { dangerouslySetInnerHTML: { __html: formatArticleText( getShortArticle(loc.article) ) } } ) ), /* @__PURE__ */ React.createElement( "a", { className: "bg-[#0099c6] text-white px-5 py-2 rounded-full shadow font-bold text-base font-roboto hover:bg-[#0077b6] transition self-end text-center", href: toLocationUrl(loc.plaatsnaam, loc.landnaam), style: { textDecoration: "none" } }, "More info" ))))), totalPages > 1 && /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-2 justify-center mt-10 mb-8" }, /* @__PURE__ */ React.createElement( "button", { className: "bg-[#0099c6] text-white px-4 py-2 rounded-full font-bold text-base font-roboto hover:bg-[#0077b6] transition", onClick: () => goToPage(page - 1), disabled: page === 1 }, "\u2190 Previous" ), Array.from({ length: totalPages }).map((_, i) => /* @__PURE__ */ React.createElement( "button", { key: i, className: `px-4 py-2 rounded-full font-bold text-base font-roboto transition border border-[#0099c6] ${page === i + 1 ? "bg-[#0099c6] text-white" : "bg-white text-[#0099c6] hover:bg-[#e0f7fa]"}`, onClick: () => goToPage(i + 1), disabled: page === i + 1 }, i + 1 )), /* @__PURE__ */ React.createElement( "button", { className: "bg-[#0099c6] text-white px-4 py-2 rounded-full font-bold text-base font-roboto hover:bg-[#0077b6] transition", onClick: () => goToPage(page + 1), disabled: page === totalPages }, "Next \u2192" ))), /* @__PURE__ */ React.createElement("style", { jsx: true, global: true }, ` body { background: #fffbe9; } h2.custom-h2, h2 { font-size: 1.2rem !important; color: #0077b6 !important; font-weight: bold !important; margin: 1.2em 0 0.25em 0 !important; text-align: left !important; } .custom-ul, .custom-ol { margin: 1em 0 1em 2em; text-align: left; } .custom-ul li, .custom-ol li { margin-bottom: 1em; font-size: 1.08em; line-height: 1.7; text-align: left; } @media (max-width: 768px) { h1 { margin-top: 60px !important; } p { margin-top: 10px !important; } } `)), /* @__PURE__ */ React.createElement(Footer, null)); } function Footer() { const year = 2025; return /* @__PURE__ */ React.createElement( "footer", { className: "w-full bg-[#00a3cf] py-2 px-2 flex flex-row items-center justify-between font-roboto", style: { borderRight: "1px solid #fff", borderBottom: "1px solid #fff" } }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-row items-center gap-3" }, /* @__PURE__ */ React.createElement("span", { className: "text-[#ffffff] text-base font-roboto mr-2" }, "\xA9 ", year, " Travel Darts."), /* @__PURE__ */ React.createElement( "a", { href: "https://tiktok.com/@traveldarts", target: "_blank", rel: "noopener noreferrer", "aria-label": "Facebook", className: "text-[#ffffff] hover:text-[#005f8a] text-2xl", style: { display: "inline-block" } }, /* @__PURE__ */ React.createElement("i", { className: "fab fa-tiktok" }) ), /* @__PURE__ */ React.createElement( "a", { href: "https://x.com/TravelDart", target: "_blank", rel: "noopener noreferrer", "aria-label": "Twitter", className: "text-[#ffffff] hover:text-[#005f8a] text-2xl", style: { display: "inline-block" } }, /* @__PURE__ */ React.createElement("i", { className: "fab fa-twitter" }) )), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-end" }, /* @__PURE__ */ React.createElement( "a", { href: "/terms-of-service", className: "text-[#ffffff] hover:text-[#005f8a] text-base font-roboto", style: { textDecoration: "underline" } }, "Terms of Service" ), /* @__PURE__ */ React.createElement( "a", { href: "/privacy-policy", className: "text-[#ffffff] hover:text-[#005f8a] text-base font-roboto", style: { textDecoration: "underline" } }, "Privacy Policy" )) ); } function HeaderMetBlauweKleur() { const [landen, setLanden] = React.useState([]); const [selectedLand, setSelectedLand] = React.useState(""); const [plaatsen, setPlaatsen] = React.useState([]); const [selectedPlaats, setSelectedPlaats] = React.useState(""); const [loadingLanden, setLoadingLanden] = React.useState(false); const [loadingPlaatsen, setLoadingPlaatsen] = React.useState(false); const [error, setError] = React.useState(null); const [search, setSearch] = React.useState(""); const [searchResults, setSearchResults] = React.useState([]); const [searchLoading, setSearchLoading] = React.useState(false); const [searchError, setSearchError] = React.useState(null); const [isMobile, setIsMobile] = React.useState(false); React.useEffect(() => { async function fetchLanden() { setLoadingLanden(true); setError(null); try { const res = await fetch("/api/listuniquecountriesandcities", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({}) }); if (!res.ok) throw new Error("Could not fetch countries"); const data = await res.json(); setLanden(Array.isArray(data.landen) ? data.landen : []); } catch (e) { setError(e.message); } finally { setLoadingLanden(false); } } fetchLanden(); }, []); React.useEffect(() => { if (!selectedLand) { setPlaatsen([]); setSelectedPlaats(""); return; } async function fetchPlaatsen() { setLoadingPlaatsen(true); setError(null); try { const res = await fetch("/api/listuniquecountriesandcities", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ land: selectedLand }) }); if (!res.ok) throw new Error("Could not fetch cities"); const data = await res.json(); setPlaatsen(Array.isArray(data.plaatsen) ? data.plaatsen : []); } catch (e) { setError(e.message); } finally { setLoadingPlaatsen(false); } } fetchPlaatsen(); }, [selectedLand]); React.useEffect(() => { if (!search || search.length < 2) { setSearchResults([]); setSearchError(null); return; } let cancelled = false; async function fetchSearch() { setSearchLoading(true); setSearchError(null); try { const res = await fetch("/api/listuniquecountriesandcitiesfull", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ search }) }); if (!res.ok) throw new Error("Could not search cities"); const data = await res.json(); const matches = (Array.isArray(data.suggesties) ? data.suggesties : []).filter( (item) => item.plaatsnaam && item.plaatsnaam.toLowerCase().includes(search.toLowerCase()) ).slice(0, 10); if (!cancelled) setSearchResults(matches); } catch (e) { if (!cancelled) setSearchError(e.message); } finally { if (!cancelled) setSearchLoading(false); } } fetchSearch(); return () => { cancelled = true; }; }, [search]); function handleGoToLocation(e) { e.preventDefault(); if (!selectedLand) return; const encode = encodeURIComponent; if (selectedLand && !selectedPlaats) { window.location.href = `/plaatsen?country=${encode(selectedLand)}`; return; } if (selectedLand && selectedPlaats) { window.location.href = `/location?country=${encode( selectedLand )}&city=${encode(selectedPlaats)}`; return; } } React.useEffect(() => { function handleResize() { setIsMobile(window.innerWidth < 768); } handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); return /* @__PURE__ */ React.createElement("header", { className: "w-full h-[85px] bg-[#0099c6] flex items-center justify-between shadow-md mb-6 px-4 md:px-12 relative" }, /* @__PURE__ */ React.createElement("a", { href: "/", className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement( "img", { src: "https://ucarecdn.com/bbdc65e9-2490-44d8-8342-92dcce50d364/-/format/auto/", alt: "Travel Darts Logo", className: "h-[60px] w-auto md:h-[70px]", style: { display: "block" } } )), isMobile ? /* @__PURE__ */ React.createElement("div", { className: "absolute left-0 top-[100px] w-full flex flex-col items-center z-50 px-2" }, /* @__PURE__ */ React.createElement( "form", { className: "flex flex-row gap-2 w-full max-w-[400px]", style: { width: "100%", maxWidth: 400 }, onSubmit: handleGoToLocation }, /* @__PURE__ */ React.createElement( "select", { className: "rounded px-2 py-2 font-roboto text-base text-[#0077b6] bg-white border border-[#0077b6] focus:outline-none focus:ring-2 focus:ring-[#0077b6] w-[38%] min-w-0", value: selectedLand, onChange: (e) => { setSelectedLand(e.target.value); setSelectedPlaats(""); }, disabled: loadingLanden }, /* @__PURE__ */ React.createElement("option", { value: "" }, "Choose country..."), landen.map((land) => /* @__PURE__ */ React.createElement("option", { key: land, value: land }, land)) ), /* @__PURE__ */ React.createElement( "select", { className: "rounded px-2 py-2 font-roboto text-base text-[#0077b6] bg-white border border-[#0077b6] focus:outline-none focus:ring-2 focus:ring-[#0077b6] w-[38%] min-w-0", value: selectedPlaats, onChange: (e) => setSelectedPlaats(e.target.value), disabled: !selectedLand || loadingPlaatsen }, /* @__PURE__ */ React.createElement("option", { value: "" }, "Choose city (optional)..."), plaatsen.map((plaats) => /* @__PURE__ */ React.createElement("option", { key: plaats, value: plaats }, plaats)) ), /* @__PURE__ */ React.createElement( "button", { type: "submit", className: "bg-[#0077b6] text-white px-4 py-2 rounded font-bold font-roboto hover:bg-[#005f8a] transition w-[20%] min-w-0", disabled: !selectedLand, style: { minWidth: 0 } }, "Go" ) )) : ( // Desktop: velden en button naast de titel /* @__PURE__ */ React.createElement("form", { className: "flex items-center gap-2", onSubmit: handleGoToLocation }, /* @__PURE__ */ React.createElement( "select", { className: "rounded px-3 py-2 font-roboto text-base text-[#0077b6] bg-white border border-[#0077b6] focus:outline-none focus:ring-2 focus:ring-[#0077b6]", value: selectedLand, onChange: (e) => { setSelectedLand(e.target.value); setSelectedPlaats(""); }, disabled: loadingLanden }, /* @__PURE__ */ React.createElement("option", { value: "" }, "Choose country..."), landen.map((land) => /* @__PURE__ */ React.createElement("option", { key: land, value: land }, land)) ), /* @__PURE__ */ React.createElement( "select", { className: "rounded px-3 py-2 font-roboto text-base text-[#0077b6] bg-white border border-[#0077b6] focus:outline-none focus:ring-2 focus:ring-[#0077b6]", value: selectedPlaats, onChange: (e) => setSelectedPlaats(e.target.value), disabled: !selectedLand || loadingPlaatsen }, /* @__PURE__ */ React.createElement("option", { value: "" }, "Choose city (optional)..."), plaatsen.map((plaats) => /* @__PURE__ */ React.createElement("option", { key: plaats, value: plaats }, plaats)) ), /* @__PURE__ */ React.createElement( "button", { type: "submit", className: "bg-[#0077b6] text-white px-4 py-2 rounded font-bold font-roboto hover:bg-[#005f8a] transition", disabled: !selectedLand }, "Go" )) ), isMobile ? /* @__PURE__ */ React.createElement("div", { className: "absolute right-2 top-[145px] w-full max-w-[342px] z-50" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React.createElement( "input", { type: "text", className: "rounded px-3 py-2 font-roboto text-base text-[#0077b6] bg-white border border-[#0077b6] focus:outline-none focus:ring-2 focus:ring-[#0077b6] w-full", placeholder: "Search city...", value: search, onChange: (e) => setSearch(e.target.value), style: { marginTop: 8 } } ), searchLoading && /* @__PURE__ */ React.createElement("div", { className: "text-white text-sm mt-1" }, "Searching..."), searchError && /* @__PURE__ */ React.createElement("div", { className: "text-white text-sm mt-1" }, searchError), searchResults.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: "bg-white border border-[#0077b6] rounded shadow mt-1 max-h-[220px] overflow-y-auto" }, searchResults.map((item) => /* @__PURE__ */ React.createElement( "li", { key: item.plaatsnaam + item.landnaam, className: "px-3 py-2 text-[#0077b6] font-roboto cursor-pointer hover:bg-[#e0f7fa]" }, /* @__PURE__ */ React.createElement( "a", { href: `/location?country=${encodeURIComponent( item.landnaam )}&city=${encodeURIComponent(item.plaatsnaam)}`, className: "block w-full h-full", style: { textDecoration: "none" } }, item.plaatsnaam, " ", /* @__PURE__ */ React.createElement("span", { className: "text-[#888] text-xs" }, "(", item.landnaam, ")") ) ))))) : /* @__PURE__ */ React.createElement("div", { className: "absolute right-10 top-[95px] w-full max-w-[330px] z-50" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React.createElement( "input", { type: "text", className: "rounded px-3 py-2 font-roboto text-base text-[#0077b6] bg-white border border-[#0077b6] focus:outline-none focus:ring-2 focus:ring-[#0077b6] w-full", placeholder: "Search city...", value: search, onChange: (e) => setSearch(e.target.value), style: { marginTop: 8 } } ), searchLoading && /* @__PURE__ */ React.createElement("div", { className: "text-white text-sm mt-1" }, "Searching..."), searchError && /* @__PURE__ */ React.createElement("div", { className: "text-white text-sm mt-1" }, searchError), searchResults.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: "bg-white border border-[#0077b6] rounded shadow mt-1 max-h-[220px] overflow-y-auto" }, searchResults.map((item) => /* @__PURE__ */ React.createElement( "li", { key: item.plaatsnaam + item.landnaam, className: "px-3 py-2 text-[#0077b6] font-roboto cursor-pointer hover:bg-[#e0f7fa]" }, /* @__PURE__ */ React.createElement( "a", { href: `/location?country=${encodeURIComponent( item.landnaam )}&city=${encodeURIComponent(item.plaatsnaam)}`, className: "block w-full h-full", style: { textDecoration: "none" } }, item.plaatsnaam, " ", /* @__PURE__ */ React.createElement("span", { className: "text-[#888] text-xs" }, "(", item.landnaam, ")") ) ))))), error && /* @__PURE__ */ React.createElement("div", { className: "text-white text-sm ml-4" }, error)); } var page_default = MainComponent; return __toCommonJS(page_exports); })();