/* CSS Reset & Variable Zesty style */
.zesty-promo-container {
max-width: 800px;
margin: 60px auto;
padding: 20px;
text-align: center;
background-color: #fff;
font-family: ‘Playfair Display’, serif;
}

/* Hiệu ứng Unboxing Gift Box */
.gift-wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 40px auto;
cursor: pointer;
perspective: 1000px;
}

.gift-box {
position: absolute;
width: 100%;
height: 100%;
background-color: #ffb0b6;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(255,176,182,0.4);
transition: transform 0.6s ease;
transform-style: preserve-3d;
}

/* Nắp hộp quà */
.gift-lid {
position: absolute;
top: -20px;
left: -10px;
width: 220px;
height: 40px;
background-color: #ff919a;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
z-index: 10;
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-origin: left bottom;
}

/* Ruy băng & Nơ */
.gift-ribbon-v {
position: absolute;
top: 0;
left: 90px;
width: 20px;
height: 100%;
background-color: #ffe57b;
z-index: 5;
}
.gift-ribbon-h {
position: absolute;
top: 90px;
left: 0;
width: 100%;
height: 20px;
background-color: #ffe57b;
z-index: 5;
}

.gift-bow {
position: absolute;
top: -45px;
left: 70px;
width: 60px;
height: 30px;
z-index: 12;
transition: transform 0.8s ease;
}
.gift-bow::before, .gift-bow::after {
content: “”;
position: absolute;
width: 30px;
height: 30px;
border: 5px solid #ffe57b;
border-radius: 50% 50% 0 50%;
background-color: transparent;
}
.gift-bow::before {
transform: rotate(45deg);
left: -5px;
}
.gift-bow::after {
transform: rotate(-45deg) scaleX(-1);
right: -5px;
}

/* Trạng thái mở hộp */
.gift-wrapper.opened .gift-lid {
transform: translateY(-80px) rotate(-35deg) scale(0.9);
opacity: 0;
}
.gift-wrapper.opened .gift-bow {
transform: translateY(-100px) rotate(45deg);
opacity: 0;
}
.gift-wrapper.opened .gift-box {
transform: scale(0.95);
background-color: #fef3ee;
}

/* Nội dung thiệp chứa voucher */
.voucher-card {
opacity: 0;
transform: scale(0.6) translateY(50px);
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background-color: #fef3ee;
border: 2px dashed #ffb0b6;
border-radius: 20px;
padding: 40px 30px;
max-width: 500px;
margin: 0 auto;
box-shadow: 0 10px 25px rgba(255,176,182,0.15);
display: none;
}

.zesty-promo-container.show-voucher .voucher-card {
display: block;
opacity: 1;
transform: scale(1) translateY(0);
}

.zesty-promo-container.show-voucher #unboxing-prompt {
display: none;
}
.zesty-promo-container.show-voucher .gift-wrapper {
display: none;
}

/* Pháo hoa giấy confetti bay ra */
.confetti {
position: absolute;
width: 10px;
height: 10px;
background-color: #ffb0b6;
border-radius: 50%;
opacity: 0;
z-index: 100;
}

document.addEventListener(‘DOMContentLoaded’, function() {
var gift = document.getElementById(‘zesty-gift-box’);
var app = document.getElementById(‘zesty-promo-app’);
var voucher = document.getElementById(‘zesty-voucher-card’);
var btnCopy = document.getElementById(‘zesty-btn-copy’);

// 1. Kiểm tra Token và SĐT
var urlParams = new URLSearchParams(window.location.search);
var token = urlParams.get(‘token’);
var phone = urlParams.get(‘phone’);

// Nếu đã đăng ký ở máy này rồi thì hiển thị luôn voucher
var isRegistered = localStorage.getItem(‘zesty_phone_registered’);

if (!token && !phone && !isRegistered) {
// Nếu không có token/phone và chưa từng đăng ký ở máy này, redirect về trang chủ
window.location.href = ‘/’;
return;
}

if (isRegistered) {
// Đã nhận voucher, bỏ qua unboxing hiện thẳng voucher
app.classList.add(‘show-voucher’);
}

// 2. Xử lý click mở hộp quà
gift.addEventListener(‘click’, function() {
if (gift.classList.contains(‘opened’)) return;

gift.classList.add(‘opened’);

// Tạo pháo hoa giấy confetti
createConfetti();

// Hiện thiệp voucher sau 800ms
setTimeout(function() {
app.classList.add(‘show-voucher’);
}, 800);
});

// 3. Xử lý Copy mã
btnCopy.addEventListener(‘click’, function() {
var tempInput = document.createElement(‘input’);
tempInput.value = ‘ZESTY10’;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand(‘copy’);
document.body.removeChild(tempInput);

btnCopy.textContent = ‘Đã Sao Chép! ✓’;
btnCopy.style.backgroundColor = ‘#ffb0b6’;
btnCopy.style.color = ‘#fff’;

setTimeout(function() {
btnCopy.textContent = ‘Sao Chép Mã’;
btnCopy.style.backgroundColor = ‘#fef3ee’;
btnCopy.style.color = ‘#ff6b75’;
}, 2000);
});

function createConfetti() {
var colors = [‘#ffb0b6’, ‘#ffe57b’, ‘#ff6b75’, ‘#8cd3ff’, ‘#a2fba6’];
for (var i = 0; i < 40; i++) {
var conf = document.createElement('div');
conf.className = 'confetti';
conf.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
conf.style.left = (gift.offsetLeft + gift.offsetWidth / 2) + 'px';
conf.style.top = (gift.offsetTop + gift.offsetHeight / 2) + 'px';
document.body.appendChild(conf);

var angle = Math.random() * Math.PI * 2;
var velocity = 5 + Math.random() * 10;
var x = Math.cos(angle) * velocity * 20;
var y = Math.sin(angle) * velocity * 20 – 150; // Bay lên cao hơn

animateConfetti(conf, x, y);
}
}

function animateConfetti(element, targetX, targetY) {
var startX = parseFloat(element.style.left);
var startY = parseFloat(element.style.top);
var currentX = startX;
var currentY = startY;
var opacity = 1;
var scale = 0.5 + Math.random() * 1.5;

var interval = setInterval(function() {
currentX += targetX / 20;
currentY += targetY / 20 + 2; // Rơi xuống do trọng lực
opacity -= 0.04;

element.style.left = currentX + 'px';
element.style.top = currentY + 'px';
element.style.opacity = opacity;
element.style.transform = 'scale(' + scale + ') rotate(' + (currentY * 2) + 'deg)';

if (opacity <= 0) {
clearInterval(interval);
element.remove();
}
}, 30);
}
});