<?php
header("Expires: Mon, 26 Jul 1990 05:00:00 GMT"); // Date in the past
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache"); // For legacy HTTP 1.0 clients
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Cover - UIkit 3 KickOff</title>
	<link rel="icon" href="favicon.png">
	<!-- CSS FILES -->
	<link rel="stylesheet" type="text/css" href="assets/uikit-3.24.2/css/uikit.min.css">
	
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap" rel="stylesheet">

	<script>

		var init = {};
		var siteContent = {};

	</script>


	<script src="assets/language/cn.js?a7"></script>
	<script src="assets/language/en.js?a7"></script>
	<script src="assets/language/id.js?a7"></script>
	<script src="assets/language/my.js?a7"></script>
	<script src="assets/language/th.js?a7"></script>
	<script src="assets/language/vn.js?a7"></script>

	<script>

		// deep merge language content
		function deepMerge(a, b) {
			const result = { ...a };

			for (const key in b) {
				// If both sides are plain objects → merge deeper
				if (
						typeof b[key] === "object" &&
						b[key] !== null &&
						!Array.isArray(b[key]) &&
						typeof a[key] === "object" &&
						!Array.isArray(a[key])
					) {
					result[key] = deepMerge(a[key], b[key]);
				}

				// If array → overwrite or merge depending on your preference
				else if (Array.isArray(b[key])) {
					result[key] = [...b[key]]; // overwrite array completely
				}
				else {
					result[key] = b[key];
				}
			}

			return result;
		}

		// ES6 async function to detect country and language
		const detectCountryAndLanguage = async () => {
			try {
				const response = await fetch('https://ipapi.co/json/');
				if (!response.ok) throw new Error('Failed to fetch IP info');

				const data = await response.json();
				const country = data.country_name;   // Country name
				const countryCode = data.country;    // Country code (ISO)
				const language = navigator.language || navigator.userLanguage; // Browser language

				console.log(`Country: ${country} (${countryCode})`);
				console.log(`Language: ${language}`);

				return { country, countryCode, language };
			} catch (error) {
				console.error('Error detecting country and language:', error);
				return null;
			}
		};


		const currencyToCountry = (currency) => {
			const countries = {
				// 'usd': 'th',
				'thb': 'th',
				'vnd': 'vn',
				'myr': 'my',
				'idr': 'id',
				'sgd': 'sg',
			}
			return countries[currency] || 'th';
		}

		// Get current URL parameters
		const params = new URLSearchParams(window.location.search);
		// usage
		// const lang = params.get('lang') || 'en';       // default to 'en' if missing

		const USER_CURRENCY = params.get('currency') || 'myr';
		const USER_LANGUAGE = params.get('lang') || 'en';
		const USER_COUNTRY = currencyToCountry(USER_CURRENCY);

	</script>
	<style type="text/css">

		html, body { background-color: #f4f3f3; font-family: "Sofia Sans", sans-serif; position:relative; }
		.uk-logo img { height: 65px; }

		.font-light { font-weight: 300; font-family: "Sofia Sans", sans-serif; font-optical-sizing: auto;}
		.font-regular { font-weight: 500; font-family: "Sofia Sans", sans-serif; font-optical-sizing: auto;}
		.font-medium { font-weight: 700; font-family: "Sofia Sans", sans-serif; font-optical-sizing: auto;}
		.font-bold { font-weight: 900; font-family: "Sofia Sans", sans-serif; font-optical-sizing: auto;}


		/* Animation keyframes */
		@keyframes button-animation {
			0%, 100% { transform: scale(1) translateZ(0); filter: brightness(1); }
			50% { transform: scale(1.05) translateZ(0); filter: brightness(1.3); }
		}


		*[data-text]{ visibility:hidden; }


		h3 { color: #222; font-size: 20px; font-weight: 700;}
		.uk-list li { margin-top: 5px !important; }
		.uk-container-xsmall { max-width:650px; }

		.action-btn, .primary-cta {
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: row;

			/*** mobile ***/
			@media (max-width: 640px) {
				flex-direction: column;
				/*padding-right: 35px;*/
				display: block;

				div { margin:20px auto; }
			}
		}
		.action-btn:only-child .primary, 
		.primary-cta:only-child .primary, 
		.primary:hover,
		.teaser .primary
		{
			animation: button-animation 5s cubic-bezier(.86, 0, .07, 1) infinite;
			will-change: transform, filter;
		}


		.button{

			&.primary {
				position: relative;
				display: inline-block;
				/*display: inline-grid;*/
				/*place-items: center;*/
				/*min-height: 30px;*/
				padding: 15px 24px;
				color: #fff;
				font-size: 18px;
				font-weight: 800;
				font-style: italic;
				line-height: 1.5em;
				text-align: center;
				text-decoration: none;
				border: 0px solid #570011;
				border-bottom: 1px solid #570011;
				border-radius: 40px;
				overflow: hidden; /* hide ::before edges */
				background: radial-gradient( 107% 108% at 50% 108%, rgb(255 0 60), rgb(159 0 32) );
				box-shadow: 0 8px 6px rgb(88 72 55 / .15);
				cursor: pointer;
				z-index: 1;
				transition: color 0.3s ease, transform 0.3s ease;
				text-transform: uppercase;
				/*margin: 10px;*/

				color: #fff;
				/*animation: button-animation 5s cubic-bezier(.86, 0, .07, 1) infinite;*/
				/*will-change: transform, filter;*/

				/* only animate if it’s the only button */
				&:only-child {
					/*animation: button-animation 5s cubic-bezier(.86, 0, .07, 1) infinite;*/
					/*will-change: transform, filter;*/
				}

				&::before {
					content: "";
					position: absolute;
					inset: 0;
					border-radius: inherit;
					box-sizing: border-box;
					/*background: 	;*/
					background-image: url('assets/img/btn-animation.webp'), radial-gradient( 98% 99% at 50% 100%, rgb(255 96 128), rgb(199 0 40) );
					background-size: cover;
					background-position: center;
					opacity: 0;
					transition: all 1s ease-in-out 2s;
					z-index: -1;
				}

				/* Hover effect */
				&:hover, &.active {
					/*color: #ffdddd;*/
					/*transform: translateY(-3px);*/

					&::before {
						opacity: 1;
					}
				}

				/*** mobile ***/
				@media (max-width: 640px) {
					/*width: 90%;*/
					display: block;
				}

			}

			&.dark{
				position: relative;
				display: inline-flex;
				justify-content: center;
				place-items: center;
				min-height: 28px;
				min-width: 120px;
				padding: 5px 24px;
				margin: 0.5em;
				margin-bottom: 2em;
				color: #fff;
				font-size: 14px;
				font-weight: 600;
				font-style: italic;
				line-height: 1em;
				text-align: center;
				text-decoration: none;
				border: 1px solid #070606; border-radius: 40px;
				box-shadow: 0 8px 6px rgb(88 72 55 / .15);
				overflow: hidden; /* hide ::before edges */
				background: radial-gradient(73% 100% at 50% 100%, rgb(85 78 78), rgb(22 20 20));
				cursor: pointer;
				z-index: 1;
				transition: color 0.3s ease, transform 0.3s ease;
				text-transform: uppercase;

				/* The gradient overlay for hover */
				&::before {
					content: "";
					position: absolute;
					inset: 0;
					border-radius: inherit;
					background: radial-gradient(73% 100% at 50% 100%, rgb(130 120 120), rgb(38 34 34));
					opacity: 0;
					transition: opacity 0.6s ease-in-out;
					z-index: -1;
				}

				/* Hover effect */
				&.dark:hover {
					/*color: #ffdddd;*/
					/*transform: translateY(-3px);*/

					&::before {
						opacity: 1;
					}
				}

				img { height: 20px; width:auto; display:inline-block; margin: 8px;}

			}

		}

		header {
			background-color: transparent;position: absolute;
			top: 15px;
			z-index: 99;
			left: 0;
			right: 0;
		
			.uk-navbar-nav {

				> li{
					line-height: 1em; padding: 1px; height: 32px; border-radius: 1em; 

					> a{ 
						background-color: #FAFAFA; border: 1px solid #bbb; border-radius: 1em; color: #222; font-weight: 700; 
						font-style: italic; line-height: 1em; padding: 0.2em 1em; min-height: 10px;

						img{
							height: 1.3em; margin: 0 5px;
						}


						&:focus, &:active, &:hover {
							box-shadow: 0 1px 8px rgb(69 63 63 / .15);
							color: rgb(195 135 65);
							/*background: linear-gradient( 282deg, rgb(210 153 86) 4%, rgb(229 176 113) 44%, rgb(245 223 197) 67%, rgb(229 176 113) 98% );*/
						}

					}
				}
			}

		}

		#promo-banner{
			background-color: #f4f3f3; text-align: center; padding: 0;
			background-image: url(assets/b1.png?a1);
			background-repeat: no-repeat;
			background-size: cover;

			div {
				min-height: 600px; max-height: 700px; 
				background-repeat: no-repeat;
				background-position: center center;
				background-size: auto 100%; /* fills height, crops width */
			}
		}

		#promo-content {
			font-style: italic; text-align: center; padding: 0;

			h2 {
				color: #554E4E; font-weight: 700; font-size: 20px; text-transform: uppercase; margin: 0;

				b { color: #000; font-weight: 800;}
			}

			h1 { 
				color: #222; font-weight: 800; font-size: 34px; margin: 0;
			}

			.action-btn, .primary-cta { 
				margin: 20px auto;

				a { min-width: 250px; margin: 5px 10px; display: block;}
			}
		}

		#tnc_container {
			padding-top: 20px;padding-bottom: 20px;

			#terms-and-conditions { 
				max-height: 150px; transition: max-height 1s ease; 

				ol li{color: #222; font-weight: 300; }
			}

			#terms-and-conditions {

				&.expanded {
					max-height: 1000px; /* large enough for full content */

					.fade-overlay { opacity: 0; }
				}

				.fade-overlay {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 160px;
					background-color: #f00;
					background: linear-gradient(to bottom, rgba(244,243,243,0), rgba(244,243,243,1));
					pointer-events: none;
					transition: opacity 0.5s ease;
					display: block;
					z-index: 999;
				}

				a {
					color:#000; text-decoration:underline; font-style: italic;

					&:hover { text-decoration:none; }
				}

			}

			a#show_tnc{ 
				font-size: 14px; color: #444 !important; font-style: italic;

				&:hover img { transform: scale(1.1) translateX(0) rotate(180deg); }
				img { filter: brightness(10%); transition: all 0.5s ease;}
			}

		}

		#blocks {

			.item-block {
				border-radius:16px; min-height: 140px;  border: 1px solid #fff; 
				position: relative;
				overflow: hidden;
				padding: 0;
				background-color: #fff;
				transition: all 0.3s ease;
				box-shadow: 0 2px 8px rgb(88 72 55 / .2);

				p {
					font-style:italic; color: #111; font-size: 14px; font-weight: 400; 
					z-index: 9; position: absolute; bottom: 0px; padding: 15px; margin: 0; width: 50%; line-height: 1em;

					span { display:block; font-size: 1.6em; font-weight: 700; line-height: 1em;}
				}

				img{
					transition: all 0.5s ease;
					max-height: 100%; z-index: 9;
					left: 30%;

					&.mobile-icon{
						left: 50%;
					}
				}

				&:after {
					content: "";
					position: absolute;
					top: 0;
					left: 43%;
					height: 100%;width: 100%;
					transition: all 0.5s ease;
					background-color: #f00;
					z-index: 1;
					background: linear-gradient( 293deg, rgb(121 16 9) .01%, rgb(201 16 4) 70.01% );
					clip-path: polygon( calc(0% + 43px) 0, calc(0% + 48px) 0, calc(0% + 6px) 100%, calc(0% + 15px) 100%, calc(0% + 57px) 0, 100% 0, 100% 100%, 0% 100% );
				}

				&:hover{
					transform: scale(1.03) translateZ(0);
					z-index: 999;
					/*left: 50%;*/

					&:after{
						transform: scale(1.1) translateZ(0);
						left: 48%;
					}

					img{ transform: scale(1.1) translateZ(0); }
				}

				/*** Tablet ***/
				@media (max-width: 960px) {
					min-height: 110px;
				
					&:after { left: 50%;}
					p{ padding: 10px; font-size: 16px; width: 50%;}
				}

				/*** mobile ***/
				@media (max-width: 640px) {
					min-height: 80px;
				
					&:after { left: 50%;}
					p{ 
						padding: 8px; font-size: 12px; width: 45%;
						span{ font-size: 1.1em;}
					}
				}
				

			}

			.block-container {
				div { 
					cursor:pointer; 

					&:nth-child(n+4) .item-block:after {
					/*&:nth-child(n+3) .item-block:after {*/
						background: linear-gradient( 159.63deg, rgb(85 78 78) 2.81%, rgb(22 20 20) 95.98% );
					}
				}
			}

		}

		footer { 
			margin-top: 70px; padding: 0px;

			.uk-container {
				z-index: 1;
				margin-block-start: auto;
				padding-block-start: 32px;

				border-radius: 20px 20px 0 0;
				background: radial-gradient( 109% 100% at 50% 100%, rgb(22 20 20) 48%, rgb(38 34 34) 77%, rgb(53 49 49) );
				text-align: center;


				.links-container {
					/*display:flex;  justify-content: space-evenly; margin: 10px 0;*/

					ul { 
						list-style-type: none; display: flex; justify-content: center; align-items: center;
						margin-bottom: 10px;

						li { padding: 0.5em 1em;}

						@media (max-width: 640px) {
							flex-direction: column;
						}

					}
					a { 
						font-weight: 700; color: #ede3d8; transition: all 0.5s ease; text-shadow: 1px 1px 2px #000;
						&:hover{ color: #e5b071;}
					}
				}

				.payments {
					margin-bottom: 2em;
					button {
						background-color: #353131; border: 1px solid #453f3f; border-radius: 20px; transition: all 0.5s ease; margin: 5px;

						&:hover{ background-color: #453f3f; border: 1px solid #635b5b; }
						img{ max-height: 30px; min-height: 30px;}
					}

					a {
						font-size: 13px; font-weight: 700; color: #ede3d8; transition: all 0.5s ease; text-shadow: 1px 1px 2px #000; font-style: italic;

						&:hover{ color: #e5b071; text-decoration: none;}
					}
				}

				.copyrights {
					font-size:12px; line-height: 2.5em; color:rgb(99 91 91); padding-bottom: 20px; padding-bottom:15px; 

					p { margin: 0; }

					@media (max-width: 640px) {
						padding-bottom:20px; 
					}
				}

			}

			@media (max-width: 960px) {
				padding: 0;
			}
		}

		.teaser {
			padding: 0px;
			position: fixed; 
			bottom: -50px;
			left: 0;
			width: 100%;
			background: #fff;
			color: #fff;
			text-align: center;
			box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
			transform: translateY(100%); /* hidden initially */
			transition: transform 0.4s ease;
			z-index: 9999;

			&.show { transform: translateY(-50px); }

			/*** mobile ***/
			@media (max-width: 640px) {
				background-color: transparent;
				box-shadow: none;
			}

			.teaser-container {
				font-style: italic; background-color: transparent;
				background-color: #ffffff; background-image: url(assets/img/teaser-bg.jpg); 
				background-repeat: no-repeat;
				background-position: top left;
				background-size: auto 100% ;
				position: relative;

				/*** Tablet ***/
				@media (max-width: 960px) {
					background-position: -30% top;
				}

				/*** mobile ***/
				@media (max-width: 640px) {
					background-position: -50% top;
				}


				.uk-grid {
					min-height: 150px; overflow: auto;

					/*** mobile ***/
					@media (max-width: 640px) {
						min-height: 120px;
					}
				}


				.teaser-content { 
					text-align: left; 

					/*** mobile ***/
					@media (max-width: 640px) {
						/*height: 150px;*/
						/*left: 10px;*/
					}
				}

				h3{
					margin: 0; font-size: 32px;line-height: 1.1em;

					/*** mobile ***/
					@media (max-width: 640px) {
						font-size: 20px;
					}
				}

				h4{
					margin: 0; text-transform: uppercase;
					font-size: 16px; font-weight: 700;
					line-height: 1.2em;

					/*** mobile ***/
					@media (max-width: 640px) {
						display: none;
					}
	    		}

	    		.main-model {
	    			left: 150px; bottom: 0; overflow: auto !important;
	    			object-fit: contain; position: absolute; height: 200px; z-index: 9;
	    			background-image: url('assets/img/btn-animation.webp');
	    			background-repeat: no-repeat;
	    			background-size: contain;
	    			background-position: bottom;

					/*** Tablet ***/
					@media (max-width: 960px) {
						left: 40px;
					}

					/*** mobile ***/
					@media (max-width: 640px) {
						height: 150px;
						left: 10px;
					}
	    		}
	    		.button {
					max-width: 300px; height: 60px; font-size: 1.2em;

					/*** mobile ***/
					@media (max-width: 640px) {
						font-size: 14px;
						padding: 5px;
						height: 35px;
					}
				}

			}


			#teaser-mobile {

				margin: 10px; background-color: #f4f3f3; border-radius: 15px; padding: 10px 20px;

				.uk-grid-small { margin: 10px auto;}

				.thumb-banner {
					/*aspect-ratio: 1 / 1;*/
					width: 100px; height: 100px; 
					background-size: cover; background-position: top center; 
					overflow: hidden; border: 2px solid #fff; border-radius: 10px;
					position: relative;

					img {
  						position: absolute;
  						top: 0;
  						left: 50%;
						height: 120%;
						width: auto;
						transform: translateX(-50%);
					}
				}

				h3{
					margin: 0; 
					line-height: 1.1em;
					font-size: 20px;
					text-align: left;

				}

				h4{
					text-align: left;
					margin: 0; text-transform: uppercase;
					font-size: 14px; font-weight: 500;
					line-height: 1.2em;
					color: #888;
	    		}


			}

		}

		.uk-modal { background: rgba(0,0,0,0.8); }
		.uk-modal-dialog{
			border-radius: 22px;
			width: 500px;
		
			&:before{
				inset: -4px;
				position: absolute;
				z-index: -1;
				border-radius: 22px;
				border: 1px solid transparent;
				background: 
					radial-gradient( 73% 100% at 50% 100%, rgb(207 181 151), rgb(124 102 78) ) padding-box,
					linear-gradient( 282deg, rgb(195 135 65) 4%, rgb(241 208 169) 44%, rgb(248 231 212) 67%, rgb(210 153 86) ) border-box;
				content: "";
				box-sizing: border-box;
			}
			.uk-close {
				transform: scale(1.5);
				top: 22px;
				right: 65px;

				svg line{color: rgb(99, 91, 91); stroke-width: 3px; }
				&:hover svg line{color: #a09696; }

			}

			.uk-modal-body{
				position: relative;
				border-radius: 18px;
				border: 1px solid #fff;
				background-color: #fff;
				z-index: 999;
				background-image: radial-gradient( 105% 89% at 50% 100%, rgb(255 255 255), rgb(250 239 226) 50%, rgb(217 212 212) );
				box-shadow: 0 20px 60px rgb(218 163 98 / .4), 0 6px 16px rgb(0 0 0 / .1);
				padding: 22px 65px;


				h3, p { color:#000; }


				p { font-size:  2em;  font-weight: 400;}
				p span { font-weight: 700; }


				hr {
					height: 1px;
					border: 0;
					border-bottom: 1px solid transparent;
					border-image: linear-gradient( 90deg, rgb(180 169 169 / 0), rgb(180 169 169) 50%, rgb(180 169 169 / 0) );
					/* gradient as border image */
					border-image-source: linear-gradient(90deg,
						rgba(180,169,169,0),
						rgba(180,169,169,1) 50%,
						rgba(180,169,169,0)
					);
					border-image-slice: 1;
				}

				ul {
					list-style: none;
					padding: 0;

					li {
						display: flex;
						gap: 8px;
						padding-block: 16px;
						border-bottom: 1px solid transparent;
						border-image: linear-gradient( 90deg, rgb(180 169 169 / 0), rgb(180 169 169) 50%, rgb(180 169 169 / 0) );
						/* gradient as border image */
						border-image-source: linear-gradient(90deg,
							rgba(180,169,169,0),
							rgba(180,169,169,1) 50%,
							rgba(180,169,169,0)
						);
						border-image-slice: 1;

						img.flag { border:1px solid #fff; border-radius: 6px; width: 25px; height: 25px; overflow: hidden; object-fit: cover;}

						div.language-details {
							display: flex;
							flex-direction: column;
							gap: 12px;

							h4 { color: #222; font-size:14px; font-weight:600; font-style:italic; margin: 0}

							> div {
								display: flex;
								flex-wrap: wrap;
								gap: 8px;
							}

							button {
								background: #fff;
								border-radius: 12px;
								border: 1px solid transparent;
								font-size: 16px;
								line-height: 1.4;
								color: #635b5b;
								box-shadow: 0 1px 8px rgb(69 63 63 / .15);
								display: inline-grid;
								grid-auto-flow: column;
								text-decoration: none;
								padding: 5px 7px;
								cursor: pointer;

								&:hover {
									color: #c38741;
								}

								&:active, &.active {
									color: #161414;
									border-color: #161414;
								}
								img {
									box-sizing: border-box;
									width: 12px;
									height: 12px;
								}

								.uk-icon {
									margin-right: 5px;

									svg polyline{color: rgb(0, 0, 0); stroke-width: 2px; }
								}

							}
						}

					}

				}
			}

		}
	</style>

<script>


init.site = {

	"language": "English",
	"language_code": "en",
	
	"images": {
		"thumbnail": "thumbnail.jpg",
		"promo_banner": "promo-banner.jpg",
		"teaser_main": "teaser_banner.jpg",
		"teaser_bg": "teaser_bg.jpg"
	},

	"promo": {
		"title": "200% up to %__USD_10__% + 60 FS +1 bonus crab xx",
		"description": "<s>100% up to </s><b>%__USD_12__%</b> + 60 FS +12 bonus crab",
		"cta": [
			{
				"text": "Claim %__USD_12__%",
				"link": "#link-1"
			},
			// {
			// 	"text": "cta 2",
			// 	"link": "#link-2"
			// },
		]
	},

	
	"teaser": [{
		"title": "Promo Title",
		"description": "Promo Description",
		"cta": "Join Now!",
	}],

	"tnc": {
		"title": "Terms and ConditionsNEW",
		"show_more": "Show more",
		"show_less": "Show less",
	},

	"section": {
		"title": "Rewards",
		"cards": [
			{
				"title": "xChallenges",
				"description": "1,500 Coins!",
				"link": "#card-1",
				"size": "uk-width-1-2 ",
				"image": "assets/img/challenge-icon.png",
				"image_desktop": "assets/img/challenge-desktop-icon.png",
			},
			{
				"title": "xWheel of Fortune",
				"description": "30,000RM rewards!",
				"link": "#card-2",
				"size": "uk-width-1-2 ",
				"image": "assets/img/wheel-offortune-icon.png",
				"image_desktop": "assets/img/wheel-offortune-desktop.png",
			},
			{
				"title": "xTournaments",
				"description": "Win 200,000,000RM!",
				"link": "#card-3",
				"size": "uk-width-1-3@m uk-width-1-1",
				"image": "assets/img/tournaments-icon.png",
				"image_desktop": "assets/img/tournaments-icon-desktop.png",
			},
			{
				"title": "xBonus Crab",
				"description": "Grab 800,000RM!",
				"link": "#card-4",
				"size": "uk-width-1-3@m uk-width-1-2",
				"image": "assets/img/bonus-crab-icon.png",
				"image_desktop": "assets/img/bonus-crab-icon-desktop.png",
			},
			{
				"title": "xCollections",
				"description": "Claim 35,000RM!",
				"link": "#card-5",
				"size": "uk-width-1-3@m uk-width-1-2",
				"image": "assets/img/collections-icon.png",
				"image_desktop": "assets/img/collections-icon-desktop.png",
			},
		]
	},

	"footer": {
		"dark-buttons": [
			{
				"attr": "uk-toggle",
				"icon": "assets/img/en.png",
				"link": "#language",
				"text": "English",
			},
			{
				"attr": " uk-toggle new-list",
				"link": "#help",
				"icon": "assets/img/icon-view-box.svg",
				"text": "Help Centre",
			},
			{
				"attr": " uk-toggle new-list",
				"link": "#help",
				"icon": "assets/img/icon-view-box.svg",
				"text": "Help Centre",
			},
			
		],
		"links": [
			{
				"text": "Home",
				"link": "#Home",
			},
			{
				"text": "Casino",
				"link": "#Casino",
			},
			{
				"text": "Live Casino",
				"link": "#Live-Casino",
			},
			{
				"text": "Fishing",
				"link": "#Fishing",
			},
			/** {
				"text": "Jackpots",
				"link": "#Jackpots",
			},
			{
				"text": "P2P",
				"link": "#P2P",
			},
			{
				"text": "Fast Games",
				"link": "#Fast-Games",
			},
			{
				"text": "Sports",
				"link": "#Sports",
			},
			{
				"text": "Lottery",
				"link": "#Lottery",
			}, **/
		],
		"payments": [
			{
				"code": "visa",
				"icon": "assets/img/visa-icon.svg",
			},
			{
				"code": "master",
				"icon": "assets/img/mastercard-icon.png",
			},
			{
				"code": "ecopayz",
				"icon": "assets/img/ecopayz.svg",
			},
			{
				"code": "astropay",
				"icon": "assets/img/astropay.svg",
			},

		],
		"captions": {
			"license": "License",
			"payment_more": "More payment",
			"game_addition": "Gambling can be addictive. Play responsibly. LONGFU88.com accepts customers only over 18 years of age.",
			"copyright": "2019-2021 © LONGFU88.com All rights reserved. "
		},

	}
}


// apply user language selection
init.site = siteContent[USER_LANGUAGE];

// init.site.terms_and_condition = `
// 	<li>This offer is available for XX hours, expiring at the stated time on ‘My Bonuses’ section</li>
// 	<li>Reload Bonus is 200% up to %__USD_30__%</li>
// 	<li>Reload Bonus minimum deposit: %__USD_10__%</li>
// 	<li>Reload Bonus wagering requirements: 30x deposit + bonus</li>
// 	<li>Maximum bet: %__USD_5__%</li>
// 	<li>Bonus will be credited automatically once activated from ‘My Bonuses’ section</li>
// 	<li>Reload Bonus wagering requirements must be met within the ‘Expiration Date’ stated on the bonus</li>
// 	<li><a href="#">General terms and conditions apply</a></li>
// 	<li>18+ Eligible Players only</li>
// `;

init.site.currency = {

	"usd": {
		"text": "USD",
		"symbol": "$",
		"caption": "%__{SYMBOL}__%%__{AMOUNT}__%", // $10 - result
	},
	"cny": {
		"text": "CNY",
		"symbol": "¥",
		"caption": "%__{AMOUNT}__%%__{SYMBOL}__%", // 10 CNY - result
	},
	"thb": {
		"text": "THB",
		"symbol": "฿",
		"caption": "%__{TEXT}__% %__{AMOUNT}__%", // 10 CNY - result
	},
	"vnd": {
		"text": "VND",
		"symbol": "₫",
		"caption": "%__{TEXT}__% %__{AMOUNT}__%", // 10 CNY - result
	},
	"myr": {
		"text": "MYR",
		"symbol": "RM",
		"caption": "%__{TEXT}__% %__{AMOUNT}__%", // 10 CNY - result
	},
	"idr": {
		"text": "IDR",
		"symbol": "Rp",
		"caption": "%__{TEXT}__% %__{AMOUNT}__%", // 10 CNY - result
	},
	"sgd": {
		"text": "SGD",
		"symbol": "$",
		"caption": "%__{TEXT}__% %__{AMOUNT}__%", // 10 CNY - result
	},
}

// currency table
//

init.site.currency_table = {

	"USD_3": {
		"amount": 3,
		"currency": "usd",
		"convert": {
			"thb": 97.23,
			"vnd": '79,131',
			"myr": 12.45,
			"idr": '50,166',
			"sgd": 3.912,
		}
	},
	"USD_5": {
		"amount": 5,
		"currency": "usd",
		"convert": {
			"thb": 162.05,
			"vnd": '131,885',
			"myr": 20.75,
			"idr": 83610,
			"sgd": 6.52,
		}
	},
	"USD_10": {
		"amount": 10,
		"currency": "usd",
		"convert": {
			"thb": 324.1,
			"vnd": '263,770',
			"myr": 41.5,
			"idr": '167,220',
			"sgd": 13.04,
		}
	},
	"USD_12": {
		"amount": 12,
		"currency": "usd",
		"convert": {
			"thb": 388.92,
			"vnd": '316,524',
			"myr": 49.8,
			"idr": '200,664',
			"sgd": 15.648,
		}
	},
	"USD_30": {
		"amount": 30,
		"currency": "usd",
		"convert": {
			"thb": 388.92,
			"vnd": '316,524',
			"myr": 49.8,
			"idr": '200,664',
			"sgd": 15.648,
		}
	},
	"USD_720": {
		"amount": 720,
		"currency": "usd",
		"convert": {
			"thb": '23,335.2',
			"vnd": '18,991,440',
			"myr": '2,988',
			"idr": '12,039,840',
			"sgd": 938.88,
		}
	},
	

}

</script>
</head>
<body>

	<header>
		<div class="uk-container">

			<nav id="navbar" uk-navbar>
				<div class="uk-navbar-left">
					<a class="uk-navbar-item uk-logo" href="#" title="Logo"><img src="assets/img/logo.svg" alt="Logo"></a>
				</div>

				<div class="uk-navbar-right nav-overlay">
					
					<ul class="uk-navbar-nav">
						<li>
							<a class="uk-button uk-button-default" href="#modal-language" uk-toggle>
								<img src="assets/img/en.png" class="user-flag"> <span class="user-lang">EN</span>
							</a>
						</li>
			        </ul>

				</div>
			</nav>

			</div>
		</div>
	</header>

	<section class="uk-section" id="promo-banner">
		<div class="uk-container uk-child-width-1-2@m uk-child-width-1-1 uk-margin-auto" uk-grid style="border: 2px solid #f00;">

			<div class="uk-flex uk-flex-middle" style="border: 2px solid #f00;">
				<div style="border: 2px solid #f00;" class=" uk-flex">
					<h3>Join us a partner of Longfu today!</h3>
					<h1>Enjoy commisions up to 50%</h1>
				</div>
			</div>
			<div uk-parallax="bgy: -100" style="background-image: url('assets/b2.png?a');">

			</div>
			
		</div>

	</section>

	<section class="uk-section" id="promo-content">
		<div class="uk-container uk-container-small " uk-scrollspy="target: > h2, > h1, > div ; cls: uk-animation-slide-top-medium; delay: 200">
			<h1 data-text="promo[title]" class="uk-text-uppercase">Promo Description</h1>
			<h2 data-text="promo[description]">Promo Title</h2>

			<div class="primary-cta">
				<div><a href="#modal-result" class="button primary" data-text="promo[primary]" uk-toggle>TEST</a></div>
			</div>
		</div>
	</section>

	<section class="uk-section" id="tnc_container">
		<div class="uk-container uk-container-small" uk-scrollspy="target: > h3, > div ; cls: uk-animation-slide-top-medium; delay: 200">
			<h3 class="uk-text-center" data-text="tnc[title]">Terms & Conditions</h3>


			<div id="terms-and-conditions" class="uk-container uk-container-xsmall uk-overflow-hidden uk-position-relative">
				<ol class="uk-list uk-list-decimal uk-margin-remove tnc-content" data-text="terms_and_condition" >
					<li><a href="#">General terms and conditions apply</a></li>
					<li>18+ Eligible Players only</li>
				</ol>
				<div class="fade-overlay"></div>
			</div>


			<div class="uk-text-center uk-margin-small-top">
    			<a id="show_tnc" class="uk-text-bold uk-link-toggle" href="#" uk-toggle="target: #show_tnc .show_more, #show_tnc .show_less; cls: uk-hidden;">

      				<span data-text="tnc[show_more]" class="show_more">more</span>
      				<span data-text="tnc[show_less]" class="show_less uk-hidden">less</span>
      				<img src="assets/img/arrows.svg">
    			</a>
  			</div>

		</div>
	</section>
	
	<section class="uk-section uk-padding-remove-bottom  uk-hidden" id="blocks" uk-parallax="y: -10, 0">
		<div class="uk-container">
			<h3 class="uk-text-italic" data-text="section[title]">Section</h3>

			<div class="uk-position-relative uk-child-width-1-3 uk-grid-small block-container" data-text="section[cards]" uk-grid uk-scrollspy="target: > div ; cls: uk-animation-slide-top-medium; delay: 180">

				<div class="uk-width-1-2">
					<div class="item-block">
						<p>
							<span>Card</span>
							Card description
						</p>

						<img src="assets/img/challenge-desktop-icon.png" class="uk-position-bottom-right uk-visible@m">
						<img src="assets/img/challenge-icon.png" class="mobile-icon uk-position-bottom-right uk-hidden@m">
					</div>
				</div>

				<div class="uk-width-1-2">
					<div class="item-block">
						<p>
							<span>Card</span>
							Card description
						</p>
						<img src="assets/img/wheel-offortune-desktop.png" class="uk-position-bottom-right uk-visible@m">
						<img src="assets/img/wheel-offortune-icon.png" class="mobile-icon uk-position-bottom-right uk-hidden@m">
					</div>
				</div>
				
				<div class="uk-width-1-3@m uk-width-1-1">
					<div class="item-block">
						<p>
							<span>Card</span>
							Card description
						</p>

						<img src="assets/img/tournaments-icon-desktop.png" class="uk-position-bottom-right uk-visible@m">
						<img src="assets/img/tournaments-icon.png" class="mobile-icon uk-position-bottom-right uk-hidden@m">
					</div>
				</div>

				<div class="uk-width-1-3@m uk-width-1-2">
					<div class="item-block">
						<p>
							<span>Card</span>
							Card description
						</p>

						<img src="assets/img/bonus-crab-icon-desktop.png" class="uk-position-bottom-right uk-visible@m">
						<img src="assets/img/bonus-crab-icon.png" class="mobile-icon uk-position-bottom-right uk-hidden@m">
					</div>
				</div>

				<div class="uk-width-1-3@m uk-width-1-2">
					<div class="item-block">
						<p>
							<span>Card</span>
							Card description
						</p>

						<img src="assets/img/collections-icon-desktop.png" class="uk-position-bottom-right uk-visible@m">
						<img src="assets/img/collections-icon.png" class="mobile-icon uk-position-bottom-right uk-hidden@m">
					</div>
				</div>
				
			</div>


		</div>
	</section>

	<footer>
		<div id="footer" class="uk-container">

			<div class="dark-button uk-hidden" data-text="footer[dark-buttons]">
				<a class="button dark" href="#modal-language" uk-toggle>
					<img src="assets/img/en.png"> English
				</a>

				<a href="#" class="button dark">
					<img src="assets/img/icon-view-box.svg"> Help Centre
				</a>
			</div>

			<div class="links-container  uk-hidden">
				<ul class="links" data-text="footer[links]" uk-scrollspy="target: > li ; cls: uk-animation-slide-top-medium; delay: 100"> 
					<li><a href="#">Home</a></li>
					<li><a href="#">Casino</a></li>
					<li><a href="#">Live Casino</a></li>
					<li><a href="#">Fishing</a></li>
					<li><a href="#">Jackpots</a></li>
					<li><a href="#">P2P</a></li>
					<li><a href="#">Fast Games</a></li>
					<li><a href="#">Sports</a></li>
					<li><a href="#">Lottery</a></li>
				</ul>
			</div>
				
			<div class="payments uk-margin-small  uk-hidden" data-text="footer[payments]">
				<button><img src="assets/img/visa-icon.svg"></button>
				<button><img src="assets/img/mastercard-icon.png"></button>
				<a href="#"> More <img src="assets/img/arrows.svg"> </a>
			</div>


			<div class="copyrights">
				<p>
					<img src="assets/img/18plus.svg">
				</p>

				<p data-caption="game_addition" class="uk-margin-small-top">
					Gambling can be addictive. Play responsibly. LONGFU88.com accepts customers only over 18 years of age.
				</p>
				<p data-caption="copyright">
					2019-2025 © LONGFU88.com All rights reserved. 
				</p>
				
			</div>

		</div>
	</footer>



<div id="modal-result" class="uk-flex-top" uk-modal="bg-close: false; esc-close: false;" style="overflow: hidden;">

<video autoplay="autoplay" loop="loop" muted="muted" playsinline="" preload="auto" class="uk-hiddenx game__win-video" style="mix-blend-mode:plus-lighter; -webkit-tap-highlight-color: rgba(0,0,0,0); position: absolute; top: 0 ; left: 0; ">
	<source src="https://rabona.com/simg/landings/rabona-new/rbnn16cm/video.mp4" type="video/mp4" codecs="hevc">
</video>

    <div class="uk-modal-dialog uk-margin-auto-vertical">
	    <div class="uk-modal-body uk-text-center">

	    	<h3 class="uk-text-italic">You won</h3>

	    	<p>
	    		
	    		lorem ipsum sit <span>test result </span>dolor amet
	    	</p>

<hr>



<a href="#promo-banner" class="button primary active uk-width-expand" data-text="promo[button-claim]" >Mobile CTA!</a>



	    </div>
    </div>
</div>


<div id="modal-language" class="uk-flex-top" uk-modal="bg-close: false; esc-close: false;">
    <div class="uk-modal-dialog uk-margin-auto-vertical">
	    <div class="uk-modal-body">

	    	<h3 class="uk-text-italic">Region and Language</h3>
	        <button class="uk-modal-close-default" type="button" uk-close style="stroke: blue;stroke-width: 3px !important;"></button>

	        <ul class="language-list">
	        	<li> 
	        		<img src="assets/img/th-flag.svg" class="flag">
	        		<div class="language-details">
	        			<h4>Thailand</h4>

	        			<div data-country="th">
		        			<button type="button" class="lang-toggle font-regular" data-href="?currency=thb&lang=en" data-lang="en">
		        				English
		        			</button>
		        			<button type="button" class="lang-toggle font-regular" data-href="?currency=thb&lang=th" data-lang="th">
		        				 ภาษาไทย 
		        			</button>
	        			</div>
	        		</div>
	        	</li>

	        	<li> 
	        		<img src="assets/img/vn-flag.svg" class="flag">
	        		<div class="language-details">
	        			<h4>Vietnam</h4>

	        			<div data-country="vn">
		        			<button type="button" class="lang-toggle font-regular" data-href="?currency=vnd&lang=en" data-lang="en">
		        				English
		        			</button>
		        			<button type="button" class="lang-toggle font-regular" data-href="?currency=vnd&lang=vn" data-lang="vn">
		        				Tiếng Việt 
		        			</button>
	        			</div>
	        		</div>
	        	</li>

	        	<li> 
	        		<img src="assets/img/my-flag.svg" class="flag">
	        		<div class="language-details">
	        			<h4>Malaysia</h4>

	        			<div data-country="my">
		        			<button type="button" class="lang-toggle font-regular" data-href="?currency=myr&lang=en" data-lang="en">
		        				English
		        			</button>
		        			<button type="button" class="lang-toggle font-regular" data-href="?currency=myr&lang=cn" data-lang="cn">
		        				官話  
		        			</button>
	        			</div>
	        		</div>
	        	</li>

	        	<li> 
	        		<img src="assets/img/id-flag.svg" class="flag">
	        		<div class="language-details">
	        			<h4>Indonesia</h4>

	        			<div data-country="id">
		        			<button type="button" class="lang-toggle font-regular" data-href="?currency=idr&lang=en" data-lang="en">
		        				English
		        			</button>
		        			<button type="button" class="lang-toggle font-regular" data-href="?currency=idr&lang=id" data-lang="id">
		        				Bahasa Indonesia
		        			</button>
	        			</div>
	        		</div>
	        	</li>
	        </ul>
	    </div>
    </div>
</div>

	<!-- JS FILES -->
	<script src="assets/js/jquery-3.7.1.min.js"></script>
	<script src="assets/uikit-3.24.2/js/uikit.min.js"></script>
	<script src="assets/uikit-3.24.2/js/uikit-icons.min.js"></script>

	<script>

		// Usage
		/**
		detectCountryAndLanguage().then(info => {
		if (info) {
			

			console.log(info);


		}
		});

		**/

		window.addEventListener('scroll', () => {
			// const teaser = document.getElementById('teaser');
			// const triggerPoint = window.innerHeight * 0.5; // 80% of viewport height
			// if (window.scrollY > triggerPoint) {
			// 	teaser.classList.add('show');
			// } else {
			// 	teaser.classList.remove('show');
			// }
		});

		document.getElementById('show_tnc').addEventListener('click', function(e) {
  			// e.preventDefault();

			const termsBox = document.getElementById('terms-and-conditions');
			// const textSpan = this.querySelector('span:first-child');
			// const icon = this.querySelector('[uk-icon]');
			termsBox.classList.toggle('expanded');
		});



// set active langauge checked
const countryContainer = document.querySelector(`[data-country="${USER_COUNTRY}"]`);
if (countryContainer){
	const activeBtn = countryContainer.querySelector(`button[data-lang="${USER_LANGUAGE}"]`);
	if (activeBtn) {

		// Create the <span> element
		const icon = document.createElement('span');
		icon.setAttribute('uk-icon', 'icon: check;');

		// Prepend the icon to the button
		activeBtn.prepend(icon);
		activeBtn.classList.add("active");
	}
}




// Select all buttons inside ul > li
const buttons = document.querySelectorAll("ul.language-list li button");
buttons.forEach(button => {
	button.addEventListener("click", () => {

		// Find parent div with data-country
		const parentCountry = button.closest("[data-country]")?.dataset.country;

		console.log("Country:", parentCountry);
		const language = button.dataset.lang;   // data-language

		console.log("Language:", language);

		// return ;
		const url = button.dataset.href;
		if (url) window.location.href = url;


    // Get data attributes
    // const language = button.dataset.language;   // data-language
    // const currency = button.dataset.currency;   // data-currency

    // console.log("Button clicked:", button.textContent);
    // console.log("Language:", language);
    // console.log("Currency:", currency);

    // const button = e.target;
  });
});

		async function loadJSON() {
			try {
				const response = await fetch('assets/language/en.json');
				if (!response.ok) throw new Error('Network error');
				const data = await response.json();
				console.log('Loaded JSON:', data);
			} catch (error) {
				console.error('Error loading JSON:', error);
			}
		}
		// loadJSON();



// ** Text Replacement  - DYNAMIC **
$(document).ready(() => {


	// set flag and language
	$('.user-flag').attr('src', `assets/img/${USER_COUNTRY}-flag.svg`);
	$('.user-lang').html(init.site.language);
	// $('.user-lang').html(USER_LANGUAGE);
	// <img src="assets/img/en.png" class="user-flag"> <span class="user-lang">EN</span>


	const captions = init?.site || {};

	/**
	 * key: e.g. "usd_10"
	 * targetCurrency: optional, e.g. "cny"
	 */
	const convertAndFormatCurrency = async (key, targetCurrency = null) => {
		const table = init.site.currency_table;
		const types = init.site.currency;

		const data = table[key];
		if (!data) return null;

		let currencyCode = data.currency; // original currency
		let amount = data.amount;

		// If target currency exists in convert map, apply conversion
		if (targetCurrency && data.convert && data.convert[targetCurrency] != null) {
			amount = data.convert[targetCurrency];
			currencyCode = targetCurrency;
		}

		const type = types[currencyCode];
		if (!type) return null;

		const { text, symbol, caption } = type;

		// Replace placeholders in caption
		return caption
			.replace(/%__\{SYMBOL\}__%/g, symbol)
			.replace(/%__\{AMOUNT\}__%/g, amount)
			.replace(/%__\{TEXT\}__%/g, text);
	};

	// helper: safely get nested property by string like "promo[description]"
	const getNestedValue = (obj, keyPath) => {
		try {
			return keyPath
				.replace(/\]/g, "")
				.split("[")
				.reduce((o, k) => o?.[k], obj);
		} catch (e) {
			console.error(`❌ Error accessing keyPath "${keyPath}":`, e);
			return undefined;
		}
	};

	// handle CTA element
	const handleCTA = ($el, value) => {
		const $container = $el.closest(".action-btn"); // get the .action-btn container
		if (!$container.length) {
			console.warn("⚠️ .action-btn container not found for CTA");
			return;
		}

		// remove existing CTA links inside container
		$container.empty();

		if (Array.isArray(value)) {
			// multiple CTAs
			value.forEach(item => {
				// create the <a> element
				const $a = $("<a>")
					.attr("href", item.link || "#")
					.addClass("button primary")
					.text(item.text);

				// wrap <a> in a <div> and append to container
				$("<div>").append($a).appendTo($container);
			});

		} else {
			console.warn("⚠️ CTA should array");
		}

		$container.css("visibility", "visible");
	};

	// handle Footer dark buttons element
	const handlefooterdarkButtons = ($el, value) => {
		const $container = $el; // get the .action-btn container

		if (!$container.length) {
			console.warn("⚠️ .links container not found for footer");
			return;
		}

		// remove existing links inside container
		$container.empty();

		if (Array.isArray(value)) {

			value.forEach(item => {
				const $a = $("<a>")
				.addClass("button dark")
				.attr("href", item.link || "#");

				// Apply custom attributes (supports multiple)
				if (item.attr && item.attr.trim() !== "") {
					const attrs = item.attr.trim().split(/\s+/);  // split by spaces
					attrs.forEach(a => $a.attr(a, ""));           // boolean attribute
				}

				// Add icon
				if (item.icon) {
					$("<img>").attr("src", item.icon).appendTo($a);
				}

				// Add text
				if (item.text) {
					$a.append(document.createTextNode(item.text));
				}

				$container.append($a);
			});

		} else {
			console.warn("⚠️ Links should array");
		}

		$container.css("visibility", "visible");
	};

	// handle Footer Links element
	const handlefooterLinks = ($el, value) => {
		const $container = $el; // get the .action-btn container

		if (!$container.length) {
			console.warn("⚠️ .links container not found for footer");
			return;
		}

		// remove existing links inside container
		$container.empty();

		if (Array.isArray(value)) {
			// multiple CTAs
			value.forEach(item => {
				// create the <a> element
				const $a = $("<a>")
					.attr("href", item.link || "#")
					// .addClass("button primary")
					.text(item.text);

				// wrap <a> in a <div> and append to container
				$("<li>").append($a).appendTo($container);
			});

		} else {
			console.warn("⚠️ Links should array");
		}

		$container.css("visibility", "visible");
	};
  
	// handle Footer payment element
	const handlefooterPayment = ($el, value) => {
		const $container = $el; // get the .action-btn container

		if (!$container.length) {
			console.warn("⚠️ .links container not found for footer");
			return;
		}

		// remove existing links inside container
		$container.empty();

		if (Array.isArray(value)) {
			const caption_more = getNestedValue(captions, 'footer[captions][payment_more]');

			// multiple payment icon
			value.forEach(item => {
				const $a = $("<img>")
					.attr("src", item.icon || "#");
					// .addClass("button primary")
					// .text(item.text);

				// wrap <a> in a <div> and append to container
				$("<button>").append($a).appendTo($container);
			});

			$(`<a href="#"> ${caption_more} <img src="assets/img/arrows.svg"> </a>`).appendTo($container);
		} else {
			console.warn("⚠️ payment should array");
		}

		$container.css("visibility", "visible");
	};

	// handle blocks section
	const handleBlocks = ($el, value) => {

		// remove existing blocks inside container
		$el.empty();

		// Loop cards
		value.forEach((card) => {
			const $col = $("<div>").addClass(card.size || "uk-width-1-3");

			const $block = $(`
				<a href="${card.link}">
					<div class="item-block">
						<p>
							<span>${card.title}</span>
							${card.description}
						</p>
						<img src="${card.image_desktop}" class="uk-position-bottom-right uk-visible@m">
						<img src="${card.image}" class="mobile-icon uk-position-bottom-right uk-hidden@m">
					</div>
				</a>
			`);

			$block.appendTo($col);
			$el.append($col);
		});

		$el.css("visibility", "visible");
	};

	// handle footer text
	const handlefooterText = ($el, value) => {

		// remove existing blocks inside container
		$el.empty();

		// Example: log all keys and values
		for (const key in value) {
			// if (value.hasOwnProperty(key)) {
			console.log(key, value[key]);
			// }
		}

		$el.css("visibility", "visible");
	};

	// function handles
	const handlers = [
		{ match: "cta",           fn: handleCTA },
		{ match: "cards",         fn: handleBlocks },
		{ match: "dark-buttons",  fn: handlefooterdarkButtons },
		{ match: "links",         fn: handlefooterLinks },
		{ match: "payments",      fn: handlefooterPayment }
	];
	
	// dynamically update all elements
	$("[data-text]").each(function () {
		const $el = $(this);
		const keyPath = $el.attr("data-text");
		const value = getNestedValue(captions, keyPath);

		console.log(keyPath, value);

		if (value !== undefined) {
			const key = keyPath.toLowerCase();

			// Find the matching handler
			const handler = handlers.find(h => key.includes(h.match));

			if (handler) {
				handler.fn($el, value);
			} else {
				$el.html(value).css("visibility", "visible");
			}

		} else {
			console.warn(`⚠️ Value not found for data-text="${keyPath}"`);
		}
	});

	// dynamic text footer update
	const captionFooter = captions?.footer?.captions || {};
	$("[data-caption]").each(function () {
		const $el = $(this);
		const keyPath = $el.attr("data-caption");
		$el.html(captionFooter[keyPath]).css("visibility", "visible");
	});

	const replaceAllCurrencyPlaceholders = async () => {
		const walker = document.createTreeWalker(
			document.body,
			NodeFilter.SHOW_TEXT,
			null,
			false
		);

		const regex = /%__([a-z0-9_]+)__%/gi;
		let node;

		while ((node = walker.nextNode())) {
			const text = node.nodeValue;

			// Check if text contains placeholder
			if (regex.test(text)) {

				// Replace all matches asynchronously
				const newText = await text.replace(regex, async (match, key) => {
					// Call your async formatter/converter
					const formatted = await convertAndFormatCurrency(key, USER_CURRENCY);
					return formatted || match; // fallback to original
				});

				// Note: .replace with async inside doesn't await properly in JS, 
				// so we need a workaround using Promise.all for multiple matches
				const matches = [...text.matchAll(regex)];
				if (matches.length) {
					const promises = matches.map(async m => {
						const k = m[1];
						return await convertAndFormatCurrency(k, USER_CURRENCY) || m[0];
					});

					const results = await Promise.all(promises);

					// Reconstruct text replacing sequentially
					let updatedText = text;
					results.forEach((res, i) => {
						updatedText = updatedText.replace(matches[i][0], res);
					});

					node.nodeValue = updatedText;
				}
			}
		}
	};


	// Convert USD 10 to CNY
	replaceAllCurrencyPlaceholders();

});

	</script>
</body>
</html>