From 1e9dda64a6b696ebef577c4d7df9046920b90934 Mon Sep 17 00:00:00 2001
From: Ubuntu <ubuntu@spurrinai-backend.blr.cloudtopiaa.com>
Date: Sun, 14 Sep 2025 18:04:49 +0530
Subject: [PATCH] A4 stable

---
 .../propertyTemplateSelector.html             |  75 ++--
 .../propertyTemplateSelector.js               | 410 +++++++++---------
 2 files changed, 235 insertions(+), 250 deletions(-)

diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html
index 148998b..c7923d2 100644
--- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html
+++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html
@@ -1188,13 +1188,9 @@
                                         </button>
                                     </div>
                                     <div class="toolbar-group">
-                                        <button class="toolbar-button" onclick={addNewPage}>
-                                            <lightning-icon icon-name="utility:add" size="x-small"></lightning-icon>
-                                            Add Page
-                                        </button>
                                         <button class="toolbar-button" onclick={addNewPageWithDataType}>
                                             <lightning-icon icon-name="utility:page" size="x-small"></lightning-icon>
-                                            Add Page (Type)
+                                            Add Page
                                         </button>
                                     </div>
                                     <div class="toolbar-group">
@@ -1246,20 +1242,36 @@
                                 ← Back
                             </button>
                         </div>
-                        <!-- Page Size Options -->
-                        <div class="page-size-section">
-                            <label class="page-size-label">Page Size:</label>
-                            <div class="page-size-options">
-                                <label class="page-size-option">
-                                    <input type="radio" name="pageSize" value="A4" checked
-                                        onchange={handlePageSizeChange}>
-                                    <span class="page-size-text">A4</span>
-                                </label>
-                                <label class="page-size-option">
-                                    <input type="radio" name="pageSize" value="A3" onchange={handlePageSizeChange}>
-                                    <span class="page-size-text">A3</span>
-                                </label>
+                        <!-- Page Size Options and Generate PDF Button -->
+                        <div class="page-size-section" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
+                            <div style="display: flex; align-items: center;">
+                                <label class="page-size-label">Page Size:</label>
+                                <div class="page-size-options">
+                                    <label class="page-size-option">
+                                        <input type="radio" name="pageSize" value="A4" checked
+                                            onchange={handlePageSizeChange}>
+                                        <span class="page-size-text">A4</span>
+                                    </label>
+                                    <label class="page-size-option">
+                                        <input type="radio" name="pageSize" value="A3" onchange={handlePageSizeChange}>
+                                        <span class="page-size-text">A3</span>
+                                    </label>
+                                </div>
                             </div>
+                            
+                            <!-- Generate PDF Button -->
+                            <template if:true={showGeneratePdfButton}>
+                                <button class="btn btn-primary generate-pdf-btn" onclick={generatePdfSimple} disabled={isGeneratingPdf} style="margin-left: 20px;">
+                                    <template if:false={isGeneratingPdf}>
+                                        <span class="btn-icon">📄</span>
+                                        Generate PDF
+                                    </template>
+                                    <template if:true={isGeneratingPdf}>
+                                        <span class="loading-spinner"></span>
+                                        Wait, our AI is generating the report...
+                                    </template>
+                                </button>
+                            </template>
                         </div>
 
                     </div>
@@ -1280,15 +1292,6 @@
                                     </div>
                                 </template>
                             </template>
-                            <template if:false={previewPages}>
-                                    <div class="preview-page" data-page-size={selectedPageSize} data-page-number="1">
-                                        <div class="enhanced-editor-content" contenteditable="true" onkeyup={handleContentChangeWithDynamicSizing}
-                                            onpaste={handleContentChangeWithDynamicSizing} ondragover={handleEditorDragOver} ondrop={handleEditorDrop}>
-                                        <!-- Template content will be loaded here -->
-                                        {htmlContent}
-                                    </div>
-                                </div>
-                            </template>
                         </div>
                         <template if:false={hasPropertyImages}>
                             <div class="floating-placeholder" data-preview-only="true" style="position: absolute; bottom: 12px; left: 12px; display: flex; align-items: center; gap: 8px; z-index: 2000; pointer-events: none;">
@@ -1304,21 +1307,6 @@
             </div>
         </div>
 
