{"id":37103,"date":"2026-05-15T15:13:21","date_gmt":"2026-05-15T08:13:21","guid":{"rendered":"https:\/\/ubongeopark.org\/geopark\/?page_id=37103"},"modified":"2026-05-18T17:19:43","modified_gmt":"2026-05-18T10:19:43","slug":"communities","status":"publish","type":"page","link":"https:\/\/ubongeopark.org\/geopark\/communities\/","title":{"rendered":"Communities"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19 - \u0e2d\u0e38\u0e17\u0e22\u0e32\u0e19\u0e18\u0e23\u0e13\u0e35\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35<\/title>\r\n <!-- IMPORT FONTS FOR CONSISTENCY WITH MAIN PAGE -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@300;400;500;600;700&family=Playfair+Display:wght@700;900&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --primary: #6ea676;\r\n --primary-dark: #1a472a;\r\n --secondary: #2c3e50;\r\n --accent: #8ec99f;\r\n --light-bg: #faf8f6;\r\n --dark-text: #1a1a1a;\r\n --border-color: #e0d5cc;\r\n --text-muted: #636e72;\r\n --secondary-accent: #d4865e;\r\n }\r\n\r\n body {\r\n font-family: 'Kanit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: linear-gradient(135deg, #faf8f6 0%, #f5f1ed 100%);\r\n color: var(--dark-text);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* ===== NAVBAR STYLE MATCHING MAIN PAGE ===== *\/\r\n nav {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n background: rgba(255, 255, 255, 0.95);\r\n backdrop-filter: blur(10px);\r\n z-index: 1000;\r\n box-shadow: 0 2px 20px rgba(0,0,0,0.08);\r\n }\r\n\r\n .nav-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 2rem;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 80px;\r\n }\r\n\r\n .logo {\r\n font-family: 'Playfair Display', serif;\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: var(--primary-dark);\r\n text-decoration: none;\r\n letter-spacing: -0.5px;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n }\r\n\r\n .logo-icon {\r\n font-size: 2rem;\r\n filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));\r\n }\r\n\r\n .nav-right-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 2.5rem;\r\n list-style: none;\r\n }\r\n\r\n .nav-links a {\r\n text-decoration: none;\r\n color: var(--dark-text);\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n position: relative;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .nav-links a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: var(--secondary-accent);\r\n transition: width 0.3s ease;\r\n }\r\n\r\n .nav-links a:hover::after {\r\n width: 100%;\r\n }\r\n\r\n \/* ===== LANGUAGE SWITCHER BUTTON ===== *\/\r\n .lang-switch-btn {\r\n background: white;\r\n border: 2px solid var(--primary-dark);\r\n color: var(--primary-dark);\r\n padding: 0.4rem 0.8rem;\r\n border-radius: 20px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.4rem;\r\n font-size: 0.85rem;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.05);\r\n }\r\n\r\n .lang-switch-btn:hover {\r\n background: var(--primary-dark);\r\n color: white;\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* Header (Offset with margin-top for fixed Navbar) *\/\r\n header {\r\n margin-top: 80px;\r\n background: linear-gradient(135deg, var(--secondary) 0%, #34495e 100%);\r\n color: white;\r\n padding: 3rem 2rem;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n header::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);\r\n background-size: 50px 50px;\r\n animation: movePattern 20s linear infinite;\r\n }\r\n\r\n @keyframes movePattern {\r\n 0% { transform: translate(0, 0); }\r\n 100% { transform: translate(50px, 50px); }\r\n }\r\n\r\n header > * {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n h1 {\r\n font-size: 3rem;\r\n font-weight: 700;\r\n margin-bottom: 0.5rem;\r\n letter-spacing: -1px;\r\n }\r\n\r\n .subtitle {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n font-weight: 300;\r\n }\r\n\r\n \/* Container *\/\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 3rem 2rem;\r\n }\r\n\r\n \/* Filter Bar *\/\r\n .filter-bar {\r\n display: flex;\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n }\r\n\r\n .search-box {\r\n flex: 1;\r\n min-width: 200px;\r\n }\r\n\r\n .search-box input {\r\n width: 100%;\r\n padding: 0.75rem 1rem;\r\n border: 2px solid var(--border-color);\r\n border-radius: 8px;\r\n font-size: 1rem;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .search-box input:focus {\r\n outline: none;\r\n border-color: var(--primary);\r\n box-shadow: 0 0 0 3px rgba(110, 166, 118, 0.1);\r\n }\r\n\r\n .filter-btn {\r\n padding: 0.75rem 1.5rem;\r\n background: var(--primary);\r\n color: white;\r\n border: none;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .filter-btn:hover,\r\n .filter-btn.active {\r\n background: var(--secondary);\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);\r\n }\r\n\r\n \/* Grid Layout *\/\r\n .communities-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n gap: 2rem;\r\n animation: fadeIn 0.6s ease-out;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* Card *\/\r\n .community-card {\r\n background: white;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n transition: all 0.3s ease;\r\n border: 1px solid var(--border-color);\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n }\r\n\r\n .community-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);\r\n }\r\n\r\n .card-image {\r\n width: 100%;\r\n height: 160px;\r\n background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 3.5rem;\r\n color: white;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .card-image::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent);\r\n pointer-events: none;\r\n }\r\n\r\n .card-content {\r\n padding: 1.5rem;\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .card-title {\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n color: var(--secondary);\r\n margin-bottom: 0.75rem;\r\n line-height: 1.4;\r\n }\r\n\r\n .card-district {\r\n display: inline-block;\r\n background: var(--light-bg);\r\n color: var(--primary);\r\n padding: 0.4rem 0.8rem;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n margin-bottom: 1rem;\r\n width: fit-content;\r\n }\r\n\r\n .card-description {\r\n font-size: 0.9rem;\r\n color: #666;\r\n line-height: 1.5;\r\n flex-grow: 1;\r\n margin-bottom: 1rem;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n }\r\n\r\n .info-row {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .info-label {\r\n font-weight: 600;\r\n color: var(--primary);\r\n font-size: 0.85rem;\r\n margin-bottom: 0.2rem;\r\n }\r\n\r\n .info-text {\r\n color: #555;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .card-footer {\r\n display: flex;\r\n gap: 0.5rem;\r\n }\r\n\r\n .btn-call {\r\n flex: 1;\r\n padding: 0.75rem;\r\n background: var(--primary);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n font-size: 0.85rem;\r\n transition: all 0.3s ease;\r\n text-align: center;\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .btn-call:hover {\r\n background: #5d8a63;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn-call:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n\r\n \/* Stats *\/\r\n .stats {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n gap: 1.5rem;\r\n margin-bottom: 3rem;\r\n background: white;\r\n padding: 2rem;\r\n border-radius: 12px;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n .stat {\r\n text-align: center;\r\n }\r\n\r\n .stat-number {\r\n font-size: 2.5rem;\r\n font-weight: 700;\r\n color: var(--primary);\r\n }\r\n\r\n .stat-label {\r\n color: #888;\r\n font-size: 0.95rem;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n \/* Footer *\/\r\n footer {\r\n background: var(--secondary);\r\n color: white;\r\n text-align: center;\r\n padding: 2rem;\r\n margin-top: 3rem;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .back-link {\r\n display: inline-block;\r\n margin-top: 1rem;\r\n padding: 0.75rem 1.5rem;\r\n background: var(--primary);\r\n color: white;\r\n text-decoration: none;\r\n border-radius: 6px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .back-link:hover {\r\n background: #5d8a63;\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* Responsive Navbar matching main index.html *\/\r\n @media (max-width: 1024px) {\r\n .nav-links {\r\n gap: 1.2rem;\r\n }\r\n .nav-right-container {\r\n gap: 1rem;\r\n }\r\n }\r\n\r\n @media (max-width: 890px) {\r\n .nav-links {\r\n gap: 0.8rem;\r\n }\r\n .nav-links a {\r\n font-size: 0.85rem;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .nav-links {\r\n display: none;\r\n }\r\n\r\n h1 {\r\n font-size: 2rem;\r\n }\r\n\r\n .communities-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .filter-bar {\r\n flex-direction: column;\r\n }\r\n\r\n .search-box {\r\n min-width: auto;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- NAVBAR (Same structure & translation integration as index.html) -->\r\n <nav>\r\n <div class=\"nav-container\">\r\n <a href=\"index.html\" class=\"logo\">\r\n <span class=\"logo-icon\">\ud83c\udf0d<\/span>\r\n <span data-translate=\"nav-title\">\u0e2d\u0e38\u0e17\u0e22\u0e32\u0e19\u0e18\u0e23\u0e13\u0e35<\/span>\r\n <\/a>\r\n <div class=\"nav-right-container\">\r\n <ul class=\"nav-links\">\r\n <li><a href=\"https:\/\/ubongeopark.org\/geopark\/\" data-translate=\"nav-home\">\u0e2b\u0e19\u0e49\u0e32\u0e2b\u0e25\u0e31\u0e01<\/a><\/li>\r\n <li><a href=\"index.html#features\" data-translate=\"nav-features\">\u0e2b\u0e21\u0e27\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/a><\/li>\r\n <li><a href=\"index.html#accommodation\" data-translate=\"nav-accommodation\">\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01<\/a><\/li>\r\n <li><a href=\"index.html#restaurants\" data-translate=\"nav-restaurants\">\u0e23\u0e49\u0e32\u0e19\u0e2d\u0e32\u0e2b\u0e32\u0e23<\/a><\/li>\r\n <li><a href=\"#\" data-translate=\"nav-communities\">\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08<\/a><\/li>\r\n <li><a href=\"#contact\" data-translate=\"nav-contact\">\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d<\/a><\/li>\r\n <\/ul>\r\n <!-- BUTTON FOR CHANGING LANGUAGE -->\r\n <button onclick=\"toggleLanguage()\" class=\"lang-switch-btn\" id=\"langBtn\">\r\n \ud83c\udf10 <span>EN<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- HEADER -->\r\n <header>\r\n <h1 data-translate=\"header-title\">\ud83e\udd1d \u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19<\/h1>\r\n <p class=\"subtitle\" data-translate=\"header-subtitle\">Community Enterprises - Ubon Ratchathani Geopark<\/p>\r\n <\/header>\r\n\r\n <div class=\"container\">\r\n <!-- STATS SECTION -->\r\n <div class=\"stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-number\">16<\/div>\r\n <div class=\"stat-label\" data-translate=\"stat-label-1\">\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-number\">4<\/div>\r\n <div class=\"stat-label\" data-translate=\"stat-label-2\">\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2b\u0e25\u0e31\u0e01<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-number\">6<\/div>\r\n <div class=\"stat-label\" data-translate=\"stat-label-3\">\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2d\u0e32\u0e0a\u0e35\u0e1e<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-number\" data-translate=\"stat-label-4-num\">24\/7<\/div>\r\n <div class=\"stat-label\" data-translate=\"stat-label-4-text\">\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e44\u0e14\u0e49\u0e17\u0e38\u0e01\u0e40\u0e27\u0e25\u0e32<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FILTER BAR -->\r\n <div class=\"filter-bar\">\r\n <div style=\"width: 100%; display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem;\" id=\"districtFilters\">\r\n <button class=\"filter-btn active\" onclick=\"filterByDistrict('all')\" data-translate=\"filter-all\">\ud83c\udf10 \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 (16)<\/button>\r\n <button class=\"filter-btn\" onclick=\"filterByDistrict('\u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23')\" data-translate=\"filter-phosai\">\ud83c\udfde\ufe0f \u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23 (4)<\/button>\r\n <button class=\"filter-btn\" onclick=\"filterByDistrict('\u0e28\u0e23\u0e35\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48')\" data-translate=\"filter-sri\">\ud83c\udf33 \u0e28\u0e23\u0e35\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48 (1)<\/button>\r\n <button class=\"filter-btn\" onclick=\"filterByDistrict('\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21')\" data-translate=\"filter-khongchiam\">\ud83c\udfd5\ufe0f \u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 (7)<\/button>\r\n <button class=\"filter-btn\" onclick=\"filterByDistrict('\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23')\" data-translate=\"filter-sirindhorn\">\ud83c\udf0a \u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23 (2)<\/button>\r\n <\/div>\r\n <div class=\"search-box\" style=\"width: 100%;\">\r\n <input type=\"text\" id=\"searchInput\" placeholder=\"\ud83d\udd0d \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19...\" onkeyup=\"searchCommunities()\" data-translate-placeholder=\"search-placeholder\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- GRID LAYOUT FOR CARDS -->\r\n <div class=\"communities-grid\" id=\"communitiesGrid\">\r\n <!-- Cards will be inserted here by JavaScript -->\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FOOTER WITH CONTACT ID -->\r\n <footer id=\"contact\">\r\n <p data-translate=\"footer-text-1\">\ud83d\udccd \u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e2d\u0e38\u0e17\u0e22\u0e32\u0e19\u0e18\u0e23\u0e13\u0e35\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 | \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14 2026<\/p>\r\n <a href=\"index.html\" class=\"back-link\" data-translate=\"footer-back-link\">\u2190 \u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e2b\u0e25\u0e31\u0e01<\/a>\r\n <p style=\"margin-top: 1rem; opacity: 0.8;\" data-translate=\"footer-text-2\">\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e17\u0e49\u0e2d\u0e07\u0e16\u0e34\u0e48\u0e19 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n const communities = [\r\n {\r\n id: 1,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e2a\u0e2d\u0e07\u0e04\u0e2d\u0e19',\r\n district: '\u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23',\r\n contact: '\u0e19\u0e32\u0e07\u0e1e\u0e34\u0e0a\u0e34\u0e15 \u0e27\u0e07\u0e2b\u0e07\u0e29\u0e4c',\r\n phone: '092 874 5700',\r\n type: '\u0e17\u0e2d\u0e1c\u0e49\u0e32',\r\n icon: '\ud83e\uddf5'\r\n },\r\n {\r\n id: 2,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e1b\u0e32\u0e01\u0e01\u0e30\u0e2b\u0e25\u0e32\u0e07',\r\n district: '\u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23',\r\n contact: '\u0e41\u0e21\u0e48\u0e2b\u0e19\u0e39\u0e41\u0e14\u0e07',\r\n phone: '080 579 9561',\r\n type: '\u0e17\u0e2d\u0e1c\u0e49\u0e32',\r\n icon: '\ud83e\uddf5'\r\n },\r\n {\r\n id: 3,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e23\u0e37\u0e2d\u0e19\u0e33\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e2b\u0e32\u0e14\u0e2a\u0e25\u0e36\u0e07',\r\n district: '\u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23',\r\n contact: '\u0e19\u0e32\u0e22\u0e27\u0e34\u0e08\u0e34\u0e15\u0e23',\r\n phone: '090 186 1220',\r\n type: '\u0e19\u0e33\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27',\r\n icon: '\ud83d\udea4'\r\n },\r\n {\r\n id: 4,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e23\u0e16\u0e19\u0e33\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e2a\u0e32\u0e21\u0e1e\u0e31\u0e19\u0e42\u0e1a\u0e01',\r\n district: '\u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23',\r\n contact: '\u0e19\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c',\r\n phone: '094 383 8997',\r\n type: '\u0e19\u0e33\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27',\r\n icon: '\ud83d\ude90'\r\n },\r\n {\r\n id: 5,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e18\u0e19\u0e32\u0e04\u0e32\u0e23\u0e1b\u0e25\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e2a\u0e2d\u0e07\u0e04\u0e2d\u0e19',\r\n district: '\u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23',\r\n contact: '\u0e41\u0e21\u0e48\u0e1a\u0e31\u0e27\u0e2a\u0e2d\u0e19 \u0e2d\u0e34\u0e19\u0e18\u0e34\u0e0a\u0e34\u0e15',\r\n phone: '062 321 2242',\r\n type: '\u0e40\u0e1e\u0e32\u0e30\u0e40\u0e25\u0e35\u0e49\u0e22\u0e07',\r\n icon: '\ud83d\udc20'\r\n },\r\n {\r\n id: 6,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e18\u0e19\u0e32\u0e04\u0e32\u0e23\u0e1b\u0e25\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e1c\u0e32\u0e0a\u0e31\u0e19',\r\n district: '\u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23',\r\n contact: '\u0e19\u0e32\u0e22\u0e04\u0e33\u0e1e\u0e31\u0e19 \u0e40\u0e0a\u0e34\u0e14\u0e44\u0e0a\u0e22',\r\n phone: '095 473 3101',\r\n type: '\u0e40\u0e1e\u0e32\u0e30\u0e40\u0e25\u0e35\u0e49\u0e22\u0e07',\r\n icon: '\ud83d\udc20'\r\n },\r\n {\r\n id: 7,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e41\u0e21\u0e48\u0e42\u0e02\u0e07\u0e42\u0e19\u0e41\u0e21\u0e14\u0e2d\u0e2d\u0e23\u0e4c\u0e41\u0e01\u0e19\u0e34\u0e04\u0e1f\u0e32\u0e23\u0e4c\u0e21',\r\n district: '\u0e28\u0e23\u0e35\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48',\r\n contact: 'Mekong Nomad Organic Farm',\r\n phone: '081 072 2714',\r\n type: '\u0e1b\u0e28\u0e38\u0e2a\u0e31\u0e15\u0e27\u0e4c\/\u0e40\u0e01\u0e29\u0e15\u0e23',\r\n icon: '\ud83c\udf3e'\r\n },\r\n {\r\n id: 8,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e01\u0e38\u0e48\u0e21',\r\n district: '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n contact: '\u0e41\u0e21\u0e48\u0e2a\u0e19\u0e34\u0e17 \u0e2a\u0e34\u0e19\u0e17\u0e34\u0e1e\u0e22\u0e4c',\r\n phone: '088 708 1140',\r\n type: '\u0e17\u0e2d\u0e1c\u0e49\u0e32',\r\n icon: '\ud83e\uddf5'\r\n },\r\n {\r\n id: 9,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e04\u0e31\u0e19\u0e17\u0e48\u0e32\u0e40\u0e01\u0e27\u0e35\u0e22\u0e19',\r\n district: '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n contact: '\u0e41\u0e21\u0e48\u0e2a\u0e27\u0e32\u0e22 \u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c\u0e1b\u0e34\u0e23\u0e31\u0e01\u0e29\u0e4c',\r\n phone: '089 580 9667',\r\n type: '\u0e17\u0e2d\u0e1c\u0e49\u0e32',\r\n icon: '\ud83e\uddf5'\r\n },\r\n {\r\n id: 10,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e0b\u0e30\u0e0b\u0e2d\u0e21',\r\n district: '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n contact: '\u0e41\u0e21\u0e48\u0e44\u0e01\u0e23',\r\n phone: '098 116 4667',\r\n type: '\u0e17\u0e2d\u0e1c\u0e49\u0e32',\r\n icon: '\ud83e\uddf5'\r\n },\r\n {\r\n id: 11,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e1b\u0e25\u0e32\u0e2a\u0e49\u0e21\u0e04\u0e23\u0e39\u0e2b\u0e22\u0e2d\u0e22',\r\n district: '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n contact: '\u0e04\u0e23\u0e39\u0e2b\u0e22\u0e2d\u0e22',\r\n phone: '081 389 9562',\r\n type: '\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e41\u0e1b\u0e23\u0e23\u0e39\u0e1b',\r\n icon: '\ud83e\uded9'\r\n },\r\n {\r\n id: 12,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e08\u0e31\u0e01\u0e2a\u0e32\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e17\u0e48\u0e32\u0e25\u0e49\u0e07',\r\n district: '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n contact: '\u0e19\u0e32\u0e22\u0e0a\u0e34\u0e15 \u0e41\u0e01\u0e48\u0e19\u0e42\u0e2a\u0e21',\r\n phone: '065 579 4054',\r\n type: '\u0e2b\u0e31\u0e15\u0e16\u0e28\u0e34\u0e25\u0e1b\u0e4c',\r\n icon: '\ud83e\uddfa'\r\n },\r\n {\r\n id: 13,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e08\u0e31\u0e01\u0e2a\u0e32\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e40\u0e27\u0e34\u0e19\u0e1a\u0e36\u0e01',\r\n district: '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n contact: '\u0e0a\u0e32\u0e27\u0e1a\u0e49\u0e32\u0e19\u0e40\u0e27\u0e34\u0e19\u0e1a\u0e36\u0e01',\r\n phone: '-',\r\n type: '\u0e2b\u0e31\u0e15\u0e16\u0e28\u0e34\u0e25\u0e1b\u0e4c',\r\n icon: '\ud83e\uddfa'\r\n },\r\n {\r\n id: 14,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e23\u0e37\u0e2d\u0e19\u0e33\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n district: '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21',\r\n contact: '\u0e0a\u0e32\u0e27\u0e1a\u0e49\u0e32\u0e19',\r\n phone: '-',\r\n type: '\u0e19\u0e33\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27',\r\n icon: '\ud83d\udea4'\r\n },\r\n {\r\n id: 15,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e2d\u0e04\u0e34\u0e25\u0e32\u0e25\u0e31\u0e07\u0e40\u0e20\u0e2a\u0e31\u0e0a\u0e20\u0e34\u0e23\u0e21\u0e22\u0e4c\u0e27\u0e31\u0e14\u0e20\u0e39\u0e1e\u0e23\u0e49\u0e32\u0e27',\r\n district: '\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23',\r\n contact: '\u0e27\u0e31\u0e14\u0e20\u0e39\u0e1e\u0e23\u0e49\u0e32\u0e27',\r\n phone: '089 865 8225 \/ 062 995 5582',\r\n type: '\u0e2a\u0e21\u0e38\u0e19\u0e44\u0e1e\u0e23',\r\n icon: '\ud83c\udf3f'\r\n },\r\n {\r\n id: 16,\r\n name: '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e1b\u0e25\u0e32\u0e41\u0e01\u0e49\u0e27\u0e1a\u0e49\u0e32\u0e19\u0e42\u0e0a\u0e04\u0e23\u0e31\u0e07\u0e2a\u0e23\u0e23\u0e04\u0e4c',\r\n district: '\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23',\r\n contact: '\u0e0a\u0e32\u0e27\u0e1a\u0e49\u0e32\u0e19\u0e42\u0e0a\u0e04\u0e23\u0e31\u0e07\u0e2a\u0e23\u0e23\u0e04\u0e4c',\r\n phone: '-',\r\n type: '\u0e40\u0e1e\u0e32\u0e30\u0e40\u0e25\u0e35\u0e49\u0e22\u0e07',\r\n icon: '\ud83d\udc20'\r\n }\r\n ];\r\n\r\n \/\/ ===== TRANSLATIONS DICTIONARY FOR BOTH NAVBAR AND CONTENT =====\r\n const translations = {\r\n th: {\r\n \"nav-home\": \"\u0e2b\u0e19\u0e49\u0e32\u0e2b\u0e25\u0e31\u0e01\",\r\n \"nav-title\": \"\u0e2d\u0e38\u0e17\u0e22\u0e32\u0e19\u0e18\u0e23\u0e13\u0e35\",\r\n \"nav-features\": \"\u0e2b\u0e21\u0e27\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\",\r\n \"nav-accommodation\": \"\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\",\r\n \"nav-restaurants\": \"\u0e23\u0e49\u0e32\u0e19\u0e2d\u0e32\u0e2b\u0e32\u0e23\",\r\n \"nav-communities\": \"\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\",\r\n \"nav-contact\": \"\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\",\r\n \"header-title\": \"\ud83e\udd1d \u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19\",\r\n \"header-subtitle\": \"Community Enterprises - Ubon Ratchathani Geopark\",\r\n \"stat-label-1\": \"\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19\",\r\n \"stat-label-2\": \"\u0e2d\u0e33\u0e40\u0e20\u0e2d\u0e2b\u0e25\u0e31\u0e01\",\r\n \"stat-label-3\": \"\u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17\u0e2d\u0e32\u0e0a\u0e35\u0e1e\",\r\n \"stat-label-4-num\": \"24\/7\",\r\n \"stat-label-4-text\": \"\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e44\u0e14\u0e49\u0e17\u0e38\u0e01\u0e40\u0e27\u0e25\u0e32\",\r\n \"filter-all\": \"\ud83c\udf10 \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 (16)\",\r\n \"filter-phosai\": \"\ud83c\udfde\ufe0f \u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23 (4)\",\r\n \"filter-sri\": \"\ud83c\udf33 \u0e28\u0e23\u0e35\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48 (1)\",\r\n \"filter-khongchiam\": \"\ud83c\udfd5\ufe0f \u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21 (7)\",\r\n \"filter-sirindhorn\": \"\ud83c\udf0a \u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23 (2)\",\r\n \"search-placeholder\": \"\ud83d\udd0d \u0e04\u0e49\u0e19\u0e2b\u0e32\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19...\",\r\n \"footer-text-1\": \"\ud83d\udccd \u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e2d\u0e38\u0e17\u0e22\u0e32\u0e19\u0e18\u0e23\u0e13\u0e35\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 | \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14 2026\",\r\n \"footer-back-link\": \"\u2190 \u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e2b\u0e25\u0e31\u0e01\",\r\n \"footer-text-2\": \"\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e17\u0e49\u0e2d\u0e07\u0e16\u0e34\u0e48\u0e19 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19\"\r\n },\r\n en: {\r\n \"nav-home\": \"Home\",\r\n \"nav-title\": \"Geopark\",\r\n \"nav-features\": \"Categories\",\r\n \"nav-accommodation\": \"Accommodations\",\r\n \"nav-restaurants\": \"Restaurants\",\r\n \"nav-communities\": \"Enterprises\",\r\n \"nav-contact\": \"Contact\",\r\n \"header-title\": \"\ud83e\udd1d Community Enterprises\",\r\n \"header-subtitle\": \"Supporting local craftsmanship and economy in Ubon Geopark\",\r\n \"stat-label-1\": \"Enterprises\",\r\n \"stat-label-2\": \"Main Districts\",\r\n \"stat-label-3\": \"Job Categories\",\r\n \"stat-label-4-num\": \"24\/7\",\r\n \"stat-label-4-text\": \"Available Anytime\",\r\n \"filter-all\": \"\ud83c\udf10 All (16)\",\r\n \"filter-phosai\": \"\ud83c\udfde\ufe0f Pho Sai (4)\",\r\n \"filter-sri\": \"\ud83c\udf33 Sri Mueang Mai (1)\",\r\n \"filter-khongchiam\": \"\ud83c\udfd5\ufe0f Khong Chiam (7)\",\r\n \"filter-sirindhorn\": \"\ud83c\udf0a Sirindhorn (2)\",\r\n \"search-placeholder\": \"\ud83d\udd0d Search community enterprises...\",\r\n \"footer-text-1\": \"\ud83d\udccd Ubon Ratchathani Geopark Community Enterprises | Last updated 2026\",\r\n \"footer-back-link\": \"\u2190 Back to Homepage\",\r\n \"footer-text-2\": \"Empowering local enterprises for sustainable community development\"\r\n }\r\n };\r\n\r\n let currentLang = 'th';\r\n let selectedDistrict = 'all';\r\n\r\n \/\/ ===== TRANSLATED TEXT RENDERING FOR CARDS =====\r\n function renderCommunities(data) {\r\n const grid = document.getElementById('communitiesGrid');\r\n grid.innerHTML = '';\r\n\r\n if (data.length === 0) {\r\n const noFoundText = currentLang === 'th' ? '\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e17\u0e35\u0e48\u0e04\u0e49\u0e19\u0e2b\u0e32' : 'No community enterprises found';\r\n grid.innerHTML = `<div style=\"grid-column: 1\/-1; text-align: center; padding: 3rem; color: #999;\">${noFoundText}<\/div>`;\r\n return;\r\n }\r\n\r\n data.forEach(com => {\r\n const card = document.createElement('div');\r\n card.className = 'community-card';\r\n\r\n \/\/ Real-time EN Translation for types\r\n let displayType = com.type;\r\n if (currentLang === 'en') {\r\n if (com.type === '\u0e17\u0e2d\u0e1c\u0e49\u0e32') displayType = 'Weaving';\r\n else if (com.type === '\u0e19\u0e33\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27') displayType = 'Eco-Tourism';\r\n else if (com.type === '\u0e40\u0e1e\u0e32\u0e30\u0e40\u0e25\u0e35\u0e49\u0e22\u0e07') displayType = 'Aquaculture\/Fishery';\r\n else if (com.type === '\u0e1b\u0e28\u0e38\u0e2a\u0e31\u0e15\u0e27\u0e4c\/\u0e40\u0e01\u0e29\u0e15\u0e23') displayType = 'Livestock & Organic Farm';\r\n else if (com.type === '\u0e2d\u0e32\u0e2b\u0e32\u0e23\u0e41\u0e1b\u0e23\u0e23\u0e39\u0e1b') displayType = 'Processed Food';\r\n else if (com.type === '\u0e2b\u0e31\u0e15\u0e16\u0e28\u0e34\u0e25\u0e1b\u0e4c') displayType = 'Local Handicrafts';\r\n else if (com.type === '\u0e2a\u0e21\u0e38\u0e19\u0e44\u0e1e\u0e23') displayType = 'Herbal Products';\r\n }\r\n\r\n \/\/ Real-time EN Translation for names\r\n let displayName = com.name;\r\n if (currentLang === 'en') {\r\n if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e2a\u0e2d\u0e07\u0e04\u0e2d\u0e19') displayName = 'Ban Song Khon Weaving Group';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e1b\u0e32\u0e01\u0e01\u0e30\u0e2b\u0e25\u0e32\u0e07') displayName = 'Ban Pak Kalang Weaving Group';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e23\u0e37\u0e2d\u0e19\u0e33\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e2b\u0e32\u0e14\u0e2a\u0e25\u0e36\u0e07') displayName = 'Hat Salung Tour Boat Group';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e23\u0e16\u0e19\u0e33\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e2a\u0e32\u0e21\u0e1e\u0e31\u0e19\u0e42\u0e1a\u0e01') displayName = 'Sam Phan Bok Tour Transport';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e18\u0e19\u0e32\u0e04\u0e32\u0e23\u0e1b\u0e25\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e2a\u0e2d\u0e07\u0e04\u0e2d\u0e19') displayName = 'Ban Song Khon Fish Bank';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e18\u0e19\u0e32\u0e04\u0e32\u0e23\u0e1b\u0e25\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e1c\u0e32\u0e0a\u0e31\u0e19') displayName = 'Ban Pha Chan Fish Bank';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e41\u0e21\u0e48\u0e42\u0e02\u0e07\u0e42\u0e19\u0e41\u0e21\u0e14\u0e2d\u0e2d\u0e23\u0e4c\u0e41\u0e01\u0e19\u0e34\u0e04\u0e1f\u0e32\u0e23\u0e4c\u0e21') displayName = 'Mekong Nomad Organic Farm Group';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e01\u0e38\u0e48\u0e21') displayName = 'Ban Kum Weaving Group';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e04\u0e31\u0e19\u0e17\u0e48\u0e32\u0e40\u0e01\u0e27\u0e35\u0e22\u0e19') displayName = 'Ban Khan Tha Kwian Weaving Group';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e17\u0e2d\u0e1c\u0e49\u0e32\u0e1a\u0e49\u0e32\u0e19\u0e0b\u0e30\u0e0b\u0e2d\u0e21') displayName = 'Ban Sa Som Weaving Group';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e1b\u0e25\u0e32\u0e2a\u0e49\u0e21\u0e04\u0e23\u0e39\u0e2b\u0e22\u0e2d\u0e22') displayName = 'Kru Yoy Pickled Fish Group';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e08\u0e31\u0e01\u0e2a\u0e32\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e17\u0e48\u0e32\u0e25\u0e49\u0e07') displayName = 'Ban Tha Long Basketry Group';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e08\u0e31\u0e01\u0e2a\u0e32\u0e19\u0e1a\u0e49\u0e32\u0e19\u0e40\u0e27\u0e34\u0e19\u0e1a\u0e36\u0e01') displayName = 'Ban Woen Buek Basketry Group';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e23\u0e37\u0e2d\u0e19\u0e33\u0e40\u0e17\u0e35\u0e48\u0e22\u0e27\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21') displayName = 'Khong Chiam Tourist Boat Group';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e2d\u0e04\u0e34\u0e25\u0e32\u0e25\u0e31\u0e07\u0e40\u0e20\u0e2a\u0e31\u0e0a\u0e20\u0e34\u0e23\u0e21\u0e22\u0e4c\u0e27\u0e31\u0e14\u0e20\u0e39\u0e1e\u0e23\u0e49\u0e32\u0e27') displayName = 'Wat Phu Phrao Herbal Wellness Group';\r\n else if (com.name === '\u0e01\u0e25\u0e38\u0e48\u0e21\u0e1b\u0e25\u0e32\u0e41\u0e01\u0e49\u0e27\u0e1a\u0e49\u0e32\u0e19\u0e42\u0e0a\u0e04\u0e23\u0e31\u0e07\u0e2a\u0e23\u0e23\u0e04\u0e4c') displayName = 'Ban Chok Rangsan Dried Glassfish Group';\r\n }\r\n\r\n \/\/ Real-time EN Translation for coordinator contact\r\n let displayContact = com.contact;\r\n if (currentLang === 'en') {\r\n if (com.contact === '\u0e19\u0e32\u0e07\u0e1e\u0e34\u0e0a\u0e34\u0e15 \u0e27\u0e07\u0e2b\u0e07\u0e29\u0e4c') displayContact = 'Mrs. Pichit Wonghong';\r\n else if (com.contact === '\u0e41\u0e21\u0e48\u0e2b\u0e19\u0e39\u0e41\u0e14\u0e07') displayContact = 'Mae Nu Dang';\r\n else if (com.contact === '\u0e19\u0e32\u0e22\u0e27\u0e34\u0e08\u0e34\u0e15\u0e23') displayContact = 'Mr. Wichit';\r\n else if (com.contact === '\u0e19\u0e32\u0e22\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c') displayContact = 'Mr. Prasit';\r\n else if (com.contact === '\u0e41\u0e21\u0e48\u0e1a\u0e31\u0e27\u0e2a\u0e2d\u0e19 \u0e2d\u0e34\u0e19\u0e18\u0e34\u0e0a\u0e34\u0e15') displayContact = 'Mae Buasorn Inthichit';\r\n else if (com.contact === '\u0e19\u0e32\u0e22\u0e04\u0e33\u0e1e\u0e31\u0e19 \u0e40\u0e0a\u0e34\u0e14\u0e44\u0e0a\u0e22') displayContact = 'Mr. Khampan Cherdchai';\r\n else if (com.contact === '\u0e41\u0e21\u0e48\u0e2a\u0e19\u0e34\u0e17 \u0e2a\u0e34\u0e19\u0e17\u0e34\u0e1e\u0e22\u0e4c') displayContact = 'Mae Sanit Sinthip';\r\n else if (com.contact === '\u0e41\u0e21\u0e48\u0e2a\u0e27\u0e32\u0e22 \u0e08\u0e31\u0e19\u0e17\u0e23\u0e4c\u0e1b\u0e34\u0e23\u0e31\u0e01\u0e29\u0e4c') displayContact = 'Mae Sawai Chanpirak';\r\n else if (com.contact === '\u0e41\u0e21\u0e48\u0e44\u0e01\u0e23') displayContact = 'Mae Krai';\r\n else if (com.contact === '\u0e04\u0e23\u0e39\u0e2b\u0e22\u0e2d\u0e22') displayContact = 'Kru Yoy';\r\n else if (com.contact === '\u0e19\u0e32\u0e22\u0e0a\u0e34\u0e15 \u0e41\u0e01\u0e48\u0e19\u0e42\u0e2a\u0e21') displayContact = 'Mr. Chit Kaensom';\r\n else if (com.contact === '\u0e0a\u0e32\u0e27\u0e1a\u0e49\u0e32\u0e19\u0e40\u0e27\u0e34\u0e19\u0e1a\u0e36\u0e01') displayContact = 'Ban Woen Buek Villagers';\r\n else if (com.contact === '\u0e0a\u0e32\u0e27\u0e1a\u0e49\u0e32\u0e19') displayContact = 'Local Villagers';\r\n else if (com.contact === '\u0e27\u0e31\u0e14\u0e20\u0e39\u0e1e\u0e23\u0e49\u0e32\u0e27') displayContact = 'Wat Phu Phrao Temple';\r\n else if (com.contact === '\u0e0a\u0e32\u0e27\u0e1a\u0e49\u0e32\u0e19\u0e42\u0e0a\u0e04\u0e23\u0e31\u0e07\u0e2a\u0e23\u0e23\u0e04\u0e4c') displayContact = 'Ban Chok Rangsan Residents';\r\n }\r\n\r\n \/\/ Real-time EN Translation for district label\r\n let displayDistrict = com.district;\r\n if (currentLang === 'en') {\r\n if (com.district === '\u0e42\u0e1e\u0e18\u0e34\u0e4c\u0e44\u0e17\u0e23') displayDistrict = 'Pho Sai';\r\n else if (com.district === '\u0e28\u0e23\u0e35\u0e40\u0e21\u0e37\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48') displayDistrict = 'Sri Mueang Mai';\r\n else if (com.district === '\u0e42\u0e02\u0e07\u0e40\u0e08\u0e35\u0e22\u0e21') displayDistrict = 'Khong Chiam';\r\n else if (com.district === '\u0e2a\u0e34\u0e23\u0e34\u0e19\u0e18\u0e23') displayDistrict = 'Sirindhorn';\r\n }\r\n\r\n const labelCoordinator = currentLang === 'th' ? '\ud83d\udc64 \u0e1c\u0e39\u0e49\u0e1b\u0e23\u0e30\u0e2a\u0e32\u0e19\u0e07\u0e32\u0e19' : '\ud83d\udc64 Coordinator';\r\n const labelType = currentLang === 'th' ? '\ud83c\udff7\ufe0f \u0e1b\u0e23\u0e30\u0e40\u0e20\u0e17' : '\ud83c\udff7\ufe0f Type';\r\n const btnNoPhoneText = currentLang === 'th' ? '\ud83d\udcde \u0e44\u0e21\u0e48\u0e21\u0e35\u0e40\u0e1a\u0e2d\u0e23\u0e4c' : '\ud83d\udcde No Phone';\r\n\r\n const phoneLink = com.phone !== '-' ? `<a href=\"tel:${com.phone.replace(\/\\s\/g, '')}\" class=\"btn-call\">\ud83d\udcde ${com.phone}<\/a>` : `<button class=\"btn-call\" disabled>${btnNoPhoneText}<\/button>`;\r\n card.innerHTML = `\r\n <div class=\"card-image\">\r\n <span>${com.icon}<\/span>\r\n <\/div>\r\n <div class=\"card-content\">\r\n <h2 class=\"card-title\">${displayName}<\/h2>\r\n <div class=\"card-district\">${displayDistrict}<\/div>\r\n <div class=\"card-description\">\r\n <div class=\"info-row\">\r\n <span class=\"info-label\">${labelCoordinator}<\/span>\r\n <span class=\"info-text\">${displayContact}<\/span>\r\n <\/div>\r\n <div class=\"info-row\">\r\n <span class=\"info-label\">${labelType}<\/span>\r\n <span class=\"info-text\">${displayType}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-footer\">\r\n ${phoneLink}\r\n <\/div>\r\n `;\r\n grid.appendChild(card);\r\n });\r\n }\r\n\r\n \/\/ ===== TRANSLATION SWITCHER CONTROLLER =====\r\n function toggleLanguage() {\r\n currentLang = currentLang === 'th' ? 'en' : 'th';\r\n \r\n \/\/ 1. Update Switcher Button Label\r\n const btn = document.getElementById('langBtn');\r\n btn.innerHTML = currentLang === 'th' ? '\ud83c\udf10 <span>EN<\/span>' : '\ud83c\udf10 <span>TH<\/span>';\r\n \r\n \/\/ 2. Translate Static Elements with data-translate attribute\r\n document.querySelectorAll('[data-translate]').forEach(el => {\r\n const key = el.getAttribute('data-translate');\r\n if (translations[currentLang][key]) {\r\n el.innerHTML = translations[currentLang][key];\r\n }\r\n });\r\n\r\n \/\/ 3. Translate input placeholders\r\n document.querySelectorAll('[data-translate-placeholder]').forEach(el => {\r\n const key = el.getAttribute('data-translate-placeholder');\r\n if (translations[currentLang][key]) {\r\n el.placeholder = translations[currentLang][key];\r\n }\r\n });\r\n\r\n \/\/ 4. Re-render dynamic cards with translated texts\r\n filterByDistrict(selectedDistrict);\r\n\r\n \/\/ Update html lang attribute\r\n document.documentElement.lang = currentLang;\r\n }\r\n\r\n function filterByDistrict(district) {\r\n selectedDistrict = district;\r\n \r\n \/\/ Find filters and update active states\r\n const filterContainer = document.getElementById('districtFilters');\r\n filterContainer.querySelectorAll('.filter-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n\r\n \/\/ Triggered from clicking a filter button or changing language\r\n if (event && event.target && event.target.classList.contains('filter-btn')) {\r\n event.target.classList.add('active');\r\n } else {\r\n \/\/ If triggered by language switch, find the corresponding button by its onclick function\r\n const buttons = filterContainer.querySelectorAll('.filter-btn');\r\n buttons.forEach(btn => {\r\n if (btn.getAttribute('onclick').includes(district)) {\r\n btn.classList.add('active');\r\n }\r\n });\r\n }\r\n \r\n let filtered = communities;\r\n if (district !== 'all') {\r\n filtered = communities.filter(c => c.district === district);\r\n }\r\n \r\n const searchTerm = document.getElementById('searchInput').value.toLowerCase();\r\n if (searchTerm) {\r\n filtered = filtered.filter(c =>\r\n c.name.toLowerCase().includes(searchTerm) ||\r\n c.contact.toLowerCase().includes(searchTerm) ||\r\n c.type.toLowerCase().includes(searchTerm) ||\r\n c.district.toLowerCase().includes(searchTerm)\r\n );\r\n }\r\n \r\n renderCommunities(filtered);\r\n }\r\n\r\n function searchCommunities() {\r\n const searchTerm = document.getElementById('searchInput').value.toLowerCase();\r\n let filtered = communities;\r\n \r\n if (selectedDistrict !== 'all') {\r\n filtered = communities.filter(c => c.district === selectedDistrict);\r\n }\r\n \r\n filtered = filtered.filter(c =>\r\n c.name.toLowerCase().includes(searchTerm) ||\r\n c.contact.toLowerCase().includes(searchTerm) ||\r\n c.type.toLowerCase().includes(searchTerm) ||\r\n c.district.toLowerCase().includes(searchTerm)\r\n );\r\n \r\n renderCommunities(filtered);\r\n }\r\n\r\n \/\/ Initial render on load\r\n renderCommunities(communities);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e27\u0e34\u0e2a\u0e32\u0e2b\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19 – \u0e2d\u0e38\u0e17\u0e22\u0e32\u0e19\u0e18\u0e23\u0e13\u0e35\u0e2d\u0e38\u0e1a\u0e25\u0e23\u0e32\u0e0a\u0e18\u0e32\u0e19\u0e35 \ud83c\udf0d \u0e2d\u0e38\u0e17\u0e22\u0e32\u0e19\u0e18\u0e23\u0e13 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-37103","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/pages\/37103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/comments?post=37103"}],"version-history":[{"count":11,"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/pages\/37103\/revisions"}],"predecessor-version":[{"id":37179,"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/pages\/37103\/revisions\/37179"}],"wp:attachment":[{"href":"https:\/\/ubongeopark.org\/geopark\/wp-json\/wp\/v2\/media?parent=37103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}