When clicked this button should take all data and arrange in as identical format as is possible in PDF

value-mapper.html

@@ -9,8 +9,10 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
+    <!-- Add jsPDF library for PDF generation -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
     <script>
-        tailwind.config = {
+tailwind.config = {
             darkMode: 'class',
             theme: {
                 extend: {
@@ -152,8 +154,8 @@ Identify pain points and frame conversations around Scaleway's key values:
                     </div>
 </div>
                 <div class="text-center pt-4 no-print">
-                     <button onclick="exportToSheets()" class="px-8 py-3 bg-gradient-to-r from-[#9B5CEB] to-[#8B5CF6] text-white font-semibold rounded-xl shadow-lg hover:from-[#8B5CF6] hover:to-[#7B4BEB] transition-all duration-300 transform hover:scale-105">
-Export to Sheets
+                    <button onclick="exportToPDF()" class="px-8 py-3 bg-gradient-to-r from-[#9B5CEB] to-[#8B5CF6] text-white font-semibold rounded-xl shadow-lg hover:from-[#8B5CF6] hover:to-[#7B4BEB] transition-all duration-300 transform hover:scale-105">
+Export to PDF
                     </button>
 </div>
             </div>
@@ -367,8 +369,8 @@ dq2: "When you look at your overall rendering and distribution pipeline, where a
             document.getElementById('initial-message').classList.add('hidden');
             document.getElementById('dynamic-area').classList.remove('hidden');
         }
-        // Function to export data to Google Sheets
-        function exportToSheets() {
+        // Function to export data as PDF
+        function exportToPDF() {
             const industry = document.getElementById('industry-selector').value;
             const valueDrivers = document.getElementById('value-drivers').textContent;
             const dq1 = document.getElementById('dq1').textContent;
@@ -376,22 +378,65 @@ dq2: "When you look at your overall rendering and distribution pipeline, where a
             const dq2 = document.getElementById('dq2').textContent;
             const pbo2 = document.getElementById('pbo2').textContent;
             
-            const data = {
-                industry,
-                valueDrivers,
-                discoveryQuestion1: dq1,
-                permissionBasedOpener1: pbo1,
-                discoveryQuestion2: dq2,
-                permissionBasedOpener2: pbo2,
-                timestamp: new Date().toISOString()
-            };
+            // Create PDF document
+            const { jsPDF } = window.jspdf;
+            const doc = new jsPDF();
             
-            // In a real implementation, you would send this data to your backend
-            // which would then push it to Google Sheets via their API
-            alert(`Exporting data to Google Sheets:\n\nIndustry: ${industry}\n\nValue Drivers:\n${valueDrivers}\n\nDiscovery Questions & Openers:\n1. ${dq1}\nOpener: ${pbo1}\n\n2. ${dq2}\nOpener: ${pbo2}`);
+            // Add title
+            doc.setFontSize(20);
+            doc.setTextColor(85, 33, 148); // #552194
+            doc.text(`Pod Value Mapper - ${industry}`, 105, 20, { align: 'center' });
             
-            // TODO: Implement actual Google Sheets API integration
-            console.log('Data to export:', data);
+            // Add subtitle
+            doc.setFontSize(14);
+            doc.setTextColor(121, 45, 212); // #792DD4
+            doc.text('Your essential tool for qualification and value articulation', 105, 30, { align: 'center' });
+            
+            // Add value drivers section
+            doc.setFontSize(16);
+            doc.setTextColor(85, 33, 148);
+            doc.text('Value Proposition & Product Focus', 15, 45);
+            
+            doc.setFontSize(12);
+            doc.setTextColor(0, 0, 0);
+            const valueLines = doc.splitTextToSize(valueDrivers, 180);
+            doc.text(valueLines, 15, 55);
+            
+            // Add discovery questions
+            doc.setFontSize(16);
+            doc.setTextColor(85, 33, 148);
+            doc.text('Discovery Questions & Openers', 15, 110);
+            
+            // Question 1
+            doc.setFontSize(14);
+            doc.text('Discovery Question 1:', 15, 120);
+            doc.setFont('italic');
+            doc.setFontSize(12);
+            doc.text(dq1, 15, 130);
+            
+            doc.setFont('normal');
+            doc.text('Permission-Based Opener 1:', 15, 140);
+            doc.setFont('bold');
+            doc.text(pbo1, 15, 150);
+            
+            // Question 2
+            doc.setFont('normal');
+            doc.text('Discovery Question 2:', 15, 165);
+            doc.setFont('italic');
+            doc.text(dq2, 15, 175);
+            
+            doc.setFont('normal');
+            doc.text('Permission-Based Opener 2:', 15, 185);
+            doc.setFont('bold');
+            doc.text(pbo2, 15, 195);
+            
+            // Footer
+            doc.setFontSize(10);
+            doc.setTextColor(100, 100, 100);
+            doc.text('Generated by McGPT - Navigating your sales success with AI', 105, 285, { align: 'center' });
+            
+            // Save the PDF
+            doc.save(`McGPT_ValueMapper_${industry.replace(/\s+/g, '_')}.pdf`);
         }
 // Initialize to ensure the hidden/shown states are correct on load
         window.onload = updateContent;