-        <!-- Generate PDF Button - Only show on step 3 -->
-        <template if:true={showGeneratePdfButton}>
-            <div class="generate-pdf-section" style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;">
-                <button class="btn btn-primary generate-pdf-btn" onclick={generatePdfSimple} disabled={isGeneratingPdf}>
-                    <template if:false={isGeneratingPdf}>
-                        <span class="btn-icon">📄</span>
-                        Generate PDF
-                    </template>
-                    <template if:true={isGeneratingPdf}>
-                        <span class="loading-spinner"></span>
-                        Wait, our AI is generating the report...
-                    </template>
-                </button>
-            </div>
-        </template>
 
 
 
@@ -1605,9 +1593,6 @@
             </div>
             <div class="new-section-modal-actions">
                 <button class="btn btn-secondary" onclick={closeNewSectionModal}>Cancel</button>
-                <button class="btn btn-primary" onclick={insertNewSection} disabled={insertSectionDisabled}>
-                    Add Section
-                </button>
             </div>
         </div>
     </div>
diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js
index a06eab8..cdcb8e7 100644
--- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js
+++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js
@@ -91,7 +91,7 @@ export default class PropertyTemplateSelector extends LightningElement {
   @track selectedPageSize = "A4"; // Default page size
   @track zoom = 1.0; // Step 3 viewport zoom
   @track isGeneratingPdf = false; // Loading state for PDF generation
-  @track previewPages = []; // Array of pages for viewport display
+  @track previewPages = null; // Array of pages for viewport display
   @track showPrice = true; // Toggle for showing price vs "Price on Request"
   cachedTemplateContent = null; // Cache template content to prevent regeneration
 
@@ -1271,7 +1271,7 @@ export default class PropertyTemplateSelector extends LightningElement {
     if (this.htmlContent) {
       this.previewPages = this.splitContentIntoPages(this.htmlContent);
     } else {
-      this.previewPages = [];
+      this.previewPages = null;
     }
     this.updatePageCount();
     
@@ -2270,64 +2270,6 @@ export default class PropertyTemplateSelector extends LightningElement {
     this.newSectionContent = event.target.value;
   }
 
-  insertNewSection() {
-    if (!this.selectedSectionType || !this.newSectionTitle.trim()) {
-      return;
-    }
-
-    const editor = this.template.querySelector(".enhanced-editor-content");
-    if (!editor) {
-      console.error("Editor not found");
-      return;
-    }
-
-    // Debug: Check logoUrl availability
-    console.log("LogoUrl in insertNewSection:", this.logoUrl);
-    console.log("LogoUrl type:", typeof this.logoUrl);
-
-    // Store logoUrl in a local variable to avoid template string issues
-    const logoUrl = this.logoUrl;
-    console.log("Local logoUrl:", logoUrl);
-
-    // Generate the new section HTML based on type
-    const sectionHTML = this.generateSectionHTML(this.selectedSectionType, this.newSectionTitle, this.newSectionContent);
-    
-    // Create a new page container
-    const newPageHTML = `
-      <div class="brochure-page new-section-page" style="page-break-before: always;">
-        <div class="page-container">
-          ${sectionHTML}
-        </div>
-        <footer class="page-footer">
-          <div class="reference-id">
-            <strong>Agent:</strong> ${this.agentData.name} | ${this.agentData.email} | ${this.agentData.phone} | ${this.agentData.phone}
-          </div>
-          <div class="company-logo">
-            <img src="${logoUrl}" alt="Company Logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
-            <div style="display:none; background:#007bff; color:white; padding:4px 8px; border-radius:4px; font-size:10px; font-weight:bold;">LOGO</div>
-          </div>
-        </footer>
-      </div>
-    `;
-
-    // Insert the new section at the end of the editor
-    editor.insertAdjacentHTML('beforeend', newPageHTML);
-    
-    // Update the page count
-    this.updatePageCount();
-    
-    // Close the modal
-    this.closeNewSectionModal();
-    
-    // Show success message
-    this.showSuccess(`New ${this.selectedSectionType} section added successfully!`);
-    
-    console.log("New section inserted:", {
-      type: this.selectedSectionType,
-      title: this.newSectionTitle,
-      content: this.newSectionContent
-    });
-  }
 
   generateSectionHTML(type, title, content) {
     const data = this.propertyData || {};
@@ -4927,21 +4869,21 @@ export default class PropertyTemplateSelector extends LightningElement {
             // First image gets half height, others get standard height
             const imageHeight = idx === 0 ? '100px' : '150px';
             
-            return `<div class="gallery-item" style="position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); height: ${imageHeight};">
-              <img src="${imageUrl}" alt="${title}" style="width:100%; height:100%; object-fit: cover; display:block; break-inside: avoid; page-break-inside: avoid;"/>
+            return `<div class="gallery-item" style="position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.1);">
+              <img src="${imageUrl}" alt="${title}" style="width:100%; height:120px; object-fit: cover; display:block; break-inside: avoid; page-break-inside: avoid;"/>
              
             </div>`;
           })
           .join("");
         galleryPagesHTML += `
     <div class="brochure" style="display: flex; flex-direction: column; height: 297mm; overflow: hidden;">
-        <div class="content" style="flex: 1; display: flex; flex-direction: column; padding: 0; max-height: calc(297mm - 60px);">
-            <div style="text-align: center; margin-bottom: 10px; padding: 10px 0;">
-                <h2 style="color: var(--color-primary); font-size: 22px; margin: 0;">Property Gallery</h2>
-            </div>
-            <div class="gallery-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; height: 100%; align-content: start; overflow: hidden; padding: 0 10px;">
-                ${chunkHTML}
-            </div>
+        <div class="content-body" style="background-color: white; color: #333333;">
+            <header class="page-header" style="border-bottom: 1px solid #e0e0e0;">
+              <h1 class="title" style="font-family: 'Lato', sans-serif; font-size: 2.2rem; color: #003366; font-weight: 700;">Property <span style="color: #f39c12;">Gallery</span></h1>
+            </header>
+            <main class="main-content">
+                <div style="display:grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 0 10px;">${chunkHTML}</div>
+            </main>
         </div>
         <footer class="page-footer" style="margin-top: auto; height: 60px; flex-shrink: 0;">
             <div class="reference-id">
@@ -4965,6 +4907,7 @@ export default class PropertyTemplateSelector extends LightningElement {
     <style>
         /* --- Google Font --- */
         @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
 
         /* --- Design System Variables --- */
         :root {
@@ -4975,6 +4918,15 @@ export default class PropertyTemplateSelector extends LightningElement {
             --color-text-dark: #333333;
             --color-text-muted: #666666;
             --color-background-light: #f8f9fa;
+            
+            /* Grand Oak Villa Gallery Variables */
+            --color-dark-charcoal: #121212;
+            --color-text-primary: #D1D1D1;
+            --color-accent-gold: #C0A062;
+            --color-white: #FFFFFF;
+            --color-border: #2a2a2a;
+            --padding-page: 60px;
+            --font-secondary: 'Playfair Display', serif;
         }
 
         /* --- Print Media Queries for A4 --- */
@@ -5418,7 +5370,7 @@ export default class PropertyTemplateSelector extends LightningElement {
         }
         .gallery-item img {
             width: 100%;
-            height: 100%;
+            height: 120px;
             object-fit: cover;
             display: block;
             break-inside: avoid;
@@ -5432,6 +5384,36 @@ export default class PropertyTemplateSelector extends LightningElement {
             align-content: start;
             overflow: hidden;
         }
+        
+        /* Modern Home Gallery Styles (Grand Oak Villa Layout) */
+        .content-body {
+            background-color: white; 
+            color: #333333;
+            flex-grow: 1; 
+            padding: 60px; 
+            display: flex; 
+            flex-direction: column;
+        }
+        .page-header {
+            display: flex; 
+            justify-content: space-between; 
+            align-items: baseline;
+            padding-bottom: 20px; 
+            margin-bottom: 30px; 
+            border-bottom: 1px solid #e0e0e0;
+        }
+        .page-header .title {
+            font-family: 'Lato', sans-serif; 
+            font-size: 2.2rem; 
+            color: #003366;
+            font-weight: 700;
+        }
+        .page-header .title span { 
+            color: #f39c12; 
+        }
+        .main-content { 
+            flex-grow: 1; 
+        }
     </style>
 </head>
 <body>
@@ -8050,6 +8032,7 @@ ${galleryPagesHTML}
   @track showDataTypeModal = false;
   @track selectedDataType = '';
   @track forceReRender = false;
+  @track isAddingPage = false;
 
   // Computed property for button disabled state
   get selectedDataTypeDisabled() {
@@ -8196,72 +8179,6 @@ ${galleryPagesHTML}
     }
   }
 
-  // Dynamic page addition feature
-  addNewPage() {
-    try {
-      const editor = this.template.querySelector('.enhanced-editor-content');
-      if (!editor) {
-        this.showError("Editor not found");
-        return;
-      }
-
-      // Create a new page with basic structure
-      const newPageHTML = `
-        <div class="brochure-page a4" style="margin: 20px auto; padding: 0; width: 100%; max-width: 800px; min-height: 600px; overflow: hidden; display: flex; flex-direction: column; background: white; border: 1px solid #ddd; border-radius: 8px;">
-          
-          <div class="content" style="flex: 1; padding: 40px; background: white; overflow: hidden; display: flex; flex-direction: column;">
-            <div class="content-section" style="margin-bottom: 30px;">
-              <h2 style="color: #495057; border-bottom: 2px solid #e9ecef; padding-bottom: 10px; margin-bottom: 20px;">Section Title</h2>
-              <p style="color: #6c757d; line-height: 1.6; margin-bottom: 15px;">Add your content here. This is a new page that has been dynamically added to your brochure.</p>
-              <p style="color: #6c757d; line-height: 1.6;">You can edit this content just like any other section in your template.</p>
-            </div>
-            
-            <div class="content-section" style="margin-bottom: 30px;">
-              <h2 style="color: #495057; border-bottom: 2px solid #e9ecef; padding-bottom: 10px; margin-bottom: 20px;">Additional Information</h2>
-              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
-                <div>
-                  <h3 style="color: #495057; font-size: 1.1em; margin-bottom: 10px;">Feature 1</h3>
-                  <p style="color: #6c757d; margin: 0;">Add your feature description here.</p>
-                </div>
-                <div>
-                  <h3 style="color: #495057; font-size: 1.1em; margin-bottom: 10px;">Feature 2</h3>
-                  <p style="color: #6c757d; margin: 0;">Add your feature description here.</p>
-                </div>
-              </div>
-            </div>
-          </div>
-          
-          <footer class="page-footer">
-            <div class="reference-id">
-              <strong>Agent:</strong> ${this.agentData?.name || 'N/A'} | ${this.agentData?.email || 'N/A'} | ${this.agentData?.phone || 'N/A'}
-            </div>
-            <div class="company-logo">
-              <img src="https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757834589169" alt="PropertyCRM">
-            </div>
-          </footer>
-        </div>
-      `;
-
-      // Insert the new page at the end of the editor
-      editor.insertAdjacentHTML('beforeend', newPageHTML);
-      
-      // Update the page count
-      this.updatePageCount();
-      
-      // Show success message
-      this.showSuccess("New page added successfully! You can now edit the content.");
-      
-      // Scroll to the new page
-      const newPage = editor.querySelector('.brochure-page:last-child');
-      if (newPage) {
-        newPage.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      }
-      
-    } catch (error) {
-      console.error("Error adding new page:", error);
-      this.showError("Failed to add new page. Please try again.");
-    }
-  }
 
   // Add new page with data type selection
   addNewPageWithDataType() {
@@ -8338,6 +8255,13 @@ ${galleryPagesHTML}
         return;
       }
 
+      // Prevent duplicate page creation
+      if (this.isAddingPage) {
+        console.log("Page creation already in progress, skipping...");
+        return;
+      }
+      this.isAddingPage = true;
+
       let newPageHTML = '';
 
       switch (this.selectedDataType) {
@@ -8370,11 +8294,15 @@ ${galleryPagesHTML}
       this.closeDataTypeModal();
       this.showSuccess("New page added successfully!");
       
-      // Scroll to the new page
-      const newPage = editor.querySelector('.brochure-page:last-child');
-      if (newPage) {
-        newPage.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      }
+      // Reset the flag after a delay
+      setTimeout(() => {
+        this.isAddingPage = false;
+        // Auto-scroll to the new page
+        const newPage = editor.querySelector('.a4-page:last-child');
+        if (newPage) {
+          newPage.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      }, 100);
       
     } catch (error) {
       console.error("Error adding page with data type:", error);
@@ -8382,117 +8310,115 @@ ${galleryPagesHTML}
     }
   }
 
-  // Create different page types
+  // Create different page types - all use same A4 structure
   createTextPage() {
     return `
-      <div class="brochure-page a4" style="margin: 20px auto; padding: 0; width: 100%; max-width: 800px; min-height: 600px; overflow: hidden; display: flex; flex-direction: column; background: white; border: 1px solid #ddd; border-radius: 8px;">
-        
-        <div class="content" style="flex: 1; padding: 40px; background: white; overflow: hidden; display: flex; flex-direction: column;">
-          <div class="content-section" style="flex: 1; margin-bottom: 20px;">
-            <h2 style="color: #495057; border-bottom: 2px solid #e9ecef; padding-bottom: 10px; margin-bottom: 15px;">Section Title</h2>
-            <p style="color: #6c757d; line-height: 1.6; margin-bottom: 15px;">Add your text content here. This is a text-focused page for detailed descriptions, information, or any written content.</p>
-            <p style="color: #6c757d; line-height: 1.6;">You can edit this content just like any other section in your template.</p>
+      <div class="a4-page" style="width: 210mm; height: 297mm; margin: 0 auto 40px auto; padding: 0; background: white; border: 1px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; page-break-inside: avoid; page-break-after: always; overflow: hidden; box-sizing: border-box;">
+        <div class="page-content" style="flex: 1; padding: 20px; overflow: hidden; page-break-inside: avoid; display: flex; flex-direction: column; box-sizing: border-box; max-height: calc(297mm - 60px);">
+          <div class="editable-content" contenteditable="true" style="flex: 1; min-height: 150px; border: 1px dashed #ccc; padding: 15px; border-radius: 4px; background: #fafafa; outline: none; page-break-inside: avoid; overflow: hidden;">
+            <h2>Text Content</h2>
+            <p>Add your text content here...</p>
           </div>
         </div>
         
-        <div style="flex-shrink: 0; margin-top: auto; width: 100%;">
-          ${this.getTemplateSpecificFooter()}
-        </div>
+        <footer class="page-footer" style="flex-shrink: 0; height: 60px; background-color: #003366; color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; page-break-inside: avoid; box-sizing: border-box; margin: 0;">
+          <div class="reference-id">
+            <strong>Agent:</strong> ${this.agentData?.name || 'N/A'} | ${this.agentData?.email || 'N/A'} | ${this.agentData?.phone || 'N/A'}
+          </div>
+          <div class="company-logo">
+            <img src="https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757834589169" alt="PropertyCRM" style="height: 20px; max-width: 40px; object-fit: contain;">
+          </div>
+        </footer>
       </div>
     `;
   }
 
   createGalleryPage() {
     return `
-      <div class="brochure-page a4" style="margin: 20px auto; padding: 0; width: 100%; max-width: 800px; min-height: 600px; overflow: hidden; display: flex; flex-direction: column; background: white; border: 1px solid #ddd; border-radius: 8px;">
-        
-        <div class="content" style="flex: 1; padding: 40px; background: white; overflow: hidden; display: flex; flex-direction: column;">
-          <div class="gallery-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; flex: 1; height: 100%;">
-            <div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; break-inside: avoid; page-break-inside: avoid;">
+      <div class="a4-page" style="width: 210mm; height: 297mm; margin: 0 auto 40px auto; padding: 0; background: white; border: 1px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; position: relative; page-break-inside: avoid; page-break-after: always;">
+        <div class="page-content" style="flex: 1; padding: 40px; overflow: hidden; page-break-inside: avoid;">
+          <div class="gallery-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; height: 100%; page-break-inside: avoid;">
+            <div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; display: flex; align-items: center; justify-content: center; page-break-inside: avoid;">
               <div>
                 <i class="fa-solid fa-image" style="font-size: 1.8em; margin-bottom: 10px;"></i>
-                <p style="margin: 0; font-size: 0.9em; font-weight: 500;">Add your images here</p>
+                <p style="margin: 0; font-size: 0.9em;">Add image here</p>
               </div>
             </div>
-            <div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; break-inside: avoid; page-break-inside: avoid;">
+            <div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; display: flex; align-items: center; justify-content: center; page-break-inside: avoid;">
               <div>
                 <i class="fa-solid fa-image" style="font-size: 1.8em; margin-bottom: 10px;"></i>
-                <p style="margin: 0; font-size: 0.9em; font-weight: 500;">Add your images here</p>
+                <p style="margin: 0; font-size: 0.9em;">Add image here</p>
               </div>
             </div>
-            <div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; break-inside: avoid; page-break-inside: avoid;">
+            <div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; display: flex; align-items: center; justify-content: center; page-break-inside: avoid;">
               <div>
                 <i class="fa-solid fa-image" style="font-size: 1.8em; margin-bottom: 10px;"></i>
-                <p style="margin: 0; font-size: 0.9em; font-weight: 500;">Add your images here</p>
+                <p style="margin: 0; font-size: 0.9em;">Add image here</p>
               </div>
             </div>
-            <div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; break-inside: avoid; page-break-inside: avoid;">
+            <div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; display: flex; align-items: center; justify-content: center; page-break-inside: avoid;">
               <div>
                 <i class="fa-solid fa-image" style="font-size: 1.8em; margin-bottom: 10px;"></i>
-                <p style="margin: 0; font-size: 0.9em; font-weight: 500;">Add your images here</p>
-              </div>
-            </div>
-            <div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; break-inside: avoid; page-break-inside: avoid;">
-              <div>
-                <i class="fa-solid fa-image" style="font-size: 1.8em; margin-bottom: 10px;"></i>
-                <p style="margin: 0; font-size: 0.9em; font-weight: 500;">Add your images here</p>
-              </div>
-            </div>
-            <div class="gallery-item" style="background: #f8f9fa; border: 2px dashed #dee2e6; padding: 15px; text-align: center; color: #6c757d; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; break-inside: avoid; page-break-inside: avoid;">
-              <div>
-                <i class="fa-solid fa-image" style="font-size: 1.8em; margin-bottom: 10px;"></i>
-                <p style="margin: 0; font-size: 0.9em; font-weight: 500;">Add your images here</p>
+                <p style="margin: 0; font-size: 0.9em;">Add image here</p>
               </div>
             </div>
           </div>
         </div>
         
-        <div style="flex-shrink: 0; margin-top: auto; width: 100%;">
-          ${this.getTemplateSpecificFooter()}
-        </div>
+        <footer class="page-footer" style="position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background-color: #003366; color: white; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; page-break-inside: avoid;">
+          <div class="reference-id">
+            <strong>Agent:</strong> ${this.agentData?.name || 'N/A'} | ${this.agentData?.email || 'N/A'} | ${this.agentData?.phone || 'N/A'}
+          </div>
+          <div class="company-logo">
+            <img src="https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757834589169" alt="PropertyCRM" style="height: 25px; max-width: 48px; object-fit: contain;">
+          </div>
+        </footer>
       </div>
     `;
   }
 
   createFeaturesPage() {
     return `
-      <div class="brochure-page a4" style="margin: 20px auto; padding: 0; width: 100%; max-width: 800px; min-height: 600px; overflow: hidden; display: flex; flex-direction: column; background: white; border: 1px solid #ddd; border-radius: 8px;">
-        
-        <div class="content" style="flex: 1; padding: 40px; background: white; overflow: hidden; display: flex; flex-direction: column;">
-          <div class="features-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; flex: 1;">
-            <div class="feature-item" style="display: flex; align-items: center; padding: 8px 0;">
+      <div class="a4-page" style="width: 210mm; height: 297mm; margin: 0 auto 40px auto; padding: 0; background: white; border: 1px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; position: relative; page-break-inside: avoid; page-break-after: always;">
+        <div class="page-content" style="flex: 1; padding: 40px; overflow: hidden; page-break-inside: avoid;">
+          <div class="features-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; height: 100%; page-break-inside: avoid;">
+            <div class="feature-item" style="display: flex; align-items: center; padding: 8px 0; page-break-inside: avoid;">
               <i class="fa-solid fa-check" style="color: #28a745; margin-right: 8px;"></i>
               <span>Feature 1</span>
             </div>
-            <div class="feature-item" style="display: flex; align-items: center; padding: 8px 0;">
+            <div class="feature-item" style="display: flex; align-items: center; padding: 8px 0; page-break-inside: avoid;">
               <i class="fa-solid fa-check" style="color: #28a745; margin-right: 8px;"></i>
               <span>Feature 2</span>
             </div>
-            <div class="feature-item" style="display: flex; align-items: center; padding: 8px 0;">
+            <div class="feature-item" style="display: flex; align-items: center; padding: 8px 0; page-break-inside: avoid;">
               <i class="fa-solid fa-check" style="color: #28a745; margin-right: 8px;"></i>
               <span>Feature 3</span>
             </div>
-            <div class="feature-item" style="display: flex; align-items: center; padding: 8px 0;">
+            <div class="feature-item" style="display: flex; align-items: center; padding: 8px 0; page-break-inside: avoid;">
               <i class="fa-solid fa-check" style="color: #28a745; margin-right: 8px;"></i>
               <span>Feature 4</span>
             </div>
           </div>
         </div>
         
-        <div style="flex-shrink: 0; margin-top: auto; width: 100%;">
-          ${this.getTemplateSpecificFooter()}
-        </div>
+        <footer class="page-footer" style="position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background-color: #003366; color: white; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; page-break-inside: avoid;">
+          <div class="reference-id">
+            <strong>Agent:</strong> ${this.agentData?.name || 'N/A'} | ${this.agentData?.email || 'N/A'} | ${this.agentData?.phone || 'N/A'}
+          </div>
+          <div class="company-logo">
+            <img src="https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757834589169" alt="PropertyCRM" style="height: 25px; max-width: 48px; object-fit: contain;">
+          </div>
+        </footer>
       </div>
     `;
   }
 
   createContactPage() {
     return `
-      <div class="brochure-page a4" style="margin: 20px auto; padding: 0; width: 100%; max-width: 800px; min-height: 600px; overflow: hidden; display: flex; flex-direction: column; background: white; border: 1px solid #ddd; border-radius: 8px;">
-        
-        <div class="content" style="flex: 1; padding: 40px; background: white; overflow: hidden; display: flex; flex-direction: column;">
-          <div class="contact-info-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; flex: 1;">
-            <div class="contact-details">
+      <div class="a4-page" style="width: 210mm; height: 297mm; margin: 0 auto 40px auto; padding: 0; background: white; border: 1px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; position: relative; page-break-inside: avoid; page-break-after: always;">
+        <div class="page-content" style="flex: 1; padding: 40px; overflow: hidden; page-break-inside: avoid;">
+          <div class="contact-info-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; height: 100%; page-break-inside: avoid;">
+            <div class="contact-details" style="page-break-inside: avoid;">
               <h3>Contact Details</h3>
               <div class="contact-item" style="margin: 12px 0;">
                 <strong>Agent:</strong> ${this.agentData?.name || 'N/A'}
@@ -8504,7 +8430,7 @@ ${galleryPagesHTML}
                 <strong>Phone:</strong> ${this.agentData?.phone || 'N/A'}
               </div>
             </div>
-            <div class="contact-details">
+            <div class="contact-details" style="page-break-inside: avoid;">
               <h3>Property Information</h3>
               <div class="contact-item" style="margin: 12px 0;">
                 <strong>Property:</strong> ${this.propertyData?.propertyName || 'N/A'}
@@ -8519,23 +8445,35 @@ ${galleryPagesHTML}
           </div>
         </div>
         
-        <div style="flex-shrink: 0; margin-top: auto; width: 100%;">
-          ${this.getTemplateSpecificFooter()}
-        </div>
+        <footer class="page-footer" style="position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background-color: #003366; color: white; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; page-break-inside: avoid;">
+          <div class="reference-id">
+            <strong>Agent:</strong> ${this.agentData?.name || 'N/A'} | ${this.agentData?.email || 'N/A'} | ${this.agentData?.phone || 'N/A'}
+          </div>
+          <div class="company-logo">
+            <img src="https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757834589169" alt="PropertyCRM" style="height: 25px; max-width: 48px; object-fit: contain;">
+          </div>
+        </footer>
       </div>
     `;
   }
 
   createBlankPage() {
     return `
-      <div class="brochure-page a4" style="margin: 20px auto; padding: 0; width: 100%; max-width: 800px; min-height: 600px; overflow: hidden; display: flex; flex-direction: column; background: white; border: 1px solid #ddd; border-radius: 8px;">
-        <div class="page-content" style="flex: 1; padding: 40px; background: white; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center;">
-          <p style="color: #6c757d; text-align: center; font-size: 1.2em;">Add your content here</p>
+      <div class="a4-page" style="width: 210mm; height: 297mm; margin: 0 auto 40px auto; padding: 0; background: white; border: 1px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; position: relative; page-break-inside: avoid; page-break-after: always;">
+        <div class="page-content" style="flex: 1; padding: 40px; overflow: hidden; display: flex; align-items: center; justify-content: center; page-break-inside: avoid;">
+          <div class="editable-content" contenteditable="true" style="width: 100%; height: 100%; min-height: 200px; border: 1px dashed #ccc; padding: 20px; border-radius: 4px; background: #fafafa; outline: none; display: flex; align-items: center; justify-content: center; page-break-inside: avoid;">
+            <p style="color: #6c757d; text-align: center; font-size: 1.2em; margin: 0;">Click here to add content...</p>
+          </div>
         </div>
         
-        <div style="flex-shrink: 0; margin-top: auto; width: 100%;">
-          ${this.getTemplateSpecificFooter()}
-        </div>
+        <footer class="page-footer" style="position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background-color: #003366; color: white; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; page-break-inside: avoid;">
+          <div class="reference-id">
+            <strong>Agent:</strong> ${this.agentData?.name || 'N/A'} | ${this.agentData?.email || 'N/A'} | ${this.agentData?.phone || 'N/A'}
+          </div>
+          <div class="company-logo">
+            <img src="https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757834589169" alt="PropertyCRM" style="height: 25px; max-width: 48px; object-fit: contain;">
+          </div>
+        </footer>
       </div>
     `;
   }
@@ -14091,6 +14029,17 @@ ${galleryPagesHTML}
             display: none !important;
         }
         
+        /* A4 page editor styling */
+        .a4-page {
+            isolation: isolate;
+            contain: layout;
+        }
+        
+        .a4-page .page-footer {
+            isolation: isolate;
+            contain: layout;
+        }
+        
         @media print {
             body { margin: 0; padding: 0; }
             .template-content { 
@@ -14098,6 +14047,57 @@ ${galleryPagesHTML}
                 border-radius: 0;
                 max-width: none;
             }
+            
+            /* A4 page print styling */
+            .a4-page {
+                width: 210mm !important;
+                height: 297mm !important;
+                margin: 0 !important;
+                padding: 0 !important;
+                box-shadow: none !important;
+                border: none !important;
+                border-radius: 0 !important;
+                page-break-after: always;
+                page-break-inside: avoid !important;
+                position: relative !important;
+                overflow: hidden !important;
+                box-sizing: border-box !important;
+            }
+            
+            .a4-page:last-child {
+                page-break-after: avoid;
+            }
+            
+            .a4-page .page-content {
+                flex: 1 !important;
+                padding: 20px !important;
+                overflow: hidden !important;
+                display: flex !important;
+                flex-direction: column !important;
+                box-sizing: border-box !important;
+                max-height: calc(297mm - 60px) !important;
+            }
+            
+            .a4-page .page-footer {
+                flex-shrink: 0 !important;
+                height: 60px !important;
+                background-color: #003366 !important;
+                color: white !important;
+                padding: 10px 20px !important;
+                display: flex !important;
+                justify-content: space-between !important;
+                align-items: center !important;
+                font-size: 12px !important;
+                page-break-inside: avoid !important;
+                box-sizing: border-box !important;
+                margin: 0 !important;
+            }
+            
+            .a4-page .page-footer img {
+                height: 20px !important;
+                max-width: 40px !important;
+                object-fit: contain !important;
+            }
         }
     </style>
 </head>