Please enter a product name.

'; return; } const templates = { Helpful: [ { subject: "Did you forget something?", body: `Hi ${customer},

We noticed you left the ${product} in your cart. It's a fantastic choice!

If you have any questions or ran into any issues, just reply to this email. We're happy to help.`, }, { subject: `Your ${product} is waiting for you`, body: `Hi ${customer},

Just a friendly reminder that the ${product} is still in your cart. To make it even easier to decide, we'd like to offer you ${offer}.

Don't miss out on this great item!` }, { subject: "Still interested?", body: `Hi ${customer},

We're just checking in one last time about the items in your cart. We've saved them for you, but can't hold them forever!

Complete your purchase today to ensure you get your ${product}.` } ], Urgent: [ { subject: `Your cart is about to expire`, body: `Hi ${customer},

Don't miss out! The ${product} in your shopping cart is very popular and we can't guarantee it will stay in stock.

Complete your order now before it's gone!` }, { subject: `Last chance: ${offer}!`, body: `Hi ${customer},

This is your final reminder! Your chance to get ${offer} on the ${product} is ending soon.

Act fast – items are selling out quickly.` }, { subject: `We're clearing out your cart soon`, body: `Hi ${customer},

Due to high demand, we'll be clearing inactive shopping carts soon to free up inventory. If you still want the ${product}, now is the time to act.

Secure your items today.` } ], Benefit: [ { subject: `You're so close to owning the ${product}`, body: `Hi ${customer},

You're just one step away from enjoying the amazing benefits of the ${product}. Imagine [insert key benefit, e.g., staying perfectly dry in any weather].

Your cart is waiting for you!` }, { subject: `Don't miss out on [key benefit]`, body: `Hi ${customer},

The ${product} you were looking at is the perfect way to [achieve a specific outcome]. Plus, you can still get ${offer} if you complete your order today.

Why wait to upgrade your experience?` }, { subject: `A final thought on the ${product}`, body: `Hi ${customer},

Think of all the ways the ${product} will improve your [e.g., daily commute, weekend adventures]. It's more than just a product; it's an investment in quality.

Your cart is ready when you are.` } ] }; let emailsHTML = ''; const selectedSequence = templates[tone]; selectedSequence.forEach((email, index) => { emailsHTML += ` `; }); emailsContainer.innerHTML = emailsHTML; outputTitle.textContent = `Generated Emails for: ${product}`; downloadPdfBtn.classList.remove('hidden'); }; const downloadPdf = () => { const { jsPDF } = window.jspdf; const doc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const content = getEl('generated-emails-container'); const title = `Abandoned Cart Sequence: ${productNameInput.value.trim()}`; const genDate = new Date().toLocaleDateString('en-US'); const pageWidth = doc.internal.pageSize.getWidth(); const margin = 15; // --- PDF Template: Email Campaign Draft --- doc.setFillColor(14, 116, 144); // Cyan-700 doc.rect(0, 0, pageWidth, 28, 'F'); doc.setFont('helvetica', 'bold'); doc.setFontSize(16); doc.setTextColor(255, 255, 255); doc.text("EMAIL CAMPAIGN DRAFT", margin, 18); doc.setFont('helvetica', 'bold'); doc.setFontSize(14); doc.setTextColor(15, 23, 42); // Slate-900 let startY = 40; doc.text(title, margin, startY); doc.setFont('helvetica', 'normal'); doc.setFontSize(9); doc.setTextColor(71, 85, 105); // Slate-500 doc.text(`Generated on: ${genDate}`, pageWidth - margin, startY, { align: 'right' }); startY += 12; html2canvas(content, { scale: 2, useCORS: true }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const imgProps = doc.getImageProperties(imgData); const pdfWidth = pageWidth - (margin * 2); const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; doc.addImage(imgData, 'PNG', margin, startY, pdfWidth, pdfHeight); // Footer const pageCount = doc.internal.getNumberOfPages(); for(let i = 1; i <= pageCount; i++) { doc.setPage(i); doc.setLineWidth(0.2); doc.setDrawColor(156, 163, 175); doc.line(margin, 282, pageWidth - margin, 282); doc.setFontSize(8); doc.setTextColor(100, 116, 139); // Slate-500 doc.text(`Campaign for: ${productNameInput.value.trim()}`, margin, 287); doc.text(`Page ${i} of ${pageCount}`, pageWidth - margin, 287, { align: 'right' }); } doc.save(`Abandoned_Cart_Emails_${productNameInput.value.trim().replace(/\s/g, '_')}.pdf`); }).catch(err => { console.error("Error generating PDF:", err); alert("Could not generate PDF. See console for details."); }); }; const showTab = (tabNum) => { currentTab = tabNum; tabButtons.forEach(btn => btn.classList.toggle('active', parseInt(btn.dataset.tab) === tabNum)); tabPanes.forEach(pane => pane.classList.toggle('hidden', parseInt(pane.id.split('-')[2]) !== tabNum)); prevBtn.classList.toggle('invisible', currentTab === 1); nextBtn.textContent = currentTab === 1 ? 'Generate Emails' : 'Generate Again'; }; // --- Event Listeners --- tabButtons.forEach(button => { button.addEventListener('click', () => { const tabNum = parseInt(button.dataset.tab); if (tabNum === 2 && currentTab === 1) generateEmails(); showTab(tabNum); }); }); prevBtn.addEventListener('click', () => { if (currentTab > 1) showTab(currentTab - 1) }); nextBtn.addEventListener('click', () => { if (currentTab === 1) { generateEmails(); showTab(2); } else { generateEmails(); } }); downloadPdfBtn.addEventListener('click', downloadPdf); // --- Initial Setup --- showTab(1); });