400 lines
14 KiB
JavaScript
400 lines
14 KiB
JavaScript
/**
|
||
* NEXT GEN LANDSCAPING & YARD CARE
|
||
* Core Interactive Logic & Calculator Engine
|
||
*/
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// 1. Current Year in Footer
|
||
const yearSpan = document.getElementById('current-year');
|
||
if (yearSpan) {
|
||
yearSpan.textContent = new Date().getFullYear();
|
||
}
|
||
|
||
// 2. Mobile Navigation Toggle
|
||
const mobileToggle = document.getElementById('mobile-toggle');
|
||
const mobileDrawer = document.getElementById('mobile-drawer');
|
||
const mobileLinks = document.querySelectorAll('.mobile-link');
|
||
|
||
if (mobileToggle && mobileDrawer) {
|
||
mobileToggle.addEventListener('click', () => {
|
||
mobileDrawer.classList.toggle('open');
|
||
});
|
||
|
||
mobileLinks.forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
mobileDrawer.classList.remove('open');
|
||
});
|
||
});
|
||
}
|
||
|
||
// 3. Native <dialog> Modal Management
|
||
const quoteDialog = document.getElementById('quote-dialog');
|
||
const modalCloseBtn = document.getElementById('modal-close');
|
||
const openQuoteButtons = document.querySelectorAll('.open-quote-btn');
|
||
const quoteForm = document.getElementById('quote-form');
|
||
const serviceSelect = document.getElementById('lead-service');
|
||
const notesTextarea = document.getElementById('lead-notes');
|
||
const toast = document.getElementById('toast');
|
||
|
||
// Open Modal function
|
||
const openModal = (initialScope = null, initialNotes = null) => {
|
||
if (!quoteDialog) return;
|
||
|
||
if (initialScope && serviceSelect) {
|
||
for (let i = 0; i < serviceSelect.options.length; i++) {
|
||
if (serviceSelect.options[i].text.toLowerCase().includes(initialScope.toLowerCase()) ||
|
||
serviceSelect.options[i].value.toLowerCase().includes(initialScope.toLowerCase())) {
|
||
serviceSelect.selectedIndex = i;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (initialNotes && notesTextarea) {
|
||
notesTextarea.value = initialNotes;
|
||
}
|
||
|
||
quoteDialog.showModal();
|
||
};
|
||
|
||
openQuoteButtons.forEach(btn => {
|
||
btn.addEventListener('click', (e) => {
|
||
const scope = btn.getAttribute('data-scope');
|
||
openModal(scope);
|
||
});
|
||
});
|
||
|
||
if (modalCloseBtn) {
|
||
modalCloseBtn.addEventListener('click', () => {
|
||
quoteDialog.close();
|
||
});
|
||
}
|
||
|
||
// Click outside to close native dialog
|
||
if (quoteDialog) {
|
||
quoteDialog.addEventListener('click', (e) => {
|
||
const rect = quoteDialog.getBoundingClientRect();
|
||
const isInDialog = (
|
||
rect.top <= e.clientY &&
|
||
e.clientY <= rect.top + rect.height &&
|
||
rect.left <= e.clientX &&
|
||
e.clientX <= rect.left + rect.width
|
||
);
|
||
if (!isInDialog) {
|
||
quoteDialog.close();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Handle Modal Quote Form Submission
|
||
if (quoteForm) {
|
||
quoteForm.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
|
||
const name = document.getElementById('lead-name')?.value || '';
|
||
const phone = document.getElementById('lead-phone')?.value || '';
|
||
const address = document.getElementById('lead-address')?.value || '';
|
||
const service = document.getElementById('lead-service')?.value || 'Yard Cleanup';
|
||
const notes = document.getElementById('lead-notes')?.value || '';
|
||
|
||
const leadData = {
|
||
id: 'NG-' + Date.now().toString(36).toUpperCase(),
|
||
source: 'modal_dialog',
|
||
name,
|
||
phone,
|
||
address,
|
||
service,
|
||
notes,
|
||
submittedAt: new Date().toISOString()
|
||
};
|
||
|
||
try {
|
||
const existing = JSON.parse(localStorage.getItem('nextgen_leads') || '[]');
|
||
existing.unshift(leadData);
|
||
localStorage.setItem('nextgen_leads', JSON.stringify(existing));
|
||
} catch (err) {
|
||
console.error('Storage error:', err);
|
||
}
|
||
|
||
// Close dialog
|
||
quoteDialog.close();
|
||
|
||
// Show Toast Notification
|
||
if (toast) {
|
||
toast.classList.add('show');
|
||
setTimeout(() => {
|
||
toast.classList.remove('show');
|
||
}, 6000);
|
||
}
|
||
|
||
// Reset Form
|
||
quoteForm.reset();
|
||
});
|
||
}
|
||
|
||
// Handle Dedicated Contact Page Form Submission
|
||
const contactForm = document.getElementById('contact-form');
|
||
const contactSuccessBox = document.getElementById('contact-success-box');
|
||
const contactSmsLink = document.getElementById('contact-sms-link');
|
||
const contactLeadIdSpan = document.getElementById('contact-lead-id');
|
||
|
||
if (contactForm) {
|
||
contactForm.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
|
||
const name = document.getElementById('contact-name')?.value || '';
|
||
const phone = document.getElementById('contact-phone')?.value || '';
|
||
const address = document.getElementById('contact-address')?.value || '';
|
||
const service = document.getElementById('contact-service')?.value || 'Yard Cleanup';
|
||
const urgency = document.getElementById('contact-urgency')?.value || 'Flexible';
|
||
const size = document.getElementById('contact-size')?.value || 'Standard';
|
||
const notes = document.getElementById('contact-notes')?.value || '';
|
||
|
||
const leadId = 'NG-' + Date.now().toString(36).toUpperCase();
|
||
const leadData = {
|
||
id: leadId,
|
||
source: 'contact_page',
|
||
name,
|
||
phone,
|
||
address,
|
||
service,
|
||
urgency,
|
||
size,
|
||
notes,
|
||
submittedAt: new Date().toISOString()
|
||
};
|
||
|
||
try {
|
||
const existing = JSON.parse(localStorage.getItem('nextgen_leads') || '[]');
|
||
existing.unshift(leadData);
|
||
localStorage.setItem('nextgen_leads', JSON.stringify(existing));
|
||
} catch (err) {
|
||
console.error('Storage error:', err);
|
||
}
|
||
|
||
// Update UI to success state
|
||
contactForm.style.display = 'none';
|
||
if (contactLeadIdSpan) {
|
||
contactLeadIdSpan.textContent = leadId;
|
||
}
|
||
if (contactSuccessBox) {
|
||
contactSuccessBox.classList.add('show');
|
||
}
|
||
|
||
// Build instant mobile SMS follow-up link
|
||
if (contactSmsLink) {
|
||
const textMessage = `Hi Next Gen! My name is ${name} at ${address}. I submitted quote request #${leadId} for ${service} (${size}). Please let me know your availability!`;
|
||
contactSmsLink.href = `sms:6617439600?body=${encodeURIComponent(textMessage)}`;
|
||
}
|
||
|
||
// Trigger Toast
|
||
if (toast) {
|
||
toast.classList.add('show');
|
||
setTimeout(() => toast.classList.remove('show'), 6000);
|
||
}
|
||
});
|
||
}
|
||
|
||
// ==========================================================================
|
||
// 4. INTERACTIVE YARD COST ESTIMATOR LOGIC
|
||
// ==========================================================================
|
||
const priceDisplay = document.getElementById('calc-price-display');
|
||
const timeDisplay = document.getElementById('calc-time-display');
|
||
const calcBookBtn = document.getElementById('calc-book-btn');
|
||
|
||
// Base pricing matrix [Min, Max]
|
||
const serviceRates = {
|
||
'cleanup': { base: [350, 550], time: 'Same Day (3 - 5 Hours)' },
|
||
'fire-abatement': { base: [450, 800], time: 'Same Day (4 - 6 Hours)' },
|
||
'turf': { base: [2200, 4800], time: '2 - 3 Days' },
|
||
'rockscape': { base: [1800, 3900], time: '2 - 4 Days' },
|
||
'trees': { base: [400, 950], time: 'Same Day (3 - 6 Hours)' },
|
||
'maintenance': { base: [180, 320], time: 'Routine (1.5 - 2.5 Hours)' }
|
||
};
|
||
|
||
const sizeMultipliers = {
|
||
'small': 0.75,
|
||
'medium': 1.0,
|
||
'large': 1.8,
|
||
'acreage': 3.2
|
||
};
|
||
|
||
const conditionMultipliers = {
|
||
'mild': 0.85,
|
||
'heavy': 1.15,
|
||
'severe': 1.55
|
||
};
|
||
|
||
function updateEstimate() {
|
||
const selectedService = document.querySelector('input[name="calc-service"]:checked')?.value || 'cleanup';
|
||
const selectedSize = document.querySelector('input[name="calc-size"]:checked')?.value || 'medium';
|
||
const selectedCondition = document.querySelector('input[name="calc-condition"]:checked')?.value || 'heavy';
|
||
|
||
const serviceData = serviceRates[selectedService] || serviceRates['cleanup'];
|
||
const sizeMult = sizeMultipliers[selectedSize] || 1.0;
|
||
const condMult = conditionMultipliers[selectedCondition] || 1.0;
|
||
|
||
let minPrice = Math.round((serviceData.base[0] * sizeMult * condMult) / 25) * 25;
|
||
let maxPrice = Math.round((serviceData.base[1] * sizeMult * condMult) / 25) * 25;
|
||
|
||
if (priceDisplay) {
|
||
priceDisplay.textContent = `$${minPrice.toLocaleString()} – $${maxPrice.toLocaleString()}`;
|
||
}
|
||
|
||
if (timeDisplay) {
|
||
let timeText = serviceData.time;
|
||
if (selectedSize === 'acreage' && !timeText.includes('Days')) {
|
||
timeText = '1 - 2 Days (Full Crew)';
|
||
}
|
||
if (document.documentElement.lang === 'es') {
|
||
timeText = timeText.replace(/Same Day/gi, 'Mismo Día')
|
||
.replace(/Same-Day/gi, 'Mismo Día')
|
||
.replace(/Hours/gi, 'Horas')
|
||
.replace(/Days/gi, 'Días')
|
||
.replace(/Routine/gi, 'Rutina')
|
||
.replace(/\(Full Crew\)/gi, '(Equipo Completo)');
|
||
}
|
||
timeDisplay.textContent = timeText;
|
||
}
|
||
}
|
||
|
||
// Listen for language changes to update localized calculator output
|
||
window.addEventListener('languageChanged', () => {
|
||
updateEstimate();
|
||
});
|
||
|
||
// Listen to all calculator radio buttons
|
||
const calcInputs = document.querySelectorAll('input[name="calc-service"], input[name="calc-size"], input[name="calc-condition"]');
|
||
calcInputs.forEach(input => {
|
||
input.addEventListener('change', updateEstimate);
|
||
});
|
||
|
||
// Calculate Initial Estimate
|
||
updateEstimate();
|
||
|
||
// Book with current estimate scope
|
||
if (calcBookBtn) {
|
||
calcBookBtn.addEventListener('click', () => {
|
||
const selectedServiceEl = document.querySelector('input[name="calc-service"]:checked');
|
||
const selectedSizeEl = document.querySelector('input[name="calc-size"]:checked');
|
||
const selectedConditionEl = document.querySelector('input[name="calc-condition"]:checked');
|
||
|
||
const serviceTitle = selectedServiceEl?.closest('.calc-option')?.querySelector('.calc-option-title')?.textContent || 'Yardwork';
|
||
const sizeTitle = selectedSizeEl?.closest('.calc-option')?.querySelector('.calc-option-title')?.textContent || 'Medium Lot';
|
||
const conditionTitle = selectedConditionEl?.closest('.calc-option')?.querySelector('.calc-option-title')?.textContent || 'Heavy Overgrowth';
|
||
const currentPrice = priceDisplay?.textContent || '';
|
||
|
||
const notes = `Calculator Estimate Scope: ${serviceTitle} | Property: ${sizeTitle} | Condition: ${conditionTitle} | Estimated Range: ${currentPrice}`;
|
||
openModal(serviceTitle, notes);
|
||
});
|
||
}
|
||
|
||
// ==========================================================================
|
||
// 5. INTERACTIVE BEFORE & AFTER SLIDER
|
||
// ==========================================================================
|
||
const baContainer = document.getElementById('ba-slider');
|
||
const baLayer = document.getElementById('ba-layer');
|
||
const baHandle = document.getElementById('ba-handle');
|
||
|
||
if (baContainer && baLayer && baHandle) {
|
||
let isDragging = false;
|
||
|
||
const setSliderPosition = (x) => {
|
||
const rect = baContainer.getBoundingClientRect();
|
||
let pos = ((x - rect.left) / rect.width) * 100;
|
||
pos = Math.max(0, Math.min(100, pos)); // clamp 0 - 100
|
||
|
||
baContainer.style.setProperty('--slider-pos', `${pos}%`);
|
||
};
|
||
|
||
// Mouse events
|
||
baContainer.addEventListener('mousedown', (e) => {
|
||
isDragging = true;
|
||
setSliderPosition(e.clientX);
|
||
});
|
||
|
||
window.addEventListener('mousemove', (e) => {
|
||
if (!isDragging) return;
|
||
setSliderPosition(e.clientX);
|
||
});
|
||
|
||
window.addEventListener('mouseup', () => {
|
||
isDragging = false;
|
||
});
|
||
|
||
// Touch events for mobile/tablet
|
||
baContainer.addEventListener('touchstart', (e) => {
|
||
isDragging = true;
|
||
if (e.touches.length > 0) {
|
||
setSliderPosition(e.touches[0].clientX);
|
||
}
|
||
}, { passive: true });
|
||
|
||
window.addEventListener('touchmove', (e) => {
|
||
if (!isDragging || e.touches.length === 0) return;
|
||
setSliderPosition(e.touches[0].clientX);
|
||
}, { passive: true });
|
||
|
||
window.addEventListener('touchend', () => {
|
||
isDragging = false;
|
||
});
|
||
}
|
||
|
||
// 6. Smooth Scroll Header Offset
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
const href = this.getAttribute('href');
|
||
if (href === '#' || !href.startsWith('#')) return;
|
||
|
||
const target = document.querySelector(href);
|
||
if (target) {
|
||
e.preventDefault();
|
||
const headerHeight = document.querySelector('.site-header')?.offsetHeight || 80;
|
||
const targetPos = target.getBoundingClientRect().top + window.pageYOffset - headerHeight;
|
||
|
||
window.scrollTo({
|
||
top: targetPos,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// ==========================================================================
|
||
// 7. PODCAST SAMPLE AUDIO CONTROLS (Zero Image / Pure SVG)
|
||
// ==========================================================================
|
||
const playBtn = document.getElementById('podcast-play-sample');
|
||
if (playBtn) {
|
||
let isPlaying = false;
|
||
let playInterval = null;
|
||
let currentSeconds = 0;
|
||
const playerTrackFill = document.querySelector('.player-fill');
|
||
const playerTime = document.querySelector('.player-time');
|
||
|
||
playBtn.addEventListener('click', () => {
|
||
isPlaying = !isPlaying;
|
||
if (isPlaying) {
|
||
playBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>';
|
||
playBtn.setAttribute('aria-label', 'Pause sample episode audio');
|
||
|
||
playInterval = setInterval(() => {
|
||
currentSeconds += 1;
|
||
if (currentSeconds > 1458) currentSeconds = 0;
|
||
const mins = Math.floor(currentSeconds / 60);
|
||
const secs = (currentSeconds % 60).toString().padStart(2, '0');
|
||
if (playerTime) playerTime.textContent = `${mins}:${secs} / 24:18`;
|
||
if (playerTrackFill) {
|
||
const pct = Math.min(100, Math.max(0, (currentSeconds / 1458) * 100));
|
||
playerTrackFill.style.width = `${pct}%`;
|
||
}
|
||
}, 1000);
|
||
} else {
|
||
clearInterval(playInterval);
|
||
playBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>';
|
||
playBtn.setAttribute('aria-label', 'Play sample episode audio');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|