Dynamic 5-Step Landing Page<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n \n<style>\n \/* Decorative Strip Styles for Right Panel *\/\n #my-custom-form #right-panel {\n position: relative;\n overflow-x: hidden;\n \/* Prevent horizontal overflow *\/\n overflow-y: visible;\n \/* Allow vertical content to show *\/\n }\n\n \/* \u2705 NEW FIX FOR IMAGE STRIP SCROLLING IS HERE \u2705 *\/\n #my-custom-form .decorative-strip-container {\n pointer-events: none; \/* This makes the overlay non-interactive *\/\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n transform: translateY(-50%);\n width: 100%;\n height: 480px;\n overflow: hidden;\n z-index: 10;\n }\n\n #my-custom-form .decorative-strip-horizontal {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n opacity: 1;\n transition: opacity 0.5s ease-in-out;\n }\n\n #my-custom-form .strip-track {\n display: flex;\n animation: scroll-horizontal 40s linear infinite;\n gap: 20px;\n }\n\n #my-custom-form .strip-track img {\n height: 440px;\n width: auto;\n object-fit: contain;\n border-radius: 15px;\n opacity: 1;\n flex-shrink: 0;\n }\n\n @keyframes scroll-horizontal {\n 0% {\n transform: translateX(0);\n }\n\n 100% {\n transform: translateX(-50%);\n }\n }\n\n \/* Ensure marquee section stays below *\/\n #marquee-section {\n position: relative;\n z-index: 20;\n }\n\n \/* Additional containment for step 2 specifically *\/\n #my-custom-form #right-panel.gradient-bg {\n overflow: hidden;\n }\n\n\n \/* Thank You Popup Animation *\/\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n #my-custom-form .loader-circle {\n width: 24px;\n height: 24px;\n border: 3px solid rgba(64, 144, 242, 0.3);\n border-top-color: #4090F2;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n flex-shrink: 0;\n }\n\n #my-custom-form .loader-check {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n #my-custom-form .loader-check svg {\n width: 20px;\n height: 20px;\n color: #4090F2;\n }\n\n #my-custom-form .gradient-bg {\n background-image: linear-gradient(135deg, #081A38, #2680EB);\n }\n\n #my-custom-form .animate-fadeIn {\n animation: fadeIn 0.3s ease-out;\n }\n\n #right-panel-content {\n max-width: none !important;\n }\n\n #my-custom-form {\n font-family: 'Poppins', sans-serif;\n font-size: 14px;\n }\n\n #my-custom-form #industry-dropdown {\n z-index: 99999 !important;\n }\n\n #my-custom-form #industry-search-container {\n overflow: visible !important;\n }\n\n .elementor-widget-html #my-custom-form {\n overflow: visible !important;\n }\n\n #my-custom-form .thinking-dots span {\n animation: jump 1.4s ease-in-out infinite;\n display: inline-block;\n width: 8px;\n height: 8px;\n background-color: #9ca3af;\n border-radius: 50%;\n margin: 0 2px;\n }\n\n #my-custom-form.thinking-dots span:nth-child(2) {\n animation-delay: 0.2s;\n }\n\n #my-custom-form.thinking-dots span:nth-child(3) {\n animation-delay: 0.4s;\n }\n\n @keyframes jump {\n\n 0%,\n 80%,\n 100% {\n transform: translateY(0);\n }\n\n 40% {\n transform: translateY(-6px);\n }\n }\n\n #my-custom-form .gradient-text {\n background: linear-gradient(to right, #60a5fa, #2680EB);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n #my-custom-form .fade-in {\n animation: my-custom-form-fadeIn 0.5s ease-in-out forwards;\n }\n\n @keyframes my-custom-form-fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n #my-custom-form .touchpoint-card.selected {\n border-color: #2680EB;\n background-color: #F0F6FE;\n border-width: 2px;\n }\n\n #my-custom-form .chat-bubble {\n background-color: #f3f4f6;\n border-radius: 20px;\n padding: 12px 16px;\n max-width: 85%;\n word-wrap: break-word;\n }\n\n #my-custom-form .chat-bubble.user {\n background-color: #DBEAFE;\n border-bottom-right-radius: 4px;\n }\n\n #my-custom-form .chat-bubble.assistant {\n background-color: transparent;\n padding: 12px 0;\n border-radius: 0;\n max-width: 100%;\n }\n\n #my-custom-form .edit-container {\n max-height: 300px;\n overflow-y: auto;\n }\n\n #my-custom-form .edit-container::-webkit-scrollbar {\n width: 4px;\n }\n\n #my-custom-form .edit-container::-webkit-scrollbar-thumb {\n background-color: #d1d5db;\n border-radius: 20px;\n }\n\n #my-custom-form .touchpoint-edit-item .description {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-out;\n font-size: 0.75rem;\n color: #6b7280;\n padding-left: 0.25rem;\n margin-top: 2px;\n }\n\n #my-custom-form .touchpoint-edit-item:hover .description {\n max-height: 60px;\n }\n\n #my-custom-form .browser-screen {\n width: 100%;\n height: 100%;\n background: #fff;\n border-radius: 12px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .4);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n #my-custom-form .browser-header {\n background-color: #e8e8e8;\n padding: 10px;\n border-bottom: 1px solid #ddd;\n flex-shrink: 0;\n }\n\n #my-custom-form .browser-dots {\n display: flex;\n gap: 8px;\n }\n\n #my-custom-form .dot {\n display: block;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n }\n\n #my-custom-form .browser-body {\n flex-grow: 1;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n #my-custom-form .embed-frame {\n width: 100%;\n height: 100%;\n border: 0;\n }\n\n #my-custom-form .overlay.popup-mode {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n }\n\n #my-custom-form .overlay.popup-mode .popup {\n max-width: 500px;\n width: 90%;\n max-height: 90vh;\n animation: my-custom-form-slideUp 0.3s ease-out;\n }\n\n #my-custom-form .popup {\n background: white;\n border-radius: 12px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n }\n\n #my-custom-form .popup-header {\n padding: 24px 32px;\n border-bottom: 1px solid #e5e7eb;\n flex-shrink: 0;\n }\n\n #my-custom-form .popup-header h2 {\n font-size: 20px;\n color: #1f2937;\n font-weight: 600;\n }\n\n #my-custom-form .popup-content {\n overflow: hidden;\n }\n\n #my-custom-form .left-section {\n padding: 24px 32px;\n overflow-y: auto;\n }\n\n #my-custom-form .view-container {\n position: relative;\n width: 100%;\n overflow: hidden;\n }\n\n #my-custom-form .view {\n width: 100%;\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;\n }\n\n #my-custom-form .view.date-view {\n transform: translateX(0);\n position: relative;\n }\n\n #my-custom-form .view.date-view.slide-out {\n transform: translateX(-100%);\n position: absolute;\n }\n\n #my-custom-form .view.time-view {\n transform: translateX(100%);\n position: absolute;\n top: 0;\n left: 0;\n }\n\n #my-custom-form .view.time-view.slide-in {\n transform: translateX(0);\n position: relative;\n }\n\n #my-custom-form .section-title {\n font-size: 14px;\n font-weight: 600;\n color: #6b7280;\n margin-bottom: 16px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n #my-custom-form .calendar {\n background: #f9fafb;\n border-radius: 12px;\n padding: 16px;\n }\n\n #my-custom-form .calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n }\n\n #my-custom-form .calendar-title {\n font-size: 16px;\n font-weight: 600;\n }\n\n #my-custom-form .calendar-nav {\n background: transparent;\n border: none;\n color: #6b7280;\n font-size: 20px;\n cursor: pointer;\n }\n\n #my-custom-form .calendar-weekdays {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 4px;\n margin-bottom: 8px;\n }\n\n #my-custom-form .weekday {\n text-align: center;\n font-size: 12px;\n font-weight: 500;\n color: #6b7280;\n }\n\n #my-custom-form .calendar-days {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 4px;\n }\n\n #my-custom-form .calendar-day {\n aspect-ratio: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n border: 1px solid transparent;\n }\n\n #my-custom-form .calendar-day:hover:not(.disabled):not(.selected) {\n background: #eff6ff;\n border-color: #266BEB;\n }\n\n #my-custom-form .calendar-day.selected {\n background: #266BEB;\n color: white;\n }\n\n #my-custom-form .calendar-day.disabled {\n color: #d1d5db;\n cursor: not-allowed;\n }\n\n #my-custom-form .selection-summary {\n background: #f9fafb;\n border-radius: 8px;\n padding: 16px;\n margin-bottom: 20px;\n display: none;\n }\n\n #my-custom-form .selection-summary.active {\n display: block;\n }\n\n #my-custom-form .summary-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n }\n\n #my-custom-form .time-slots {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n gap: 10px;\n }\n\n #my-custom-form .time-slot {\n background: #f9fafb;\n border: 1px solid #e5e7eb;\n padding: 12px;\n border-radius: 8px;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.2s;\n text-align: center;\n font-weight: 500;\n }\n\n #my-custom-form .time-slot.selected {\n background: #266BEB;\n border-color: #266BEB;\n color: white;\n }\n\n #my-custom-form #booking-details-form.hidden {\n display: none;\n }\n\n #my-custom-form .form-group {\n margin-bottom: 24px;\n text-align: left;\n }\n\n #my-custom-form button.btn-primary,\n #my-custom-form button.btn-primary:hover,\n #my-custom-form button.btn-primary:focus {\n background-color: #2680EB;\n color: white;\n border: 1px solid #2680EB;\n border-radius: 10px;\n padding: 0.75rem 2rem;\n font-weight: 400;\n white-space: nowrap;\n transition: background-color 0.2s;\n }\n\n #my-custom-form button.btn-primary:hover,\n #my-custom-form button.btn-primary:focus {\n background-color: #1F6CDA;\n border-color: #1F6CDA;\n }\n\n #my-custom-form button.btn-primary:disabled {\n background-color: #d1d5db;\n border-color: #d1d5db;\n cursor: not-allowed;\n }\n\n #my-custom-form button.btn-secondary,\n #my-custom-form button.btn-secondary:hover,\n #my-custom-form button.btn-secondary:focus {\n background-color: #ffffff;\n color: #4b5563;\n border: 1px solid #d1d5db;\n border-radius: 10px;\n padding: 0.75rem 2rem;\n font-weight: 400;\n white-space: nowrap;\n transition: all 0.2s;\n }\n\n #my-custom-form button.btn-secondary:hover,\n #my-custom-form button.btn-secondary:focus {\n border-color: #2680EB;\n color: #2680EB;\n }\n\n #my-custom-form button.btn-link,\n #my-custom-form button.btn-link:hover,\n #my-custom-form button.btn-link:focus {\n background-color: transparent;\n border: none;\n color: #2680EB;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0;\n font-weight: 400;\n }\n\n #my-custom-form button.btn-link:hover,\n #my-custom-form button.btn-link:focus {\n color: #1F6CDA;\n text-decoration: underline;\n }\n\n #my-custom-form .custom-dropdown-button {\n background-color: white;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n }\n\n #my-custom-form .custom-dropdown-button:hover,\n #my-custom-form .custom-dropdown-button:focus {\n border-color: #2680EB;\n box-shadow: 0 0 0 1px #2680EB;\n }\n\n #my-custom-form .custom-dropdown-menu li:hover {\n background-color: #f3f4f6;\n color: #1f2937;\n }\n\n #my-custom-form .custom-dropdown-button span {\n color: #1f2937;\n }\n\n #my-custom-form .popup-footer {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n padding: 1rem 1.25rem;\n border-top: 1px solid #e5e7eb;\n }\n\n #my-custom-form .popup-footer .btn-cancel {\n background-color: #ffffff;\n color: #4b5563;\n border: 1px solid #d1d5db;\n border-radius: 10px;\n padding: 0.75rem 1.5rem;\n font-weight: 400;\n }\n\n #my-custom-form .popup-footer .btn-cancel:hover {\n border-color: #2680EB;\n color: #2680EB;\n }\n\n #my-custom-form .popup-footer .btn-confirm {\n background-color: #2680EB;\n color: white;\n border: 1px solid #2680EB;\n border-radius: 10px;\n padding: 0.75rem 1.5rem;\n font-weight: 400;\n }\n\n #my-custom-form .popup-footer .btn-confirm:hover {\n background-color: #1F6CDA;\n border-color: #1F6CDA;\n }\n\n #my-custom-form .item-card.is-draft {\n opacity: 0.5;\n cursor: not-allowed;\n position: relative;\n }\n\n #my-custom-form .item-card.is-draft::after {\n content: 'Coming Soon';\n position: absolute;\n top: 10px;\n right: 10px;\n background-color: #4b5563;\n color: white;\n padding: 2px 8px;\n border-radius: 9999px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n #my-custom-form .marquee-container {\n width: 100%;\n overflow: hidden;\n background-color: transparent;\n border-radius: 12px;\n padding: 24px 0;\n margin-top: 1rem;\n }\n\n #my-custom-form .marquee {\n display: flex;\n animation: marquee 20s linear infinite;\n }\n\n @keyframes marquee {\n 0% {\n transform: translateX(0%);\n }\n\n 100% {\n transform: translateX(-100%);\n }\n }\n\n #my-custom-form .marquee-item {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 48px;\n }\n\n #my-custom-form .logo {\n filter: brightness(0) invert(1);\n height: 30px;\n object-fit: contain;\n transition: transform 0.3s ease;\n }\n\n #my-custom-form .logo:hover {\n transform: scale(1.1);\n }\n\n #porsche {\n height: 15px;\n }\n\n .h-8 {\n height: 2rem;\n }\n\n .w-8 {\n width: 2rem;\n }\n\n \/* =============================================== *\/\n \/* =========== MOBILE STYLES & FIXES ============= *\/\n \/* =============================================== *\/\n @media (max-width: 767px) {\n\n \/* Force body and html setup *\/\n html,\n body {\n height: 100%;\n overflow-x: hidden;\n }\n\n \/* Main grid setup *\/\n body #my-custom-form #main-grid {\n min-height: 100vh;\n display: grid;\n grid-template-rows: 1fr;\n }\n\n \/* Critical: Fix the left column with higher specificity *\/\n body #my-custom-form #left-column {\n min-height: 100vh !important;\n max-height: 100vh !important;\n height: 100vh !important;\n overflow-y: auto !important;\n overflow-x: hidden !important;\n -webkit-overflow-scrolling: touch !important;\n display: flex !important;\n flex-direction: column !important;\n position: relative !important;\n }\n\n \/* Critical: Fix the content wrapper with higher specificity *\/\n body #my-custom-form #left-panel-content-wrapper {\n flex: 1 1 0% !important;\n min-height: 0 !important;\n \/* THIS IS CRITICAL FOR FLEXBOX SCROLLING *\/\n overflow-y: auto !important;\n overflow-x: hidden !important;\n -webkit-overflow-scrolling: touch !important;\n padding-bottom: 120px !important;\n }\n\n \/* Navigation stays at bottom *\/\n #navigation-container {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: white;\n border-top: 1px solid #e5e7eb;\n z-index: 100;\n padding: 1rem;\n }\n\n \/* Remove any height restrictions from inner content *\/\n #stepper-view,\n #industry-selection,\n #content-2,\n #content-3,\n #content-4,\n #content-5 {\n height: auto !important;\n min-height: 0 !important;\n overflow: visible !important;\n }\n\n \/* Hide right panel on mobile (except final view) *\/\n #right-panel {\n display: none;\n }\n\n #my-custom-form .browser-screen {\n aspect-ratio: 9 \/ 16;\n }\n\n \/* ================================================================\n ======= \u2705 START: FINAL VIEW MOBILE SCROLL FIXES \u2705 ========\n ================================================================\n *\/\n \/* Step 1: Lock the body and prevent any layout shifts *\/\n body.final-view-active {\n overflow: hidden;\n height: 100vh;\n }\n\n \/* Step 2: Make #main-grid a full-screen flex container *\/\n body.final-view-active #main-grid {\n display: flex;\n flex-direction: column;\n position: fixed;\n inset: 0;\n background: #f9fafb;\n padding: 1rem;\n }\n\n \/* Step 3: Make the visual's container the central element *\/\n body.final-view-active #right-panel {\n display: flex !important;\n flex-direction: column;\n order: 2;\n flex-grow: 1; \/* Allow this panel to fill the middle space *\/\n min-height: 0; \/* Allow it to shrink *\/\n position: static;\n padding: 0;\n margin-top: 1rem;\n justify-content: center; \/* Center the browser view vertically *\/\n }\n \n \/* Step 4: CRITICAL - Set a specific, smaller height for the browser *\/\n body.final-view-active .browser-screen {\n aspect-ratio: unset;\n width: auto;\n height: 45vh; \/* This sets the height to 45% of the screen's height *\/\n max-width: 100%; \/* Ensure it doesn't overflow horizontally *\/\n margin: 0 auto; \/* Center it horizontally *\/\n }\n \n \/* Step 5: Style the logo as a fixed header *\/\n body.final-view-active #site-logo {\n order: 1;\n margin: 0 auto;\n flex-shrink: 0;\n }\n\n \/* Step 6: Make the buttons a fixed \"sticky\" footer *\/\n body.final-view-active #navigation-container {\n order: 3;\n position: static;\n flex-shrink: 0;\n padding-top: 1rem;\n border-top: 1px solid #e5e7eb;\n background: #f9fafb;\n }\n\n \/* Step 7: Hide the unnecessary original content *\/\n body.final-view-active #left-panel-content-wrapper {\n display: none;\n }\n\n body.final-view-active #left-column {\n display: contents;\n }\n \/* ================================================================\n ======== \u2705 END: FINAL VIEW MOBILE SCROLL FIXES \u2705 =========\n ================================================================\n *\/\n }\n<\/style> \n<\/head>\n<body class=\"bg-gray-50 text-gray-800 antialiased\">\n <div id=\"my-custom-form\">\n<main id=\"main-grid\" class=\"grid grid-cols-1 md:grid-cols-2\">\n \n <div id=\"left-column\" class=\"bg-white flex flex-col h-screen border-r border-gray-200 p-4 sm:p-6 lg:p-8 overflow-y-auto\">\n <div id=\"left-panel-content-wrapper\" class=\"flex-1 min-h-0 overflow-y-auto\">\n<img decoding=\"async\" id=\"site-logo\" src=\"https:\/\/emaze.ai\/wp-content\/uploads\/2023\/04\/emaze.ai-logo-2.png\" alt=\"emaze.ai logo\" class=\"w-auto mb-6\">\n <div id=\"progress-container\" class=\"w-full hidden\">\n <div class=\"bg-gray-200 h-[3px] rounded-full\">\n <div id=\"progress-bar\" class=\"bg-[#2680EB] h-[3px] rounded-full transition-all duration-500 ease-in-out\" style=\"width: 25%;\"><\/div>\n <\/div>\n <\/div>\n\n <header id=\"main-header\" class=\"text-center pt-12\">\n <h1 class=\"tracking-tight gradient-text font-bold text-4xl\">Celebrate Your Product - Don't Just Sell It<\/h1>\n <p class=\"mt-4 max-w-2xl mx-auto text-base font-regular text-gray-800\">\n Turn plain customer messages into hyper-personal visuals that drive more conversion!\n <\/p>\n <\/header>\n\n<div class=\"my-industry-dropdown\">\n <p class=\"text-[0px] font-normal text-gray-600 mb-6\"><\/p>\n\n <section id=\"industry-selection\" class=\"w-full text-center transition-opacity duration-500 pt-0\">\n <p class=\"text-[20px] font-normal text-gray-1000 mb-6 pb-0 text-center \">\n <span class=\"bg-[#4090F2] text-white font-bold rounded-md px-3 py-1\">\n Try out demo\n <\/span>\n - you'll be added to the waiting list once you complete it\n <\/p>\n <p class=\"text-[20px] font-normal text-gray-600 mb-6\">Choose your industry - we will open up for more industries soon!<\/p>\n\n <div class=\"w-full max-w-3xl mx-auto\">\n <div id=\"industry-cards-container\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6\">\n \n <\/div>\n <\/div>\n <\/section>\n<\/div>\n <section id=\"stepper-view\" class=\"w-full hidden opacity-0 transition-opacity duration-500\">\n <div id=\"canvas-content\">\n <div id=\"content-2\" class=\"step-content hidden pt-10\">\n <h2 class=\"text-[20px] font-normal text-gray-600 mb-6 text-center\">Select a Touchpoint for...<\/h2>\n \n \n \n <div id=\"touchpoint-options\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6 max-w-3xl mx-auto\">\n <\/div>\n <\/div>\n \n <div id=\"content-3\" class=\"step-content hidden pt-10\">\n <h2 class=\"text-[20px] font-normal text-gray-600 mb-6 text-center\">\n Fine-tune Your Visual Style\n <span id=\"style-countdown\" class=\"text-base text-gray-400 font-normal ml-2\"><\/span>\n <\/h2>\n <div class=\"max-w-md mx-auto space-y-6 text-left\">\n <\/div>\n <\/div>\n \n <div id=\"content-4\" class=\"step-content hidden pt-10\">\n <h2 class=\"text-[20px] font-normal text-gray-600 mb-6 text-center\">Almost there! Tell us about your company.<\/h2>\n <div class=\"max-w-md mx-auto space-y-4 text-left\">\n <div>\n <label for=\"company-name\" class=\"block text-sm font-medium text-gray-700\">Company Name*<\/label>\n <input type=\"text\" id=\"company-name\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\">\n <\/div>\n <div>\n <label for=\"website\" class=\"block text-sm font-medium text-gray-700\">Website<\/label>\n <input type=\"url\" id=\"website\" placeholder=\"https:\/\/example.com\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\">\n <\/div>\n <div>\n <label for=\"your-name\" class=\"block text-sm font-medium text-gray-700\">Your Name*<\/label>\n <input type=\"text\" id=\"your-name\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\">\n <\/div>\n <div>\n <label for=\"your-email\" class=\"block text-sm font-medium text-gray-700\">Your Email*<\/label>\n <input type=\"email\" id=\"your-email\" placeholder=\"you@example.com\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\">\n <\/div>\n <div>\n <label for=\"phone\" class=\"block text-sm font-medium text-gray-700\">Phone*<\/label>\n <input type=\"tel\" id=\"phone\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\">\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700\">Company Logo<\/label>\n <div class=\"mt-1\">\n <label id=\"logo-uploader\" for=\"company-logo-input\" class=\"relative flex justify-center w-full h-32 px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md cursor-pointer hover:border-gray-400\">\n <div class=\"space-y-1 text-center\">\n <svg class=\"mx-auto h-12 w-12 text-gray-400\" stroke=\"currentColor\" fill=\"none\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n <path d=\"M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n <\/svg>\n <div class=\"flex text-sm text-gray-600\">\n <p class=\"pl-1\">Upload a file<\/p>\n <\/div>\n <p class=\"text-xs text-gray-500\">PNG, JPG, GIF up to 10MB<\/p>\n <\/div>\n <input id=\"company-logo-input\" name=\"company-logo-input\" type=\"file\" class=\"sr-only\" accept=\"image\/png, image\/jpeg, image\/gif\">\n <\/label>\n <div id=\"logo-preview-container\" class=\"hidden mt-2 text-center\">\n <img decoding=\"async\" id=\"logo-preview\" src=\"\" alt=\"Company Logo Preview\" class=\"mx-auto h-20 w-auto object-contain\">\n <button id=\"remove-logo-btn\" type=\"button\" class=\"mt-2 text-sm text-red-600 hover:text-red-800\">Remove<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div id=\"content-5\" class=\"step-content hidden\">\n <div id=\"loader-view\" class=\"h-full pt-16\">\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n \n <div id=\"navigation-container\" class=\"w-full text-center py-8 hidden\">\n <div class=\"flex flex-col items-center gap-4\">\n <div class=\"flex justify-center items-center gap-6\">\n <button id=\"back-btn\" class=\"btn-link\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" \/>\n <\/svg>\n Back\n <\/button>\n\n <button id=\"continue-btn-steps\" class=\"btn-primary\" disabled>\n Continue\n <\/button>\n \n <button id=\"start-over-btn\" class=\"hidden btn-primary\">\n Start Over\n <\/button>\n <\/div>\n <div id=\"regenerate-container\" class=\"hidden\">\n <p class=\"text-sm text-gray-500\">Not happy with the result?\n <button id=\"regenerate-btn\" class=\"font-semibold btn-link\">Regenerate<\/button>\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div id=\"right-panel\" class=\"flex flex-col items-center justify-center sticky top-0 h-screen p-[72px] gradient-bg text-white\">\n <div id=\"right-panel-content\" class=\"w-full h-full flex flex-col fade-in items-center justify-center\">\n <\/div>\n \n <div id=\"marquee-section\" class=\"absolute bottom-0 left-0 w-full py-6\">\n <p class=\"text-center font-bold text-lg mb-2\">From auto to insurance, service, and retail<\/p>\n <p class=\"text-center text-sm opacity-80 mb-2\">emaze.ai powers personalized visuals across industries and is trusted by leading brands<\/p>\n <div class=\"marquee-container\">\n <div class=\"marquee\">\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/f\/fc\/SEAT_Logo_from_2017.svg\" alt=\"SEAT Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/c\/ca\/XPeng_logo.svg\" alt=\"Xpeng Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b9\/Suzuki_logo_2025.svg\" alt=\"Suzuki Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b7\/Porsche_Wordmark_Logo_Black.svg\" alt=\"Porsche Logo\" class=\"logo\" id=\"porsche\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/09\/%C5%A0koda_nieuw.png\" alt=\"Skoda Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/9e\/Mercedes-Benz_Logo_2010.svg\" alt=\"Mercedes Benz Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/media.heyxpeng.co.il\/ao\/images\/freesbe_logo.svg\" alt=\"Freesbe Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/4e\/Nespresso_logo_%28monogram_%2B_wordmark%29.svg\" alt=\"Nespresso Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/92\/Audi-Logo_2016.svg\" alt=\"Audi Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/64\/AIG-logo2020-RGB-01.png\" alt=\"AIG Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/f\/fc\/SEAT_Logo_from_2017.svg\" alt=\"SEAT Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/c\/ca\/XPeng_logo.svg\" alt=\"Xpeng Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b9\/Suzuki_logo_2025.svg\" alt=\"Suzuki Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b7\/Porsche_Wordmark_Logo_Black.svg\" alt=\"Porsche Logo\" class=\"logo\" id=\"porsche\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/09\/%C5%A0koda_nieuw.png\" alt=\"Skoda Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/9e\/Mercedes-Benz_Logo_2010.svg\" alt=\"Mercedes Benz Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/media.heyxpeng.co.il\/ao\/images\/freesbe_logo.svg\" alt=\"Freesbe Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/4e\/Nespresso_logo_%28monogram_%2B_wordmark%29.svg\" alt=\"Nespresso Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/92\/Audi-Logo_2016.svg\" alt=\"Audi Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/64\/AIG-logo2020-RGB-01.png\" alt=\"AIG Logo\" class=\"logo\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n \n \n<div class=\"overlay\" id=\"newScheduleModal\" style=\"display: none;\">\n <div class=\"popup\">\n <div class=\"popup-header\">\n <h2>Schedule a Demo<\/h2>\n <\/div>\n <div class=\"popup-content\">\n <div class=\"left-section\">\n <div class=\"view-container\">\n <div class=\"view date-view\" id=\"dateView\">\n <div class=\"section-title\">Pick a date<\/div>\n <div class=\"calendar\">\n <div class=\"calendar-header\">\n <button class=\"calendar-nav\" onclick=\"previousMonth()\">\u2190<\/button>\n <div class=\"calendar-title\" id=\"calendarTitle\"><\/div>\n <button class=\"calendar-nav\" onclick=\"nextMonth()\">\u2192<\/button>\n <\/div>\n <div class=\"calendar-weekdays\">\n <div class=\"weekday\">Su<\/div><div class=\"weekday\">Mo<\/div><div class=\"weekday\">Tu<\/div><div class=\"weekday\">We<\/div><div class=\"weekday\">Th<\/div><div class=\"weekday\">Fr<\/div><div class=\"weekday\">Sa<\/div>\n <\/div>\n <div class=\"calendar-days\" id=\"calendarDays\"><\/div>\n <\/div>\n <\/div>\n <div class=\"view time-view\" id=\"timeView\">\n <button class=\"back-button\" onclick=\"backToDateSelection()\">\u2190 Back to date selection<\/button>\n <div class=\"selection-summary\" id=\"selectionSummary\">\n <div class=\"summary-item\"><span class=\"summary-label\">Date:<\/span><span class=\"summary-value\" id=\"summaryDate\">Not selected<\/span><\/div>\n <div class=\"summary-item\"><span class=\"summary-label\">Time:<\/span><span class=\"summary-value\" id=\"summaryTime\">Not selected<\/span><\/div>\n <\/div>\n <div class=\"section-title\">Select a time<\/div>\n <div class=\"time-slots\" id=\"timeSlots\">\n <div class=\"time-slot\" onclick=\"selectTime(this)\">09:00 AM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">09:30 AM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">10:00 AM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">10:30 AM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">11:00 AM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">11:30 AM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">12:00 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">12:30 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">01:00 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">01:30 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">02:00 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">02:30 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">03:00 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">03:30 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">04:00 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">04:30 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">05:00 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">05:30 PM<\/div>\n <\/div>\n <div id=\"booking-details-form\" class=\"hidden mt-6\">\n <div class=\"section-title\">Enter your details<\/div>\n <div class=\"form-group\">\n <label for=\"modal-email\">Your email<span class=\"required\">*<\/span><\/label>\n <input type=\"email\" id=\"modal-email\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\" placeholder=\"you@example.com\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"modal-attendees\">Additional attendees (optional)<\/label>\n <input type=\"text\" id=\"modal-attendees\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\" placeholder=\"comma-separated emails\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"modal-notes\">Notes (optional)<\/label>\n <textarea id=\"modal-notes\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\" placeholder=\"Add any notes or special requests...\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"popup-footer\">\n <button class=\"btn btn-cancel\" onclick=\"closePopup()\">Cancel<\/button>\n <button class=\"btn btn-confirm\" onclick=\"confirmBooking()\">Confirm Booking<\/button>\n <\/div>\n <\/div>\n<\/div>\n<div id=\"bookingConfirmationPopup\" class=\"overlay\" style=\"display: none; z-index: 1500;\">\n <div class=\"popup\" style=\"max-width: 400px; min-height: 0;\">\n <div style=\"padding: 20px 40px 40px 40px; text-align: center;\">\n <svg class=\"w-16 h-16 text-blue-500 mx-auto mb-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>\n <h2 class=\"text-2xl font-bold mb-2\">Booking confirmed<\/h2>\n <p class=\"text-gray-600 mb-4\">An invitation has been emailed to you.<\/p>\n <div id=\"confirmedBookingDetails\" class=\"bg-gray-100 p-3 rounded-lg text-lg font-semibold text-gray-800\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n<div id=\"thankYouPopup\" class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[10000] hidden\">\n <div class=\"bg-white rounded-lg shadow-2xl max-w-md w-[90%] mx-4 relative animate-fadeIn\">\n <button onclick=\"closeThankYouPopup()\" class=\"absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path>\n <\/svg>\n <\/button>\n \n <div class=\"p-8\">\n <img decoding=\"async\" src=\"https:\/\/emaze.ai\/wp-content\/uploads\/2023\/04\/emaze.ai-logo-2.png\" alt=\"emaze.ai\" class=\"h-6 w-auto mb-6\">\n \n <h2 class=\"text-2xl font-bold text-gray-900 mb-4\">Thanks for trying out the emaze.ai demo<\/h2>\n \n <div class=\"text-gray-600 space-y-3 mb-6\">\n <p><span id=\"thankYouName\" class=\"font-semibold text-gray-800\"><\/span>, You've also been added to our early-access waitlist.<\/p>\n <p>Want to see how this works at scale?<\/p>\n <p>We'll show how emaze.ai turns everyday customer messages into personalized, on-brand visuals - sent to every customer automatically.<\/p>\n <\/div>\n \n <p class=\"text-gray-600 mb-1\">Thank you!<\/p>\n <p class=\"text-gray-800 font-semibold mb-6\">The emaze.ai team<\/p>\n \n <button onclick=\"scheduleFromThankYou()\" class=\"w-full bg-[#2680EB] text-white py-3 px-6 rounded-lg font-semibold hover:bg-[#1F6CDA] transition-colors\">\n Schedule a Demo\n <\/button>\n <\/div>\n <\/div>\n<\/div>\n <\/div>\n\n\n \n <script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.10.1\/firebase-app.js\"><\/script>\n <script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.10.1\/firebase-database.js\"><\/script>\n \n <script>document.addEventListener('DOMContentLoaded', () => {\n\/\/ Add this function outside of the DOMContentLoaded event listener\nwindow.toggleMute = function() {\n const video = document.getElementById('intro-video');\n const muteIcon = document.getElementById('mute-icon');\n const unmuteIcon = document.getElementById('unmute-icon');\n \n if (video) {\n video.muted = !video.muted;\n \n if (video.muted) {\n muteIcon.classList.remove('hidden');\n unmuteIcon.classList.add('hidden');\n } else {\n muteIcon.classList.add('hidden');\n unmuteIcon.classList.remove('hidden');\n }\n }\n\n}\n \/\/ --- 1. DATA & CONFIGURATION ---\n const formContent = {\n 'Retail & E-Commerce': { 'Welcome Spotlight': { id: 'p95', description: 'Make every new shopper feel seen with a personalized first impression.', params: ['preferred-shopping-category', 'gender', 'style-preference', 'welcome-offer-type', 'preferred-language'] }, 'Cart Comeback': { id: 'p96', description: 'Recover lost sales by reminding customers of the product they left behind.', params: ['gender', 'product-photo', 'cart-abandonment-time', 'discount-offer-level', 'visual-theme'], status: 'draft' }, 'Purchase Celebration': { id: 'p97', description: 'Turn a receipt into joy \u2014 celebrate their purchase and build loyalty.', params: ['gender', 'product-photo', 'purchase-occasion', 'loyalty-tier', 'next-best-product'], status: 'draft' }, 'We Miss You': { id: 'p98', description: 'Reignite dormant customers with fresh products picked just for them.', params: ['lapsed-duration', 'previous-favorite-category', 'recommended-product-photo', 'exclusive-offer-type', 'visual-style'], status: 'draft' }, 'Birthday Surprise': { id: 'p99', description: 'Delight customers on their big day with a celebratory offer.', params: ['birthday-month', 'preferred-gift-category', 'product-photo', 'celebration-offer-type', 'message-tone'], status: 'draft' } },\n 'Travel & Hospitality': { 'Destination Spotlight': { id: 'p80', description: 'Hook travelers instantly with a personalized hero visual of their dream destination.', params: ['dream-destination', 'travel-vibe', 'seasonal-vibe', 'gender'] }, 'Itinerary Preview': { id: 'p84', description: 'Inspire bookings by showcasing flights, hotels, and activities that fit their trip.', params: ['dream-destination', 'travel-group-size', 'travel-vibe', 'seasonal-vibe', 'gender'] }, 'You\u2019re All Set!': { id: 'p85', description: 'Reassure and excite with a beautiful confirmation visual and countdown to departure.', params: ['dream-destination', 'travel-group-size', 'travel-vibe', 'seasonal-vibe', 'gender'] }, 'Next Trip Inspiration': { id: 'p86', description: 'Keep travelers dreaming by suggesting new destinations that match their vibe.', params: ['dream-destination', 'travel-group-size', 'travel-vibe', 'seasonal-vibe', 'gender'] }, 'Travel Anniversary': { id: 'p87', description: 'Strengthen loyalty with a nostalgic visual that celebrates their past journey.', params: ['dream-destination', 'travel-group-size', 'travel-vibe', 'seasonal-vibe', 'gender'] } },\n 'Automotive': { 'Auto Lead Response': { id: 'p599', description: 'Win trust fast with a hyper-personalized 360\u00b0 view of the car they asked about...', params: ['make', 'model', 'model-version'] }, 'Appointment Set': { id: 'p505', description: 'Lock in the visit with a clear confirmation, map, and warm welcome...', params: ['make', 'model', 'model-version', 'meeting-date', 'meeting-time'] }, 'Test Drive Confirmation': { id: 'p506', description: 'Build excitement with a countdown and high-energy car visuals.', params: ['make', 'model', 'model-version', 'meeting-date', 'meeting-time'] }, 'Price Quote': { id: 'p507', description: 'Close deals quicker with a clear, hyper-personalized price breakdown.', params: ['make', 'model', 'model-version'] }, 'Congrats on Your Order': { id: 'p510', description: 'Turn delivery into a celebration with visuals that welcome them to the brand...', params: ['make', 'model', 'model-version'] }, 'Monthly Car Promotion': { id: 'p513', description: 'Boost sales with fresh, hyper-personalized offers tied to their browsing history.', params: ['make', 'model', 'model-version'] } },\n 'Financial Services': { 'Goal Spotlight': { id: 'p105', description: 'Show clients how your product helps them reach their biggest goals.', params: ['life-stage', 'monthly-capacity', 'horizon-in-years', 'primary-goal','family-status' ] }, 'Your Quote': { id: 'p302', description: 'Build trust with a clear, personalized plan and calming visuals.', params: ['life-stage', 'emotional-tone'], status: 'draft' }, 'Financial Journey': { id: 'p303', description: 'Keep clients engaged with a visual roadmap to their financial future.', params: ['life-stage', 'emotional-tone'], status: 'draft' }, 'Annual Review': { id: 'p304', description: 'Highlight progress with animated charts that make growth feel real.', params: ['emotional-tone'], status: 'draft' }, 'What Matters Most': { id: 'p305', description: 'Connect emotionally by showing visuals that match each life stage.', params: ['life-stage'], status: 'draft' } },\n 'Healthcare & Pharma': {'Symptom Results': { id: 'p401', description: 'Reassure patients with results shown by a relatable, professional face.', params: ['health-focus', 'age-group', 'emotional-tone', 'gender'], status: 'draft' }, 'Appointment Confirmation': { id: 'p107', description: 'Ease anxiety with a warm doctor photo and calming pre-visit message.', params: ['age-group', 'emotional-tone', 'gender'] }, 'Aftercare Plan': { id: 'p403', description: 'Keep patients on track with a clear, visual checklist of next steps.', params: ['emotional-tone', 'gender'], status: 'draft' }, 'Wellness Tips': { id: 'p404', description: 'Build trust by sharing friendly, easy-to-digest health advice.', params: ['health-focus', 'emotional-tone'], status: 'draft' }, 'Health Anniversary': { id: 'p405', description: 'Strengthen care with a gentle, personalized reminder for a check-up.', params: ['loved-one-photo'], status: 'draft' } },\n 'Media': { 'What to Watch Next': { id: 'p90', description: 'Keep viewers hooked with trailers tailored to their taste.', params: ['preferred-genre', 'recent-watch-pattern', 'favorite-actors-directors', 'device-usage', 'language-preference'] }, 'Premium Upgrade': { id: 'p91', description: 'Drive upgrades with exclusive previews from higher-tier content.', params: ['preferred-genre', 'current-plan-level', 'upgrade-trigger-content', 'viewing-frequency', 'payment-preference'], status: 'draft' }, 'Welcome Aboard': { id: 'p92', description: 'Make new subscribers feel special with a star-powered welcome.', params: ['preferred-genre', 'star-welcome-choice', 'device-signup-source', 'household-size', 'language-preference'], status: 'draft' }, 'Season Premiere Countdown': { id: 'p93', description: 'Build hype with a countdown and high-energy content montage.', params: ['preferred-show', 'countdown-style', 'highlight-moment-type', 'notification-channel', 'watch-party-interest'], status: 'draft' }, 'Re-engagement': { id: 'p94', description: 'Bring lapsed viewers back with personalized content recommendations.', params: ['lapsed-duration', 'previous-favorite-genres', 'unfinished-series', 'preferred-channel-return', 'new-hot-release'], status: 'draft' } },\n 'Sports': { 'Game Day Welcome': { id: 'p88', description: 'Fire up fans with personalized visuals that set the stage for the big event.', params: ['sport-type', 'favorite-team', 'seat-section-info', 'arrival-context'] }, 'Ticket Upgrade & Upsell': { id: 'p89', description: 'Boost revenue by offering fans better seats, VIP access or other upsells...', params: ['sport-type', 'purchase-history-spend-level', 'current-seat-location', 'companions-group-size', 'up-to-game'], status: 'draft' }, 'Fan Celebration': { id: 'p97', description: 'Make supporters feel part of the team with celebratory messages and star shout-outs.', params: ['sport-type', 'favorite-player', 'milestone-anniversary', 'fan-achievements', 'celebration-format'], status: 'draft' }, 'Countdown to Kickoff': { id: 'p98', description: 'Build anticipation with a timer and high-energy clips of their favorite team or artist.', params: ['sport-type', 'countdown-preference', 'favorite-highlight-type', 'notification-channel', 'merchandise-offer-hook'], status: 'draft' }, 'Re-engagement Play': { id: 'p99', description: 'Bring fans back with highlights and new events tailored to their passions.', params: ['sport-type', 'past-favorite-teams', 'last-attendance-date', 'content-engagement'], status: 'draft' } },\n 'Entertainment': { status: 'draft', 'Show Day Welcome': { id: 'p99', description: 'Fire up fans with personalized visuals that set the stage for the big event.', params: ['show-venues', 'show-type', 'audience-zone', 'arrival-mood', 'welcome-media-style'] }, 'Ticket Upgrade & Upsell': { id: 'p100', description: 'Boost revenue by offering fans better seats, VIP access or other upsells...', params: ['show-venues', 'spending-profile', 'audience-current-zone', 'group-attendance', 'time-to-show'], status: 'draft' }, 'Fan Celebration': { id: 'p101', description: 'Make supporters feel part of the team with celebratory messages and star shout-outs.', params: ['show-venues', 'beloved-performer', 'loyalty-milestone', 'fan-recognition-level', 'celebration-style'], status: 'draft' }, 'Countdown to Kickoff': { id: 'p102', description: 'Build anticipation with a timer and high-energy clips of their favorite team or artist.', params: ['show-venues', 'anticipation-level', 'highlight-moment-type', 'reminder-timing', 'merchandise-bundle-offer'], status: 'draft' }, 'Re-engagement Play': { id: 'p103', description: 'Bring fans back with highlights and new events tailored to their passions.', params: ['show-venues', 'previous-favorite-acts', 'last-visit', 'content-replay-behavior'], status: 'draft' } },\n 'Consumer Goods & Lifestyle': { 'Style Quiz Results': { id: 'p82', description: 'Delight shoppers with a mood board that brings their personal style to life.', params: ['product-photo-1', 'product-photo-2', 'product-photo-3', 'style-vibe', 'color-palette', 'gender'] }, 'Wishlist Reminder': { id: 'p83', description: 'Recover sales by spotlighting the product they want most with a special offer.', params: ['product-photo-1', 'product-photo-2', 'product-photo-3', 'style-vibe', 'color-palette', 'gender'] }, 'New Favorite Product': { id: 'p81', description: 'Celebrate discovery with fun visuals that connect to their lifestyle.', params: ['product-photo','lifestyle-scene', 'gender'] }, 'Seasonal Essentials': { id: 'p98', description: 'Drive seasonal sales with curated looks that match each customer\u2019s vibe.', params: ['product-photo', 'style-vibe', 'lifestyle-scene', 'gender'], status: 'draft'}, 'Unboxing Teaser': { id: 'p97', description: 'Build anticipation with an interactive preview of their next must-have product', params: ['product-photo', 'style-vibe', 'color-palette', 'gender'], status: 'draft' } },\n 'Real Estate': { 'Interactive Map': { id: 'p104', description: 'Help buyers dream bigger with homes pinned to their ideal location and match their vibe & interest.', params: ['home-photo', 'dream-location'] }, 'Virtual Tour Confirmation': { id: 'p902', description: 'Build excitement with a video walkthrough and a personal agent welcome.', params: ['home-vibe', 'emotional-tone', 'gender'], status: 'draft'}, 'Welcome Home Dashboard': { id: 'p903', description: 'Ease the move-in process with a beautiful dashboard and task checklist.', params: ['home-photo'], status: 'draft' }, 'Neighborhood Spotlight': { id: 'p904', description: 'Sell the lifestyle with stunning community visuals and local events.', params: ['dream-location'], status: 'draft' }, 'Property Valuation Report': { id: 'p905', description: 'Keep homeowners engaged with a clear snapshot of their home\u2019s value.', params: ['emotional-tone'], status: 'draft' } },\n 'Education': {'Welcome to Class': { id: 'p106', description: 'Make new students feel valued with a personalized visual that kicks off their learning journey.', params: ['grade', 'class-topic', 'gender', 'starting-date'] }, 'Enrollment Confirmation': { id: 'p1002', description: 'Build trust by confirming their spot with course details and start date.', params: ['grade', 'class-topic', 'gender', 'starting-date'], status: 'draft'}, 'Upcoming Session Reminder': { id: 'p1003', description: 'Reduce no-shows with a friendly reminder and a preview of what\u2019s ahead.', params: ['grade', 'class-topic', 'starting-date'], status: 'draft' }, 'Course Completion Celebration': { id: 'p1004', description: 'Boost satisfaction and referrals with a celebratory message when students finish.', params: ['grade', 'primary-interest', 'emotional-tone', 'gender'], status: 'draft' }, 'Next Course Invitation': { id: 'p1005', description: 'Drive repeat enrollment by recommending the perfect follow-up program.', params: ['grade', 'primary-interest', 'gender'], status: 'draft' } },\n 'Telecommunications': { status: 'draft', 'Find Your Perfect Plan': { id: 'p1101', description: 'Win customers with personalized plan recommendations that fit their lifestyle.', params: ['service', 'data-usage', 'gender'] }, 'Upgrade Now': { id: 'p1102', description: 'Boost revenue by showcasing the exact device they want with an irresistible offer.', params: ['service', 'data-usage', 'gender'] }, 'Protecting Your Digital Life': { id: 'p1103', description: 'Build trust by promoting device protection in a clear, visual way.', params: ['device', 'device-protection-service'] }, 'Feedback Survey': { id: 'p1104', description: 'Show you care with a friendly survey that drives loyalty through feedback.', params: ['service', 'gender'] } },\n 'SMB \/ Services Marketplaces': { status: 'draft', 'Perfect Pro Match': { id: 'p1201', description: 'Convert faster by showing customers a pro who looks tailor-made for their project.', params: ['project-photo', 'emotional-tone'] }, 'Quote Comparison': { id: 'p1202', description: 'Win trust with a clear visual chart comparing pros, ratings, and prices.', params: ['project-photo'] }, 'You Hired a Pro!': { id: 'p1203', description: 'Keep customers engaged with a project dashboard and real-time progress.', params: ['pro-photo', 'gender'] }, 'Seasonal Maintenance': { id: 'p1204', description: 'Drive repeat bookings with timely service reminders that fit each season.', params: ['project-vibe'] }, 'New Pro in Your Neighborhood': { id: 'p1205', description: 'Boost discovery by spotlighting new local pros with a personal touch.', params: ['project-vibe', 'gender'] } }\n };\n const automotiveModels = { 'Toyota': ['RAV4 Hybrid', 'Corolla', 'Camry', 'Tacoma'], 'Volkswagen': ['Atlas', 'Atlas Cross Sport', 'Golf GTI', 'ID.4', 'Jetta GLI', 'Taos', 'Tiguan'], 'Audi': ['SQ8 Sportback e-tron', 'Q8 e-tron', 'Q8 Sportback e-tron', 'RS e-tron GT', 'e-tron GT', 'A1 Sportback', 'S3 Sedan', 'S3 Sportback', 'RS3 Sedan', 'RS3 Sportback', 'A3 Sedan', 'A3 Sportback'], 'Skoda': ['Enyaq Coup\u00e9', 'Enyaq', 'Fabia', 'Scala', 'New Octavia', 'New Octavia Combi', 'New Superb', 'New Superb Combi', 'Kamiq', 'Karoq', 'New Kodiaq'], 'Porsche': ['718 Cayman', '911 Carrera', 'Macan', 'Cayenne', 'Panamera', 'Taycan'], 'Hyundai': ['The New ELANTRA', 'The New IONIQ 5', 'SANTA FE', 'The New SONATA'], 'Chevrolet': ['Equinox', 'Silverado', 'Trax', 'Blazer'], 'Ford': ['Bronco', 'Explorer', 'Escape', 'F-150'], 'Honda': ['HR-V', 'CR-V', 'Civic Hatchback'], 'Mercedes-Benz': ['Mercedes-AMG G 63', 'Mercedes-Benz G 580', 'Mercedes-Benz GLS'], 'BMW': ['M8', 'X6 M', 'M340i Sedan'], 'Land Rover': ['RANGE ROVER', 'DEFENDER', 'DISCOVERY'] };\n const landRoverModelVersions = { 'RANGE ROVER': ['RANGE ROVER SPORT', 'RANGE ROVER'], 'DEFENDER': ['DEFENDER 130', 'DEFENDER 110'], 'DISCOVERY': ['DISCOVERY', 'DISCOVERY SPORT'] };\n const classTopicsByGrade = { 'K-5': ['Creative Arts', 'Early Reading', 'Math Games', 'Science Exploration'], '6-8': ['World History', 'Pre-Algebra', 'Introduction to Coding', 'Creative Writing'], '9-12': ['Calculus', 'Physics', 'AP English', 'Robotics'], 'Undergraduate': ['Computer Science I', 'Introduction to Marketing', 'Macroeconomics', 'Organic Chemistry'], 'Graduate': ['Advanced Machine Learning', 'Quantitative Finance', 'Research Methods'], 'Professional': ['Leadership and Management', 'Data Analytics for Business', 'Project Management'] };\n const primaryInterestsByGrade = { 'K-5': ['Arts', 'Science', 'Play-Based Learning'], '6-8': ['Technology', 'Humanities', 'Social Science'], '9-12': ['STEM', 'Business', 'Arts'], 'Undergraduate': ['Business', 'Arts', 'Technology', 'Science', 'Humanities'], 'Graduate': ['Advanced Research', 'Professional Certification'], 'Professional': ['Skill Development', 'Career Advancement'] };\n const deviceProtectionServicesByDevice = { 'Smartphone': ['Screen Repair', 'Liquid Damage Protection', 'Theft Protection'], 'Laptop': ['Accidental Damage Coverage', 'Extended Warranty', 'Virus & Malware Protection'], 'Tablet': ['Screen Repair', 'Full Device Replacement'], 'Smartwatch': ['Scratch & Dent Repair', 'Battery Replacement'] };\n \n \/\/ --- STATE & CONFIG ---\n let currentStep = 1;\n let lastSubmissionId = null;\n let stepStartTime = Date.now();\n let timeSpentOnSteps = {};\n let finalLeftColumnHTML = '';\n const selections = { industry: '', touchpoint: '', parameters: {}, companyName: '', website: '', yourName: '', yourEmail: '', phone: '', companyLogo: null, parameterFiles: {} };\n \/\/ NEW: Flags to prevent duplicate logs and capture during submission\nlet isSubmitting = false;\nlet isUnloadEventFired = false;\n const GAS_ENDPOINT = \"https:\/\/script.google.com\/macros\/s\/AKfycbzLpd4JyvVd1iDHMum7PAhjDU-AfMl6hoYx4avhKJaa-5wgrJYBtTJyPUZ8Sh2vHzCz\/exec\";\n const firebaseConfig = { apiKey: \"AIzaSyChxLOPddyV45QzyWsgJzHXpsX6T8pKiq4\", authDomain: \"my-firebase-apps-script.firebaseapp.com\", databaseURL: \"https:\/\/my-firebase-apps-script-default-rtdb.firebaseio.com\", projectId: \"my-firebase-apps-script\", storageBucket: \"my-firebase-apps-script.firebasestorage.app\", messagingSenderId: \"1040106570499\", appId: \"1:1040106570499:web:da5c1e80e3277d25dcdf36\", measurementId: \"G-3M2VSKJRV7\" };\n firebase.initializeApp(firebaseConfig);\n const database = firebase.database();\n\n \/\/ --- ELEMENT SELECTORS ---\n const mainGrid = document.getElementById('main-grid');\n const leftColumn = document.getElementById('left-column');\n const siteLogo = document.getElementById('site-logo');\n const leftPanelContentWrapper = document.getElementById('left-panel-content-wrapper');\n const mainHeader = document.getElementById('main-header');\n const progressContainer = document.getElementById('progress-container');\n const progressBar = document.getElementById('progress-bar');\n const industrySelection = document.getElementById('industry-selection');\n const stepperView = document.getElementById('stepper-view');\n const content2 = document.getElementById('content-2');\n const content3 = document.getElementById('content-3');\n const content4 = document.getElementById('content-4');\n const content5 = document.getElementById('content-5');\n const industrySearchContainer = document.getElementById('industry-search-container');\n const touchpointOptionsContainer = document.getElementById('touchpoint-options');\n const companyNameInput = document.getElementById('company-name');\n const websiteInput = document.getElementById('website');\n const yourNameInput = document.getElementById('your-name');\n const yourEmailInput = document.getElementById('your-email');\n const phoneInput = document.getElementById('phone');\n const companyLogoInput = document.getElementById('company-logo-input');\n const logoUploader = document.getElementById('logo-uploader');\n const logoPreviewContainer = document.getElementById('logo-preview-container');\n const logoPreview = document.getElementById('logo-preview');\n const removeLogoBtn = document.getElementById('remove-logo-btn');\n const loaderView = document.getElementById('loader-view');\n const navigationContainer = document.getElementById('navigation-container');\n const backBtn = document.getElementById('back-btn');\n const continueBtnSteps = document.getElementById('continue-btn-steps');\n const startOverBtn = document.getElementById('start-over-btn');\n const regenerateContainer = document.getElementById('regenerate-container');\n const rightPanel = document.getElementById('right-panel');\n const rightPanelContent = document.getElementById('right-panel-content');\n\n \/\/ --- INITIALIZATION ---\n initialize();\n \n \/\/ --- ALL FUNCTIONS ---\n let finalVisualUrl = null;\n\n function initialize() {\n updateRightPanel(1);\n const activeIndustries = Object.keys(formContent).filter(industryName => {\n const details = formContent[industryName];\n return !(details && details.status === 'draft');\n });\n populateIndustryCards(activeIndustries);\n }\n function updateUIForStep(step) {\n if (currentStep !== step) {\n const timeElapsed = Date.now() - stepStartTime;\n if (currentStep > 0 && currentStep < 5) {\n timeSpentOnSteps[currentStep] = timeElapsed;\n }\n stepStartTime = Date.now();\n }\n \n currentStep = step;\n [content2, content3, content4, content5].forEach(el => el.classList.add('hidden'));\n rightPanel.classList.remove('hidden');\n \n if (step < 5) {\n rightPanel.classList.remove('final-view');\n }\n \n if (step === 1) {\n mainGrid.classList.remove('md:grid-cols-3');\n mainGrid.classList.add('md:grid-cols-2');\n rightPanel.classList.remove('md:col-span-2');\n \n mainHeader.classList.remove('shrunk');\n progressContainer.classList.add('hidden');\n navigationContainer.classList.add('hidden');\n stepperView.classList.add('opacity-0', 'hidden');\n industrySelection.classList.remove('hidden', 'opacity-0');\n } else if (step < 5) {\n mainGrid.classList.remove('md:grid-cols-3');\n mainGrid.classList.add('md:grid-cols-2');\n rightPanel.classList.remove('md:col-span-2');\n \n mainHeader.classList.add('shrunk');\n progressContainer.classList.remove('hidden');\n industrySelection.classList.add('hidden', 'opacity-0');\n stepperView.classList.remove('hidden', 'opacity-0');\n navigationContainer.classList.remove('hidden');\n \n switch (step) {\n case 2:\n content2.classList.remove('hidden');\n progressBar.style.width = '25%';\n backBtn.style.display = '';\n continueBtnSteps.classList.add('hidden');\n startOverBtn.classList.add('hidden');\n if(regenerateContainer) regenerateContainer.style.display = 'none';\n renderTouchpoints();\n break;\n case 3:\n content3.classList.remove('hidden');\n progressBar.style.width = '50%';\n backBtn.style.display = '';\n continueBtnSteps.classList.remove('hidden');\n continueBtnSteps.textContent = 'Continue';\n startOverBtn.classList.add('hidden');\n if(regenerateContainer) regenerateContainer.style.display = 'none';\n renderParameters();\n break;\n case 4:\n content4.classList.remove('hidden');\n progressBar.style.width = '75%';\n backBtn.style.display = '';\n continueBtnSteps.classList.remove('hidden');\n continueBtnSteps.textContent = 'Generate Visual';\n startOverBtn.classList.add('hidden');\n if(regenerateContainer) regenerateContainer.style.display = 'none';\n validateStep4();\n break;\n }\n } else if (step === 5) {\n mainHeader.classList.add('hidden');\n progressContainer.classList.add('hidden');\n navigationContainer.classList.add('hidden');\n content5.classList.remove('hidden');\n loaderView.classList.remove('hidden');\n mainGrid.classList.remove('md:grid-cols-2');\n mainGrid.classList.add('md:grid-cols-3');\n rightPanel.classList.add('md:col-span-2');\n submitForm();\n }\n \n if (step < 5) updateRightPanel(step);\n }\nfunction updateRightPanel(step, isFinal = false, finalURL = '') {\n let content = '';\n \n \/\/ First, handle the decorative strip separately\n let existingStrip = document.querySelector('#right-panel .decorative-strip-horizontal');\n \n rightPanelContent.className = 'w-full h-full flex flex-col fade-in items-center justify-center text-center';\n \n const isMobile = window.innerWidth < 768;\n if (isMobile && !isFinal) {\n rightPanel.style.display = 'none';\n } else {\n rightPanel.style.display = '';\n }\n \n if (isFinal && finalURL) {\n \/\/ Remove decorative strip for final view\n if (existingStrip) {\n existingStrip.style.opacity = '0';\n setTimeout(() => existingStrip.remove(), 500);\n }\n content = `<div class=\"browser-screen\"><div class=\"browser-header\"><div class=\"browser-dots\"><span class=\"dot\" style=\"background-color:#ff5f56;\"><\/span><span class=\"dot\" style=\"background-color:#ffbd2e;\"><\/span><span class=\"dot\" style=\"background-color:#27c93f;\"><\/span><\/div><\/div><div class=\"browser-body\"><iframe class=\"embed-frame\" src=\"${finalURL}\"><\/iframe><\/div><\/div>`;\n } else if (step === 1) {\n \/\/ Remove decorative strip for step 1\n if (existingStrip) {\n existingStrip.style.opacity = '0';\n setTimeout(() => existingStrip.remove(), 500);\n }\n content = `\n <div class=\"w-full h-full flex flex-col items-center justify-center p-8\">\n <div class=\"relative w-full max-w-full\">\n <video\n id=\"intro-video\"\n class=\"w-full h-auto rounded-lg shadow-lg\"\n autoplay\n loop\n muted\n playsinline\n style=\"max-height: 70vh; object-fit: contain;\">\n <source src=\"https:\/\/userscontent2.emaze.com\/media\/a280ba23-7d59-479f-8927-4e8ad7661bbb\/dc41049266358278bd0aa17a2034dc7d.mp4\" type=\"video\/mp4\">\n Your browser does not support the video tag.\n <\/video>\n <button\n id=\"mute-toggle\"\n onclick=\"toggleMute()\"\n class=\"absolute bottom-4 right-4 bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full p-3 shadow-lg transition-all duration-200 hover:scale-110\"\n title=\"Toggle sound\">\n <svg id=\"mute-icon\" class=\"w-6 h-6 text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z\" clip-rule=\"evenodd\"><\/path>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2\"><\/path>\n <\/svg>\n <svg id=\"unmute-icon\" class=\"w-6 h-6 text-gray-700 hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>`;\n} else if (step > 1 && step < 5) {\n\u00a0 \u00a0 \u00a0 \u00a0 rightPanelContent.classList.remove('justify-center', 'text-center');\n\u00a0 \u00a0 \u00a0 \u00a0 rightPanelContent.classList.add('items-start', 'justify-start', 'text-left', 'pt-16');\n\u00a0 \u00a0 \u00a0 \u00a0\u00a0\n\u00a0 \u00a0 \u00a0 \u00a0 content = '';\n\u00a0 \u00a0 \u00a0 \u00a0\u00a0\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Add decorative strip if it doesn't exist, otherwise it persists\n\u00a0 \u00a0 \u00a0 \u00a0 if (!existingStrip) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Find this part in your updateRightPanel function where the strip is added\nsetTimeout(() => {\n const stripHTML = `\n <div class=\"decorative-strip-container\">\n <div class=\"decorative-strip-horizontal\" style=\"opacity: 0;\">\n <div class=\"strip-track\">\n \n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/f0a7c700e111426830ba24cb8a54cf5f.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/119ef7dc40c962841cb475de366cbe5d.jpeg\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/d243256a831114ac12a108569db35219.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/ee0339952eeea6e34df132f161a17ab4.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/240238a0-ce99-4ea7-ac77-eff09fb5eff2\/94a458e39a8bbac844d1b6b95a328046.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/f86938043c5a5b2f6c882761911dccb4.jpg\" alt=\"\">\n \n \n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/f0a7c700e111426830ba24cb8a54cf5f.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/119ef7dc40c962841cb475de366cbe5d.jpeg\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/d243256a831114ac12a108569db35219.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/ee0339952eeea6e34df132f161a17ab4.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/240238a0-ce99-4ea7-ac77-eff09fb5eff2\/94a458e39a8bbac844d1b6b95a328046.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/f86938043c5a5b2f6c882761911dccb4.jpg\" alt=\"\">\n <\/div>\n <\/div>\n <\/div>`;\n \n rightPanel.insertAdjacentHTML('beforeend', stripHTML);\n const newStrip = rightPanel.querySelector('.decorative-strip-horizontal');\n setTimeout(() => {\n newStrip.style.opacity = '1';\n }, 50);\n}, 100);\n }\n }\n \n rightPanelContent.innerHTML = content;\n \n const marqueeSection = document.getElementById('marquee-section');\n if (isFinal) {\n marqueeSection.classList.add('hidden');\n } else {\n marqueeSection.classList.remove('hidden');\n }\n}\n\nfunction populateIndustryCards(industries) {\n const container = document.getElementById('industry-cards-container');\n container.innerHTML = '';\n \n const activeIndustries = industries.filter(industryName => {\n const details = formContent[industryName];\n return !(details && details.status === 'draft');\n });\n \n activeIndustries.forEach(industryName => {\n const card = document.createElement('div');\n card.className = 'relative flex flex-col justify-center items-center p-6 border rounded-lg text-center transition-colors bg-white group cursor-pointer hover:border-[#2680EB] hover:bg-blue-50 min-h-[120px]';\n card.onclick = () => selectIndustry(industryName);\n \n const descriptions = {\n 'Retail & E-Commerce': 'Online stores & shopping',\n 'Travel & Hospitality': 'Hotels, flights & destinations',\n 'Automotive': 'Car dealerships & sales',\n 'Financial Services': 'Banking & investments',\n 'Healthcare & Pharma': 'Medical & wellness',\n 'Media': 'Streaming & entertainment',\n 'Sports': 'Teams & events',\n 'Entertainment': 'Shows & venues',\n 'Consumer Goods & Lifestyle': 'Products & brands',\n 'Real Estate': 'Properties & homes',\n 'Education': 'Schools & courses',\n 'Telecommunications': 'Phone & internet services',\n 'SMB \/ Services Marketplaces': 'Local services & pros'\n };\n \n card.innerHTML = `\n <h4 class=\"font-semibold text-base\">${industryName}<\/h4>\n <p class=\"text-sm text-gray-500 mt-1\">${descriptions[industryName] || ''}<\/p>\n `;\n container.appendChild(card);\n });\n}\nfunction getIndustryDescription(industry) {\n const descriptions = {\n 'Retail & E-Commerce': '<p class=\"text-sm text-gray-500 mt-1\">Online stores & shopping<\/p>',\n 'Travel & Hospitality': '<p class=\"text-sm text-gray-500 mt-1\">Hotels, flights & destinations<\/p>',\n 'Automotive': '<p class=\"text-sm text-gray-500 mt-1\">Car dealerships & sales<\/p>',\n 'Financial Services': '<p class=\"text-sm text-gray-500 mt-1\">Banking & investments<\/p>',\n 'Healthcare & Pharma': '<p class=\"text-sm text-gray-500 mt-1\">Medical & wellness<\/p>',\n 'Media': '<p class=\"text-sm text-gray-500 mt-1\">Streaming & entertainment<\/p>',\n 'Sports': '<p class=\"text-sm text-gray-500 mt-1\">Teams & events<\/p>',\n 'Entertainment': '<p class=\"text-sm text-gray-500 mt-1\">Shows & venues<\/p>',\n 'Consumer Goods & Lifestyle': '<p class=\"text-sm text-gray-500 mt-1\">Products & brands<\/p>',\n 'Real Estate': '<p class=\"text-sm text-gray-500 mt-1\">Properties & homes<\/p>',\n 'Education': '<p class=\"text-sm text-gray-500 mt-1\">Schools & courses<\/p>',\n 'Telecommunications': '<p class=\"text-sm text-gray-500 mt-1\">Phone & internet services<\/p>',\n 'SMB \/ Services Marketplaces': '<p class=\"text-sm text-gray-500 mt-1\">Local services & pros<\/p>'\n };\n return descriptions[industry] || '';\n}\n \nfunction selectIndustry(industryName) {\n selections.industry = industryName;\n const h2Element = document.querySelector('#content-2 h2');\n if (h2Element) {\n h2Element.textContent = `Select a Touchpoint for ${selections.industry}`;\n }\n \/\/ Automatically continue to step 2\n updateUIForStep(2);\n}\n \n function selectTouchpoint(touchpointName) {\n \/\/ Only clear parameters if it's a different touchpoint\n if (selections.touchpoint !== touchpointName) {\n selections.parameters = {};\n selections.parameterFiles = {};\n }\n selections.touchpoint = touchpointName;\n updateUIForStep(3);\n }\n\n function renderTouchpoints() {\n touchpointOptionsContainer.innerHTML = '';\n const touchpoints = formContent[selections.industry];\n for (const title in touchpoints) {\n if (title === 'status') continue;\n const details = touchpoints[title];\n if (details.status === 'draft') continue;\n \n const card = document.createElement('div');\n card.className = 'relative flex flex-col justify-start p-4 border rounded-lg text-left transition-colors bg-white group cursor-pointer hover:border-[#2680EB] hover:bg-blue-50';\n card.onclick = () => selectTouchpoint(title);\n card.innerHTML = `<h4 class=\"font-semibold text-base\">${title}<\/h4><p class=\"text-sm text-gray-500 mt-1\">${details.description}<\/p>`;\n touchpointOptionsContainer.appendChild(card);\n }\n }\n function renderParameters() {\n content3.innerHTML = `<h2 class=\"text-[20px] font-normal text-gray-600 mb-6 text-center\">Fine-tune Your <span class=\"font-semibold text-gray-800\">${selections.touchpoint}<\/span> Visual<\/h2><div id=\"dynamic-params-container\" class=\"max-w-md mx-auto space-y-4 text-left\"><\/div>`;\n const paramsContainer = document.getElementById('dynamic-params-container');\n const paramsList = formContent[selections.industry][selections.touchpoint].params;\n if (selections.industry === 'Automotive') {\n let availableMakes = Object.keys(automotiveModels);\n if (selections.touchpoint === 'Auto Lead Response') availableMakes = availableMakes.filter(make => make !== 'Skoda');\n else if (selections.touchpoint === 'Monthly Car Promotion') {\n const excludedMakes = ['Land Rover', 'Toyota', 'Hyundai', 'Chevrolet', 'Honda'];\n availableMakes = availableMakes.filter(make => !excludedMakes.includes(make));\n }\n const makeOptionsHtml = availableMakes.map(option => `<li class=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100\">${option}<\/li>`).join('');\n paramsContainer.innerHTML += `<div class=\"mb-4\"><div id=\"make\" class=\"custom-dropdown\" data-param-name=\"make\"><label class=\"block text-sm font-medium text-gray-700\">Make*<\/label><div class=\"relative mt-1\"><button type=\"button\" class=\"custom-dropdown-button w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\"><span class=\"block truncate text-gray-500\">Select an option<\/span><span class=\"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none\"><svg class=\"h-5 w-5 text-gray-400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/><\/svg><\/span><\/button><ul class=\"custom-dropdown-menu hidden absolute z-50 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm\">${makeOptionsHtml}<\/ul><\/div><\/div><\/div>`;\n paramsContainer.innerHTML += `<div id=\"model-dropdown-container\"><\/div><div id=\"model-version-dropdown-container\"><\/div>`;\n const otherParams = paramsList.filter(p => !['make', 'model', 'model-version'].includes(p));\n otherParams.forEach(param => paramsContainer.innerHTML += generateInputField(param));\n } else {\n paramsList.forEach(param => paramsContainer.innerHTML += generateInputField(param));\n }\n paramsContainer.addEventListener('input', handleParamChange);\n paramsContainer.addEventListener('change', handleParamChange);\n validateStep3();\n \n\/\/ Restore previously selected values in custom dropdowns\nsetTimeout(() => {\n Object.keys(selections.parameters).forEach(paramName => {\n const dropdown = document.querySelector(`[data-param-name=\"${paramName}\"], #${paramName}`);\n if (dropdown && dropdown.classList.contains('custom-dropdown')) {\n const display = dropdown.querySelector('.block.truncate');\n if (display && selections.parameters[paramName]) {\n display.textContent = selections.parameters[paramName];\n display.classList.remove('text-gray-500');\n }\n }\n });\n \/\/ Call validateStep3 after restoring values\n validateStep3();\n}, 100);\n }\n function handleParamChange() {\n const paramsContainer = document.getElementById('dynamic-params-container');\n const inputs = paramsContainer.querySelectorAll('input, select, .custom-dropdown');\n inputs.forEach(input => {\n const paramId = input.id || input.dataset.paramName;\n if (!paramId) return;\n if (input.classList.contains('custom-dropdown')) { \n \/\/ Custom dropdown values are already stored in selections.parameters\n \/\/ via the click event handler, so we just skip processing here\n }\n else if (input.type === 'file') { \n selections.parameterFiles[paramId] = input.files[0] || null; \n }\n else { \n selections.parameters[paramId] = input.value; \n }\n });\n validateStep3();\n updateRightPanel(3);\n}\n \nfunction validateStep3() {\n const paramsContainer = document.getElementById('dynamic-params-container');\n if (!paramsContainer) { \n continueBtnSteps.disabled = true; \n return; \n }\n \n const allRequiredInputs = paramsContainer.querySelectorAll('input[required], select[required], .custom-dropdown');\n const allValid = Array.from(allRequiredInputs).every(input => {\n if (input.classList.contains('custom-dropdown')) {\n const paramName = input.dataset.paramName || input.id;\n return !!selections.parameters[paramName];\n }\n return input.value.trim() !== '';\n });\n \n continueBtnSteps.disabled = !allValid;\n}\n function validateStep4() {\n const allValid = companyNameInput.value.trim() !== '' && yourNameInput.value.trim() !== '' && \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(yourEmailInput.value) && phoneInput.value.trim() !== '';\n continueBtnSteps.disabled = !allValid;\n }\n \n function generateInputField(param) {\n const label = param.replace(\/-\/g, ' ').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');\n let inputType = 'text', inputOptions = null;\n if (param.includes('date')) inputType = 'date';\n else if (param.includes('time')) inputType = 'time';\n else if (param.includes('photo') || param === 'image') inputType = 'file';\n else if (param === 'gender') { inputType = 'select'; inputOptions = ['Male', 'Female', 'Unknown']; }\n else if (param === 'preferred-shopping-category') { inputType = 'select'; inputOptions = ['Fashion', 'Electronics', 'Beauty', 'Home D\u00e9cor', 'Sports Gear']; }\n else if (param === 'show-venues') { inputType = 'select'; inputOptions = ['Concert', 'Theater', 'Festival', 'Circus']; }\n else if (param === 'show-type') { inputType = 'select'; inputOptions = ['music', 'sport', 'comedy']; }\n else if (param === 'audience-zone') { inputType = 'select'; inputOptions = ['Front Row', 'VIP Box', 'Balcony', 'General Admission']; }\n else if (param === 'arrival-mood') { inputType = 'select'; inputOptions = ['Early', 'On-time', 'Late', 'Traveling Guest']; }\n else if (param === 'style-preference') { inputType = 'select'; inputOptions = ['Minimalist', 'Trendy', 'Classic', 'Streetwear']; }\n else if (param === 'welcome-offer-type') { inputType = 'select'; inputOptions = ['Free Shipping', '10% Off', 'Loyalty Points', 'Gift With Purchase']; }\n else if (param === 'preferred-genre') { inputType = 'select'; inputOptions = ['Drama', 'Comedy', 'Thriller', 'Documentary', 'Action']; }\n else if (param === 'recent-watch-pattern') { inputType = 'select'; inputOptions = ['Latest Series Watched', 'Trending Movies', 'Mini-series', 'Binge Sessions']; }\n else if (param === 'favorite-actors-directors') { inputType = 'select'; inputOptions = ['Christopher Nolan', 'Zendaya', 'Quentin Tarantino', 'Pedro Almod\u00f3var']; }\n else if (param === 'device-usage') { inputType = 'select'; inputOptions = ['Morning', 'Evening', 'Late Night', 'Weekend', 'Commute']; }\n else if (param === 'purchase-history-spend-level') { inputType = 'select'; inputOptions = ['Low (<$50 Avg)', 'Medium ($50\u2013150)', 'High (>$150)']; }\nelse if (param === 'current-seat-location') { inputType = 'select'; inputOptions = ['Upper Level', 'Mid-tier', 'Premium', 'Standing Section']; }\nelse if (param === 'companions-group-size') { inputType = 'select'; inputOptions = ['Solo', 'Couple', 'Family', 'Friends Group']; }\nelse if (param === 'up-to-game') { inputType = 'select'; inputOptions = ['<24 Hrs', '1\u20133 Days', '>3 Days']; }\n else if (param === 'sport-type') { inputType = 'select'; inputOptions = ['Football', 'Basketball', 'Baseball', 'Soccer', 'Hockey']; }\n else if (param === 'favorite-team') { inputType = 'select'; inputOptions = ['New York Knicks', 'FC Barcelona', 'Green Bay Packers']; }\n else if (param === 'seat-section-info') { inputType = 'select'; inputOptions = ['Lower Bowl', 'Courtside', 'Club Level', 'Upper Deck']; }\n else if (param === 'arrival-context') { inputType = 'select'; inputOptions = ['Early', 'On-time', 'Late', 'Traveling Fan']; }\n else if (param === 'language-preference') { inputType = 'select'; inputOptions = ['English', 'Spanish', 'French', 'German', 'Japanese']; }\n else if (param === 'preferred-language') { inputType = 'select'; inputOptions = ['English', 'Spanish', 'French', 'German']; }\n else if (param === 'product-photo' || param === 'recommended-product-photo' || param.startsWith('product-photo-')) { inputType = 'file'; }\n else if (param === 'cart-abandonment-time') { inputType = 'select'; inputOptions = ['<1 Hour', '1\u20136 Hours', '1\u20133 Days']; }\n else if (param === 'discount-offer-level') { inputType = 'select'; inputOptions = ['Free Shipping', '10% Off', '20% Off']; }\n else if (param === 'visual-theme') { inputType = 'select'; inputOptions = ['Luxury', 'Playful', 'Eco-friendly', 'Techy']; }\n else if (param === 'purchase-occasion') { inputType = 'select'; inputOptions = ['Gift', 'Self-Treat', 'Seasonal', 'Back-to-School']; }\n else if (param === 'welcome-media-style') { inputType = 'select'; inputOptions = ['Hype Video', 'Backstage Clip', 'Static Poster']; }\n else if (param === 'spending-profile') { inputType = 'select'; inputOptions = ['Low (<$50 Avg)', 'Medium ($50\u2013150)', 'High (>$150)']; }\n else if (param === 'audience-current-zone') { inputType = 'select'; inputOptions = ['Rear Section', 'Mid-tier', 'Premium', 'VIP Box']; }\n else if (param === 'group-attendance') { ainputType = 'select'; inputOptions = ['Solo', 'Couple', 'Family', 'Friends Group']; }\n else if (param === 'beloved-performer') { inputType = 'select'; inputOptions = ['Beyonc\u00e9', 'Hamilton Cast', 'Ed Sheeran', 'Adele']; }\n else if (param === 'loyalty-milestone') { inputType = 'select'; inputOptions = ['Birthday', 'Membership Anniversary', '10th Show Attended']; }\n else if (param === 'fan-recognition-level') { inputType = 'select'; inputOptions = ['Front Row Regular', 'VIP Club Member', 'Meet-and-greet Attendee']; }\n else if (param === 'celebration-style') { inputType = 'select'; inputOptions = ['On-screen Feature', 'Social Media Shout-out', 'Personalized Email Montage']; }\n else if (param === 'anticipation-level') { inputType = 'select'; inputOptions = ['Daily Build-up', 'Last 24 Hrs Only']; }\n else if (param === 'highlight-moment-type') { inputType = 'select'; inputOptions = ['Rehearsal Clips', 'Behind-the-scenes Footage', 'Artist Interview Moments']; }\n else if (param === 'reminder-timing') { inputType = 'select'; inputOptions = ['Morning Reminder', 'Evening Hype', 'Show-day Push']; }\n else if (param === 'merchandise-bundle-offer') { inputType = 'select'; inputOptions = ['Tour T-shirt Discount', 'Limited-edition Vinyl', 'VIP Backstage Upgrade']; } \n else if (param === 'loyalty-tier') { inputType = 'select'; inputOptions = ['New', 'Silver', 'Gold', 'Platinum']; }\n else if (param === 'next-best-product') { inputType = 'select'; inputOptions = ['Matching Wallet', 'Screen Protector', 'Gift Wrapping']; }\n else if (param === 'monthly-capacity') { inputType = 'select'; inputOptions = ['$200\u2013$500', '$500\u2013$1,000', '$1,000\u2013$2,500','$2,500\u2013$5,000', '$5,000+']; } \n \n else if (param === 'horizon-in-years') { inputType = 'select'; inputOptions = ['1y', '1\u20133y', '3\u20135y',' 5\u201310y', '10y+']; } \n else if (param === 'primary-goal') { inputType = 'select'; inputOptions = ['Save 20% down payment', 'Pay off $10,000 debt', 'Invest $1,000\/month for 10 years',' Reach $500,000 retirement savings', 'Reduce debt-to-income ratio to 30%', 'Maintain $500,000 protection coverage']; } \n else if (param === 'family-status') { inputType = 'select'; inputOptions = ['Single', 'Couple', 'With kids',' Caregiver']; } \n else if (param === 'previous-favorite-acts') { inputType = 'select'; inputOptions = ['Billie Eilish', 'The Phantom of the Opera', 'Metallica']; }\nelse if (param === 'last-visit') { inputType = 'select'; inputOptions = ['<1 Month', '1\u20133 Months', '>3 Months']; }\nelse if (param === 'content-replay-behavior') { inputType = 'select'; inputOptions = ['Watched Highlights', 'Shared Show Clips', 'Subscribed To Artist Updates']; }\n else if (param === 'previous-favorite-category') { inputType = 'select'; inputOptions = ['Shoes', 'Electronics', 'Skincare', 'Books']; }\n else if (param === 'seasonal-vibe') { inputType = 'select'; inputOptions = ['Spring Bloom Getaway', 'Sunny Beach Escape', 'Autumn Foliage Tour', 'Winter Wonderland', 'Cozy Mountain Retreat', 'Island Hopping Adventure', 'Christmas Market Magic', 'Tropical Winter Escape', 'Harvest Celebration', 'Summer Festival Season', 'Ski Resort Adventure', 'Crisp City Break', 'Northern Lights Expedition', 'New Years Countdown']; }\n else if (param === 'exclusive-offer-type') { inputType = 'select'; inputOptions = ['20% Off', 'Free Gift', 'Double Loyalty Points']; }\n else if (param === 'visual-style') { inputType = 'select'; inputOptions = ['Bold', 'Minimal', 'Seasonal', 'Lifestyle']; }\n else if (param === 'birthday-month') { inputType = 'select'; inputOptions = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; }\n else if (param === 'preferred-gift-category') { inputType = 'select'; inputOptions = ['Beauty', 'Accessories', 'Tech Gadgets', 'Gourmet Food']; }\n else if (param === 'celebration-offer-type') { inputType = 'select'; inputOptions = ['Birthday Discount', 'Free Shipping + Gift', 'VIP Access']; }\n else if (param === 'message-tone') { inputType = 'select'; inputOptions = ['Playful', 'Elegant', 'Friendly', 'Luxury']; }\n else if (param === 'color-palette') { inputType = 'select'; inputOptions = ['Earthy Neutrals', 'Vibrant Pastels', 'Bold & Modern', 'Classic Monochromes']; }\n else if (param === 'dream-destination' || param === 'dream-location') { inputType = 'select'; inputOptions = ['Paris', 'Tokyo', 'Bora Bora', 'New York City', 'Kyoto', 'Rome', 'Santorini', 'Maldives', 'Machu Picchu', 'Cairo', 'London', 'Sydney', 'Rio de Janeiro', 'Cape Town', 'Dubai', 'Reykjavik', 'Barcelona', 'Bangkok', 'Amalfi Coast', 'Serengeti', 'Great Barrier Reef']; }\n else if (param.includes('vibe')) { inputType = 'select'; inputOptions = ['Adventure', 'Relaxing', 'Cultural', 'Urban', 'Nature', 'Modern', 'Rustic', 'Sporty', 'Luxurious']; }\n else if (param.includes('group-size')) { inputType = 'select'; inputOptions = ['Solo', 'Couple', 'Family', 'Group']; }\n else if (param === 'grade') { inputType = 'select'; inputOptions = ['K-5', '6-8', '9-12', 'Undergraduate', 'Graduate', 'Professional']; }\n else if (param === 'class-topic' || param === 'primary-interest') { inputType = 'select'; inputOptions = []; }\n else if (param === 'device') { inputType = 'select'; inputOptions = ['Smartphone', 'Laptop', 'Tablet', 'Smartwatch']; }\n else if (param === 'device-protection-service') { inputType = 'select'; inputOptions = []; }\n else if (param === 'life-stage') { inputType = 'select'; inputOptions = ['Starting a family', 'Buying a home', 'Planning for retirement', 'Managing debt', 'Investing for growth', 'Protecting assets']; }\n else if (param === 'emotional-tone') { inputType = 'select'; inputOptions = ['Secure', 'Ambitious', 'Peaceful', 'Confident', 'Empathetic', 'Hopeful']; }\n else if (param === 'health-focus') { inputType = 'select'; inputOptions = ['Wellness', 'Family Health', 'Preventative Care', 'Chronic Condition Management', 'Mental Health', 'Physical Therapy']; }\n else if (param === 'age-group') { inputType = 'select'; inputOptions = ['0-12', '13-17', '18-24', '25-34', '35-44', '45-54', '55-64', '65+']; }\n else if (param === 'lifestyle-scene') { inputType = 'select'; inputOptions = ['Golden Hour Magic', 'Urban Explorer', 'Cozy Corner', 'Rooftop Social', 'Beach Day Bliss', 'Mountain View Moment', 'Cafe Culture', 'Wellness Ritual', 'Creative Studio', 'Garden Escape', 'Kitchen Creations', 'Desk Setup Goals', 'Festive Gathering', 'Road Trip Adventure', 'Minimalist Flatlay', 'Post Workout Glow']; }\n if (inputType === 'select') {\n const optionsHtml = inputOptions.map(option => `<li class=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100\">${option}<\/li>`).join('');\nreturn `<div class=\"mb-4\"><div id=\"${param}\" class=\"custom-dropdown\" data-param-name=\"${param}\"><label class=\"block text-sm font-medium text-gray-700\">${label}*<\/label><div class=\"relative mt-1\"><button type=\"button\" class=\"custom-dropdown-button w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\"><span class=\"block truncate text-gray-500\">Select an option<\/span><span class=\"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none\"><svg class=\"h-5 w-5 text-gray-400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/><\/svg><\/span><\/button><ul class=\"custom-dropdown-menu hidden absolute z-50 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm\">${optionsHtml}<\/ul><\/div><\/div><\/div>`;\n } else if (inputType === 'file') {\n return `<div><label class=\"block text-sm font-medium text-gray-700\">${label}<\/label><div class=\"mt-1\"><label id=\"${param}-label\" for=\"${param}\" class=\"relative flex justify-center w-full h-32 px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md cursor-pointer hover:border-gray-400\"><div class=\"space-y-1 text-center\"><svg class=\"mx-auto h-12 w-12 text-gray-400\" stroke=\"currentColor\" fill=\"none\" viewBox=\"0 0 48 48\"><path d=\"M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><div class=\"flex text-sm text-gray-600\"><p class=\"pl-1\">Upload a file<\/p><\/div><p class=\"text-xs text-gray-500\">PNG, JPG, GIF<\/p><\/div><input id=\"${param}\" name=\"${param}\" type=\"file\" class=\"sr-only\" onchange=\"handleFileChange(event, '${param}')\" accept=\"image\/png, image\/jpeg, image\/gif\"><\/label><\/div><\/div>`;\n } else {\n return `<div class=\"mb-4\"><label for=\"${param}\" class=\"block text-sm font-medium text-gray-700\">${label}*<\/label><input type=\"${inputType}\" id=\"${param}\" name=\"${param}\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\" required><\/div>`;\n }\n }\n window.updateAutomotiveFields = function(makeValue) {\n const modelContainer = document.getElementById('model-dropdown-container');\n const modelVersionContainer = document.getElementById('model-version-dropdown-container');\n modelContainer.innerHTML = '';\n modelVersionContainer.innerHTML = '';\n delete selections.parameters['model'];\n delete selections.parameters['model-version'];\n if (makeValue) {\n const models = automotiveModels[makeValue] || [];\n const modelOptionsHtml = models.map(option => `<li class=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100\">${option}<\/li>`).join('');\n modelContainer.innerHTML = `<div class=\"mb-4\"><div id=\"model\" class=\"custom-dropdown\" data-param-name=\"model\"><label class=\"block text-sm font-medium text-gray-700\">Model*<\/label><div class=\"relative mt-1\"><button type=\"button\" class=\"custom-dropdown-button w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\"><span class=\"block truncate text-gray-500\">Select a model<\/span><span class=\"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none\"><svg class=\"h-5 w-5 text-gray-400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/><\/svg><\/span><\/button><ul class=\"custom-dropdown-menu hidden absolute z-50 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm\">${modelOptionsHtml}<\/ul><\/div><\/div><\/div>`;\n }\n handleParamChange();\n }\n\n window.updateLandRoverModelVersion = function(modelValue) {\n const modelVersionContainer = document.getElementById('model-version-dropdown-container');\n modelVersionContainer.innerHTML = '';\n delete selections.parameters['model-version'];\n if (selections.parameters['make'] === 'Land Rover' && modelValue) {\n const versions = landRoverModelVersions[modelValue] || [];\n if (versions.length > 0) {\n const versionOptionsHtml = versions.map(option => `<li class=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100\">${option}<\/li>`).join('');\n modelVersionContainer.innerHTML = `<div class=\"mb-4\"><div id=\"model-version\" class=\"custom-dropdown\" data-param-name=\"model-version\"><label class=\"block text-sm font-medium text-gray-700\">Model Version*<\/label><div class=\"relative mt-1\"><button type=\"button\" class=\"custom-dropdown-button w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\"><span class=\"block truncate text-gray-500\">Select a version<\/span><span class=\"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none\"><svg class=\"h-5 w-5 text-gray-400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/><\/svg><\/span><\/button><ul class=\"custom-dropdown-menu hidden absolute z-50 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm\">${versionOptionsHtml}<\/ul><\/div><\/div><\/div>`;\n }\n }\n handleParamChange();\n }\n \n window.updateEducationFields = function(gradeValue) {\n const classTopicContainer = document.getElementById('class-topic');\n const primaryInterestContainer = document.getElementById('primary-interest');\n \n \/\/ Update class-topic if it exists\n if (classTopicContainer) {\n const topics = classTopicsByGrade[gradeValue] || [];\n const topicsHtml = topics.map(option => \n `<li class=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100\">${option}<\/li>`\n ).join('');\n \n const button = classTopicContainer.querySelector('.block.truncate');\n const menu = classTopicContainer.querySelector('.custom-dropdown-menu');\n \n button.textContent = 'Select an option';\n button.classList.add('text-gray-500');\n menu.innerHTML = topicsHtml;\n delete selections.parameters['class-topic'];\n }\n \n \/\/ Update primary-interest if it exists\n if (primaryInterestContainer) {\n const interests = primaryInterestsByGrade[gradeValue] || [];\n const interestsHtml = interests.map(option => \n `<li class=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100\">${option}<\/li>`\n ).join('');\n \n const button = primaryInterestContainer.querySelector('.block.truncate');\n const menu = primaryInterestContainer.querySelector('.custom-dropdown-menu');\n \n button.textContent = 'Select an option';\n button.classList.add('text-gray-500');\n menu.innerHTML = interestsHtml;\n delete selections.parameters['primary-interest'];\n }\n \n handleParamChange();\n}\n\nwindow.updateTelecomFields = function(deviceValue) {\n const protectionContainer = document.getElementById('device-protection-service');\n \n if (protectionContainer) {\n const services = deviceProtectionServicesByDevice[deviceValue] || [];\n const servicesHtml = services.map(option => \n `<li class=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100\">${option}<\/li>`\n ).join('');\n \n const button = protectionContainer.querySelector('.block.truncate');\n const menu = protectionContainer.querySelector('.custom-dropdown-menu');\n \n button.textContent = 'Select an option';\n button.classList.add('text-gray-500');\n menu.innerHTML = servicesHtml;\n delete selections.parameters['device-protection-service'];\n }\n \n handleParamChange();\n}\n\n window.updateDynamicOptions = function(event) {\n const selectedValue = event.target.value;\n const triggerId = event.target.id;\n let targetSelect, optionsSource;\n if (triggerId === 'grade') {\n if (document.getElementById('class-topic')) { targetSelect = document.getElementById('class-topic'); optionsSource = classTopicsByGrade; } \n else if (document.getElementById('primary-interest')) { targetSelect = document.getElementById('primary-interest'); optionsSource = primaryInterestsByGrade; }\n } else if (triggerId === 'device') {\n targetSelect = document.getElementById('device-protection-service');\n optionsSource = deviceProtectionServicesByDevice;\n }\n if (targetSelect && optionsSource) {\n targetSelect.innerHTML = '<option value=\"\">Select an option<\/option>';\n targetSelect.disabled = true;\n if (selectedValue && optionsSource[selectedValue]) {\n optionsSource[selectedValue].forEach(opt => targetSelect.innerHTML += `<option value=\"${opt}\">${opt}<\/option>`);\n targetSelect.disabled = false;\n }\n }\n }\n\n window.handleFileChange = function(event, param) {\n const file = event.target.files[0];\n const label = document.getElementById(`${param}-label`);\n if (file && label) {\n selections.parameterFiles[param] = file;\n label.innerHTML = `<div class=\"p-4 text-center\"><p class=\"font-semibold text-green-600\">File Selected:<\/p><p class=\"text-sm text-gray-700 truncate\">${file.name}<\/p><\/div>`;\n }\n }\n\n async function uploadFileAndGetUrl(file) {\n if (!file) return { objectKey: '', downloadUrl: '' };\n try {\n const signResponse = await fetch(GAS_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'text\/plain;charset=utf-8' }, body: JSON.stringify({ action: 'getUploadUrl', fileName: file.name, contentType: file.type, submissionId: lastSubmissionId || null }) });\n const signData = await signResponse.json();\n if (signData.status !== 'ok' || !signData.uploadUrl) { throw new Error(signData.error || 'Backend failed to provide upload URL.'); }\n const uploadResponse = await fetch(signData.uploadUrl, { method: 'PUT', body: file, headers: { 'Content-Type': file.type } });\n if (!uploadResponse.ok) { throw new Error(`File upload failed. Status: ${uploadResponse.status}`); }\n return { objectKey: signData.objectKey, downloadUrl: signData.downloadUrl };\n } catch (err) { console.error('Upload process failed:', err); throw err; }\n }\n\n function listenForUrl(submissionId) {\n const resultRef = database.ref('results\/' + submissionId);\n const timeout = setTimeout(() => {\n resultRef.off();\n showModal(\"Visual generation is taking longer than expected. Please try again.\");\n setTimeout(() => window.location.reload(), 3000);\n }, 60000);\n resultRef.on('value', snapshot => {\n const data = snapshot.val();\n if (data && data.url) {\n clearTimeout(timeout);\n resultRef.off();\n onCreationUrlReady(data.url);\n }\n });\n }\n\n function showModal(message) { alert(message); }\n\n function typeWordsEffect(element, htmlString, callback) {\n const words = htmlString.match(\/<[^>]+>|[^<>\\s]+|\\s+\/g) || [];\n let i = 0;\n element.innerHTML = '';\n const typingInterval = setInterval(() => {\n if (i < words.length) {\n element.innerHTML += words[i];\n if (element.closest('.overflow-y-auto')) {\n element.closest('.overflow-y-auto').scrollTop = element.closest('.overflow-y-auto').scrollHeight;\n }\n i++;\n } else {\n clearInterval(typingInterval);\n if (callback) callback();\n }\n }, 50);\n }\n \n function runLoaderAnimation(callback) {\n const isMobile = window.innerWidth < 768;\n \n \/\/ Set the container classes for text\n const containerClasses = isMobile \n ? 'text-left max-w-md text-black h-auto pr-2' \n : 'text-left max-w-md text-black h-96 pr-2'; \/\/ Removed overflow-y-auto\n \n loaderView.innerHTML = `<div id=\"loader-explanation-container\" class=\"${containerClasses}\" style=\"scroll-behavior: smooth;\"><\/div>`;\n \n const container = document.getElementById('loader-explanation-container');\n const black = (text) => text ? `<span class='text-black font-semibold'>${text}<\/span>` : '';\n const paramSummary = `Applying your style preferences based on your selections.`;\n \n const stages = [\n {\n title: \"Initialization\",\n text: `Okay, starting with your ${black(selections.industry)} business and focusing on the ${black(selections.touchpoint)} message.`\n },\n {\n title: \"Styling\",\n text: paramSummary\n },\n {\n title: \"Analysis & Rendering\",\n text: `Analyzing visual data points to find the perfect combination... rendering the initial layers.`\n },\n {\n title: \"Finalization\",\n text: `Finally, tailoring the visual and adding your company details. Your visual is almost ready!`\n }\n ];\n \n let currentStage = 0;\n const totalDuration = 32000;\n const stageDuration = totalDuration \/ stages.length;\n \n function runStage() {\n if (currentStage >= stages.length) {\n if (callback) callback();\n return;\n }\n \n const stageData = stages[currentStage];\n const stageElement = document.createElement('div');\n stageElement.className = 'stage flex items-start space-x-3 mb-4';\n \n const iconContainer = document.createElement('div');\n iconContainer.className = 'icon-container flex-shrink-0 mt-1';\n iconContainer.innerHTML = `<div class=\"loader-circle\"><\/div>`;\n \n const textContainer = document.createElement('div');\n textContainer.className = 'text-container w-full';\n textContainer.innerHTML = `<p class=\"font-semibold\">${stageData.title}<\/p><p class=\"mb-3\">${stageData.text}<\/p>`;\n \n stageElement.appendChild(iconContainer);\n stageElement.appendChild(textContainer);\n container.appendChild(stageElement);\n \n \/\/ The line below, which scrolls to the bottom, is now unnecessary since scrolling is disabled.\n \/\/ container.scrollTop = container.scrollHeight;\n \n setTimeout(() => {\n iconContainer.innerHTML = `<div class=\"loader-check\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z\" clip-rule=\"evenodd\" \/><\/svg><\/div>`;\n currentStage++;\n runStage();\n }, stageDuration);\n }\n \n runStage();\n }\n\n function renderFinalView() {\n if (!finalVisualUrl) return;\n \n updateRightPanel(5, true, finalVisualUrl);\n\n thankYouPopupTimer = setTimeout(() => {\n showThankYouPopup();\n }, 12000);\n \n rightPanel.classList.add('final-view');\n \n const mainHeader = document.getElementById('main-header');\n const progressContainer = document.getElementById('progress-container');\n if (mainHeader) mainHeader.classList.add('hidden');\n if (progressContainer) progressContainer.classList.add('hidden');\n \n const backBtn = document.getElementById('back-btn');\n const continueBtnSteps = document.getElementById('continue-btn-steps');\n const startOverBtn = document.getElementById('start-over-btn');\n const regenerateContainer = document.getElementById('regenerate-container');\n const navigationContainer = document.getElementById('navigation-container');\n \n if (backBtn) backBtn.style.display = 'none';\n if (regenerateContainer) regenerateContainer.style.display = 'none';\n\n if (continueBtnSteps) {\n continueBtnSteps.textContent = \"Schedule a Demo\";\n continueBtnSteps.disabled = false;\n continueBtnSteps.className = \"btn-primary\";\n continueBtnSteps.onclick = openScheduleModal;\n }\n\n if (startOverBtn) {\n startOverBtn.classList.remove('hidden');\n startOverBtn.textContent = \"Create Another\";\n startOverBtn.className = \"btn-link\";\n startOverBtn.onclick = () => window.location.reload();\n }\n\n if (navigationContainer) {\n navigationContainer.classList.remove('hidden');\n }\n\n const container = document.getElementById('loader-explanation-container');\n if (container && !container.querySelector('.final-ready-message')) {\n const readyMessage = document.createElement('div');\n readyMessage.className = 'flex items-start space-x-3 my-4 fade-in final-ready-message';\n readyMessage.innerHTML = `\n <div class=\"flex-shrink-0 mt-1\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/780404fc-1a4f-40be-b14f-c0fbb53e93a3\/e0a3c7804bca121fd008f60f639a583a.png\" alt=\"emaze icon\" class=\"w-8\">\n <\/div>\n <div class=\"w-full\">\n <h2 class=\"text-[20px] font-semibold text-black\">Your Visual is Ready!<\/h2>\n <\/div>`;\n container.appendChild(readyMessage);\n container.scrollTop = container.scrollHeight;\n }\n\n const isMobile = window.innerWidth < 768;\n if (isMobile) {\n document.body.classList.add('final-view-active');\n const leftColumn = document.getElementById('left-column');\n if (leftColumn) leftColumn.style.display = 'none';\n const mainGrid = document.getElementById('main-grid');\n mainGrid.className = 'flex flex-col items-center p-4';\n const logo = document.getElementById('site-logo');\n const rightPanel = document.getElementById('right-panel');\n const navigationContainer = document.getElementById('navigation-container');\n const logoClone = logo ? logo.cloneNode(true) : null;\n const navClone = navigationContainer ? navigationContainer.cloneNode(true) : null;\n mainGrid.innerHTML = '';\n if (logoClone) {\n logoClone.className = 'h-5 w-auto my-6';\n mainGrid.appendChild(logoClone);\n }\n if (rightPanel) {\n rightPanel.className = 'w-full mb-4';\n rightPanel.style.display = 'block';\n rightPanel.style.height = 'auto';\n rightPanel.style.position = 'static';\n mainGrid.appendChild(rightPanel);\n }\n if (navClone) {\n navClone.classList.remove('hidden');\n navClone.className = 'w-full text-center py-4';\n navClone.style.display = 'block';\n mainGrid.appendChild(navClone);\n const clonedContinueBtn = navClone.querySelector('#continue-btn-steps');\n const clonedStartOverBtn = navClone.querySelector('#start-over-btn');\n if (clonedContinueBtn) {\n clonedContinueBtn.textContent = \"Schedule a Demo\";\n clonedContinueBtn.disabled = false;\n clonedContinueBtn.className = \"btn-primary\";\n clonedContinueBtn.onclick = function() {\n openScheduleModal();\n };\n }\n if (clonedStartOverBtn) {\n clonedStartOverBtn.classList.remove('hidden');\n clonedStartOverBtn.textContent = \"Create Another\";\n clonedStartOverBtn.className = \"btn-link\";\n clonedStartOverBtn.onclick = () => window.location.reload();\n }\n }\n } else {\n setTimeout(() => {\n const leftColumn = document.getElementById('left-column');\n if (leftColumn) {\n finalLeftColumnHTML = leftColumn.innerHTML;\n }\n }, 100);\n }\n }\n \n async function submitForm() {\n isSubmitting = true;\n console.log('Starting submission process...');\n runLoaderAnimation(renderFinalView);\n\n lastSubmissionId = 'sid_' + Date.now() + '_' + Math.random().toString(36).substring(2, 8);\n console.log('Generated submission ID:', lastSubmissionId);\n \n try {\n \/\/ Collect form data\n selections.companyName = companyNameInput.value;\n selections.website = websiteInput.value;\n selections.yourName = yourNameInput.value;\n selections.yourEmail = yourEmailInput.value;\n selections.phone = phoneInput.value;\n selections.companyLogo = companyLogoInput.files[0] || null;\n \n const paramsList = formContent[selections.industry][selections.touchpoint].params;\n const collectedParameters = { ...selections.parameters };\n const fileUploadPromises = [];\n \n console.log('Processing parameters...');\n \n paramsList.forEach(param => {\n const el = document.getElementById(param);\n if (el && el.type === 'file' && el.files[0]) {\n fileUploadPromises.push(uploadFileAndGetUrl(el.files[0]).then(result => { \n collectedParameters[param] = result.downloadUrl; \n }));\n }\n else if (selections.parameterFiles[param]) {\n fileUploadPromises.push(uploadFileAndGetUrl(selections.parameterFiles[param]).then(result => { \n collectedParameters[param] = result.downloadUrl; \n }));\n }\n });\n \n if (selections.companyLogo) {\n fileUploadPromises.push(uploadFileAndGetUrl(selections.companyLogo).then(result => { \n selections.companyLogoUrl = result.downloadUrl; \n }));\n }\n \n console.log('Waiting for file uploads...');\n await Promise.all(fileUploadPromises);\n \n const payload = { \n submission_id: lastSubmissionId, \n industry: selections.industry, \n touchpoint_name: selections.touchpoint, \n touchpoint_id: formContent[selections.industry][selections.touchpoint].id, \n parameters: collectedParameters, \n company_info: { \n companyName: selections.companyName, \n website: selections.website, \n yourName: selections.yourName, \n phone: selections.phone, \n logo: selections.companyLogoUrl || '' \n }, \n personal_info: { email: selections.yourEmail }, \n submitted_at: new Date().toISOString() \n };\n \n console.log('Submitting payload:', JSON.stringify(payload, null, 2));\n \n \/\/ Send to webhook with proper error handling\n const response = await fetch(GAS_ENDPOINT, { \n method: 'POST', \n body: JSON.stringify({action: 'submitData', ...payload }), \n headers: { 'Content-Type': 'text\/plain;charset=utf-8' }\n });\n \n console.log('Response status:', response.status);\n const responseData = await response.json();\n console.log('Response data:', responseData);\n \n if (responseData.status !== 'ok') {\n throw new Error(responseData.error || 'Submission failed');\n }\n \n \/\/ Start listening for URL\n listenForUrl(lastSubmissionId);\n \n } catch (err) {\n console.error(\"Submission process failed:\", err);\n isSubmitting = false;\n showModal(err.message || 'An error occurred during submission. Please check your inputs and try again.');\n updateUIForStep(4);\n }\n}\n\n \/\/ --- THANK YOU POPUP VARIABLES ---\n let thankYouPopupShown = false;\n let thankYouPopupTimer = null;\n\n function showThankYouPopup() {\n if (thankYouPopupShown) return;\n \n const popup = document.getElementById('thankYouPopup');\n const nameSpan = document.getElementById('thankYouName');\n \n const userName = selections.yourName || 'Friend';\n if (nameSpan) {\n nameSpan.textContent = userName;\n }\n \n if (popup) {\n popup.classList.remove('hidden');\n thankYouPopupShown = true;\n }\n }\n \n window.closeThankYouPopup = function() {\n const popup = document.getElementById('thankYouPopup');\n if (popup) {\n popup.classList.add('hidden');\n }\n if (thankYouPopupTimer) {\n clearTimeout(thankYouPopupTimer);\n thankYouPopupTimer = null;\n }\n }\n \n window.scheduleFromThankYou = function() {\n closeThankYouPopup();\n setTimeout(() => {\n openScheduleModal();\n }, 300);\n }\n\n function onCreationUrlReady(url) {\n finalVisualUrl = url;\n \/\/ The animation is already running. The renderFinalView function\n \/\/ will be called by the animation's callback.\n }\n\n let selectedDate = null;\n let selectedTime = null;\n let currentMonth = new Date().getMonth();\n let currentYear = new Date().getFullYear();\n const monthNames = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n\n function openScheduleModal() {\n const isMobile = window.innerWidth < 768;\n const schedulerContainer = document.getElementById('newScheduleModal');\n const emailFromForm = selections.yourEmail || '';\n const newModalEmailField = document.getElementById('modal-email');\n\n if (newModalEmailField) { \n newModalEmailField.value = emailFromForm; \n }\n \n if (isMobile) {\n schedulerContainer.classList.add('popup-mode');\n schedulerContainer.style.display = 'flex';\n schedulerContainer.style.zIndex = '9999';\n } else {\n showSchedulerInLeftPanel();\n }\n\n generateCalendar(currentMonth, currentYear);\n checkFormValidity();\n }\n \n window.closePopup = function() {\n const schedulerContainer = document.getElementById('newScheduleModal');\n const isMobile = window.innerWidth < 768;\n \n if (isMobile) {\n schedulerContainer.classList.remove('popup-mode');\n schedulerContainer.style.display = 'none';\n } else {\n const leftPanelWrapper = document.getElementById('left-panel-content-wrapper');\n const hasScheduler = leftPanelWrapper && leftPanelWrapper.querySelector('.popup');\n \n if (hasScheduler && finalLeftColumnHTML) {\n showFinalViewInLeftPanel();\n } else {\n schedulerContainer.style.display = 'none';\n }\n }\n \n selectedDate = null;\n selectedTime = null;\n document.querySelectorAll('.calendar-day.selected').forEach(d => d.classList.remove('selected'));\n document.querySelectorAll('.time-slot.selected').forEach(s => s.classList.remove('selected'));\n document.getElementById('summaryDate').textContent = 'Not selected';\n document.getElementById('summaryTime').textContent = 'Not selected';\n document.getElementById('booking-details-form').classList.add('hidden');\n \n const dateView = document.getElementById('dateView');\n const timeView = document.getElementById('timeView');\n if (dateView && timeView) {\n dateView.classList.remove('slide-out');\n timeView.classList.remove('slide-in');\n }\n }\n\n\n function closeConfirmationPopup() { document.getElementById('bookingConfirmationPopup').style.display = 'none'; }\n function generateCalendar(month, year) {\n const firstDay = new Date(year, month, 1).getDay();\n const daysInMonth = new Date(year, month + 1, 0).getDate();\n document.getElementById('calendarTitle').textContent = `${monthNames[month]} ${year}`;\n const calendarDays = document.getElementById('calendarDays');\n calendarDays.innerHTML = '';\n for (let i = 0; i < firstDay; i++) { calendarDays.innerHTML += `<div class=\"calendar-day other-month\"><\/div>`; }\n const today = new Date();\n for (let day = 1; day <= daysInMonth; day++) {\n const dayElement = document.createElement('div');\n dayElement.className = 'calendar-day';\n dayElement.textContent = day;\n const thisDate = new Date(year, month, day);\n if (thisDate < today.setHours(0, 0, 0, 0)) { dayElement.classList.add('disabled'); }\n else { dayElement.onclick = () => selectDate(dayElement, day, month, year); }\n calendarDays.appendChild(dayElement);\n }\n }\n window.previousMonth = function() { currentMonth--; if (currentMonth < 0) { currentMonth = 11; currentYear--; } generateCalendar(currentMonth, currentYear); }\n window.nextMonth = function() { currentMonth++; if (currentMonth > 11) { currentMonth = 0; currentYear++; } generateCalendar(currentMonth, currentYear); }\n function selectDate(element, day, month, year) {\n document.querySelectorAll('.calendar-day.selected').forEach(d => d.classList.remove('selected'));\n element.classList.add('selected');\n const monthStr = monthNames[month].substring(0, 3);\n selectedDate = `${monthStr} ${day}, ${year}`;\n document.getElementById('summaryDate').textContent = selectedDate;\n showTimeView();\n }\n\n function showTimeView() {\n const dateView = document.getElementById('dateView');\n const timeView = document.getElementById('timeView');\n const viewContainer = dateView.closest('.view-container');\n\n viewContainer.style.height = dateView.offsetHeight + 'px';\n\n dateView.classList.add('slide-out');\n\n timeView.classList.add('slide-in');\n setTimeout(() => {\n viewContainer.style.height = timeView.offsetHeight + 'px';\n }, 50);\n }\n\n window.backToDateSelection = function() {\n const dateView = document.getElementById('dateView');\n const timeView = document.getElementById('timeView');\n const viewContainer = dateView.closest('.view-container');\n\n document.getElementById('booking-details-form').classList.add('hidden');\n \n viewContainer.style.height = timeView.offsetHeight + 'px';\n \n dateView.classList.remove('slide-out');\n timeView.classList.remove('slide-in');\n \n setTimeout(() => {\n viewContainer.style.height = dateView.offsetHeight + 'px';\n }, 50);\n }\n\n window.selectTime = function(element) {\n document.querySelectorAll('.time-slot.selected').forEach(s => s.classList.remove('selected'));\n element.classList.add('selected');\n selectedTime = element.textContent;\n document.getElementById('summaryTime').textContent = selectedTime;\n document.getElementById('selectionSummary').classList.add('active');\n\n const detailsForm = document.getElementById('booking-details-form');\n detailsForm.classList.remove('hidden');\n detailsForm.classList.add('fade-in');\n\n const timeView = document.getElementById('timeView');\n const viewContainer = timeView.closest('.view-container');\n if (viewContainer) {\n setTimeout(() => {\n viewContainer.style.height = timeView.offsetHeight + 'px';\n }, 50);\n }\n\n checkFormValidity();\n }\n\n\n function checkFormValidity() {\n const email = document.getElementById('modal-email').value;\n const confirmBtn = document.querySelector('#newScheduleModal .btn-confirm');\n if(confirmBtn) confirmBtn.disabled = !(email && selectedDate && selectedTime);\n }\n window.confirmBooking = function() {\n const email = document.getElementById('modal-email').value;\n if (!email || !selectedDate || !selectedTime) { \n showModal('Please fill in your email and select a date and time.'); \n return; \n }\n if (!emailRegex.test(email)) { \n showModal('Please enter a valid email.'); \n return; \n }\n \n const eventDate = new Date(`${selectedDate} ${selectedTime}`);\n const scheduledDateTime = `${selectedDate} at ${selectedTime}`;\n const payload = { \n action: 'createEvent', \n submission_id: lastSubmissionId || null, \n organizer_email: email, \n additional_attendees: document.getElementById('modal-attendees').value.trim(), \n notes: document.getElementById('modal-notes').value.trim(), \n start_iso: eventDate.toISOString(), \n duration_minutes: 30, \n client_tz: Intl.DateTimeFormat().resolvedOptions().timeZone, \n company_name: selections.companyName || '', \n demo_scheduled: scheduledDateTime \n };\n \n const isMobile = window.innerWidth < 767;\n \n if (isMobile) {\n const popupContent = document.querySelector('#newScheduleModal .popup-content');\n const originalContent = popupContent.innerHTML;\n popupContent.innerHTML = `<div class=\"p-8 text-center flex justify-center items-center gap-2\"><div class=\"thinking-dots\"><span><\/span><span><\/span><span><\/span><\/div>Booking your demo...<\/div>`;\n \n fetch(GAS_ENDPOINT, { method: 'POST', body: JSON.stringify(payload) })\n .then(r => r.json())\n .then(res => {\n if (res.status === 'ok') {\n popupContent.innerHTML = `<div class=\"p-8 text-center\"><svg class=\"w-16 h-16 text-blue-500 mx-auto mb-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg><h2 class=\"text-2xl font-bold mb-2\">Booking confirmed<\/h2><p class=\"text-gray-600 mb-4\">An invitation has been emailed to you.<\/p><div class=\"bg-gray-100 p-3 rounded-lg text-lg font-semibold text-gray-800\">${scheduledDateTime}<\/div><\/div>`;\n setTimeout(() => {\n document.getElementById('newScheduleModal').style.display = 'none';\n popupContent.innerHTML = originalContent;\n }, 3000);\n } else {\n showModal(res.error || 'Could not schedule. Try another slot.', 'Error');\n popupContent.innerHTML = originalContent;\n }\n })\n .catch(err => {\n console.error('Schedule error', err);\n showModal('Scheduling failed. Please try again.', 'Error');\n popupContent.innerHTML = originalContent;\n });\n } else {\n const leftPanelWrapper = document.getElementById('left-panel-content-wrapper');\n leftPanelWrapper.innerHTML = `<div class=\"p-8 text-center flex justify-center items-center gap-2\"><div class=\"thinking-dots\"><span><\/span><span><\/span><span><\/span><\/div>Booking your demo...<\/div>`;\n \n fetch(GAS_ENDPOINT, { method: 'POST', body: JSON.stringify(payload) })\n .then(r => r.json())\n .then(res => {\n if (res.status === 'ok') {\n leftPanelWrapper.innerHTML = `<div class=\"p-8 text-center\"><svg class=\"w-16 h-16 text-blue-500 mx-auto mb-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg><h2 class=\"text-2xl font-bold mb-2\">Booking confirmed<\/h2><p class=\"text-gray-600 mb-4\">An invitation has been emailed to you.<\/p><div class=\"bg-gray-100 p-3 rounded-lg text-lg font-semibold text-gray-800\">${scheduledDateTime}<\/div><button id=\"back-to-summary-btn\" class=\"btn-link mt-6\">\u2190 Back to Summary<\/button><\/div>`;\n document.getElementById('back-to-summary-btn').onclick = showFinalViewInLeftPanel;\n } else {\n showModal(res.error || 'Could not schedule. Try another slot.', 'Error');\n showSchedulerInLeftPanel();\n }\n })\n .catch(err => {\n console.error('Schedule error', err);\n showModal('Scheduling failed. Please try again.', 'Error');\n showSchedulerInLeftPanel();\n });\n }\n }\n\n\n function showFinalViewInLeftPanel() {\n const leftColumn = document.getElementById('left-column');\n \n if (leftColumn && finalLeftColumnHTML) {\n leftColumn.innerHTML = finalLeftColumnHTML;\n \n const navigationContainer = document.getElementById('navigation-container');\n if (navigationContainer) {\n navigationContainer.style.display = '';\n }\n \n const continueBtnSteps = document.getElementById('continue-btn-steps');\n const startOverBtn = document.getElementById('start-over-btn');\n \n if (continueBtnSteps) {\n continueBtnSteps.onclick = openScheduleModal;\n }\n if (startOverBtn) {\n startOverBtn.onclick = () => window.location.reload();\n }\n }\n }\n\n\n function showSchedulerInLeftPanel() {\n const mainGrid = document.getElementById('main-grid');\n const rightPanel = document.getElementById('right-panel');\n \n if (!mainGrid.classList.contains('md:grid-cols-3')) {\n mainGrid.classList.remove('md:grid-cols-2');\n mainGrid.classList.add('md:grid-cols-3');\n }\n if (!rightPanel.classList.contains('md:col-span-2')) {\n rightPanel.classList.add('md:col-span-2');\n }\n \n const navigationContainer = document.getElementById('navigation-container');\n if (navigationContainer) {\n navigationContainer.style.display = 'none';\n }\n\n const leftColumn = document.getElementById('left-column');\n const leftPanelWrapper = document.getElementById('left-panel-content-wrapper');\n const schedulerSource = document.getElementById('newScheduleModal');\n\n const progressContainer = document.getElementById('progress-container');\n const mainHeader = document.getElementById('main-header');\n const content5 = document.getElementById('content-5');\n \n if (progressContainer) progressContainer.classList.add('hidden');\n if (mainHeader) mainHeader.classList.add('hidden');\n if (content5) content5.classList.remove('hidden');\n\n if (leftColumn && leftPanelWrapper && schedulerSource) {\n finalLeftColumnHTML = leftColumn.innerHTML;\n \n const schedulerPopup = schedulerSource.querySelector('.popup').cloneNode(true);\n leftPanelWrapper.innerHTML = '';\n \n const backButton = document.createElement('button');\n backButton.className = 'btn-link mb-6 p-4';\n backButton.innerHTML = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" \/><\/svg> Back to Summary`;\n backButton.onclick = showFinalViewInLeftPanel;\n \n leftPanelContentWrapper.appendChild(backButton);\n leftPanelContentWrapper.appendChild(schedulerPopup);\n\n generateCalendar(currentMonth, currentYear);\n checkFormValidity();\n }\n }\n \n\n\n\n\n document.addEventListener('click', (e) => {\n if (!industrySearchContainer.contains(e.target)) {\n dropdownMenu.classList.add('hidden');\n }\n const customDropdowns = document.querySelectorAll('.custom-dropdown');\n customDropdowns.forEach(dropdown => {\n if (!dropdown.contains(e.target)) {\n const menu = dropdown.querySelector('.custom-dropdown-menu');\n if (menu) {\n menu.classList.add('hidden');\n }\n }\n });\n });\n\n\n\n backBtn.addEventListener('click', () => updateUIForStep(currentStep - 1));\n continueBtnSteps.addEventListener('click', () => { if (!continueBtnSteps.disabled) updateUIForStep(currentStep + 1); });\n startOverBtn.addEventListener('click', () => window.location.reload());\n \n [companyNameInput, yourNameInput, yourEmailInput, phoneInput].forEach(input => input.addEventListener('input', validateStep4));\n companyLogoInput.addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (file) {\n selections.companyLogo = file;\n const reader = new FileReader();\n reader.onload = (event) => { logoPreview.src = event.target.result; logoPreviewContainer.classList.remove('hidden'); logoUploader.classList.add('hidden'); };\n reader.readAsDataURL(file);\n }\n });\n removeLogoBtn.addEventListener('click', () => {\n companyLogoInput.value = ''; logoPreview.src = ''; logoPreviewContainer.classList.add('hidden'); logoUploader.classList.remove('hidden'); selections.companyLogo = null;\n });\n \n content3.addEventListener('click', function(e) {\n const button = e.target.closest('.custom-dropdown-button');\n const option = e.target.closest('li');\n if (button) {\n e.stopPropagation();\n const menu = button.nextElementSibling;\n const wasOpen = !menu.classList.contains('hidden');\n document.querySelectorAll('.custom-dropdown-menu').forEach(m => m.classList.add('hidden'));\n if (!wasOpen) menu.classList.remove('hidden');\n }\n if (option) {\n const dropdown = option.closest('.custom-dropdown');\n const menu = dropdown.querySelector('.custom-dropdown-menu');\n const paramName = dropdown.dataset.paramName;\n const display = dropdown.querySelector('.block.truncate');\n const selectedValue = option.textContent;\n display.textContent = selectedValue;\n display.classList.remove('text-gray-500');\n selections.parameters[paramName] = selectedValue;\n menu.classList.add('hidden');\n \n \/\/ Handle dynamic updates based on selection\n if (selections.industry === 'Automotive') {\n if (paramName === 'make') { updateAutomotiveFields(selectedValue); }\n else if (paramName === 'model') { updateLandRoverModelVersion(selectedValue); }\n } else if (selections.industry === 'Education') {\n if (paramName === 'grade') { updateEducationFields(selectedValue); }\n } else if (selections.industry === 'Telecommunications') {\n if (paramName === 'device') { updateTelecomFields(selectedValue); }\n }\n \n handleParamChange();\n }\n });\n\n\n \/\/ --- NEW: ABANDONMENT TRACKING IMPLEMENTATION ---\n function getSessionId() {\n let sessionId = localStorage.getItem('formSessionId');\n if (!sessionId) {\n sessionId = 'sid_' + Date.now() + '_' + Math.random().toString(36).substring(2, 8);\n localStorage.setItem('formSessionId', sessionId);\n }\n return sessionId;\n }\n \n const currentSessionId = getSessionId();\n \n function collectFormData() {\n const collectedData = {\n industry: selections.industry,\n touchpoint: selections.touchpoint,\n parameters: { ...selections.parameters },\n timeSpent: {\n ...timeSpentOnSteps,\n [currentStep]: Date.now() - stepStartTime\n }\n };\n \n const step4Fields = ['company-name', 'website', 'your-name', 'your-email', 'phone'];\n step4Fields.forEach(id => {\n const element = document.getElementById(id);\n if (element) {\n collectedData[element.name || element.id] = element.value;\n }\n });\n return collectedData;\n }\n \n window.addEventListener('beforeunload', (event) => {\n if (isUnloadEventFired) {\n return;\n }\n\n if (isSubmitting) {\n return;\n }\n \n if (currentSessionId !== lastSubmissionId) {\n const abandonmentData = {\n action: 'trackAbandonment',\n sessionId: currentSessionId,\n stepAbandoned: currentStep,\n timestamp: new Date().toISOString(),\n formData: JSON.stringify(collectFormData())\n };\n \n const blob = new Blob([JSON.stringify(abandonmentData)], { type: 'text\/plain' });\n \n navigator.sendBeacon(GAS_ENDPOINT, blob);\n isUnloadEventFired = true;\n }\n });\n });\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dynamic 5-Step Landing Page Celebrate Your Product – Don’t Just Sell It Turn plain customer messages into hyper-personal visuals that drive more conversion! Try out demo – you’ll be added to the waiting list once you complete it Choose your industry – we will open up for more industries soon! Select a Touchpoint for… Fine-tune […]<\/p>\n","protected":false},"author":3,"featured_media":36471,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-36128","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/pages\/36128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/comments?post=36128"}],"version-history":[{"count":289,"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/pages\/36128\/revisions"}],"predecessor-version":[{"id":36824,"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/pages\/36128\/revisions\/36824"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/media\/36471"}],"wp:attachment":[{"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/media?parent=36128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Dynamic 5-Step Landing Page<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n \n<style>\n \/* Decorative Strip Styles for Right Panel *\/\n #my-custom-form #right-panel {\n position: relative;\n overflow-x: hidden;\n \/* Prevent horizontal overflow *\/\n overflow-y: visible;\n \/* Allow vertical content to show *\/\n }\n\n \/* \u2705 NEW FIX FOR IMAGE STRIP SCROLLING IS HERE \u2705 *\/\n #my-custom-form .decorative-strip-container {\n pointer-events: none; \/* This makes the overlay non-interactive *\/\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n transform: translateY(-50%);\n width: 100%;\n height: 480px;\n overflow: hidden;\n z-index: 10;\n }\n\n #my-custom-form .decorative-strip-horizontal {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n opacity: 1;\n transition: opacity 0.5s ease-in-out;\n }\n\n #my-custom-form .strip-track {\n display: flex;\n animation: scroll-horizontal 40s linear infinite;\n gap: 20px;\n }\n\n #my-custom-form .strip-track img {\n height: 440px;\n width: auto;\n object-fit: contain;\n border-radius: 15px;\n opacity: 1;\n flex-shrink: 0;\n }\n\n @keyframes scroll-horizontal {\n 0% {\n transform: translateX(0);\n }\n\n 100% {\n transform: translateX(-50%);\n }\n }\n\n \/* Ensure marquee section stays below *\/\n #marquee-section {\n position: relative;\n z-index: 20;\n }\n\n \/* Additional containment for step 2 specifically *\/\n #my-custom-form #right-panel.gradient-bg {\n overflow: hidden;\n }\n\n\n \/* Thank You Popup Animation *\/\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n #my-custom-form .loader-circle {\n width: 24px;\n height: 24px;\n border: 3px solid rgba(64, 144, 242, 0.3);\n border-top-color: #4090F2;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n flex-shrink: 0;\n }\n\n #my-custom-form .loader-check {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n #my-custom-form .loader-check svg {\n width: 20px;\n height: 20px;\n color: #4090F2;\n }\n\n #my-custom-form .gradient-bg {\n background-image: linear-gradient(135deg, #081A38, #2680EB);\n }\n\n #my-custom-form .animate-fadeIn {\n animation: fadeIn 0.3s ease-out;\n }\n\n #right-panel-content {\n max-width: none !important;\n }\n\n #my-custom-form {\n font-family: 'Poppins', sans-serif;\n font-size: 14px;\n }\n\n #my-custom-form #industry-dropdown {\n z-index: 99999 !important;\n }\n\n #my-custom-form #industry-search-container {\n overflow: visible !important;\n }\n\n .elementor-widget-html #my-custom-form {\n overflow: visible !important;\n }\n\n #my-custom-form .thinking-dots span {\n animation: jump 1.4s ease-in-out infinite;\n display: inline-block;\n width: 8px;\n height: 8px;\n background-color: #9ca3af;\n border-radius: 50%;\n margin: 0 2px;\n }\n\n #my-custom-form.thinking-dots span:nth-child(2) {\n animation-delay: 0.2s;\n }\n\n #my-custom-form.thinking-dots span:nth-child(3) {\n animation-delay: 0.4s;\n }\n\n @keyframes jump {\n\n 0%,\n 80%,\n 100% {\n transform: translateY(0);\n }\n\n 40% {\n transform: translateY(-6px);\n }\n }\n\n #my-custom-form .gradient-text {\n background: linear-gradient(to right, #60a5fa, #2680EB);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n #my-custom-form .fade-in {\n animation: my-custom-form-fadeIn 0.5s ease-in-out forwards;\n }\n\n @keyframes my-custom-form-fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n #my-custom-form .touchpoint-card.selected {\n border-color: #2680EB;\n background-color: #F0F6FE;\n border-width: 2px;\n }\n\n #my-custom-form .chat-bubble {\n background-color: #f3f4f6;\n border-radius: 20px;\n padding: 12px 16px;\n max-width: 85%;\n word-wrap: break-word;\n }\n\n #my-custom-form .chat-bubble.user {\n background-color: #DBEAFE;\n border-bottom-right-radius: 4px;\n }\n\n #my-custom-form .chat-bubble.assistant {\n background-color: transparent;\n padding: 12px 0;\n border-radius: 0;\n max-width: 100%;\n }\n\n #my-custom-form .edit-container {\n max-height: 300px;\n overflow-y: auto;\n }\n\n #my-custom-form .edit-container::-webkit-scrollbar {\n width: 4px;\n }\n\n #my-custom-form .edit-container::-webkit-scrollbar-thumb {\n background-color: #d1d5db;\n border-radius: 20px;\n }\n\n #my-custom-form .touchpoint-edit-item .description {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-out;\n font-size: 0.75rem;\n color: #6b7280;\n padding-left: 0.25rem;\n margin-top: 2px;\n }\n\n #my-custom-form .touchpoint-edit-item:hover .description {\n max-height: 60px;\n }\n\n #my-custom-form .browser-screen {\n width: 100%;\n height: 100%;\n background: #fff;\n border-radius: 12px;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .4);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n #my-custom-form .browser-header {\n background-color: #e8e8e8;\n padding: 10px;\n border-bottom: 1px solid #ddd;\n flex-shrink: 0;\n }\n\n #my-custom-form .browser-dots {\n display: flex;\n gap: 8px;\n }\n\n #my-custom-form .dot {\n display: block;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n }\n\n #my-custom-form .browser-body {\n flex-grow: 1;\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n #my-custom-form .embed-frame {\n width: 100%;\n height: 100%;\n border: 0;\n }\n\n #my-custom-form .overlay.popup-mode {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n }\n\n #my-custom-form .overlay.popup-mode .popup {\n max-width: 500px;\n width: 90%;\n max-height: 90vh;\n animation: my-custom-form-slideUp 0.3s ease-out;\n }\n\n #my-custom-form .popup {\n background: white;\n border-radius: 12px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n }\n\n #my-custom-form .popup-header {\n padding: 24px 32px;\n border-bottom: 1px solid #e5e7eb;\n flex-shrink: 0;\n }\n\n #my-custom-form .popup-header h2 {\n font-size: 20px;\n color: #1f2937;\n font-weight: 600;\n }\n\n #my-custom-form .popup-content {\n overflow: hidden;\n }\n\n #my-custom-form .left-section {\n padding: 24px 32px;\n overflow-y: auto;\n }\n\n #my-custom-form .view-container {\n position: relative;\n width: 100%;\n overflow: hidden;\n }\n\n #my-custom-form .view {\n width: 100%;\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;\n }\n\n #my-custom-form .view.date-view {\n transform: translateX(0);\n position: relative;\n }\n\n #my-custom-form .view.date-view.slide-out {\n transform: translateX(-100%);\n position: absolute;\n }\n\n #my-custom-form .view.time-view {\n transform: translateX(100%);\n position: absolute;\n top: 0;\n left: 0;\n }\n\n #my-custom-form .view.time-view.slide-in {\n transform: translateX(0);\n position: relative;\n }\n\n #my-custom-form .section-title {\n font-size: 14px;\n font-weight: 600;\n color: #6b7280;\n margin-bottom: 16px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n #my-custom-form .calendar {\n background: #f9fafb;\n border-radius: 12px;\n padding: 16px;\n }\n\n #my-custom-form .calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n }\n\n #my-custom-form .calendar-title {\n font-size: 16px;\n font-weight: 600;\n }\n\n #my-custom-form .calendar-nav {\n background: transparent;\n border: none;\n color: #6b7280;\n font-size: 20px;\n cursor: pointer;\n }\n\n #my-custom-form .calendar-weekdays {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 4px;\n margin-bottom: 8px;\n }\n\n #my-custom-form .weekday {\n text-align: center;\n font-size: 12px;\n font-weight: 500;\n color: #6b7280;\n }\n\n #my-custom-form .calendar-days {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 4px;\n }\n\n #my-custom-form .calendar-day {\n aspect-ratio: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n border: 1px solid transparent;\n }\n\n #my-custom-form .calendar-day:hover:not(.disabled):not(.selected) {\n background: #eff6ff;\n border-color: #266BEB;\n }\n\n #my-custom-form .calendar-day.selected {\n background: #266BEB;\n color: white;\n }\n\n #my-custom-form .calendar-day.disabled {\n color: #d1d5db;\n cursor: not-allowed;\n }\n\n #my-custom-form .selection-summary {\n background: #f9fafb;\n border-radius: 8px;\n padding: 16px;\n margin-bottom: 20px;\n display: none;\n }\n\n #my-custom-form .selection-summary.active {\n display: block;\n }\n\n #my-custom-form .summary-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n }\n\n #my-custom-form .time-slots {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n gap: 10px;\n }\n\n #my-custom-form .time-slot {\n background: #f9fafb;\n border: 1px solid #e5e7eb;\n padding: 12px;\n border-radius: 8px;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.2s;\n text-align: center;\n font-weight: 500;\n }\n\n #my-custom-form .time-slot.selected {\n background: #266BEB;\n border-color: #266BEB;\n color: white;\n }\n\n #my-custom-form #booking-details-form.hidden {\n display: none;\n }\n\n #my-custom-form .form-group {\n margin-bottom: 24px;\n text-align: left;\n }\n\n #my-custom-form button.btn-primary,\n #my-custom-form button.btn-primary:hover,\n #my-custom-form button.btn-primary:focus {\n background-color: #2680EB;\n color: white;\n border: 1px solid #2680EB;\n border-radius: 10px;\n padding: 0.75rem 2rem;\n font-weight: 400;\n white-space: nowrap;\n transition: background-color 0.2s;\n }\n\n #my-custom-form button.btn-primary:hover,\n #my-custom-form button.btn-primary:focus {\n background-color: #1F6CDA;\n border-color: #1F6CDA;\n }\n\n #my-custom-form button.btn-primary:disabled {\n background-color: #d1d5db;\n border-color: #d1d5db;\n cursor: not-allowed;\n }\n\n #my-custom-form button.btn-secondary,\n #my-custom-form button.btn-secondary:hover,\n #my-custom-form button.btn-secondary:focus {\n background-color: #ffffff;\n color: #4b5563;\n border: 1px solid #d1d5db;\n border-radius: 10px;\n padding: 0.75rem 2rem;\n font-weight: 400;\n white-space: nowrap;\n transition: all 0.2s;\n }\n\n #my-custom-form button.btn-secondary:hover,\n #my-custom-form button.btn-secondary:focus {\n border-color: #2680EB;\n color: #2680EB;\n }\n\n #my-custom-form button.btn-link,\n #my-custom-form button.btn-link:hover,\n #my-custom-form button.btn-link:focus {\n background-color: transparent;\n border: none;\n color: #2680EB;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0;\n font-weight: 400;\n }\n\n #my-custom-form button.btn-link:hover,\n #my-custom-form button.btn-link:focus {\n color: #1F6CDA;\n text-decoration: underline;\n }\n\n #my-custom-form .custom-dropdown-button {\n background-color: white;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n }\n\n #my-custom-form .custom-dropdown-button:hover,\n #my-custom-form .custom-dropdown-button:focus {\n border-color: #2680EB;\n box-shadow: 0 0 0 1px #2680EB;\n }\n\n #my-custom-form .custom-dropdown-menu li:hover {\n background-color: #f3f4f6;\n color: #1f2937;\n }\n\n #my-custom-form .custom-dropdown-button span {\n color: #1f2937;\n }\n\n #my-custom-form .popup-footer {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n padding: 1rem 1.25rem;\n border-top: 1px solid #e5e7eb;\n }\n\n #my-custom-form .popup-footer .btn-cancel {\n background-color: #ffffff;\n color: #4b5563;\n border: 1px solid #d1d5db;\n border-radius: 10px;\n padding: 0.75rem 1.5rem;\n font-weight: 400;\n }\n\n #my-custom-form .popup-footer .btn-cancel:hover {\n border-color: #2680EB;\n color: #2680EB;\n }\n\n #my-custom-form .popup-footer .btn-confirm {\n background-color: #2680EB;\n color: white;\n border: 1px solid #2680EB;\n border-radius: 10px;\n padding: 0.75rem 1.5rem;\n font-weight: 400;\n }\n\n #my-custom-form .popup-footer .btn-confirm:hover {\n background-color: #1F6CDA;\n border-color: #1F6CDA;\n }\n\n #my-custom-form .item-card.is-draft {\n opacity: 0.5;\n cursor: not-allowed;\n position: relative;\n }\n\n #my-custom-form .item-card.is-draft::after {\n content: 'Coming Soon';\n position: absolute;\n top: 10px;\n right: 10px;\n background-color: #4b5563;\n color: white;\n padding: 2px 8px;\n border-radius: 9999px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n #my-custom-form .marquee-container {\n width: 100%;\n overflow: hidden;\n background-color: transparent;\n border-radius: 12px;\n padding: 24px 0;\n margin-top: 1rem;\n }\n\n #my-custom-form .marquee {\n display: flex;\n animation: marquee 20s linear infinite;\n }\n\n @keyframes marquee {\n 0% {\n transform: translateX(0%);\n }\n\n 100% {\n transform: translateX(-100%);\n }\n }\n\n #my-custom-form .marquee-item {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 48px;\n }\n\n #my-custom-form .logo {\n filter: brightness(0) invert(1);\n height: 30px;\n object-fit: contain;\n transition: transform 0.3s ease;\n }\n\n #my-custom-form .logo:hover {\n transform: scale(1.1);\n }\n\n #porsche {\n height: 15px;\n }\n\n .h-8 {\n height: 2rem;\n }\n\n .w-8 {\n width: 2rem;\n }\n\n \/* =============================================== *\/\n \/* =========== MOBILE STYLES & FIXES ============= *\/\n \/* =============================================== *\/\n @media (max-width: 767px) {\n\n \/* Force body and html setup *\/\n html,\n body {\n height: 100%;\n overflow-x: hidden;\n }\n\n \/* Main grid setup *\/\n body #my-custom-form #main-grid {\n min-height: 100vh;\n display: grid;\n grid-template-rows: 1fr;\n }\n\n \/* Critical: Fix the left column with higher specificity *\/\n body #my-custom-form #left-column {\n min-height: 100vh !important;\n max-height: 100vh !important;\n height: 100vh !important;\n overflow-y: auto !important;\n overflow-x: hidden !important;\n -webkit-overflow-scrolling: touch !important;\n display: flex !important;\n flex-direction: column !important;\n position: relative !important;\n }\n\n \/* Critical: Fix the content wrapper with higher specificity *\/\n body #my-custom-form #left-panel-content-wrapper {\n flex: 1 1 0% !important;\n min-height: 0 !important;\n \/* THIS IS CRITICAL FOR FLEXBOX SCROLLING *\/\n overflow-y: auto !important;\n overflow-x: hidden !important;\n -webkit-overflow-scrolling: touch !important;\n padding-bottom: 120px !important;\n }\n\n \/* Navigation stays at bottom *\/\n #navigation-container {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: white;\n border-top: 1px solid #e5e7eb;\n z-index: 100;\n padding: 1rem;\n }\n\n \/* Remove any height restrictions from inner content *\/\n #stepper-view,\n #industry-selection,\n #content-2,\n #content-3,\n #content-4,\n #content-5 {\n height: auto !important;\n min-height: 0 !important;\n overflow: visible !important;\n }\n\n \/* Hide right panel on mobile (except final view) *\/\n #right-panel {\n display: none;\n }\n\n #my-custom-form .browser-screen {\n aspect-ratio: 9 \/ 16;\n }\n\n \/* ================================================================\n ======= \u2705 START: FINAL VIEW MOBILE SCROLL FIXES \u2705 ========\n ================================================================\n *\/\n \/* Step 1: Lock the body and prevent any layout shifts *\/\n body.final-view-active {\n overflow: hidden;\n height: 100vh;\n }\n\n \/* Step 2: Make #main-grid a full-screen flex container *\/\n body.final-view-active #main-grid {\n display: flex;\n flex-direction: column;\n position: fixed;\n inset: 0;\n background: #f9fafb;\n padding: 1rem;\n }\n\n \/* Step 3: Make the visual's container the central element *\/\n body.final-view-active #right-panel {\n display: flex !important;\n flex-direction: column;\n order: 2;\n flex-grow: 1; \/* Allow this panel to fill the middle space *\/\n min-height: 0; \/* Allow it to shrink *\/\n position: static;\n padding: 0;\n margin-top: 1rem;\n justify-content: center; \/* Center the browser view vertically *\/\n }\n \n \/* Step 4: CRITICAL - Set a specific, smaller height for the browser *\/\n body.final-view-active .browser-screen {\n aspect-ratio: unset;\n width: auto;\n height: 45vh; \/* This sets the height to 45% of the screen's height *\/\n max-width: 100%; \/* Ensure it doesn't overflow horizontally *\/\n margin: 0 auto; \/* Center it horizontally *\/\n }\n \n \/* Step 5: Style the logo as a fixed header *\/\n body.final-view-active #site-logo {\n order: 1;\n margin: 0 auto;\n flex-shrink: 0;\n }\n\n \/* Step 6: Make the buttons a fixed \"sticky\" footer *\/\n body.final-view-active #navigation-container {\n order: 3;\n position: static;\n flex-shrink: 0;\n padding-top: 1rem;\n border-top: 1px solid #e5e7eb;\n background: #f9fafb;\n }\n\n \/* Step 7: Hide the unnecessary original content *\/\n body.final-view-active #left-panel-content-wrapper {\n display: none;\n }\n\n body.final-view-active #left-column {\n display: contents;\n }\n \/* ================================================================\n ======== \u2705 END: FINAL VIEW MOBILE SCROLL FIXES \u2705 =========\n ================================================================\n *\/\n }\n<\/style> \n<\/head>\n<body class=\"bg-gray-50 text-gray-800 antialiased\">\n <div id=\"my-custom-form\">\n<main id=\"main-grid\" class=\"grid grid-cols-1 md:grid-cols-2\">\n \n <div id=\"left-column\" class=\"bg-white flex flex-col h-screen border-r border-gray-200 p-4 sm:p-6 lg:p-8 overflow-y-auto\">\n <div id=\"left-panel-content-wrapper\" class=\"flex-1 min-h-0 overflow-y-auto\">\n<img decoding=\"async\" id=\"site-logo\" src=\"https:\/\/emaze.ai\/wp-content\/uploads\/2023\/04\/emaze.ai-logo-2.png\" alt=\"emaze.ai logo\" class=\"w-auto mb-6\">\n <div id=\"progress-container\" class=\"w-full hidden\">\n <div class=\"bg-gray-200 h-[3px] rounded-full\">\n <div id=\"progress-bar\" class=\"bg-[#2680EB] h-[3px] rounded-full transition-all duration-500 ease-in-out\" style=\"width: 25%;\"><\/div>\n <\/div>\n <\/div>\n\n <header id=\"main-header\" class=\"text-center pt-12\">\n <h1 class=\"tracking-tight gradient-text font-bold text-4xl\">Celebrate Your Product - Don't Just Sell It<\/h1>\n <p class=\"mt-4 max-w-2xl mx-auto text-base font-regular text-gray-800\">\n Turn plain customer messages into hyper-personal visuals that drive more conversion!\n <\/p>\n <\/header>\n\n<div class=\"my-industry-dropdown\">\n <p class=\"text-[0px] font-normal text-gray-600 mb-6\"><\/p>\n\n <section id=\"industry-selection\" class=\"w-full text-center transition-opacity duration-500 pt-0\">\n <p class=\"text-[20px] font-normal text-gray-1000 mb-6 pb-0 text-center \">\n <span class=\"bg-[#4090F2] text-white font-bold rounded-md px-3 py-1\">\n Try out demo\n <\/span>\n - you'll be added to the waiting list once you complete it\n <\/p>\n <p class=\"text-[20px] font-normal text-gray-600 mb-6\">Choose your industry - we will open up for more industries soon!<\/p>\n\n <div class=\"w-full max-w-3xl mx-auto\">\n <div id=\"industry-cards-container\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6\">\n \n <\/div>\n <\/div>\n <\/section>\n<\/div>\n <section id=\"stepper-view\" class=\"w-full hidden opacity-0 transition-opacity duration-500\">\n <div id=\"canvas-content\">\n <div id=\"content-2\" class=\"step-content hidden pt-10\">\n <h2 class=\"text-[20px] font-normal text-gray-600 mb-6 text-center\">Select a Touchpoint for...<\/h2>\n \n \n \n <div id=\"touchpoint-options\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6 max-w-3xl mx-auto\">\n <\/div>\n <\/div>\n \n <div id=\"content-3\" class=\"step-content hidden pt-10\">\n <h2 class=\"text-[20px] font-normal text-gray-600 mb-6 text-center\">\n Fine-tune Your Visual Style\n <span id=\"style-countdown\" class=\"text-base text-gray-400 font-normal ml-2\"><\/span>\n <\/h2>\n <div class=\"max-w-md mx-auto space-y-6 text-left\">\n <\/div>\n <\/div>\n \n <div id=\"content-4\" class=\"step-content hidden pt-10\">\n <h2 class=\"text-[20px] font-normal text-gray-600 mb-6 text-center\">Almost there! Tell us about your company.<\/h2>\n <div class=\"max-w-md mx-auto space-y-4 text-left\">\n <div>\n <label for=\"company-name\" class=\"block text-sm font-medium text-gray-700\">Company Name*<\/label>\n <input type=\"text\" id=\"company-name\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\">\n <\/div>\n <div>\n <label for=\"website\" class=\"block text-sm font-medium text-gray-700\">Website<\/label>\n <input type=\"url\" id=\"website\" placeholder=\"https:\/\/example.com\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\">\n <\/div>\n <div>\n <label for=\"your-name\" class=\"block text-sm font-medium text-gray-700\">Your Name*<\/label>\n <input type=\"text\" id=\"your-name\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\">\n <\/div>\n <div>\n <label for=\"your-email\" class=\"block text-sm font-medium text-gray-700\">Your Email*<\/label>\n <input type=\"email\" id=\"your-email\" placeholder=\"you@example.com\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\">\n <\/div>\n <div>\n <label for=\"phone\" class=\"block text-sm font-medium text-gray-700\">Phone*<\/label>\n <input type=\"tel\" id=\"phone\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\">\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-gray-700\">Company Logo<\/label>\n <div class=\"mt-1\">\n <label id=\"logo-uploader\" for=\"company-logo-input\" class=\"relative flex justify-center w-full h-32 px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md cursor-pointer hover:border-gray-400\">\n <div class=\"space-y-1 text-center\">\n <svg class=\"mx-auto h-12 w-12 text-gray-400\" stroke=\"currentColor\" fill=\"none\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n <path d=\"M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n <\/svg>\n <div class=\"flex text-sm text-gray-600\">\n <p class=\"pl-1\">Upload a file<\/p>\n <\/div>\n <p class=\"text-xs text-gray-500\">PNG, JPG, GIF up to 10MB<\/p>\n <\/div>\n <input id=\"company-logo-input\" name=\"company-logo-input\" type=\"file\" class=\"sr-only\" accept=\"image\/png, image\/jpeg, image\/gif\">\n <\/label>\n <div id=\"logo-preview-container\" class=\"hidden mt-2 text-center\">\n <img decoding=\"async\" id=\"logo-preview\" src=\"\" alt=\"Company Logo Preview\" class=\"mx-auto h-20 w-auto object-contain\">\n <button id=\"remove-logo-btn\" type=\"button\" class=\"mt-2 text-sm text-red-600 hover:text-red-800\">Remove<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div id=\"content-5\" class=\"step-content hidden\">\n <div id=\"loader-view\" class=\"h-full pt-16\">\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n \n <div id=\"navigation-container\" class=\"w-full text-center py-8 hidden\">\n <div class=\"flex flex-col items-center gap-4\">\n <div class=\"flex justify-center items-center gap-6\">\n <button id=\"back-btn\" class=\"btn-link\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" \/>\n <\/svg>\n Back\n <\/button>\n\n <button id=\"continue-btn-steps\" class=\"btn-primary\" disabled>\n Continue\n <\/button>\n \n <button id=\"start-over-btn\" class=\"hidden btn-primary\">\n Start Over\n <\/button>\n <\/div>\n <div id=\"regenerate-container\" class=\"hidden\">\n <p class=\"text-sm text-gray-500\">Not happy with the result?\n <button id=\"regenerate-btn\" class=\"font-semibold btn-link\">Regenerate<\/button>\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div id=\"right-panel\" class=\"flex flex-col items-center justify-center sticky top-0 h-screen p-[72px] gradient-bg text-white\">\n <div id=\"right-panel-content\" class=\"w-full h-full flex flex-col fade-in items-center justify-center\">\n <\/div>\n \n <div id=\"marquee-section\" class=\"absolute bottom-0 left-0 w-full py-6\">\n <p class=\"text-center font-bold text-lg mb-2\">From auto to insurance, service, and retail<\/p>\n <p class=\"text-center text-sm opacity-80 mb-2\">emaze.ai powers personalized visuals across industries and is trusted by leading brands<\/p>\n <div class=\"marquee-container\">\n <div class=\"marquee\">\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/f\/fc\/SEAT_Logo_from_2017.svg\" alt=\"SEAT Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/c\/ca\/XPeng_logo.svg\" alt=\"Xpeng Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b9\/Suzuki_logo_2025.svg\" alt=\"Suzuki Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b7\/Porsche_Wordmark_Logo_Black.svg\" alt=\"Porsche Logo\" class=\"logo\" id=\"porsche\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/09\/%C5%A0koda_nieuw.png\" alt=\"Skoda Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/9e\/Mercedes-Benz_Logo_2010.svg\" alt=\"Mercedes Benz Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/media.heyxpeng.co.il\/ao\/images\/freesbe_logo.svg\" alt=\"Freesbe Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/4e\/Nespresso_logo_%28monogram_%2B_wordmark%29.svg\" alt=\"Nespresso Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/92\/Audi-Logo_2016.svg\" alt=\"Audi Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/64\/AIG-logo2020-RGB-01.png\" alt=\"AIG Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/f\/fc\/SEAT_Logo_from_2017.svg\" alt=\"SEAT Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/c\/ca\/XPeng_logo.svg\" alt=\"Xpeng Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b9\/Suzuki_logo_2025.svg\" alt=\"Suzuki Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b7\/Porsche_Wordmark_Logo_Black.svg\" alt=\"Porsche Logo\" class=\"logo\" id=\"porsche\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/09\/%C5%A0koda_nieuw.png\" alt=\"Skoda Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/9e\/Mercedes-Benz_Logo_2010.svg\" alt=\"Mercedes Benz Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/media.heyxpeng.co.il\/ao\/images\/freesbe_logo.svg\" alt=\"Freesbe Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/4e\/Nespresso_logo_%28monogram_%2B_wordmark%29.svg\" alt=\"Nespresso Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/92\/Audi-Logo_2016.svg\" alt=\"Audi Logo\" class=\"logo\"><\/div>\n <div class=\"marquee-item\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/6\/64\/AIG-logo2020-RGB-01.png\" alt=\"AIG Logo\" class=\"logo\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n \n \n<div class=\"overlay\" id=\"newScheduleModal\" style=\"display: none;\">\n <div class=\"popup\">\n <div class=\"popup-header\">\n <h2>Schedule a Demo<\/h2>\n <\/div>\n <div class=\"popup-content\">\n <div class=\"left-section\">\n <div class=\"view-container\">\n <div class=\"view date-view\" id=\"dateView\">\n <div class=\"section-title\">Pick a date<\/div>\n <div class=\"calendar\">\n <div class=\"calendar-header\">\n <button class=\"calendar-nav\" onclick=\"previousMonth()\">\u2190<\/button>\n <div class=\"calendar-title\" id=\"calendarTitle\"><\/div>\n <button class=\"calendar-nav\" onclick=\"nextMonth()\">\u2192<\/button>\n <\/div>\n <div class=\"calendar-weekdays\">\n <div class=\"weekday\">Su<\/div><div class=\"weekday\">Mo<\/div><div class=\"weekday\">Tu<\/div><div class=\"weekday\">We<\/div><div class=\"weekday\">Th<\/div><div class=\"weekday\">Fr<\/div><div class=\"weekday\">Sa<\/div>\n <\/div>\n <div class=\"calendar-days\" id=\"calendarDays\"><\/div>\n <\/div>\n <\/div>\n <div class=\"view time-view\" id=\"timeView\">\n <button class=\"back-button\" onclick=\"backToDateSelection()\">\u2190 Back to date selection<\/button>\n <div class=\"selection-summary\" id=\"selectionSummary\">\n <div class=\"summary-item\"><span class=\"summary-label\">Date:<\/span><span class=\"summary-value\" id=\"summaryDate\">Not selected<\/span><\/div>\n <div class=\"summary-item\"><span class=\"summary-label\">Time:<\/span><span class=\"summary-value\" id=\"summaryTime\">Not selected<\/span><\/div>\n <\/div>\n <div class=\"section-title\">Select a time<\/div>\n <div class=\"time-slots\" id=\"timeSlots\">\n <div class=\"time-slot\" onclick=\"selectTime(this)\">09:00 AM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">09:30 AM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">10:00 AM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">10:30 AM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">11:00 AM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">11:30 AM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">12:00 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">12:30 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">01:00 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">01:30 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">02:00 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">02:30 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">03:00 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">03:30 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">04:00 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">04:30 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">05:00 PM<\/div><div class=\"time-slot\" onclick=\"selectTime(this)\">05:30 PM<\/div>\n <\/div>\n <div id=\"booking-details-form\" class=\"hidden mt-6\">\n <div class=\"section-title\">Enter your details<\/div>\n <div class=\"form-group\">\n <label for=\"modal-email\">Your email<span class=\"required\">*<\/span><\/label>\n <input type=\"email\" id=\"modal-email\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\" placeholder=\"you@example.com\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"modal-attendees\">Additional attendees (optional)<\/label>\n <input type=\"text\" id=\"modal-attendees\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\" placeholder=\"comma-separated emails\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"modal-notes\">Notes (optional)<\/label>\n <textarea id=\"modal-notes\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\" placeholder=\"Add any notes or special requests...\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"popup-footer\">\n <button class=\"btn btn-cancel\" onclick=\"closePopup()\">Cancel<\/button>\n <button class=\"btn btn-confirm\" onclick=\"confirmBooking()\">Confirm Booking<\/button>\n <\/div>\n <\/div>\n<\/div>\n<div id=\"bookingConfirmationPopup\" class=\"overlay\" style=\"display: none; z-index: 1500;\">\n <div class=\"popup\" style=\"max-width: 400px; min-height: 0;\">\n <div style=\"padding: 20px 40px 40px 40px; text-align: center;\">\n <svg class=\"w-16 h-16 text-blue-500 mx-auto mb-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>\n <h2 class=\"text-2xl font-bold mb-2\">Booking confirmed<\/h2>\n <p class=\"text-gray-600 mb-4\">An invitation has been emailed to you.<\/p>\n <div id=\"confirmedBookingDetails\" class=\"bg-gray-100 p-3 rounded-lg text-lg font-semibold text-gray-800\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n<div id=\"thankYouPopup\" class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[10000] hidden\">\n <div class=\"bg-white rounded-lg shadow-2xl max-w-md w-[90%] mx-4 relative animate-fadeIn\">\n <button onclick=\"closeThankYouPopup()\" class=\"absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path>\n <\/svg>\n <\/button>\n \n <div class=\"p-8\">\n <img decoding=\"async\" src=\"https:\/\/emaze.ai\/wp-content\/uploads\/2023\/04\/emaze.ai-logo-2.png\" alt=\"emaze.ai\" class=\"h-6 w-auto mb-6\">\n \n <h2 class=\"text-2xl font-bold text-gray-900 mb-4\">Thanks for trying out the emaze.ai demo<\/h2>\n \n <div class=\"text-gray-600 space-y-3 mb-6\">\n <p><span id=\"thankYouName\" class=\"font-semibold text-gray-800\"><\/span>, You've also been added to our early-access waitlist.<\/p>\n <p>Want to see how this works at scale?<\/p>\n <p>We'll show how emaze.ai turns everyday customer messages into personalized, on-brand visuals - sent to every customer automatically.<\/p>\n <\/div>\n \n <p class=\"text-gray-600 mb-1\">Thank you!<\/p>\n <p class=\"text-gray-800 font-semibold mb-6\">The emaze.ai team<\/p>\n \n <button onclick=\"scheduleFromThankYou()\" class=\"w-full bg-[#2680EB] text-white py-3 px-6 rounded-lg font-semibold hover:bg-[#1F6CDA] transition-colors\">\n Schedule a Demo\n <\/button>\n <\/div>\n <\/div>\n<\/div>\n <\/div>\n\n\n \n <script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.10.1\/firebase-app.js\"><\/script>\n <script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.10.1\/firebase-database.js\"><\/script>\n \n <script>document.addEventListener('DOMContentLoaded', () => {\n\/\/ Add this function outside of the DOMContentLoaded event listener\nwindow.toggleMute = function() {\n const video = document.getElementById('intro-video');\n const muteIcon = document.getElementById('mute-icon');\n const unmuteIcon = document.getElementById('unmute-icon');\n \n if (video) {\n video.muted = !video.muted;\n \n if (video.muted) {\n muteIcon.classList.remove('hidden');\n unmuteIcon.classList.add('hidden');\n } else {\n muteIcon.classList.add('hidden');\n unmuteIcon.classList.remove('hidden');\n }\n }\n\n}\n \/\/ --- 1. DATA & CONFIGURATION ---\n const formContent = {\n 'Retail & E-Commerce': { 'Welcome Spotlight': { id: 'p95', description: 'Make every new shopper feel seen with a personalized first impression.', params: ['preferred-shopping-category', 'gender', 'style-preference', 'welcome-offer-type', 'preferred-language'] }, 'Cart Comeback': { id: 'p96', description: 'Recover lost sales by reminding customers of the product they left behind.', params: ['gender', 'product-photo', 'cart-abandonment-time', 'discount-offer-level', 'visual-theme'], status: 'draft' }, 'Purchase Celebration': { id: 'p97', description: 'Turn a receipt into joy \u2014 celebrate their purchase and build loyalty.', params: ['gender', 'product-photo', 'purchase-occasion', 'loyalty-tier', 'next-best-product'], status: 'draft' }, 'We Miss You': { id: 'p98', description: 'Reignite dormant customers with fresh products picked just for them.', params: ['lapsed-duration', 'previous-favorite-category', 'recommended-product-photo', 'exclusive-offer-type', 'visual-style'], status: 'draft' }, 'Birthday Surprise': { id: 'p99', description: 'Delight customers on their big day with a celebratory offer.', params: ['birthday-month', 'preferred-gift-category', 'product-photo', 'celebration-offer-type', 'message-tone'], status: 'draft' } },\n 'Travel & Hospitality': { 'Destination Spotlight': { id: 'p80', description: 'Hook travelers instantly with a personalized hero visual of their dream destination.', params: ['dream-destination', 'travel-vibe', 'seasonal-vibe', 'gender'] }, 'Itinerary Preview': { id: 'p84', description: 'Inspire bookings by showcasing flights, hotels, and activities that fit their trip.', params: ['dream-destination', 'travel-group-size', 'travel-vibe', 'seasonal-vibe', 'gender'] }, 'You\u2019re All Set!': { id: 'p85', description: 'Reassure and excite with a beautiful confirmation visual and countdown to departure.', params: ['dream-destination', 'travel-group-size', 'travel-vibe', 'seasonal-vibe', 'gender'] }, 'Next Trip Inspiration': { id: 'p86', description: 'Keep travelers dreaming by suggesting new destinations that match their vibe.', params: ['dream-destination', 'travel-group-size', 'travel-vibe', 'seasonal-vibe', 'gender'] }, 'Travel Anniversary': { id: 'p87', description: 'Strengthen loyalty with a nostalgic visual that celebrates their past journey.', params: ['dream-destination', 'travel-group-size', 'travel-vibe', 'seasonal-vibe', 'gender'] } },\n 'Automotive': { 'Auto Lead Response': { id: 'p599', description: 'Win trust fast with a hyper-personalized 360\u00b0 view of the car they asked about...', params: ['make', 'model', 'model-version'] }, 'Appointment Set': { id: 'p505', description: 'Lock in the visit with a clear confirmation, map, and warm welcome...', params: ['make', 'model', 'model-version', 'meeting-date', 'meeting-time'] }, 'Test Drive Confirmation': { id: 'p506', description: 'Build excitement with a countdown and high-energy car visuals.', params: ['make', 'model', 'model-version', 'meeting-date', 'meeting-time'] }, 'Price Quote': { id: 'p507', description: 'Close deals quicker with a clear, hyper-personalized price breakdown.', params: ['make', 'model', 'model-version'] }, 'Congrats on Your Order': { id: 'p510', description: 'Turn delivery into a celebration with visuals that welcome them to the brand...', params: ['make', 'model', 'model-version'] }, 'Monthly Car Promotion': { id: 'p513', description: 'Boost sales with fresh, hyper-personalized offers tied to their browsing history.', params: ['make', 'model', 'model-version'] } },\n 'Financial Services': { 'Goal Spotlight': { id: 'p105', description: 'Show clients how your product helps them reach their biggest goals.', params: ['life-stage', 'monthly-capacity', 'horizon-in-years', 'primary-goal','family-status' ] }, 'Your Quote': { id: 'p302', description: 'Build trust with a clear, personalized plan and calming visuals.', params: ['life-stage', 'emotional-tone'], status: 'draft' }, 'Financial Journey': { id: 'p303', description: 'Keep clients engaged with a visual roadmap to their financial future.', params: ['life-stage', 'emotional-tone'], status: 'draft' }, 'Annual Review': { id: 'p304', description: 'Highlight progress with animated charts that make growth feel real.', params: ['emotional-tone'], status: 'draft' }, 'What Matters Most': { id: 'p305', description: 'Connect emotionally by showing visuals that match each life stage.', params: ['life-stage'], status: 'draft' } },\n 'Healthcare & Pharma': {'Symptom Results': { id: 'p401', description: 'Reassure patients with results shown by a relatable, professional face.', params: ['health-focus', 'age-group', 'emotional-tone', 'gender'], status: 'draft' }, 'Appointment Confirmation': { id: 'p107', description: 'Ease anxiety with a warm doctor photo and calming pre-visit message.', params: ['age-group', 'emotional-tone', 'gender'] }, 'Aftercare Plan': { id: 'p403', description: 'Keep patients on track with a clear, visual checklist of next steps.', params: ['emotional-tone', 'gender'], status: 'draft' }, 'Wellness Tips': { id: 'p404', description: 'Build trust by sharing friendly, easy-to-digest health advice.', params: ['health-focus', 'emotional-tone'], status: 'draft' }, 'Health Anniversary': { id: 'p405', description: 'Strengthen care with a gentle, personalized reminder for a check-up.', params: ['loved-one-photo'], status: 'draft' } },\n 'Media': { 'What to Watch Next': { id: 'p90', description: 'Keep viewers hooked with trailers tailored to their taste.', params: ['preferred-genre', 'recent-watch-pattern', 'favorite-actors-directors', 'device-usage', 'language-preference'] }, 'Premium Upgrade': { id: 'p91', description: 'Drive upgrades with exclusive previews from higher-tier content.', params: ['preferred-genre', 'current-plan-level', 'upgrade-trigger-content', 'viewing-frequency', 'payment-preference'], status: 'draft' }, 'Welcome Aboard': { id: 'p92', description: 'Make new subscribers feel special with a star-powered welcome.', params: ['preferred-genre', 'star-welcome-choice', 'device-signup-source', 'household-size', 'language-preference'], status: 'draft' }, 'Season Premiere Countdown': { id: 'p93', description: 'Build hype with a countdown and high-energy content montage.', params: ['preferred-show', 'countdown-style', 'highlight-moment-type', 'notification-channel', 'watch-party-interest'], status: 'draft' }, 'Re-engagement': { id: 'p94', description: 'Bring lapsed viewers back with personalized content recommendations.', params: ['lapsed-duration', 'previous-favorite-genres', 'unfinished-series', 'preferred-channel-return', 'new-hot-release'], status: 'draft' } },\n 'Sports': { 'Game Day Welcome': { id: 'p88', description: 'Fire up fans with personalized visuals that set the stage for the big event.', params: ['sport-type', 'favorite-team', 'seat-section-info', 'arrival-context'] }, 'Ticket Upgrade & Upsell': { id: 'p89', description: 'Boost revenue by offering fans better seats, VIP access or other upsells...', params: ['sport-type', 'purchase-history-spend-level', 'current-seat-location', 'companions-group-size', 'up-to-game'], status: 'draft' }, 'Fan Celebration': { id: 'p97', description: 'Make supporters feel part of the team with celebratory messages and star shout-outs.', params: ['sport-type', 'favorite-player', 'milestone-anniversary', 'fan-achievements', 'celebration-format'], status: 'draft' }, 'Countdown to Kickoff': { id: 'p98', description: 'Build anticipation with a timer and high-energy clips of their favorite team or artist.', params: ['sport-type', 'countdown-preference', 'favorite-highlight-type', 'notification-channel', 'merchandise-offer-hook'], status: 'draft' }, 'Re-engagement Play': { id: 'p99', description: 'Bring fans back with highlights and new events tailored to their passions.', params: ['sport-type', 'past-favorite-teams', 'last-attendance-date', 'content-engagement'], status: 'draft' } },\n 'Entertainment': { status: 'draft', 'Show Day Welcome': { id: 'p99', description: 'Fire up fans with personalized visuals that set the stage for the big event.', params: ['show-venues', 'show-type', 'audience-zone', 'arrival-mood', 'welcome-media-style'] }, 'Ticket Upgrade & Upsell': { id: 'p100', description: 'Boost revenue by offering fans better seats, VIP access or other upsells...', params: ['show-venues', 'spending-profile', 'audience-current-zone', 'group-attendance', 'time-to-show'], status: 'draft' }, 'Fan Celebration': { id: 'p101', description: 'Make supporters feel part of the team with celebratory messages and star shout-outs.', params: ['show-venues', 'beloved-performer', 'loyalty-milestone', 'fan-recognition-level', 'celebration-style'], status: 'draft' }, 'Countdown to Kickoff': { id: 'p102', description: 'Build anticipation with a timer and high-energy clips of their favorite team or artist.', params: ['show-venues', 'anticipation-level', 'highlight-moment-type', 'reminder-timing', 'merchandise-bundle-offer'], status: 'draft' }, 'Re-engagement Play': { id: 'p103', description: 'Bring fans back with highlights and new events tailored to their passions.', params: ['show-venues', 'previous-favorite-acts', 'last-visit', 'content-replay-behavior'], status: 'draft' } },\n 'Consumer Goods & Lifestyle': { 'Style Quiz Results': { id: 'p82', description: 'Delight shoppers with a mood board that brings their personal style to life.', params: ['product-photo-1', 'product-photo-2', 'product-photo-3', 'style-vibe', 'color-palette', 'gender'] }, 'Wishlist Reminder': { id: 'p83', description: 'Recover sales by spotlighting the product they want most with a special offer.', params: ['product-photo-1', 'product-photo-2', 'product-photo-3', 'style-vibe', 'color-palette', 'gender'] }, 'New Favorite Product': { id: 'p81', description: 'Celebrate discovery with fun visuals that connect to their lifestyle.', params: ['product-photo','lifestyle-scene', 'gender'] }, 'Seasonal Essentials': { id: 'p98', description: 'Drive seasonal sales with curated looks that match each customer\u2019s vibe.', params: ['product-photo', 'style-vibe', 'lifestyle-scene', 'gender'], status: 'draft'}, 'Unboxing Teaser': { id: 'p97', description: 'Build anticipation with an interactive preview of their next must-have product', params: ['product-photo', 'style-vibe', 'color-palette', 'gender'], status: 'draft' } },\n 'Real Estate': { 'Interactive Map': { id: 'p104', description: 'Help buyers dream bigger with homes pinned to their ideal location and match their vibe & interest.', params: ['home-photo', 'dream-location'] }, 'Virtual Tour Confirmation': { id: 'p902', description: 'Build excitement with a video walkthrough and a personal agent welcome.', params: ['home-vibe', 'emotional-tone', 'gender'], status: 'draft'}, 'Welcome Home Dashboard': { id: 'p903', description: 'Ease the move-in process with a beautiful dashboard and task checklist.', params: ['home-photo'], status: 'draft' }, 'Neighborhood Spotlight': { id: 'p904', description: 'Sell the lifestyle with stunning community visuals and local events.', params: ['dream-location'], status: 'draft' }, 'Property Valuation Report': { id: 'p905', description: 'Keep homeowners engaged with a clear snapshot of their home\u2019s value.', params: ['emotional-tone'], status: 'draft' } },\n 'Education': {'Welcome to Class': { id: 'p106', description: 'Make new students feel valued with a personalized visual that kicks off their learning journey.', params: ['grade', 'class-topic', 'gender', 'starting-date'] }, 'Enrollment Confirmation': { id: 'p1002', description: 'Build trust by confirming their spot with course details and start date.', params: ['grade', 'class-topic', 'gender', 'starting-date'], status: 'draft'}, 'Upcoming Session Reminder': { id: 'p1003', description: 'Reduce no-shows with a friendly reminder and a preview of what\u2019s ahead.', params: ['grade', 'class-topic', 'starting-date'], status: 'draft' }, 'Course Completion Celebration': { id: 'p1004', description: 'Boost satisfaction and referrals with a celebratory message when students finish.', params: ['grade', 'primary-interest', 'emotional-tone', 'gender'], status: 'draft' }, 'Next Course Invitation': { id: 'p1005', description: 'Drive repeat enrollment by recommending the perfect follow-up program.', params: ['grade', 'primary-interest', 'gender'], status: 'draft' } },\n 'Telecommunications': { status: 'draft', 'Find Your Perfect Plan': { id: 'p1101', description: 'Win customers with personalized plan recommendations that fit their lifestyle.', params: ['service', 'data-usage', 'gender'] }, 'Upgrade Now': { id: 'p1102', description: 'Boost revenue by showcasing the exact device they want with an irresistible offer.', params: ['service', 'data-usage', 'gender'] }, 'Protecting Your Digital Life': { id: 'p1103', description: 'Build trust by promoting device protection in a clear, visual way.', params: ['device', 'device-protection-service'] }, 'Feedback Survey': { id: 'p1104', description: 'Show you care with a friendly survey that drives loyalty through feedback.', params: ['service', 'gender'] } },\n 'SMB \/ Services Marketplaces': { status: 'draft', 'Perfect Pro Match': { id: 'p1201', description: 'Convert faster by showing customers a pro who looks tailor-made for their project.', params: ['project-photo', 'emotional-tone'] }, 'Quote Comparison': { id: 'p1202', description: 'Win trust with a clear visual chart comparing pros, ratings, and prices.', params: ['project-photo'] }, 'You Hired a Pro!': { id: 'p1203', description: 'Keep customers engaged with a project dashboard and real-time progress.', params: ['pro-photo', 'gender'] }, 'Seasonal Maintenance': { id: 'p1204', description: 'Drive repeat bookings with timely service reminders that fit each season.', params: ['project-vibe'] }, 'New Pro in Your Neighborhood': { id: 'p1205', description: 'Boost discovery by spotlighting new local pros with a personal touch.', params: ['project-vibe', 'gender'] } }\n };\n const automotiveModels = { 'Toyota': ['RAV4 Hybrid', 'Corolla', 'Camry', 'Tacoma'], 'Volkswagen': ['Atlas', 'Atlas Cross Sport', 'Golf GTI', 'ID.4', 'Jetta GLI', 'Taos', 'Tiguan'], 'Audi': ['SQ8 Sportback e-tron', 'Q8 e-tron', 'Q8 Sportback e-tron', 'RS e-tron GT', 'e-tron GT', 'A1 Sportback', 'S3 Sedan', 'S3 Sportback', 'RS3 Sedan', 'RS3 Sportback', 'A3 Sedan', 'A3 Sportback'], 'Skoda': ['Enyaq Coup\u00e9', 'Enyaq', 'Fabia', 'Scala', 'New Octavia', 'New Octavia Combi', 'New Superb', 'New Superb Combi', 'Kamiq', 'Karoq', 'New Kodiaq'], 'Porsche': ['718 Cayman', '911 Carrera', 'Macan', 'Cayenne', 'Panamera', 'Taycan'], 'Hyundai': ['The New ELANTRA', 'The New IONIQ 5', 'SANTA FE', 'The New SONATA'], 'Chevrolet': ['Equinox', 'Silverado', 'Trax', 'Blazer'], 'Ford': ['Bronco', 'Explorer', 'Escape', 'F-150'], 'Honda': ['HR-V', 'CR-V', 'Civic Hatchback'], 'Mercedes-Benz': ['Mercedes-AMG G 63', 'Mercedes-Benz G 580', 'Mercedes-Benz GLS'], 'BMW': ['M8', 'X6 M', 'M340i Sedan'], 'Land Rover': ['RANGE ROVER', 'DEFENDER', 'DISCOVERY'] };\n const landRoverModelVersions = { 'RANGE ROVER': ['RANGE ROVER SPORT', 'RANGE ROVER'], 'DEFENDER': ['DEFENDER 130', 'DEFENDER 110'], 'DISCOVERY': ['DISCOVERY', 'DISCOVERY SPORT'] };\n const classTopicsByGrade = { 'K-5': ['Creative Arts', 'Early Reading', 'Math Games', 'Science Exploration'], '6-8': ['World History', 'Pre-Algebra', 'Introduction to Coding', 'Creative Writing'], '9-12': ['Calculus', 'Physics', 'AP English', 'Robotics'], 'Undergraduate': ['Computer Science I', 'Introduction to Marketing', 'Macroeconomics', 'Organic Chemistry'], 'Graduate': ['Advanced Machine Learning', 'Quantitative Finance', 'Research Methods'], 'Professional': ['Leadership and Management', 'Data Analytics for Business', 'Project Management'] };\n const primaryInterestsByGrade = { 'K-5': ['Arts', 'Science', 'Play-Based Learning'], '6-8': ['Technology', 'Humanities', 'Social Science'], '9-12': ['STEM', 'Business', 'Arts'], 'Undergraduate': ['Business', 'Arts', 'Technology', 'Science', 'Humanities'], 'Graduate': ['Advanced Research', 'Professional Certification'], 'Professional': ['Skill Development', 'Career Advancement'] };\n const deviceProtectionServicesByDevice = { 'Smartphone': ['Screen Repair', 'Liquid Damage Protection', 'Theft Protection'], 'Laptop': ['Accidental Damage Coverage', 'Extended Warranty', 'Virus & Malware Protection'], 'Tablet': ['Screen Repair', 'Full Device Replacement'], 'Smartwatch': ['Scratch & Dent Repair', 'Battery Replacement'] };\n \n \/\/ --- STATE & CONFIG ---\n let currentStep = 1;\n let lastSubmissionId = null;\n let stepStartTime = Date.now();\n let timeSpentOnSteps = {};\n let finalLeftColumnHTML = '';\n const selections = { industry: '', touchpoint: '', parameters: {}, companyName: '', website: '', yourName: '', yourEmail: '', phone: '', companyLogo: null, parameterFiles: {} };\n \/\/ NEW: Flags to prevent duplicate logs and capture during submission\nlet isSubmitting = false;\nlet isUnloadEventFired = false;\n const GAS_ENDPOINT = \"https:\/\/script.google.com\/macros\/s\/AKfycbzLpd4JyvVd1iDHMum7PAhjDU-AfMl6hoYx4avhKJaa-5wgrJYBtTJyPUZ8Sh2vHzCz\/exec\";\n const firebaseConfig = { apiKey: \"AIzaSyChxLOPddyV45QzyWsgJzHXpsX6T8pKiq4\", authDomain: \"my-firebase-apps-script.firebaseapp.com\", databaseURL: \"https:\/\/my-firebase-apps-script-default-rtdb.firebaseio.com\", projectId: \"my-firebase-apps-script\", storageBucket: \"my-firebase-apps-script.firebasestorage.app\", messagingSenderId: \"1040106570499\", appId: \"1:1040106570499:web:da5c1e80e3277d25dcdf36\", measurementId: \"G-3M2VSKJRV7\" };\n firebase.initializeApp(firebaseConfig);\n const database = firebase.database();\n\n \/\/ --- ELEMENT SELECTORS ---\n const mainGrid = document.getElementById('main-grid');\n const leftColumn = document.getElementById('left-column');\n const siteLogo = document.getElementById('site-logo');\n const leftPanelContentWrapper = document.getElementById('left-panel-content-wrapper');\n const mainHeader = document.getElementById('main-header');\n const progressContainer = document.getElementById('progress-container');\n const progressBar = document.getElementById('progress-bar');\n const industrySelection = document.getElementById('industry-selection');\n const stepperView = document.getElementById('stepper-view');\n const content2 = document.getElementById('content-2');\n const content3 = document.getElementById('content-3');\n const content4 = document.getElementById('content-4');\n const content5 = document.getElementById('content-5');\n const industrySearchContainer = document.getElementById('industry-search-container');\n const touchpointOptionsContainer = document.getElementById('touchpoint-options');\n const companyNameInput = document.getElementById('company-name');\n const websiteInput = document.getElementById('website');\n const yourNameInput = document.getElementById('your-name');\n const yourEmailInput = document.getElementById('your-email');\n const phoneInput = document.getElementById('phone');\n const companyLogoInput = document.getElementById('company-logo-input');\n const logoUploader = document.getElementById('logo-uploader');\n const logoPreviewContainer = document.getElementById('logo-preview-container');\n const logoPreview = document.getElementById('logo-preview');\n const removeLogoBtn = document.getElementById('remove-logo-btn');\n const loaderView = document.getElementById('loader-view');\n const navigationContainer = document.getElementById('navigation-container');\n const backBtn = document.getElementById('back-btn');\n const continueBtnSteps = document.getElementById('continue-btn-steps');\n const startOverBtn = document.getElementById('start-over-btn');\n const regenerateContainer = document.getElementById('regenerate-container');\n const rightPanel = document.getElementById('right-panel');\n const rightPanelContent = document.getElementById('right-panel-content');\n\n \/\/ --- INITIALIZATION ---\n initialize();\n \n \/\/ --- ALL FUNCTIONS ---\n let finalVisualUrl = null;\n\n function initialize() {\n updateRightPanel(1);\n const activeIndustries = Object.keys(formContent).filter(industryName => {\n const details = formContent[industryName];\n return !(details && details.status === 'draft');\n });\n populateIndustryCards(activeIndustries);\n }\n function updateUIForStep(step) {\n if (currentStep !== step) {\n const timeElapsed = Date.now() - stepStartTime;\n if (currentStep > 0 && currentStep < 5) {\n timeSpentOnSteps[currentStep] = timeElapsed;\n }\n stepStartTime = Date.now();\n }\n \n currentStep = step;\n [content2, content3, content4, content5].forEach(el => el.classList.add('hidden'));\n rightPanel.classList.remove('hidden');\n \n if (step < 5) {\n rightPanel.classList.remove('final-view');\n }\n \n if (step === 1) {\n mainGrid.classList.remove('md:grid-cols-3');\n mainGrid.classList.add('md:grid-cols-2');\n rightPanel.classList.remove('md:col-span-2');\n \n mainHeader.classList.remove('shrunk');\n progressContainer.classList.add('hidden');\n navigationContainer.classList.add('hidden');\n stepperView.classList.add('opacity-0', 'hidden');\n industrySelection.classList.remove('hidden', 'opacity-0');\n } else if (step < 5) {\n mainGrid.classList.remove('md:grid-cols-3');\n mainGrid.classList.add('md:grid-cols-2');\n rightPanel.classList.remove('md:col-span-2');\n \n mainHeader.classList.add('shrunk');\n progressContainer.classList.remove('hidden');\n industrySelection.classList.add('hidden', 'opacity-0');\n stepperView.classList.remove('hidden', 'opacity-0');\n navigationContainer.classList.remove('hidden');\n \n switch (step) {\n case 2:\n content2.classList.remove('hidden');\n progressBar.style.width = '25%';\n backBtn.style.display = '';\n continueBtnSteps.classList.add('hidden');\n startOverBtn.classList.add('hidden');\n if(regenerateContainer) regenerateContainer.style.display = 'none';\n renderTouchpoints();\n break;\n case 3:\n content3.classList.remove('hidden');\n progressBar.style.width = '50%';\n backBtn.style.display = '';\n continueBtnSteps.classList.remove('hidden');\n continueBtnSteps.textContent = 'Continue';\n startOverBtn.classList.add('hidden');\n if(regenerateContainer) regenerateContainer.style.display = 'none';\n renderParameters();\n break;\n case 4:\n content4.classList.remove('hidden');\n progressBar.style.width = '75%';\n backBtn.style.display = '';\n continueBtnSteps.classList.remove('hidden');\n continueBtnSteps.textContent = 'Generate Visual';\n startOverBtn.classList.add('hidden');\n if(regenerateContainer) regenerateContainer.style.display = 'none';\n validateStep4();\n break;\n }\n } else if (step === 5) {\n mainHeader.classList.add('hidden');\n progressContainer.classList.add('hidden');\n navigationContainer.classList.add('hidden');\n content5.classList.remove('hidden');\n loaderView.classList.remove('hidden');\n mainGrid.classList.remove('md:grid-cols-2');\n mainGrid.classList.add('md:grid-cols-3');\n rightPanel.classList.add('md:col-span-2');\n submitForm();\n }\n \n if (step < 5) updateRightPanel(step);\n }\nfunction updateRightPanel(step, isFinal = false, finalURL = '') {\n let content = '';\n \n \/\/ First, handle the decorative strip separately\n let existingStrip = document.querySelector('#right-panel .decorative-strip-horizontal');\n \n rightPanelContent.className = 'w-full h-full flex flex-col fade-in items-center justify-center text-center';\n \n const isMobile = window.innerWidth < 768;\n if (isMobile && !isFinal) {\n rightPanel.style.display = 'none';\n } else {\n rightPanel.style.display = '';\n }\n \n if (isFinal && finalURL) {\n \/\/ Remove decorative strip for final view\n if (existingStrip) {\n existingStrip.style.opacity = '0';\n setTimeout(() => existingStrip.remove(), 500);\n }\n content = `<div class=\"browser-screen\"><div class=\"browser-header\"><div class=\"browser-dots\"><span class=\"dot\" style=\"background-color:#ff5f56;\"><\/span><span class=\"dot\" style=\"background-color:#ffbd2e;\"><\/span><span class=\"dot\" style=\"background-color:#27c93f;\"><\/span><\/div><\/div><div class=\"browser-body\"><iframe class=\"embed-frame\" src=\"${finalURL}\"><\/iframe><\/div><\/div>`;\n } else if (step === 1) {\n \/\/ Remove decorative strip for step 1\n if (existingStrip) {\n existingStrip.style.opacity = '0';\n setTimeout(() => existingStrip.remove(), 500);\n }\n content = `\n <div class=\"w-full h-full flex flex-col items-center justify-center p-8\">\n <div class=\"relative w-full max-w-full\">\n <video\n id=\"intro-video\"\n class=\"w-full h-auto rounded-lg shadow-lg\"\n autoplay\n loop\n muted\n playsinline\n style=\"max-height: 70vh; object-fit: contain;\">\n <source src=\"https:\/\/userscontent2.emaze.com\/media\/a280ba23-7d59-479f-8927-4e8ad7661bbb\/dc41049266358278bd0aa17a2034dc7d.mp4\" type=\"video\/mp4\">\n Your browser does not support the video tag.\n <\/video>\n <button\n id=\"mute-toggle\"\n onclick=\"toggleMute()\"\n class=\"absolute bottom-4 right-4 bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full p-3 shadow-lg transition-all duration-200 hover:scale-110\"\n title=\"Toggle sound\">\n <svg id=\"mute-icon\" class=\"w-6 h-6 text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z\" clip-rule=\"evenodd\"><\/path>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2\"><\/path>\n <\/svg>\n <svg id=\"unmute-icon\" class=\"w-6 h-6 text-gray-700 hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>`;\n} else if (step > 1 && step < 5) {\n\u00a0 \u00a0 \u00a0 \u00a0 rightPanelContent.classList.remove('justify-center', 'text-center');\n\u00a0 \u00a0 \u00a0 \u00a0 rightPanelContent.classList.add('items-start', 'justify-start', 'text-left', 'pt-16');\n\u00a0 \u00a0 \u00a0 \u00a0\u00a0\n\u00a0 \u00a0 \u00a0 \u00a0 content = '';\n\u00a0 \u00a0 \u00a0 \u00a0\u00a0\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Add decorative strip if it doesn't exist, otherwise it persists\n\u00a0 \u00a0 \u00a0 \u00a0 if (!existingStrip) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Find this part in your updateRightPanel function where the strip is added\nsetTimeout(() => {\n const stripHTML = `\n <div class=\"decorative-strip-container\">\n <div class=\"decorative-strip-horizontal\" style=\"opacity: 0;\">\n <div class=\"strip-track\">\n \n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/f0a7c700e111426830ba24cb8a54cf5f.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/119ef7dc40c962841cb475de366cbe5d.jpeg\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/d243256a831114ac12a108569db35219.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/ee0339952eeea6e34df132f161a17ab4.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/240238a0-ce99-4ea7-ac77-eff09fb5eff2\/94a458e39a8bbac844d1b6b95a328046.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/f86938043c5a5b2f6c882761911dccb4.jpg\" alt=\"\">\n \n \n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/f0a7c700e111426830ba24cb8a54cf5f.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/119ef7dc40c962841cb475de366cbe5d.jpeg\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/d243256a831114ac12a108569db35219.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/ee0339952eeea6e34df132f161a17ab4.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/240238a0-ce99-4ea7-ac77-eff09fb5eff2\/94a458e39a8bbac844d1b6b95a328046.png\" alt=\"\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/14549c25-3f29-4a39-a8d3-a28943c52109\/f86938043c5a5b2f6c882761911dccb4.jpg\" alt=\"\">\n <\/div>\n <\/div>\n <\/div>`;\n \n rightPanel.insertAdjacentHTML('beforeend', stripHTML);\n const newStrip = rightPanel.querySelector('.decorative-strip-horizontal');\n setTimeout(() => {\n newStrip.style.opacity = '1';\n }, 50);\n}, 100);\n }\n }\n \n rightPanelContent.innerHTML = content;\n \n const marqueeSection = document.getElementById('marquee-section');\n if (isFinal) {\n marqueeSection.classList.add('hidden');\n } else {\n marqueeSection.classList.remove('hidden');\n }\n}\n\nfunction populateIndustryCards(industries) {\n const container = document.getElementById('industry-cards-container');\n container.innerHTML = '';\n \n const activeIndustries = industries.filter(industryName => {\n const details = formContent[industryName];\n return !(details && details.status === 'draft');\n });\n \n activeIndustries.forEach(industryName => {\n const card = document.createElement('div');\n card.className = 'relative flex flex-col justify-center items-center p-6 border rounded-lg text-center transition-colors bg-white group cursor-pointer hover:border-[#2680EB] hover:bg-blue-50 min-h-[120px]';\n card.onclick = () => selectIndustry(industryName);\n \n const descriptions = {\n 'Retail & E-Commerce': 'Online stores & shopping',\n 'Travel & Hospitality': 'Hotels, flights & destinations',\n 'Automotive': 'Car dealerships & sales',\n 'Financial Services': 'Banking & investments',\n 'Healthcare & Pharma': 'Medical & wellness',\n 'Media': 'Streaming & entertainment',\n 'Sports': 'Teams & events',\n 'Entertainment': 'Shows & venues',\n 'Consumer Goods & Lifestyle': 'Products & brands',\n 'Real Estate': 'Properties & homes',\n 'Education': 'Schools & courses',\n 'Telecommunications': 'Phone & internet services',\n 'SMB \/ Services Marketplaces': 'Local services & pros'\n };\n \n card.innerHTML = `\n <h4 class=\"font-semibold text-base\">${industryName}<\/h4>\n <p class=\"text-sm text-gray-500 mt-1\">${descriptions[industryName] || ''}<\/p>\n `;\n container.appendChild(card);\n });\n}\nfunction getIndustryDescription(industry) {\n const descriptions = {\n 'Retail & E-Commerce': '<p class=\"text-sm text-gray-500 mt-1\">Online stores & shopping<\/p>',\n 'Travel & Hospitality': '<p class=\"text-sm text-gray-500 mt-1\">Hotels, flights & destinations<\/p>',\n 'Automotive': '<p class=\"text-sm text-gray-500 mt-1\">Car dealerships & sales<\/p>',\n 'Financial Services': '<p class=\"text-sm text-gray-500 mt-1\">Banking & investments<\/p>',\n 'Healthcare & Pharma': '<p class=\"text-sm text-gray-500 mt-1\">Medical & wellness<\/p>',\n 'Media': '<p class=\"text-sm text-gray-500 mt-1\">Streaming & entertainment<\/p>',\n 'Sports': '<p class=\"text-sm text-gray-500 mt-1\">Teams & events<\/p>',\n 'Entertainment': '<p class=\"text-sm text-gray-500 mt-1\">Shows & venues<\/p>',\n 'Consumer Goods & Lifestyle': '<p class=\"text-sm text-gray-500 mt-1\">Products & brands<\/p>',\n 'Real Estate': '<p class=\"text-sm text-gray-500 mt-1\">Properties & homes<\/p>',\n 'Education': '<p class=\"text-sm text-gray-500 mt-1\">Schools & courses<\/p>',\n 'Telecommunications': '<p class=\"text-sm text-gray-500 mt-1\">Phone & internet services<\/p>',\n 'SMB \/ Services Marketplaces': '<p class=\"text-sm text-gray-500 mt-1\">Local services & pros<\/p>'\n };\n return descriptions[industry] || '';\n}\n \nfunction selectIndustry(industryName) {\n selections.industry = industryName;\n const h2Element = document.querySelector('#content-2 h2');\n if (h2Element) {\n h2Element.textContent = `Select a Touchpoint for ${selections.industry}`;\n }\n \/\/ Automatically continue to step 2\n updateUIForStep(2);\n}\n \n function selectTouchpoint(touchpointName) {\n \/\/ Only clear parameters if it's a different touchpoint\n if (selections.touchpoint !== touchpointName) {\n selections.parameters = {};\n selections.parameterFiles = {};\n }\n selections.touchpoint = touchpointName;\n updateUIForStep(3);\n }\n\n function renderTouchpoints() {\n touchpointOptionsContainer.innerHTML = '';\n const touchpoints = formContent[selections.industry];\n for (const title in touchpoints) {\n if (title === 'status') continue;\n const details = touchpoints[title];\n if (details.status === 'draft') continue;\n \n const card = document.createElement('div');\n card.className = 'relative flex flex-col justify-start p-4 border rounded-lg text-left transition-colors bg-white group cursor-pointer hover:border-[#2680EB] hover:bg-blue-50';\n card.onclick = () => selectTouchpoint(title);\n card.innerHTML = `<h4 class=\"font-semibold text-base\">${title}<\/h4><p class=\"text-sm text-gray-500 mt-1\">${details.description}<\/p>`;\n touchpointOptionsContainer.appendChild(card);\n }\n }\n function renderParameters() {\n content3.innerHTML = `<h2 class=\"text-[20px] font-normal text-gray-600 mb-6 text-center\">Fine-tune Your <span class=\"font-semibold text-gray-800\">${selections.touchpoint}<\/span> Visual<\/h2><div id=\"dynamic-params-container\" class=\"max-w-md mx-auto space-y-4 text-left\"><\/div>`;\n const paramsContainer = document.getElementById('dynamic-params-container');\n const paramsList = formContent[selections.industry][selections.touchpoint].params;\n if (selections.industry === 'Automotive') {\n let availableMakes = Object.keys(automotiveModels);\n if (selections.touchpoint === 'Auto Lead Response') availableMakes = availableMakes.filter(make => make !== 'Skoda');\n else if (selections.touchpoint === 'Monthly Car Promotion') {\n const excludedMakes = ['Land Rover', 'Toyota', 'Hyundai', 'Chevrolet', 'Honda'];\n availableMakes = availableMakes.filter(make => !excludedMakes.includes(make));\n }\n const makeOptionsHtml = availableMakes.map(option => `<li class=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100\">${option}<\/li>`).join('');\n paramsContainer.innerHTML += `<div class=\"mb-4\"><div id=\"make\" class=\"custom-dropdown\" data-param-name=\"make\"><label class=\"block text-sm font-medium text-gray-700\">Make*<\/label><div class=\"relative mt-1\"><button type=\"button\" class=\"custom-dropdown-button w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\"><span class=\"block truncate text-gray-500\">Select an option<\/span><span class=\"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none\"><svg class=\"h-5 w-5 text-gray-400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/><\/svg><\/span><\/button><ul class=\"custom-dropdown-menu hidden absolute z-50 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm\">${makeOptionsHtml}<\/ul><\/div><\/div><\/div>`;\n paramsContainer.innerHTML += `<div id=\"model-dropdown-container\"><\/div><div id=\"model-version-dropdown-container\"><\/div>`;\n const otherParams = paramsList.filter(p => !['make', 'model', 'model-version'].includes(p));\n otherParams.forEach(param => paramsContainer.innerHTML += generateInputField(param));\n } else {\n paramsList.forEach(param => paramsContainer.innerHTML += generateInputField(param));\n }\n paramsContainer.addEventListener('input', handleParamChange);\n paramsContainer.addEventListener('change', handleParamChange);\n validateStep3();\n \n\/\/ Restore previously selected values in custom dropdowns\nsetTimeout(() => {\n Object.keys(selections.parameters).forEach(paramName => {\n const dropdown = document.querySelector(`[data-param-name=\"${paramName}\"], #${paramName}`);\n if (dropdown && dropdown.classList.contains('custom-dropdown')) {\n const display = dropdown.querySelector('.block.truncate');\n if (display && selections.parameters[paramName]) {\n display.textContent = selections.parameters[paramName];\n display.classList.remove('text-gray-500');\n }\n }\n });\n \/\/ Call validateStep3 after restoring values\n validateStep3();\n}, 100);\n }\n function handleParamChange() {\n const paramsContainer = document.getElementById('dynamic-params-container');\n const inputs = paramsContainer.querySelectorAll('input, select, .custom-dropdown');\n inputs.forEach(input => {\n const paramId = input.id || input.dataset.paramName;\n if (!paramId) return;\n if (input.classList.contains('custom-dropdown')) { \n \/\/ Custom dropdown values are already stored in selections.parameters\n \/\/ via the click event handler, so we just skip processing here\n }\n else if (input.type === 'file') { \n selections.parameterFiles[paramId] = input.files[0] || null; \n }\n else { \n selections.parameters[paramId] = input.value; \n }\n });\n validateStep3();\n updateRightPanel(3);\n}\n \nfunction validateStep3() {\n const paramsContainer = document.getElementById('dynamic-params-container');\n if (!paramsContainer) { \n continueBtnSteps.disabled = true; \n return; \n }\n \n const allRequiredInputs = paramsContainer.querySelectorAll('input[required], select[required], .custom-dropdown');\n const allValid = Array.from(allRequiredInputs).every(input => {\n if (input.classList.contains('custom-dropdown')) {\n const paramName = input.dataset.paramName || input.id;\n return !!selections.parameters[paramName];\n }\n return input.value.trim() !== '';\n });\n \n continueBtnSteps.disabled = !allValid;\n}\n function validateStep4() {\n const allValid = companyNameInput.value.trim() !== '' && yourNameInput.value.trim() !== '' && \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(yourEmailInput.value) && phoneInput.value.trim() !== '';\n continueBtnSteps.disabled = !allValid;\n }\n \n function generateInputField(param) {\n const label = param.replace(\/-\/g, ' ').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');\n let inputType = 'text', inputOptions = null;\n if (param.includes('date')) inputType = 'date';\n else if (param.includes('time')) inputType = 'time';\n else if (param.includes('photo') || param === 'image') inputType = 'file';\n else if (param === 'gender') { inputType = 'select'; inputOptions = ['Male', 'Female', 'Unknown']; }\n else if (param === 'preferred-shopping-category') { inputType = 'select'; inputOptions = ['Fashion', 'Electronics', 'Beauty', 'Home D\u00e9cor', 'Sports Gear']; }\n else if (param === 'show-venues') { inputType = 'select'; inputOptions = ['Concert', 'Theater', 'Festival', 'Circus']; }\n else if (param === 'show-type') { inputType = 'select'; inputOptions = ['music', 'sport', 'comedy']; }\n else if (param === 'audience-zone') { inputType = 'select'; inputOptions = ['Front Row', 'VIP Box', 'Balcony', 'General Admission']; }\n else if (param === 'arrival-mood') { inputType = 'select'; inputOptions = ['Early', 'On-time', 'Late', 'Traveling Guest']; }\n else if (param === 'style-preference') { inputType = 'select'; inputOptions = ['Minimalist', 'Trendy', 'Classic', 'Streetwear']; }\n else if (param === 'welcome-offer-type') { inputType = 'select'; inputOptions = ['Free Shipping', '10% Off', 'Loyalty Points', 'Gift With Purchase']; }\n else if (param === 'preferred-genre') { inputType = 'select'; inputOptions = ['Drama', 'Comedy', 'Thriller', 'Documentary', 'Action']; }\n else if (param === 'recent-watch-pattern') { inputType = 'select'; inputOptions = ['Latest Series Watched', 'Trending Movies', 'Mini-series', 'Binge Sessions']; }\n else if (param === 'favorite-actors-directors') { inputType = 'select'; inputOptions = ['Christopher Nolan', 'Zendaya', 'Quentin Tarantino', 'Pedro Almod\u00f3var']; }\n else if (param === 'device-usage') { inputType = 'select'; inputOptions = ['Morning', 'Evening', 'Late Night', 'Weekend', 'Commute']; }\n else if (param === 'purchase-history-spend-level') { inputType = 'select'; inputOptions = ['Low (<$50 Avg)', 'Medium ($50\u2013150)', 'High (>$150)']; }\nelse if (param === 'current-seat-location') { inputType = 'select'; inputOptions = ['Upper Level', 'Mid-tier', 'Premium', 'Standing Section']; }\nelse if (param === 'companions-group-size') { inputType = 'select'; inputOptions = ['Solo', 'Couple', 'Family', 'Friends Group']; }\nelse if (param === 'up-to-game') { inputType = 'select'; inputOptions = ['<24 Hrs', '1\u20133 Days', '>3 Days']; }\n else if (param === 'sport-type') { inputType = 'select'; inputOptions = ['Football', 'Basketball', 'Baseball', 'Soccer', 'Hockey']; }\n else if (param === 'favorite-team') { inputType = 'select'; inputOptions = ['New York Knicks', 'FC Barcelona', 'Green Bay Packers']; }\n else if (param === 'seat-section-info') { inputType = 'select'; inputOptions = ['Lower Bowl', 'Courtside', 'Club Level', 'Upper Deck']; }\n else if (param === 'arrival-context') { inputType = 'select'; inputOptions = ['Early', 'On-time', 'Late', 'Traveling Fan']; }\n else if (param === 'language-preference') { inputType = 'select'; inputOptions = ['English', 'Spanish', 'French', 'German', 'Japanese']; }\n else if (param === 'preferred-language') { inputType = 'select'; inputOptions = ['English', 'Spanish', 'French', 'German']; }\n else if (param === 'product-photo' || param === 'recommended-product-photo' || param.startsWith('product-photo-')) { inputType = 'file'; }\n else if (param === 'cart-abandonment-time') { inputType = 'select'; inputOptions = ['<1 Hour', '1\u20136 Hours', '1\u20133 Days']; }\n else if (param === 'discount-offer-level') { inputType = 'select'; inputOptions = ['Free Shipping', '10% Off', '20% Off']; }\n else if (param === 'visual-theme') { inputType = 'select'; inputOptions = ['Luxury', 'Playful', 'Eco-friendly', 'Techy']; }\n else if (param === 'purchase-occasion') { inputType = 'select'; inputOptions = ['Gift', 'Self-Treat', 'Seasonal', 'Back-to-School']; }\n else if (param === 'welcome-media-style') { inputType = 'select'; inputOptions = ['Hype Video', 'Backstage Clip', 'Static Poster']; }\n else if (param === 'spending-profile') { inputType = 'select'; inputOptions = ['Low (<$50 Avg)', 'Medium ($50\u2013150)', 'High (>$150)']; }\n else if (param === 'audience-current-zone') { inputType = 'select'; inputOptions = ['Rear Section', 'Mid-tier', 'Premium', 'VIP Box']; }\n else if (param === 'group-attendance') { ainputType = 'select'; inputOptions = ['Solo', 'Couple', 'Family', 'Friends Group']; }\n else if (param === 'beloved-performer') { inputType = 'select'; inputOptions = ['Beyonc\u00e9', 'Hamilton Cast', 'Ed Sheeran', 'Adele']; }\n else if (param === 'loyalty-milestone') { inputType = 'select'; inputOptions = ['Birthday', 'Membership Anniversary', '10th Show Attended']; }\n else if (param === 'fan-recognition-level') { inputType = 'select'; inputOptions = ['Front Row Regular', 'VIP Club Member', 'Meet-and-greet Attendee']; }\n else if (param === 'celebration-style') { inputType = 'select'; inputOptions = ['On-screen Feature', 'Social Media Shout-out', 'Personalized Email Montage']; }\n else if (param === 'anticipation-level') { inputType = 'select'; inputOptions = ['Daily Build-up', 'Last 24 Hrs Only']; }\n else if (param === 'highlight-moment-type') { inputType = 'select'; inputOptions = ['Rehearsal Clips', 'Behind-the-scenes Footage', 'Artist Interview Moments']; }\n else if (param === 'reminder-timing') { inputType = 'select'; inputOptions = ['Morning Reminder', 'Evening Hype', 'Show-day Push']; }\n else if (param === 'merchandise-bundle-offer') { inputType = 'select'; inputOptions = ['Tour T-shirt Discount', 'Limited-edition Vinyl', 'VIP Backstage Upgrade']; } \n else if (param === 'loyalty-tier') { inputType = 'select'; inputOptions = ['New', 'Silver', 'Gold', 'Platinum']; }\n else if (param === 'next-best-product') { inputType = 'select'; inputOptions = ['Matching Wallet', 'Screen Protector', 'Gift Wrapping']; }\n else if (param === 'monthly-capacity') { inputType = 'select'; inputOptions = ['$200\u2013$500', '$500\u2013$1,000', '$1,000\u2013$2,500','$2,500\u2013$5,000', '$5,000+']; } \n \n else if (param === 'horizon-in-years') { inputType = 'select'; inputOptions = ['1y', '1\u20133y', '3\u20135y',' 5\u201310y', '10y+']; } \n else if (param === 'primary-goal') { inputType = 'select'; inputOptions = ['Save 20% down payment', 'Pay off $10,000 debt', 'Invest $1,000\/month for 10 years',' Reach $500,000 retirement savings', 'Reduce debt-to-income ratio to 30%', 'Maintain $500,000 protection coverage']; } \n else if (param === 'family-status') { inputType = 'select'; inputOptions = ['Single', 'Couple', 'With kids',' Caregiver']; } \n else if (param === 'previous-favorite-acts') { inputType = 'select'; inputOptions = ['Billie Eilish', 'The Phantom of the Opera', 'Metallica']; }\nelse if (param === 'last-visit') { inputType = 'select'; inputOptions = ['<1 Month', '1\u20133 Months', '>3 Months']; }\nelse if (param === 'content-replay-behavior') { inputType = 'select'; inputOptions = ['Watched Highlights', 'Shared Show Clips', 'Subscribed To Artist Updates']; }\n else if (param === 'previous-favorite-category') { inputType = 'select'; inputOptions = ['Shoes', 'Electronics', 'Skincare', 'Books']; }\n else if (param === 'seasonal-vibe') { inputType = 'select'; inputOptions = ['Spring Bloom Getaway', 'Sunny Beach Escape', 'Autumn Foliage Tour', 'Winter Wonderland', 'Cozy Mountain Retreat', 'Island Hopping Adventure', 'Christmas Market Magic', 'Tropical Winter Escape', 'Harvest Celebration', 'Summer Festival Season', 'Ski Resort Adventure', 'Crisp City Break', 'Northern Lights Expedition', 'New Years Countdown']; }\n else if (param === 'exclusive-offer-type') { inputType = 'select'; inputOptions = ['20% Off', 'Free Gift', 'Double Loyalty Points']; }\n else if (param === 'visual-style') { inputType = 'select'; inputOptions = ['Bold', 'Minimal', 'Seasonal', 'Lifestyle']; }\n else if (param === 'birthday-month') { inputType = 'select'; inputOptions = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; }\n else if (param === 'preferred-gift-category') { inputType = 'select'; inputOptions = ['Beauty', 'Accessories', 'Tech Gadgets', 'Gourmet Food']; }\n else if (param === 'celebration-offer-type') { inputType = 'select'; inputOptions = ['Birthday Discount', 'Free Shipping + Gift', 'VIP Access']; }\n else if (param === 'message-tone') { inputType = 'select'; inputOptions = ['Playful', 'Elegant', 'Friendly', 'Luxury']; }\n else if (param === 'color-palette') { inputType = 'select'; inputOptions = ['Earthy Neutrals', 'Vibrant Pastels', 'Bold & Modern', 'Classic Monochromes']; }\n else if (param === 'dream-destination' || param === 'dream-location') { inputType = 'select'; inputOptions = ['Paris', 'Tokyo', 'Bora Bora', 'New York City', 'Kyoto', 'Rome', 'Santorini', 'Maldives', 'Machu Picchu', 'Cairo', 'London', 'Sydney', 'Rio de Janeiro', 'Cape Town', 'Dubai', 'Reykjavik', 'Barcelona', 'Bangkok', 'Amalfi Coast', 'Serengeti', 'Great Barrier Reef']; }\n else if (param.includes('vibe')) { inputType = 'select'; inputOptions = ['Adventure', 'Relaxing', 'Cultural', 'Urban', 'Nature', 'Modern', 'Rustic', 'Sporty', 'Luxurious']; }\n else if (param.includes('group-size')) { inputType = 'select'; inputOptions = ['Solo', 'Couple', 'Family', 'Group']; }\n else if (param === 'grade') { inputType = 'select'; inputOptions = ['K-5', '6-8', '9-12', 'Undergraduate', 'Graduate', 'Professional']; }\n else if (param === 'class-topic' || param === 'primary-interest') { inputType = 'select'; inputOptions = []; }\n else if (param === 'device') { inputType = 'select'; inputOptions = ['Smartphone', 'Laptop', 'Tablet', 'Smartwatch']; }\n else if (param === 'device-protection-service') { inputType = 'select'; inputOptions = []; }\n else if (param === 'life-stage') { inputType = 'select'; inputOptions = ['Starting a family', 'Buying a home', 'Planning for retirement', 'Managing debt', 'Investing for growth', 'Protecting assets']; }\n else if (param === 'emotional-tone') { inputType = 'select'; inputOptions = ['Secure', 'Ambitious', 'Peaceful', 'Confident', 'Empathetic', 'Hopeful']; }\n else if (param === 'health-focus') { inputType = 'select'; inputOptions = ['Wellness', 'Family Health', 'Preventative Care', 'Chronic Condition Management', 'Mental Health', 'Physical Therapy']; }\n else if (param === 'age-group') { inputType = 'select'; inputOptions = ['0-12', '13-17', '18-24', '25-34', '35-44', '45-54', '55-64', '65+']; }\n else if (param === 'lifestyle-scene') { inputType = 'select'; inputOptions = ['Golden Hour Magic', 'Urban Explorer', 'Cozy Corner', 'Rooftop Social', 'Beach Day Bliss', 'Mountain View Moment', 'Cafe Culture', 'Wellness Ritual', 'Creative Studio', 'Garden Escape', 'Kitchen Creations', 'Desk Setup Goals', 'Festive Gathering', 'Road Trip Adventure', 'Minimalist Flatlay', 'Post Workout Glow']; }\n if (inputType === 'select') {\n const optionsHtml = inputOptions.map(option => `<li class=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100\">${option}<\/li>`).join('');\nreturn `<div class=\"mb-4\"><div id=\"${param}\" class=\"custom-dropdown\" data-param-name=\"${param}\"><label class=\"block text-sm font-medium text-gray-700\">${label}*<\/label><div class=\"relative mt-1\"><button type=\"button\" class=\"custom-dropdown-button w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\"><span class=\"block truncate text-gray-500\">Select an option<\/span><span class=\"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none\"><svg class=\"h-5 w-5 text-gray-400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/><\/svg><\/span><\/button><ul class=\"custom-dropdown-menu hidden absolute z-50 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm\">${optionsHtml}<\/ul><\/div><\/div><\/div>`;\n } else if (inputType === 'file') {\n return `<div><label class=\"block text-sm font-medium text-gray-700\">${label}<\/label><div class=\"mt-1\"><label id=\"${param}-label\" for=\"${param}\" class=\"relative flex justify-center w-full h-32 px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md cursor-pointer hover:border-gray-400\"><div class=\"space-y-1 text-center\"><svg class=\"mx-auto h-12 w-12 text-gray-400\" stroke=\"currentColor\" fill=\"none\" viewBox=\"0 0 48 48\"><path d=\"M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><div class=\"flex text-sm text-gray-600\"><p class=\"pl-1\">Upload a file<\/p><\/div><p class=\"text-xs text-gray-500\">PNG, JPG, GIF<\/p><\/div><input id=\"${param}\" name=\"${param}\" type=\"file\" class=\"sr-only\" onchange=\"handleFileChange(event, '${param}')\" accept=\"image\/png, image\/jpeg, image\/gif\"><\/label><\/div><\/div>`;\n } else {\n return `<div class=\"mb-4\"><label for=\"${param}\" class=\"block text-sm font-medium text-gray-700\">${label}*<\/label><input type=\"${inputType}\" id=\"${param}\" name=\"${param}\" class=\"mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\" required><\/div>`;\n }\n }\n window.updateAutomotiveFields = function(makeValue) {\n const modelContainer = document.getElementById('model-dropdown-container');\n const modelVersionContainer = document.getElementById('model-version-dropdown-container');\n modelContainer.innerHTML = '';\n modelVersionContainer.innerHTML = '';\n delete selections.parameters['model'];\n delete selections.parameters['model-version'];\n if (makeValue) {\n const models = automotiveModels[makeValue] || [];\n const modelOptionsHtml = models.map(option => `<li class=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100\">${option}<\/li>`).join('');\n modelContainer.innerHTML = `<div class=\"mb-4\"><div id=\"model\" class=\"custom-dropdown\" data-param-name=\"model\"><label class=\"block text-sm font-medium text-gray-700\">Model*<\/label><div class=\"relative mt-1\"><button type=\"button\" class=\"custom-dropdown-button w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\"><span class=\"block truncate text-gray-500\">Select a model<\/span><span class=\"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none\"><svg class=\"h-5 w-5 text-gray-400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/><\/svg><\/span><\/button><ul class=\"custom-dropdown-menu hidden absolute z-50 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm\">${modelOptionsHtml}<\/ul><\/div><\/div><\/div>`;\n }\n handleParamChange();\n }\n\n window.updateLandRoverModelVersion = function(modelValue) {\n const modelVersionContainer = document.getElementById('model-version-dropdown-container');\n modelVersionContainer.innerHTML = '';\n delete selections.parameters['model-version'];\n if (selections.parameters['make'] === 'Land Rover' && modelValue) {\n const versions = landRoverModelVersions[modelValue] || [];\n if (versions.length > 0) {\n const versionOptionsHtml = versions.map(option => `<li class=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100\">${option}<\/li>`).join('');\n modelVersionContainer.innerHTML = `<div class=\"mb-4\"><div id=\"model-version\" class=\"custom-dropdown\" data-param-name=\"model-version\"><label class=\"block text-sm font-medium text-gray-700\">Model Version*<\/label><div class=\"relative mt-1\"><button type=\"button\" class=\"custom-dropdown-button w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-[#2680EB] focus:border-[#2680EB] sm:text-sm\"><span class=\"block truncate text-gray-500\">Select a version<\/span><span class=\"absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none\"><svg class=\"h-5 w-5 text-gray-400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/><\/svg><\/span><\/button><ul class=\"custom-dropdown-menu hidden absolute z-50 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm\">${versionOptionsHtml}<\/ul><\/div><\/div><\/div>`;\n }\n }\n handleParamChange();\n }\n \n window.updateEducationFields = function(gradeValue) {\n const classTopicContainer = document.getElementById('class-topic');\n const primaryInterestContainer = document.getElementById('primary-interest');\n \n \/\/ Update class-topic if it exists\n if (classTopicContainer) {\n const topics = classTopicsByGrade[gradeValue] || [];\n const topicsHtml = topics.map(option => \n `<li class=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100\">${option}<\/li>`\n ).join('');\n \n const button = classTopicContainer.querySelector('.block.truncate');\n const menu = classTopicContainer.querySelector('.custom-dropdown-menu');\n \n button.textContent = 'Select an option';\n button.classList.add('text-gray-500');\n menu.innerHTML = topicsHtml;\n delete selections.parameters['class-topic'];\n }\n \n \/\/ Update primary-interest if it exists\n if (primaryInterestContainer) {\n const interests = primaryInterestsByGrade[gradeValue] || [];\n const interestsHtml = interests.map(option => \n `<li class=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100\">${option}<\/li>`\n ).join('');\n \n const button = primaryInterestContainer.querySelector('.block.truncate');\n const menu = primaryInterestContainer.querySelector('.custom-dropdown-menu');\n \n button.textContent = 'Select an option';\n button.classList.add('text-gray-500');\n menu.innerHTML = interestsHtml;\n delete selections.parameters['primary-interest'];\n }\n \n handleParamChange();\n}\n\nwindow.updateTelecomFields = function(deviceValue) {\n const protectionContainer = document.getElementById('device-protection-service');\n \n if (protectionContainer) {\n const services = deviceProtectionServicesByDevice[deviceValue] || [];\n const servicesHtml = services.map(option => \n `<li class=\"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-gray-100\">${option}<\/li>`\n ).join('');\n \n const button = protectionContainer.querySelector('.block.truncate');\n const menu = protectionContainer.querySelector('.custom-dropdown-menu');\n \n button.textContent = 'Select an option';\n button.classList.add('text-gray-500');\n menu.innerHTML = servicesHtml;\n delete selections.parameters['device-protection-service'];\n }\n \n handleParamChange();\n}\n\n window.updateDynamicOptions = function(event) {\n const selectedValue = event.target.value;\n const triggerId = event.target.id;\n let targetSelect, optionsSource;\n if (triggerId === 'grade') {\n if (document.getElementById('class-topic')) { targetSelect = document.getElementById('class-topic'); optionsSource = classTopicsByGrade; } \n else if (document.getElementById('primary-interest')) { targetSelect = document.getElementById('primary-interest'); optionsSource = primaryInterestsByGrade; }\n } else if (triggerId === 'device') {\n targetSelect = document.getElementById('device-protection-service');\n optionsSource = deviceProtectionServicesByDevice;\n }\n if (targetSelect && optionsSource) {\n targetSelect.innerHTML = '<option value=\"\">Select an option<\/option>';\n targetSelect.disabled = true;\n if (selectedValue && optionsSource[selectedValue]) {\n optionsSource[selectedValue].forEach(opt => targetSelect.innerHTML += `<option value=\"${opt}\">${opt}<\/option>`);\n targetSelect.disabled = false;\n }\n }\n }\n\n window.handleFileChange = function(event, param) {\n const file = event.target.files[0];\n const label = document.getElementById(`${param}-label`);\n if (file && label) {\n selections.parameterFiles[param] = file;\n label.innerHTML = `<div class=\"p-4 text-center\"><p class=\"font-semibold text-green-600\">File Selected:<\/p><p class=\"text-sm text-gray-700 truncate\">${file.name}<\/p><\/div>`;\n }\n }\n\n async function uploadFileAndGetUrl(file) {\n if (!file) return { objectKey: '', downloadUrl: '' };\n try {\n const signResponse = await fetch(GAS_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'text\/plain;charset=utf-8' }, body: JSON.stringify({ action: 'getUploadUrl', fileName: file.name, contentType: file.type, submissionId: lastSubmissionId || null }) });\n const signData = await signResponse.json();\n if (signData.status !== 'ok' || !signData.uploadUrl) { throw new Error(signData.error || 'Backend failed to provide upload URL.'); }\n const uploadResponse = await fetch(signData.uploadUrl, { method: 'PUT', body: file, headers: { 'Content-Type': file.type } });\n if (!uploadResponse.ok) { throw new Error(`File upload failed. Status: ${uploadResponse.status}`); }\n return { objectKey: signData.objectKey, downloadUrl: signData.downloadUrl };\n } catch (err) { console.error('Upload process failed:', err); throw err; }\n }\n\n function listenForUrl(submissionId) {\n const resultRef = database.ref('results\/' + submissionId);\n const timeout = setTimeout(() => {\n resultRef.off();\n showModal(\"Visual generation is taking longer than expected. Please try again.\");\n setTimeout(() => window.location.reload(), 3000);\n }, 60000);\n resultRef.on('value', snapshot => {\n const data = snapshot.val();\n if (data && data.url) {\n clearTimeout(timeout);\n resultRef.off();\n onCreationUrlReady(data.url);\n }\n });\n }\n\n function showModal(message) { alert(message); }\n\n function typeWordsEffect(element, htmlString, callback) {\n const words = htmlString.match(\/<[^>]+>|[^<>\\s]+|\\s+\/g) || [];\n let i = 0;\n element.innerHTML = '';\n const typingInterval = setInterval(() => {\n if (i < words.length) {\n element.innerHTML += words[i];\n if (element.closest('.overflow-y-auto')) {\n element.closest('.overflow-y-auto').scrollTop = element.closest('.overflow-y-auto').scrollHeight;\n }\n i++;\n } else {\n clearInterval(typingInterval);\n if (callback) callback();\n }\n }, 50);\n }\n \n function runLoaderAnimation(callback) {\n const isMobile = window.innerWidth < 768;\n \n \/\/ Set the container classes for text\n const containerClasses = isMobile \n ? 'text-left max-w-md text-black h-auto pr-2' \n : 'text-left max-w-md text-black h-96 pr-2'; \/\/ Removed overflow-y-auto\n \n loaderView.innerHTML = `<div id=\"loader-explanation-container\" class=\"${containerClasses}\" style=\"scroll-behavior: smooth;\"><\/div>`;\n \n const container = document.getElementById('loader-explanation-container');\n const black = (text) => text ? `<span class='text-black font-semibold'>${text}<\/span>` : '';\n const paramSummary = `Applying your style preferences based on your selections.`;\n \n const stages = [\n {\n title: \"Initialization\",\n text: `Okay, starting with your ${black(selections.industry)} business and focusing on the ${black(selections.touchpoint)} message.`\n },\n {\n title: \"Styling\",\n text: paramSummary\n },\n {\n title: \"Analysis & Rendering\",\n text: `Analyzing visual data points to find the perfect combination... rendering the initial layers.`\n },\n {\n title: \"Finalization\",\n text: `Finally, tailoring the visual and adding your company details. Your visual is almost ready!`\n }\n ];\n \n let currentStage = 0;\n const totalDuration = 32000;\n const stageDuration = totalDuration \/ stages.length;\n \n function runStage() {\n if (currentStage >= stages.length) {\n if (callback) callback();\n return;\n }\n \n const stageData = stages[currentStage];\n const stageElement = document.createElement('div');\n stageElement.className = 'stage flex items-start space-x-3 mb-4';\n \n const iconContainer = document.createElement('div');\n iconContainer.className = 'icon-container flex-shrink-0 mt-1';\n iconContainer.innerHTML = `<div class=\"loader-circle\"><\/div>`;\n \n const textContainer = document.createElement('div');\n textContainer.className = 'text-container w-full';\n textContainer.innerHTML = `<p class=\"font-semibold\">${stageData.title}<\/p><p class=\"mb-3\">${stageData.text}<\/p>`;\n \n stageElement.appendChild(iconContainer);\n stageElement.appendChild(textContainer);\n container.appendChild(stageElement);\n \n \/\/ The line below, which scrolls to the bottom, is now unnecessary since scrolling is disabled.\n \/\/ container.scrollTop = container.scrollHeight;\n \n setTimeout(() => {\n iconContainer.innerHTML = `<div class=\"loader-check\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z\" clip-rule=\"evenodd\" \/><\/svg><\/div>`;\n currentStage++;\n runStage();\n }, stageDuration);\n }\n \n runStage();\n }\n\n function renderFinalView() {\n if (!finalVisualUrl) return;\n \n updateRightPanel(5, true, finalVisualUrl);\n\n thankYouPopupTimer = setTimeout(() => {\n showThankYouPopup();\n }, 12000);\n \n rightPanel.classList.add('final-view');\n \n const mainHeader = document.getElementById('main-header');\n const progressContainer = document.getElementById('progress-container');\n if (mainHeader) mainHeader.classList.add('hidden');\n if (progressContainer) progressContainer.classList.add('hidden');\n \n const backBtn = document.getElementById('back-btn');\n const continueBtnSteps = document.getElementById('continue-btn-steps');\n const startOverBtn = document.getElementById('start-over-btn');\n const regenerateContainer = document.getElementById('regenerate-container');\n const navigationContainer = document.getElementById('navigation-container');\n \n if (backBtn) backBtn.style.display = 'none';\n if (regenerateContainer) regenerateContainer.style.display = 'none';\n\n if (continueBtnSteps) {\n continueBtnSteps.textContent = \"Schedule a Demo\";\n continueBtnSteps.disabled = false;\n continueBtnSteps.className = \"btn-primary\";\n continueBtnSteps.onclick = openScheduleModal;\n }\n\n if (startOverBtn) {\n startOverBtn.classList.remove('hidden');\n startOverBtn.textContent = \"Create Another\";\n startOverBtn.className = \"btn-link\";\n startOverBtn.onclick = () => window.location.reload();\n }\n\n if (navigationContainer) {\n navigationContainer.classList.remove('hidden');\n }\n\n const container = document.getElementById('loader-explanation-container');\n if (container && !container.querySelector('.final-ready-message')) {\n const readyMessage = document.createElement('div');\n readyMessage.className = 'flex items-start space-x-3 my-4 fade-in final-ready-message';\n readyMessage.innerHTML = `\n <div class=\"flex-shrink-0 mt-1\">\n <img decoding=\"async\" src=\"https:\/\/userscontent2.emaze.com\/images\/780404fc-1a4f-40be-b14f-c0fbb53e93a3\/e0a3c7804bca121fd008f60f639a583a.png\" alt=\"emaze icon\" class=\"w-8\">\n <\/div>\n <div class=\"w-full\">\n <h2 class=\"text-[20px] font-semibold text-black\">Your Visual is Ready!<\/h2>\n <\/div>`;\n container.appendChild(readyMessage);\n container.scrollTop = container.scrollHeight;\n }\n\n const isMobile = window.innerWidth < 768;\n if (isMobile) {\n document.body.classList.add('final-view-active');\n const leftColumn = document.getElementById('left-column');\n if (leftColumn) leftColumn.style.display = 'none';\n const mainGrid = document.getElementById('main-grid');\n mainGrid.className = 'flex flex-col items-center p-4';\n const logo = document.getElementById('site-logo');\n const rightPanel = document.getElementById('right-panel');\n const navigationContainer = document.getElementById('navigation-container');\n const logoClone = logo ? logo.cloneNode(true) : null;\n const navClone = navigationContainer ? navigationContainer.cloneNode(true) : null;\n mainGrid.innerHTML = '';\n if (logoClone) {\n logoClone.className = 'h-5 w-auto my-6';\n mainGrid.appendChild(logoClone);\n }\n if (rightPanel) {\n rightPanel.className = 'w-full mb-4';\n rightPanel.style.display = 'block';\n rightPanel.style.height = 'auto';\n rightPanel.style.position = 'static';\n mainGrid.appendChild(rightPanel);\n }\n if (navClone) {\n navClone.classList.remove('hidden');\n navClone.className = 'w-full text-center py-4';\n navClone.style.display = 'block';\n mainGrid.appendChild(navClone);\n const clonedContinueBtn = navClone.querySelector('#continue-btn-steps');\n const clonedStartOverBtn = navClone.querySelector('#start-over-btn');\n if (clonedContinueBtn) {\n clonedContinueBtn.textContent = \"Schedule a Demo\";\n clonedContinueBtn.disabled = false;\n clonedContinueBtn.className = \"btn-primary\";\n clonedContinueBtn.onclick = function() {\n openScheduleModal();\n };\n }\n if (clonedStartOverBtn) {\n clonedStartOverBtn.classList.remove('hidden');\n clonedStartOverBtn.textContent = \"Create Another\";\n clonedStartOverBtn.className = \"btn-link\";\n clonedStartOverBtn.onclick = () => window.location.reload();\n }\n }\n } else {\n setTimeout(() => {\n const leftColumn = document.getElementById('left-column');\n if (leftColumn) {\n finalLeftColumnHTML = leftColumn.innerHTML;\n }\n }, 100);\n }\n }\n \n async function submitForm() {\n isSubmitting = true;\n console.log('Starting submission process...');\n runLoaderAnimation(renderFinalView);\n\n lastSubmissionId = 'sid_' + Date.now() + '_' + Math.random().toString(36).substring(2, 8);\n console.log('Generated submission ID:', lastSubmissionId);\n \n try {\n \/\/ Collect form data\n selections.companyName = companyNameInput.value;\n selections.website = websiteInput.value;\n selections.yourName = yourNameInput.value;\n selections.yourEmail = yourEmailInput.value;\n selections.phone = phoneInput.value;\n selections.companyLogo = companyLogoInput.files[0] || null;\n \n const paramsList = formContent[selections.industry][selections.touchpoint].params;\n const collectedParameters = { ...selections.parameters };\n const fileUploadPromises = [];\n \n console.log('Processing parameters...');\n \n paramsList.forEach(param => {\n const el = document.getElementById(param);\n if (el && el.type === 'file' && el.files[0]) {\n fileUploadPromises.push(uploadFileAndGetUrl(el.files[0]).then(result => { \n collectedParameters[param] = result.downloadUrl; \n }));\n }\n else if (selections.parameterFiles[param]) {\n fileUploadPromises.push(uploadFileAndGetUrl(selections.parameterFiles[param]).then(result => { \n collectedParameters[param] = result.downloadUrl; \n }));\n }\n });\n \n if (selections.companyLogo) {\n fileUploadPromises.push(uploadFileAndGetUrl(selections.companyLogo).then(result => { \n selections.companyLogoUrl = result.downloadUrl; \n }));\n }\n \n console.log('Waiting for file uploads...');\n await Promise.all(fileUploadPromises);\n \n const payload = { \n submission_id: lastSubmissionId, \n industry: selections.industry, \n touchpoint_name: selections.touchpoint, \n touchpoint_id: formContent[selections.industry][selections.touchpoint].id, \n parameters: collectedParameters, \n company_info: { \n companyName: selections.companyName, \n website: selections.website, \n yourName: selections.yourName, \n phone: selections.phone, \n logo: selections.companyLogoUrl || '' \n }, \n personal_info: { email: selections.yourEmail }, \n submitted_at: new Date().toISOString() \n };\n \n console.log('Submitting payload:', JSON.stringify(payload, null, 2));\n \n \/\/ Send to webhook with proper error handling\n const response = await fetch(GAS_ENDPOINT, { \n method: 'POST', \n body: JSON.stringify({action: 'submitData', ...payload }), \n headers: { 'Content-Type': 'text\/plain;charset=utf-8' }\n });\n \n console.log('Response status:', response.status);\n const responseData = await response.json();\n console.log('Response data:', responseData);\n \n if (responseData.status !== 'ok') {\n throw new Error(responseData.error || 'Submission failed');\n }\n \n \/\/ Start listening for URL\n listenForUrl(lastSubmissionId);\n \n } catch (err) {\n console.error(\"Submission process failed:\", err);\n isSubmitting = false;\n showModal(err.message || 'An error occurred during submission. Please check your inputs and try again.');\n updateUIForStep(4);\n }\n}\n\n \/\/ --- THANK YOU POPUP VARIABLES ---\n let thankYouPopupShown = false;\n let thankYouPopupTimer = null;\n\n function showThankYouPopup() {\n if (thankYouPopupShown) return;\n \n const popup = document.getElementById('thankYouPopup');\n const nameSpan = document.getElementById('thankYouName');\n \n const userName = selections.yourName || 'Friend';\n if (nameSpan) {\n nameSpan.textContent = userName;\n }\n \n if (popup) {\n popup.classList.remove('hidden');\n thankYouPopupShown = true;\n }\n }\n \n window.closeThankYouPopup = function() {\n const popup = document.getElementById('thankYouPopup');\n if (popup) {\n popup.classList.add('hidden');\n }\n if (thankYouPopupTimer) {\n clearTimeout(thankYouPopupTimer);\n thankYouPopupTimer = null;\n }\n }\n \n window.scheduleFromThankYou = function() {\n closeThankYouPopup();\n setTimeout(() => {\n openScheduleModal();\n }, 300);\n }\n\n function onCreationUrlReady(url) {\n finalVisualUrl = url;\n \/\/ The animation is already running. The renderFinalView function\n \/\/ will be called by the animation's callback.\n }\n\n let selectedDate = null;\n let selectedTime = null;\n let currentMonth = new Date().getMonth();\n let currentYear = new Date().getFullYear();\n const monthNames = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n\n function openScheduleModal() {\n const isMobile = window.innerWidth < 768;\n const schedulerContainer = document.getElementById('newScheduleModal');\n const emailFromForm = selections.yourEmail || '';\n const newModalEmailField = document.getElementById('modal-email');\n\n if (newModalEmailField) { \n newModalEmailField.value = emailFromForm; \n }\n \n if (isMobile) {\n schedulerContainer.classList.add('popup-mode');\n schedulerContainer.style.display = 'flex';\n schedulerContainer.style.zIndex = '9999';\n } else {\n showSchedulerInLeftPanel();\n }\n\n generateCalendar(currentMonth, currentYear);\n checkFormValidity();\n }\n \n window.closePopup = function() {\n const schedulerContainer = document.getElementById('newScheduleModal');\n const isMobile = window.innerWidth < 768;\n \n if (isMobile) {\n schedulerContainer.classList.remove('popup-mode');\n schedulerContainer.style.display = 'none';\n } else {\n const leftPanelWrapper = document.getElementById('left-panel-content-wrapper');\n const hasScheduler = leftPanelWrapper && leftPanelWrapper.querySelector('.popup');\n \n if (hasScheduler && finalLeftColumnHTML) {\n showFinalViewInLeftPanel();\n } else {\n schedulerContainer.style.display = 'none';\n }\n }\n \n selectedDate = null;\n selectedTime = null;\n document.querySelectorAll('.calendar-day.selected').forEach(d => d.classList.remove('selected'));\n document.querySelectorAll('.time-slot.selected').forEach(s => s.classList.remove('selected'));\n document.getElementById('summaryDate').textContent = 'Not selected';\n document.getElementById('summaryTime').textContent = 'Not selected';\n document.getElementById('booking-details-form').classList.add('hidden');\n \n const dateView = document.getElementById('dateView');\n const timeView = document.getElementById('timeView');\n if (dateView && timeView) {\n dateView.classList.remove('slide-out');\n timeView.classList.remove('slide-in');\n }\n }\n\n\n function closeConfirmationPopup() { document.getElementById('bookingConfirmationPopup').style.display = 'none'; }\n function generateCalendar(month, year) {\n const firstDay = new Date(year, month, 1).getDay();\n const daysInMonth = new Date(year, month + 1, 0).getDate();\n document.getElementById('calendarTitle').textContent = `${monthNames[month]} ${year}`;\n const calendarDays = document.getElementById('calendarDays');\n calendarDays.innerHTML = '';\n for (let i = 0; i < firstDay; i++) { calendarDays.innerHTML += `<div class=\"calendar-day other-month\"><\/div>`; }\n const today = new Date();\n for (let day = 1; day <= daysInMonth; day++) {\n const dayElement = document.createElement('div');\n dayElement.className = 'calendar-day';\n dayElement.textContent = day;\n const thisDate = new Date(year, month, day);\n if (thisDate < today.setHours(0, 0, 0, 0)) { dayElement.classList.add('disabled'); }\n else { dayElement.onclick = () => selectDate(dayElement, day, month, year); }\n calendarDays.appendChild(dayElement);\n }\n }\n window.previousMonth = function() { currentMonth--; if (currentMonth < 0) { currentMonth = 11; currentYear--; } generateCalendar(currentMonth, currentYear); }\n window.nextMonth = function() { currentMonth++; if (currentMonth > 11) { currentMonth = 0; currentYear++; } generateCalendar(currentMonth, currentYear); }\n function selectDate(element, day, month, year) {\n document.querySelectorAll('.calendar-day.selected').forEach(d => d.classList.remove('selected'));\n element.classList.add('selected');\n const monthStr = monthNames[month].substring(0, 3);\n selectedDate = `${monthStr} ${day}, ${year}`;\n document.getElementById('summaryDate').textContent = selectedDate;\n showTimeView();\n }\n\n function showTimeView() {\n const dateView = document.getElementById('dateView');\n const timeView = document.getElementById('timeView');\n const viewContainer = dateView.closest('.view-container');\n\n viewContainer.style.height = dateView.offsetHeight + 'px';\n\n dateView.classList.add('slide-out');\n\n timeView.classList.add('slide-in');\n setTimeout(() => {\n viewContainer.style.height = timeView.offsetHeight + 'px';\n }, 50);\n }\n\n window.backToDateSelection = function() {\n const dateView = document.getElementById('dateView');\n const timeView = document.getElementById('timeView');\n const viewContainer = dateView.closest('.view-container');\n\n document.getElementById('booking-details-form').classList.add('hidden');\n \n viewContainer.style.height = timeView.offsetHeight + 'px';\n \n dateView.classList.remove('slide-out');\n timeView.classList.remove('slide-in');\n \n setTimeout(() => {\n viewContainer.style.height = dateView.offsetHeight + 'px';\n }, 50);\n }\n\n window.selectTime = function(element) {\n document.querySelectorAll('.time-slot.selected').forEach(s => s.classList.remove('selected'));\n element.classList.add('selected');\n selectedTime = element.textContent;\n document.getElementById('summaryTime').textContent = selectedTime;\n document.getElementById('selectionSummary').classList.add('active');\n\n const detailsForm = document.getElementById('booking-details-form');\n detailsForm.classList.remove('hidden');\n detailsForm.classList.add('fade-in');\n\n const timeView = document.getElementById('timeView');\n const viewContainer = timeView.closest('.view-container');\n if (viewContainer) {\n setTimeout(() => {\n viewContainer.style.height = timeView.offsetHeight + 'px';\n }, 50);\n }\n\n checkFormValidity();\n }\n\n\n function checkFormValidity() {\n const email = document.getElementById('modal-email').value;\n const confirmBtn = document.querySelector('#newScheduleModal .btn-confirm');\n if(confirmBtn) confirmBtn.disabled = !(email && selectedDate && selectedTime);\n }\n window.confirmBooking = function() {\n const email = document.getElementById('modal-email').value;\n if (!email || !selectedDate || !selectedTime) { \n showModal('Please fill in your email and select a date and time.'); \n return; \n }\n if (!emailRegex.test(email)) { \n showModal('Please enter a valid email.'); \n return; \n }\n \n const eventDate = new Date(`${selectedDate} ${selectedTime}`);\n const scheduledDateTime = `${selectedDate} at ${selectedTime}`;\n const payload = { \n action: 'createEvent', \n submission_id: lastSubmissionId || null, \n organizer_email: email, \n additional_attendees: document.getElementById('modal-attendees').value.trim(), \n notes: document.getElementById('modal-notes').value.trim(), \n start_iso: eventDate.toISOString(), \n duration_minutes: 30, \n client_tz: Intl.DateTimeFormat().resolvedOptions().timeZone, \n company_name: selections.companyName || '', \n demo_scheduled: scheduledDateTime \n };\n \n const isMobile = window.innerWidth < 767;\n \n if (isMobile) {\n const popupContent = document.querySelector('#newScheduleModal .popup-content');\n const originalContent = popupContent.innerHTML;\n popupContent.innerHTML = `<div class=\"p-8 text-center flex justify-center items-center gap-2\"><div class=\"thinking-dots\"><span><\/span><span><\/span><span><\/span><\/div>Booking your demo...<\/div>`;\n \n fetch(GAS_ENDPOINT, { method: 'POST', body: JSON.stringify(payload) })\n .then(r => r.json())\n .then(res => {\n if (res.status === 'ok') {\n popupContent.innerHTML = `<div class=\"p-8 text-center\"><svg class=\"w-16 h-16 text-blue-500 mx-auto mb-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg><h2 class=\"text-2xl font-bold mb-2\">Booking confirmed<\/h2><p class=\"text-gray-600 mb-4\">An invitation has been emailed to you.<\/p><div class=\"bg-gray-100 p-3 rounded-lg text-lg font-semibold text-gray-800\">${scheduledDateTime}<\/div><\/div>`;\n setTimeout(() => {\n document.getElementById('newScheduleModal').style.display = 'none';\n popupContent.innerHTML = originalContent;\n }, 3000);\n } else {\n showModal(res.error || 'Could not schedule. Try another slot.', 'Error');\n popupContent.innerHTML = originalContent;\n }\n })\n .catch(err => {\n console.error('Schedule error', err);\n showModal('Scheduling failed. Please try again.', 'Error');\n popupContent.innerHTML = originalContent;\n });\n } else {\n const leftPanelWrapper = document.getElementById('left-panel-content-wrapper');\n leftPanelWrapper.innerHTML = `<div class=\"p-8 text-center flex justify-center items-center gap-2\"><div class=\"thinking-dots\"><span><\/span><span><\/span><span><\/span><\/div>Booking your demo...<\/div>`;\n \n fetch(GAS_ENDPOINT, { method: 'POST', body: JSON.stringify(payload) })\n .then(r => r.json())\n .then(res => {\n if (res.status === 'ok') {\n leftPanelWrapper.innerHTML = `<div class=\"p-8 text-center\"><svg class=\"w-16 h-16 text-blue-500 mx-auto mb-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg><h2 class=\"text-2xl font-bold mb-2\">Booking confirmed<\/h2><p class=\"text-gray-600 mb-4\">An invitation has been emailed to you.<\/p><div class=\"bg-gray-100 p-3 rounded-lg text-lg font-semibold text-gray-800\">${scheduledDateTime}<\/div><button id=\"back-to-summary-btn\" class=\"btn-link mt-6\">\u2190 Back to Summary<\/button><\/div>`;\n document.getElementById('back-to-summary-btn').onclick = showFinalViewInLeftPanel;\n } else {\n showModal(res.error || 'Could not schedule. Try another slot.', 'Error');\n showSchedulerInLeftPanel();\n }\n })\n .catch(err => {\n console.error('Schedule error', err);\n showModal('Scheduling failed. Please try again.', 'Error');\n showSchedulerInLeftPanel();\n });\n }\n }\n\n\n function showFinalViewInLeftPanel() {\n const leftColumn = document.getElementById('left-column');\n \n if (leftColumn && finalLeftColumnHTML) {\n leftColumn.innerHTML = finalLeftColumnHTML;\n \n const navigationContainer = document.getElementById('navigation-container');\n if (navigationContainer) {\n navigationContainer.style.display = '';\n }\n \n const continueBtnSteps = document.getElementById('continue-btn-steps');\n const startOverBtn = document.getElementById('start-over-btn');\n \n if (continueBtnSteps) {\n continueBtnSteps.onclick = openScheduleModal;\n }\n if (startOverBtn) {\n startOverBtn.onclick = () => window.location.reload();\n }\n }\n }\n\n\n function showSchedulerInLeftPanel() {\n const mainGrid = document.getElementById('main-grid');\n const rightPanel = document.getElementById('right-panel');\n \n if (!mainGrid.classList.contains('md:grid-cols-3')) {\n mainGrid.classList.remove('md:grid-cols-2');\n mainGrid.classList.add('md:grid-cols-3');\n }\n if (!rightPanel.classList.contains('md:col-span-2')) {\n rightPanel.classList.add('md:col-span-2');\n }\n \n const navigationContainer = document.getElementById('navigation-container');\n if (navigationContainer) {\n navigationContainer.style.display = 'none';\n }\n\n const leftColumn = document.getElementById('left-column');\n const leftPanelWrapper = document.getElementById('left-panel-content-wrapper');\n const schedulerSource = document.getElementById('newScheduleModal');\n\n const progressContainer = document.getElementById('progress-container');\n const mainHeader = document.getElementById('main-header');\n const content5 = document.getElementById('content-5');\n \n if (progressContainer) progressContainer.classList.add('hidden');\n if (mainHeader) mainHeader.classList.add('hidden');\n if (content5) content5.classList.remove('hidden');\n\n if (leftColumn && leftPanelWrapper && schedulerSource) {\n finalLeftColumnHTML = leftColumn.innerHTML;\n \n const schedulerPopup = schedulerSource.querySelector('.popup').cloneNode(true);\n leftPanelWrapper.innerHTML = '';\n \n const backButton = document.createElement('button');\n backButton.className = 'btn-link mb-6 p-4';\n backButton.innerHTML = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 19l-7-7 7-7\" \/><\/svg> Back to Summary`;\n backButton.onclick = showFinalViewInLeftPanel;\n \n leftPanelContentWrapper.appendChild(backButton);\n leftPanelContentWrapper.appendChild(schedulerPopup);\n\n generateCalendar(currentMonth, currentYear);\n checkFormValidity();\n }\n }\n \n\n\n\n\n document.addEventListener('click', (e) => {\n if (!industrySearchContainer.contains(e.target)) {\n dropdownMenu.classList.add('hidden');\n }\n const customDropdowns = document.querySelectorAll('.custom-dropdown');\n customDropdowns.forEach(dropdown => {\n if (!dropdown.contains(e.target)) {\n const menu = dropdown.querySelector('.custom-dropdown-menu');\n if (menu) {\n menu.classList.add('hidden');\n }\n }\n });\n });\n\n\n\n backBtn.addEventListener('click', () => updateUIForStep(currentStep - 1));\n continueBtnSteps.addEventListener('click', () => { if (!continueBtnSteps.disabled) updateUIForStep(currentStep + 1); });\n startOverBtn.addEventListener('click', () => window.location.reload());\n \n [companyNameInput, yourNameInput, yourEmailInput, phoneInput].forEach(input => input.addEventListener('input', validateStep4));\n companyLogoInput.addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (file) {\n selections.companyLogo = file;\n const reader = new FileReader();\n reader.onload = (event) => { logoPreview.src = event.target.result; logoPreviewContainer.classList.remove('hidden'); logoUploader.classList.add('hidden'); };\n reader.readAsDataURL(file);\n }\n });\n removeLogoBtn.addEventListener('click', () => {\n companyLogoInput.value = ''; logoPreview.src = ''; logoPreviewContainer.classList.add('hidden'); logoUploader.classList.remove('hidden'); selections.companyLogo = null;\n });\n \n content3.addEventListener('click', function(e) {\n const button = e.target.closest('.custom-dropdown-button');\n const option = e.target.closest('li');\n if (button) {\n e.stopPropagation();\n const menu = button.nextElementSibling;\n const wasOpen = !menu.classList.contains('hidden');\n document.querySelectorAll('.custom-dropdown-menu').forEach(m => m.classList.add('hidden'));\n if (!wasOpen) menu.classList.remove('hidden');\n }\n if (option) {\n const dropdown = option.closest('.custom-dropdown');\n const menu = dropdown.querySelector('.custom-dropdown-menu');\n const paramName = dropdown.dataset.paramName;\n const display = dropdown.querySelector('.block.truncate');\n const selectedValue = option.textContent;\n display.textContent = selectedValue;\n display.classList.remove('text-gray-500');\n selections.parameters[paramName] = selectedValue;\n menu.classList.add('hidden');\n \n \/\/ Handle dynamic updates based on selection\n if (selections.industry === 'Automotive') {\n if (paramName === 'make') { updateAutomotiveFields(selectedValue); }\n else if (paramName === 'model') { updateLandRoverModelVersion(selectedValue); }\n } else if (selections.industry === 'Education') {\n if (paramName === 'grade') { updateEducationFields(selectedValue); }\n } else if (selections.industry === 'Telecommunications') {\n if (paramName === 'device') { updateTelecomFields(selectedValue); }\n }\n \n handleParamChange();\n }\n });\n\n\n \/\/ --- NEW: ABANDONMENT TRACKING IMPLEMENTATION ---\n function getSessionId() {\n let sessionId = localStorage.getItem('formSessionId');\n if (!sessionId) {\n sessionId = 'sid_' + Date.now() + '_' + Math.random().toString(36).substring(2, 8);\n localStorage.setItem('formSessionId', sessionId);\n }\n return sessionId;\n }\n \n const currentSessionId = getSessionId();\n \n function collectFormData() {\n const collectedData = {\n industry: selections.industry,\n touchpoint: selections.touchpoint,\n parameters: { ...selections.parameters },\n timeSpent: {\n ...timeSpentOnSteps,\n [currentStep]: Date.now() - stepStartTime\n }\n };\n \n const step4Fields = ['company-name', 'website', 'your-name', 'your-email', 'phone'];\n step4Fields.forEach(id => {\n const element = document.getElementById(id);\n if (element) {\n collectedData[element.name || element.id] = element.value;\n }\n });\n return collectedData;\n }\n \n window.addEventListener('beforeunload', (event) => {\n if (isUnloadEventFired) {\n return;\n }\n\n if (isSubmitting) {\n return;\n }\n \n if (currentSessionId !== lastSubmissionId) {\n const abandonmentData = {\n action: 'trackAbandonment',\n sessionId: currentSessionId,\n stepAbandoned: currentStep,\n timestamp: new Date().toISOString(),\n formData: JSON.stringify(collectFormData())\n };\n \n const blob = new Blob([JSON.stringify(abandonmentData)], { type: 'text\/plain' });\n \n navigator.sendBeacon(GAS_ENDPOINT, blob);\n isUnloadEventFired = true;\n }\n });\n });\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dynamic 5-Step Landing Page Celebrate Your Product – Don’t Just Sell It Turn plain customer messages into hyper-personal visuals that drive more conversion! Try out demo – you’ll be added to the waiting list once you complete it Choose your industry – we will open up for more industries soon! Select a Touchpoint for… Fine-tune […]<\/p>\n","protected":false},"author":3,"featured_media":36471,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-36128","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/pages\/36128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/comments?post=36128"}],"version-history":[{"count":289,"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/pages\/36128\/revisions"}],"predecessor-version":[{"id":36824,"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/pages\/36128\/revisions\/36824"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/media\/36471"}],"wp:attachment":[{"href":"https:\/\/emaze.ai\/zh-cn\/wp-json\/wp\/v2\/media?parent=36128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}