  
    
};
}
const gogDiscount = getBracketDiscount(config.brackets.gogglesoc,
state.gogSpend);
const phunkshunDiscount =
getBracketDiscount(config.brackets.phunkshun, state.phunkshunSpend);
const totalDiscount = gogDiscount + phunkshunDiscount;
const discountAmount = subtotal * (totalDiscount / 100);
const perkValue =
(hasPerk(config.brackets.gogglesoc, state.gogSpend) ?
config.perkRetail.pw10 : 0) +
(hasPerk(config.brackets.phunkshun, state.phunkshunSpend) ?
config.perkRetail.gog40 : 0);
const finalTotal = subtotal - discountAmount;
const effectiveDiscount = subtotal > 0
? totalDiscount + ((perkValue / subtotal) * 100)
: 0;
return {
subtotal,
gogDiscount,
phunkshunDiscount,
totalDiscount,
discountAmount,
perkValue,
finalTotal,
effectiveDiscount,
};
}
// UI Update Functions
function updateStickyMetrics() {
const totals = calculateTotals();
const currency = state.currency;
document.getElementById('sticky-final-total').textContent =
formatMoney(totals.finalTotal, currency);
document.getElementById('sticky-savings').textContent =
formatMoney(totals.discountAmount, currency);
document.getElementById('sticky-discount-pct').textContent = `$
{totals.totalDiscount.toFixed(1)}% off`;
document.getElementById('sticky-perk-value').textContent =
formatMoney(totals.perkValue, currency);
}
function updateOrderSummary() {
const totals = calculateTotals();
const currency = state.currency;
document.getElementById('summary-subtotal').textContent =
formatMoney(totals.subtotal, currency);
document.getElementById('summary-discount-pct').textContent = `$
{totals.totalDiscount.toFixed(1)}%`;
document.getElementById('summary-discount-amount').textContent
= `-${formatMoney(totals.discountAmount, currency)}`;
document.getElementById('summary-perk-value').textContent = `+$
{formatMoney(totals.perkValue, currency)}`;
document.getElementById('summary-final-total').textContent =
formatMoney(totals.finalTotal, currency);
document.getElementById('summary-effective-
discount').textContent = `${totals.effectiveDiscount.toFixed(1)}%`;
}
function updateBrandCard(brand) {
const config = CONFIG[state.currency];
const spend = brand === 'gogglesoc' ? state.gogSpend :
state.phunkshunSpend;
const brackets = config.brackets[brand];
const discount = getBracketDiscount(brackets, spend);
const currentPerk = hasPerk(brackets, spend);
const perkValue = brand === 'gogglesoc' ? config.perkRetail.pw10 :
config.perkRetail.gog40;
// Update totals
document.getElementById(`${brand}-total`).textContent =
formatMoney(spend, state.currency);
document.getElementById(`${brand}-discount`).textContent = `$
{discount}%`;
// Update progress text
const nextBracket = brackets.find(b => spend < b.min);
const progressElement = document.getElementById(`${brand}-
progress`);
if (nextBracket && spend > 0) {
const needed = nextBracket.min - spend;
const currentBracket = brackets.find(b => spend >= b.min &&
spend <= b.max);
const isGoingForPerk = currentBracket && currentBracket.pct
=== nextBracket.pct && nextBracket.perk;
if (isGoingForPerk) {
progressElement.textContent = `You are $
{formatMoney(needed, state.currency)} away from FREE ${brand ===
'gogglesoc' ? 'Phunkshun Wear' : 'gogglesoc'} products!`;
} else {
progressElement.textContent = `You are $
{formatMoney(needed, state.currency)} away from ${nextBracket.pct}%
discount!`;
}
} else if (!nextBracket && spend > 0) {
progressElement.textContent = '🇺🇸 Maximum discount achieved!';
} else {
progressElement.textContent = '';
}
// Update progress tracker
updateProgressTracker(brand, spend, brackets);
// Update brackets display
updateBracketsDisplay(brand, spend, brackets, perkValue);
// Update perk alert
const perkElement = document.getElementById(`${brand}-perk`);
const perkValueElement = document.getElementById(`${brand}-
perk-value`);
if (currentPerk) {
perkElement.classList.remove('hidden');
perkValueElement.textContent = `Retail value: $
{formatMoney(perkValue, state.currency)}`;
} else {
perkElement.classList.add('hidden');
}
// Update currency symbols
document.getElementById(`${brand}-symbol`).textContent =
CONFIG[state.currency].symbol;
}
function updateProgressTracker(brand, spend, brackets) {
const progressContent = document.getElementById(`${brand}-
progress-content`);
const currentDiscount = document.getElementById(`${brand}-
current-discount`);
const discount = getBracketDiscount(brackets, spend);
currentDiscount.textContent = `${discount}% current`;
const nextBracket = brackets.find(b => spend < b.min);
if (!nextBracket) {
progressContent.innerHTML = `
🇺🇸 You've
reached maximum discount!
You're getting the
best discount rate

`;
return;
}
const currentBracket = brackets.find(b => spend >= b.min &&
spend <= b.max);
const needed = nextBracket.min - spend;
const progress = currentBracket
? ((spend - currentBracket.min) / (nextBracket.min -
currentBracket.min)) * 100
: 0;
const isGoingForPerk = currentBracket && currentBracket.pct ===
nextBracket.pct && nextBracket.perk;
progressContent.innerHTML = `

Current: $
{formatMoney(spend, state.currency)}

${formatMoney(needed, state.currency)} away from ${
isGoingForPerk
? `FREE ${brand === 'gogglesoc' ? 'Phunkshun
Wear' : 'gogglesoc'} products`
: `${nextBracket.pct}% discount`
}


`;
}
function updateBracketsDisplay(brand, spend, brackets, perkValue) {
const bracketsContainer = document.getElementById(`${brand}-
brackets-list`);
bracketsContainer.innerHTML = brackets.map((bracket, idx) => {
const isActive = spend >= bracket.min && spend <=
bracket.max;
const isLastBracket = bracket.max === Infinity;
return `

${isLastBracket
? `More than ${formatMoney(bracket.min,
state.currency)}`
: `${formatMoney(bracket.min, state.currency)} - $
{formatMoney(bracket.max, state.currency)}`
}

${bracket.pct}%
${bracket.perk ? '+ Perk' : ''}

${bracket.perk ? `

${brand === 'gogglesoc'
? `Free Phunkshun Wear single tube 10-pack ($
{formatMoney(perkValue, state.currency)} retail value)`
: `Free gogglesoc Pro 40-pack ($
{formatMoney(perkValue, state.currency)} retail value)`
}

` : ''}

`;
}).join('');
}
function updateAllUI() {
updateBrandCard('gogglesoc');
updateBrandCard('phunkshun');
updateStickyMetrics();
updateOrderSummary();
updateExampleText();
}
function updateExampleText() {
const currency = state.currency;
const exampleText = document.getElementById('example-text');
if (currency === 'USD') {
exampleText.innerHTML = `
$1,020 gogglesoc + $4,000 Phunkshun Wear =
$5,020 total

🇺🇸 Combined discount: 12.5% (5% + 7.5%)
= $351 off

🇺🇸 Free products: $680 value (gogglesoc 40-
pack unlocked)

🇺🇸 Effective savings: 20.5% including free
items!
`;
} else {
exampleText.innerHTML = `
$1,200 gogglesoc + $4,000 Phunkshun Wear =
$5,200 total

🇺🇸 Combined discount: 12.5% (5% + 7.5%)
= $360 off

🇺🇸 Free products: $798 value (gogglesoc 40-
pack unlocked)

🇺🇸 Effective savings: 22.3% including free
items!
`;
}
}
// Input Handlers
function handleSpendInput(brand, value) {
const numValue = parseInt(value.replace(/[^\d]/g, '')) || 0;
if (brand === 'gogglesoc') {
state.gogSpend = numValue;
} else {
state.phunkshunSpend = numValue;
}
// Update slider
document.getElementById(`${brand}-slider`).value = numValue;
document.getElementById(`${brand}-slider-value`).textContent =
formatMoney(numValue, state.currency);
updateAllUI();
}
function handleSliderChange(brand, value) {
const numValue = parseInt(value) || 0;
if (brand === 'gogglesoc') {
state.gogSpend = numValue;
} else {
state.phunkshunSpend = numValue;
}
// Update input
document.getElementById(`${brand}-input`).value = numValue >
0 ? numValue.toString() : '';
document.getElementById(`${brand}-slider-value`).textContent =
formatMoney(numValue, state.currency);
updateAllUI();
}
// Event Listeners
function initializeEventListeners() {
// Currency selector
document.getElementById('currency-
select').addEventListener('change', function(e) {
state.currency = e.target.value;
updateAllUI();
});
// Reset button
document.getElementById('reset-btn').addEventListener('click',
function() {
state.gogSpend = 0;
state.phunkshunSpend = 0;
document.getElementById('gogglesoc-input').value = '';
document.getElementById('phunkshun-input').value = '';
document.getElementById('gogglesoc-slider').value = 0;
document.getElementById('phunkshun-slider').value = 0;
updateAllUI();
});
// Mode toggle
document.getElementById('spend-mode').addEventListener('click',
function() {
state.mode = 'spend';
document.getElementById('spend-mode').classList.add('active');
document.getElementById('quantity-
mode').classList.remove('active');
document.getElementById('spend-
content').classList.remove('hidden');
document.getElementById('quantity-
content').classList.add('hidden');
});
document.getElementById('quantity-mode').addEventListener('click',
function() {
state.mode = 'quantity';
document.getElementById('quantity-mode').classList.add('active');
document.getElementById('spend-
mode').classList.remove('active');
document.getElementById('quantity-
content').classList.remove('hidden');
document.getElementById('spend-
content').classList.add('hidden');
});
document.getElementById('back-to-spend').addEventListener('click',
function() {
document.getElementById('spend-mode').click();
});
// Brand card expansion
document.querySelectorAll('.brand-header').forEach(header => {
header.addEventListener('click', function() {
const brand = this.dataset.brand;
const content = document.getElementById(`${brand}-
content`);
const arrow = document.getElementById(`arrow-${brand}`);
if (state.expandedBrands.has(brand)) {
state.expandedBrands.delete(brand);
content.classList.remove('expanded');
arrow.style.transform = 'rotate(0deg)';
} else {
state.expandedBrands.add(brand);
content.classList.add('expanded');
arrow.style.transform = 'rotate(90deg)';
}
});
});
// Example toggle
document.getElementById('example-
toggle').addEventListener('click', function() {
const content = document.getElementById('example-content');
const arrow = document.getElementById('example-arrow');
if (content.classList.contains('show')) {
content.classList.remove('show');
arrow.style.transform = 'rotate(0deg)';
} else {
content.classList.add('show');
arrow.style.transform = 'rotate(180deg)';
}
});
// Spend inputs
['gogglesoc', 'phunkshun'].forEach(brand => {
const input = document.getElementById(`${brand}-input`);
const slider = document.getElementById(`${brand}-slider`);
input.addEventListener('input', function(e) {
handleSpendInput(brand, e.target.value);
});
input.addEventListener('blur', function(e) {
const value = parseInt(e.target.value.replace(/[^\d]/g, '')) || 0;
e.target.value = value > 0 ? value.toString() : '';
});
slider.addEventListener('input', function(e) {
handleSliderChange(brand, e.target.value);
});
});
}
// Initialize
function initialize() {
initializeEventListeners();
updateAllUI();
// Set initial arrow states
document.getElementById('arrow-gogglesoc').style.transform =
'rotate(90deg)';
document.getElementById('arrow-phunkshun').style.transform =
'rotate(90deg)';
}
// Start the application
document.addEventListener('DOMContentLoaded', initialize);




  
FW26/27 Combo Discount Calculator
