From 16d7982cda25c515e02a1329671171f57cacde33 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 11:28:47 +0000
Subject: [PATCH 1/5] Update src/app/about/page.tsx

---
 src/app/about/page.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 157ace0..aa2f4e4 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -48,7 +48,7 @@ export default function AboutPage() {
           title="About Tooting Emergency & General Plumbing Services"
           description="With over 10 years of experience serving South London, Abdul is your trusted local plumber. Committed to fast response times, fair pricing, and professional service that puts your home first. Every job is treated with care and attention to detail."
           tag="Our Story"
-          imageSrc="http://img.b2bpic.net/free-photo/portrait-engineers-work-hours-job-site_23-2151589547.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/portrait-engineers-work-hours-job-site_23-2151589547.jpg?_wi=3"
           imageAlt="Abdul - Your Local Plumber"
           buttons={[
             {
@@ -153,7 +153,7 @@ export default function AboutPage() {
                 "Arrived within 20 mins of a call and sorted the leak within the hour. Professional and fair priced. Highly recommend!",
               rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",
+                "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg?_wi=2",
               imageAlt: "Sarah Johnson",
             },
             {
@@ -164,7 +164,7 @@ export default function AboutPage() {
                 "Quick response and the burst radiator was effectively fixed at a fair price. Great service from a local plumber who cares.",
               rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg",
+                "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg?_wi=2",
               imageAlt: "Michael Chen",
             },
             {
@@ -175,7 +175,7 @@ export default function AboutPage() {
                 "Needed an emergency plumber on a Sunday and they were great. Fast, friendly, and professional. Best decision to call.",
               rating: 5,
               imageSrc:
-                "http://img.b2bpic.net/free-photo/shot-beautiful-young-businesswoman-wearing-blue-chiffon-shirt-while-standing-with-folded-arms-black-wall_158595-6868.jpg",
+                "http://img.b2bpic.net/free-photo/shot-beautiful-young-businesswoman-wearing-blue-chiffon-shirt-while-standing-with-folded-arms-black-wall_158595-6868.jpg?_wi=2",
               imageAlt: "Emma Rodriguez",
             },
           ]}
-- 
2.49.1


From 523afe8abac9ba9dea9711069a4544d6e8383c33 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 11:28:47 +0000
Subject: [PATCH 2/5] Update src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index b84fdbd..c2a30d6 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -62,7 +62,7 @@ export default function ContactPage() {
           title="Why Choose Tooting Emergency & General Plumbing Services"
           description="With 4.9 stars from 68+ reviews, Abdul delivers trusted local plumbing expertise you can rely on. Fast response times, fair pricing, and friendly service for all your plumbing needs."
           tag="About Us"
-          imageSrc="http://img.b2bpic.net/free-photo/portrait-engineers-work-hours-job-site_23-2151589547.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/portrait-engineers-work-hours-job-site_23-2151589547.jpg?_wi=5"
           imageAlt="Professional plumber at work"
           buttons={[
             {
@@ -86,7 +86,7 @@ export default function ContactPage() {
               handle: "@Sarah",
               testimonial: "Arrived within 20 mins of a call and sorted the leak within the hour. Professional and fair priced. Highly recommend!",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg?_wi=3",
               imageAlt: "Sarah Johnson",
             },
             {
@@ -95,7 +95,7 @@ export default function ContactPage() {
               handle: "@Michael",
               testimonial: "Quick response and the burst radiator was effectively fixed at a fair price. Great service from a local plumber who cares.",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg?_wi=3",
               imageAlt: "Michael Chen",
             },
             {
@@ -104,7 +104,7 @@ export default function ContactPage() {
               handle: "@Emma",
               testimonial: "Needed an emergency plumber on a Sunday and they were great. Fast, friendly, and professional. Best decision to call.",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/shot-beautiful-young-businesswoman-wearing-blue-chiffon-shirt-while-standing-with-folded-arms-black-wall_158595-6868.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/shot-beautiful-young-businesswoman-wearing-blue-chiffon-shirt-while-standing-with-folded-arms-black-wall_158595-6868.jpg?_wi=3",
               imageAlt: "Emma Rodriguez",
             },
             {
@@ -113,7 +113,7 @@ export default function ContactPage() {
               handle: "@David",
               testimonial: "Fantastic plumber! Fixed our boiler issue same day with transparent pricing and no hidden charges. Will use again.",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-making-ok-sign_1368-6336.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-making-ok-sign_1368-6336.jpg?_wi=2",
               imageAlt: "David Kim",
             },
             {
@@ -122,7 +122,7 @@ export default function ContactPage() {
               handle: "@Jessica",
               testimonial: "As a landlord managing multiple properties, Abdul is my go-to plumber. Reliable, professional, and always available.",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-showing-thumb-up_1187-5092.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-showing-thumb-up_1187-5092.jpg?_wi=2",
               imageAlt: "Jessica Watson",
             },
             {
@@ -131,7 +131,7 @@ export default function ContactPage() {
               handle: "@Robert",
               testimonial: "Emergency leak at 11pm on a weeknight. Called Abdul, he arrived quickly and fixed it. Saved my home from major damage!",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-caucasian-man_641386-12.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-caucasian-man_641386-12.jpg?_wi=2",
               imageAlt: "Robert Thompson",
             },
           ]}
-- 
2.49.1


From 9137e35eed28859206e363ae51364561c0fd2136 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 11:28:48 +0000
Subject: [PATCH 3/5] Update src/app/layout.tsx

---
 src/app/layout.tsx | 1367 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 1367 insertions(+)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 92c1e46..81ead22 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1429,6 +1429,1373 @@ export default function RootLayout({
   
   window.parent.postMessage({ type: 'webild-editor-ready' }, '*');
 })();
+`
+          }}
+        />
+      
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+(function() {
+  if (window.self === window.top) return;
+
+  if (window.__webildEditorInitialized) return;
+  window.__webildEditorInitialized = true;
+
+  let isActive = false;
+  let hoveredElement = null;
+  let selectedElement = null;
+  let originalContent = null;
+  let isEditing = false;
+  let elementTypeLabel = null;
+  let hoverOverlay = null;
+  let scrollTimeout = null;
+  let isScrolling = false;
+
+  const invalidElements = ['html', 'body', 'script', 'style', 'meta', 'link', 'head', 'noscript', 'title'];
+  const hoverClass = 'webild-hover';
+  const selectedClass = 'webild-selected';
+
+  const style = document.createElement('style');
+  style.id = 'webild-inspector-styles';
+  style.textContent = '' +
+    '.webild-hover {' +
+    '  outline: 2px dashed #4d96ff80 !important;' +
+    '  border-radius: 0 !important;' +
+    '  outline-offset: 2px !important;' +
+    '  cursor: pointer !important;' +
+    '  transition: outline 0.15s ease !important;' +
+    '  background-color: #4d96ff05 !important;' +
+    '}' +
+    '.webild-selected {' +
+    '  outline: 2px solid #4d96ff !important;' +
+    '  outline-offset: 2px !important;' +
+    '  transition: outline 0.15s ease !important;' +
+    '  background-color: #4d96ff05 !important;' +
+    '  border-radius: 0 !important;' +
+    '}' +
+    '[contenteditable="true"].webild-selected {' +
+    '  outline: 2px solid #4d96ff !important;' +
+    '  background-color: #4d96ff05 !important;' +
+    '}' +
+    'img.webild-hover,' +
+    'img.webild-selected,' +
+    'video.webild-hover,' +
+    'video.webild-selected {' +
+    '  outline-offset: 2px !important;' +
+    '}' +
+    '.webild-element-type-label {' +
+    '  position: fixed !important;' +
+    '  z-index: 999999 !important;' +
+    '  background: #4d96ff !important;' +
+    '  color: white !important;' +
+    '  padding: 4px 8px !important;' +
+    '  font-size: 11px !important;' +
+    '  font-weight: 600 !important;' +
+    '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;' +
+    '  pointer-events: none !important;' +
+    '  white-space: nowrap !important;' +
+    '  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;' +
+    '  letter-spacing: 0.3px !important;' +
+    '  border: 1px solid #4d96ff20 !important;' +
+    '}' +
+    '.webild-element-type-label.label-top {' +
+    '  border-radius: 6px 6px 0 0 !important;' +
+    '}' +
+    '.webild-element-type-label.label-bottom {' +
+    '  border-radius: 0 0 6px 6px !important;' +
+    '}' +
+    '.webild-hover-overlay {' +
+    '  position: fixed !important;' +
+    '  background-color: #4d96ff15 !important;' +
+    '  pointer-events: none !important;' +
+    '  z-index: 999998 !important;' +
+    '  transition: all 0.15s ease !important;' +
+    '}';
+  document.head.appendChild(style);
+  
+  const getUniqueSelector = (element, assignId = false) => {
+    if (element.dataset && element.dataset.webildSelector) {
+      return element.dataset.webildSelector;
+    }
+    
+    const existingId = element.getAttribute('data-webild-id');
+    if (existingId) {
+      return '[data-webild-id="' + existingId + '"]';
+    }
+    
+    if (assignId) {
+      const uniqueId = 'webild-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+      element.setAttribute('data-webild-id', uniqueId);
+      return '[data-webild-id="' + uniqueId + '"]';
+    }
+    
+    return null;
+  };
+  
+  const getSectionId = (element) => {
+    let current = element;
+    while (current && current !== document.body) {
+      const sectionId = current.getAttribute('data-section');
+      if (sectionId) {
+        return sectionId;
+      }
+      current = current.parentElement;
+    }
+    return 'hero';
+  };
+  
+  const getElementType = (element) => {
+  const tagName = element.tagName.toLowerCase();
+  const computedStyle = window.getComputedStyle(element);
+
+  if (tagName === 'img') {
+    return 'Image';
+  }
+
+  if (tagName === 'video') {
+    return 'Video';
+  }
+
+  const backgroundImage = computedStyle.backgroundImage;
+  if (backgroundImage && backgroundImage !== 'none') {
+    const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
+    if (urlMatch && urlMatch[1] && !urlMatch[1].includes('gradient')) {
+      const area = element.offsetWidth * element.offsetHeight;
+      const hasReasonableSize = area > 1000;
+      const hasFewChildren = element.children.length <= 2;
+      
+      if (hasReasonableSize && hasFewChildren) {
+        return 'Image';
+      }
+    }
+  }
+
+    if (tagName === 'button') return 'Button';
+    if (tagName === 'a' && element.getAttribute('href')) return 'Button';
+    if (element.getAttribute('role') === 'button') return 'Button';
+
+    const buttonClasses = ['btn', 'button', 'cta', 'action-button'];
+    const hasButtonClass = buttonClasses.some(cls =>
+      element.classList.contains(cls) || element.classList.contains(\`btn-\${cls}\`)
+    );
+
+    if (hasButtonClass && element.textContent && element.textContent.trim().length > 0) {
+      return 'Button';
+    }
+
+    const textTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label', 'li'];
+    if (textTags.includes(tagName)) {
+      return 'Text';
+    }
+
+    if (tagName === 'div') {
+      const hasDirectText = Array.from(element.childNodes).some(node => 
+        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
+      );
+      
+      if (hasDirectText && !element.querySelector('div, section, article, main, header, footer')) {
+        return 'Text';
+      }
+      
+      return 'Div';
+    }
+
+    if (tagName === 'article') {
+      return 'Article';
+    }
+
+    if (tagName === 'a' && !element.getAttribute('href')) {
+      return 'Text';
+    }
+
+    return 'Section';
+  };
+
+  const extractOriginalUrl = (url) => {
+    if (!url) return url;
+
+    if (url.includes('/_next/')) {
+      try {
+        const urlObj = new URL(url);
+        const originalPath = urlObj.searchParams.get('url');
+        if (originalPath) {
+          return originalPath;
+        }
+      } catch (e) {
+        return url;
+      }
+    }
+    
+    if (url.includes('.webild.io/')) {
+      try {
+        const urlObj = new URL(url);
+        return urlObj.pathname;
+      } catch (e) {
+        return url;
+      }
+    }
+
+    return url;
+  };
+
+  const getMediaTypeFromUrl = (url) => {
+    const videoExts = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.m4v', '.wmv'];
+    const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp', '.ico', '.tiff', '.avif'];
+    try {
+      const pathname = new URL(url).pathname.toLowerCase();
+      if (videoExts.some(function(ext) { return pathname.endsWith(ext); })) return 'video';
+      if (imageExts.some(function(ext) { return pathname.endsWith(ext); })) return 'image';
+    } catch(e) {}
+    return 'unknown';
+  };
+
+  const swapMediaElement = (oldEl, newTag, newSrc) => {
+    const newEl = document.createElement(newTag);
+    Array.from(oldEl.attributes).forEach(function(attr) {
+      if (attr.name !== 'src' && attr.name !== 'alt' && attr.name !== 'srcset' && attr.name !== 'autoplay' && attr.name !== 'loop' && attr.name !== 'muted' && attr.name !== 'playsinline') {
+        try { newEl.setAttribute(attr.name, attr.value); } catch(e) {}
+      }
+    });
+    newEl.style.cssText = oldEl.style.cssText;
+    if (newTag === 'video') {
+      newEl.setAttribute('autoplay', '');
+      newEl.setAttribute('loop', '');
+      newEl.setAttribute('muted', '');
+      newEl.setAttribute('playsinline', '');
+    }
+    newEl.src = newSrc;
+    if (oldEl.parentNode) {
+      oldEl.parentNode.replaceChild(newEl, oldEl);
+    }
+    return newEl;
+  };
+
+  const getElementInfo = (element, assignId = false) => {
+    const rect = element.getBoundingClientRect();
+    const tagName = element.tagName.toLowerCase();
+    const selector = getUniqueSelector(element, assignId);
+    const sectionId = getSectionId(element);
+    
+    let className = undefined;
+    try {
+      if (element.className) {
+        if (typeof element.className === 'string') {
+          className = element.className;
+        } else if (element.className.baseVal !== undefined) {
+          className = element.className.baseVal;
+        }
+      }
+    } catch (e) {}
+    
+    const info = {
+      tagName: tagName,
+      id: element.id || undefined,
+      className: className,
+      selector: selector,
+      elementType: null,
+      sectionId: sectionId,
+      boundingBox: {
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height
+      }
+    };
+    
+    if (tagName === 'img') {
+      const originalSrc = extractOriginalUrl(element.src);
+      info.imageData = {
+        src: originalSrc,
+        alt: element.alt || undefined,
+        naturalWidth: element.naturalWidth,
+        naturalHeight: element.naturalHeight,
+        isBackground: false
+      };
+    }
+
+    if (tagName === 'video') {
+      const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
+      const resolvedSrc = extractOriginalUrl(rawSrc);
+      info.imageData = {
+        src: resolvedSrc,
+        alt: element.getAttribute('aria-label') || undefined,
+        isBackground: false,
+        isVideo: true
+      };
+    }
+
+    const computedStyle = window.getComputedStyle(element);
+    const backgroundImage = computedStyle.backgroundImage;
+    if (backgroundImage && backgroundImage !== 'none') {
+      const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
+      if (urlMatch) {
+        const originalBgSrc = extractOriginalUrl(urlMatch[1]);
+        if (tagName !== 'img') {
+          info.imageData = {
+            src: originalBgSrc,
+            isBackground: true
+          };
+        } else {
+          if (!info.imageData) info.imageData = {};
+          info.imageData.backgroundImageSrc = originalBgSrc;
+        }
+      }
+    }
+    
+    const elementType = getElementType(element);
+    info.elementType = elementType;
+    
+    if (elementType === 'Button') {
+      const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
+      const buttonHref = element.getAttribute('href') ||
+                        element.getAttribute('data-href') ||
+                        element.getAttribute('onclick') ||
+                        element.dataset?.link ||
+                        undefined;
+
+      info.buttonData = {
+        text: buttonText,
+        href: buttonHref
+      };
+    }
+
+    if (elementType === 'Text') {
+      info.textContent = element.textContent || '';
+    }
+    
+    return info;
+  };
+  
+  const isValidElement = (element) => {
+    if (!isActive) return false;
+    const tagName = element.tagName?.toLowerCase();
+    if (invalidElements.includes(tagName)) return false;
+    const isImage = tagName === 'img';
+    const isVideo = tagName === 'video';
+    if (isImage || isVideo) return true;
+    const hasInnerHTML = element.innerHTML && element.innerHTML.trim().length > 0;
+    const hasTextContent = element.textContent && element.textContent.trim().length > 0;
+    const hasChildren = element.children && element.children.length > 0;
+    if (!hasInnerHTML && !hasTextContent && !hasChildren) {
+      return false;
+    }
+    const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
+    if (hasBackgroundImage && !hasChildren && !hasTextContent) {
+      return false;
+    }
+    
+    return true;
+  };
+
+  const getMostSpecificElement = (x, y) => {
+    const elements = document.elementsFromPoint(x, y);
+    const validElements = elements.filter(el =>
+      isValidElement(el) &&
+      !el.classList.contains('webild-hover-overlay') &&
+      !el.classList.contains('webild-element-type-label')
+    );
+
+    if (validElements.length === 0) return null;
+    const scoredElements = validElements.map(element => {
+      let score = 0;
+      const rect = element.getBoundingClientRect();
+      const tagName = element.tagName.toLowerCase();
+      const computedStyle = window.getComputedStyle(element);
+      let depth = 0;
+      let current = element;
+      while (current && current !== document.body) {
+        depth++;
+        current = current.parentElement;
+      }
+      score += depth * 2;
+      const hasDirectText = Array.from(element.childNodes).some(node => 
+        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
+      );
+
+      const hasImages = element.tagName === 'IMG' || element.tagName === 'VIDEO' || computedStyle.backgroundImage !== 'none' || element.querySelector('img') || element.querySelector('video');
+      const isInteractive = ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName);
+      const hasFewChildren = element.children.length <= 3;
+      const area = rect.width * rect.height;
+      const viewportArea = window.innerWidth * window.innerHeight;
+      const isSmallElement = area < viewportArea * 0.1;
+      if (hasDirectText) score += 20;
+      if (hasImages) score += 15;
+      if (isInteractive) score += 25;
+      if (hasFewChildren) score += 10;
+      if (isSmallElement) score += 5;
+      if (area > viewportArea * 0.3) score -= 30;
+      if (element.hasAttribute('data-section')) score -= 15;
+      if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) score += 20;
+      if (['p', 'span', 'label'].includes(tagName)) score += 15;
+      if (tagName === 'div' && !hasDirectText && element.children.length > 2) score -= 10;
+
+      return { element, score };
+    });
+    scoredElements.sort((a, b) => b.score - a.score);
+    return scoredElements[0]?.element || validElements[0];
+  };
+
+  const isTextElement = (element) => {
+    const elementType = getElementType(element);
+    return elementType === 'Text';
+  };
+
+  const isButtonElement = (element) => {
+    const elementType = getElementType(element);
+    return elementType === 'Button';
+  };
+
+  const updateButtonText = (element, newText) => {
+    const textNodes = [];
+    const walker = document.createTreeWalker(
+      element,
+      NodeFilter.SHOW_TEXT,
+      null
+    );
+
+    let node;
+    while (node = walker.nextNode()) {
+      if (node.textContent && node.textContent.trim()) {
+        textNodes.push(node);
+      }
+    }
+
+    if (textNodes.length > 0) {
+      textNodes[0].textContent = newText;
+      for (let i = 1; i < textNodes.length; i++) {
+        textNodes[i].textContent = '';
+      }
+    } else {
+      element.textContent = newText;
+    }
+  };
+
+  const makeEditable = (element, clickEvent) => {
+    if (!isTextElement(element)) return;
+    
+    originalContent = element.textContent;
+    element.contentEditable = 'true';
+    
+    if (!element.dataset.webildOriginalWhiteSpace) {
+      const computedStyle = window.getComputedStyle(element);
+      element.dataset.webildOriginalWhiteSpace = computedStyle.whiteSpace;
+      element.dataset.webildOriginalWordWrap = computedStyle.wordWrap;
+      element.dataset.webildOriginalOverflowWrap = computedStyle.overflowWrap;
+      element.dataset.webildOriginalOverflow = computedStyle.overflow;
+    }
+    
+    element.style.whiteSpace = 'pre-wrap';
+    element.style.wordWrap = 'break-word';
+    element.style.overflowWrap = 'break-word';
+    element.style.overflow = 'visible';
+    
+    element.focus();
+    isEditing = true;
+    
+    window.parent.postMessage({
+      type: 'webild-text-editing-started',
+      data: { selector: getElementInfo(element).selector }
+    }, '*');
+    
+    const handleBeforeInput = (e) => {
+      // Prevent deletion if it would leave the element empty
+      const currentText = element.textContent || '';
+      const inputType = e.inputType;
+      
+      // Check if this is a delete operation that would leave the element empty
+      if ((inputType === 'deleteContentBackward' || inputType === 'deleteContentForward' || inputType === 'deleteByCut') && currentText.length <= 1) {
+        e.preventDefault();
+        element.textContent = ' ';
+        // Move cursor to the beginning
+        const range = document.createRange();
+        const sel = window.getSelection();
+        range.setStart(element.firstChild || element, 0);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+    };
+    
+    const handleInput = () => {
+      const elementInfo = getElementInfo(element);
+      let currentText = element.textContent;
+      
+      // Ensure there's always at least a space to keep the element editable
+      if (currentText === '' || currentText === null || currentText.length === 0) {
+        element.textContent = ' ';
+        currentText = ' ';
+        // Move cursor to the beginning
+        try {
+          const range = document.createRange();
+          const sel = window.getSelection();
+          range.setStart(element.firstChild || element, 0);
+          range.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(range);
+        } catch (e) {
+          // Ignore cursor positioning errors
+        }
+      }
+
+      window.parent.postMessage({
+        type: 'webild-element-changed',
+        data: {
+          type: 'updateText',
+          selector: elementInfo.selector,
+          oldValue: originalContent,
+          newValue: currentText,
+          elementType: elementInfo.elementType,
+          sectionId: elementInfo.sectionId,
+          timestamp: Date.now()
+        }
+      }, '*');
+      
+      if (currentText !== originalContent) {
+        window.parent.postMessage({
+          type: 'webild-text-changed',
+          data: { 
+            selector: elementInfo.selector,
+            hasChanges: true
+          }
+        }, '*');
+      }
+    };
+    
+    element.addEventListener('beforeinput', handleBeforeInput);
+    element.addEventListener('input', handleInput);
+    element.dataset.inputHandler = 'true';
+    element.dataset.beforeInputHandler = 'true';
+    
+    if (clickEvent && element.childNodes.length > 0) {
+      try {
+        let range = null;
+        
+        if (document.caretRangeFromPoint) {
+          range = document.caretRangeFromPoint(clickEvent.clientX, clickEvent.clientY);
+        } else if (document.caretPositionFromPoint) {
+          const position = document.caretPositionFromPoint(clickEvent.clientX, clickEvent.clientY);
+          if (position) {
+            range = document.createRange();
+            range.setStart(position.offsetNode, position.offset);
+            range.collapse(true);
+          }
+        }
+        
+        if (range) {
+          const selection = window.getSelection();
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      } catch (e) {
+        console.warn('[Webild] Could not set caret position:', e);
+      }
+    }
+  };
+  
+  const makeUneditable = (element, save = false) => {
+    if (!element || element.contentEditable !== 'true') return;
+    
+    element.contentEditable = 'false';
+    isEditing = false;
+    
+    if (element.dataset.webildOriginalWhiteSpace) {
+      element.style.whiteSpace = element.dataset.webildOriginalWhiteSpace === 'normal' ? '' : element.dataset.webildOriginalWhiteSpace;
+      delete element.dataset.webildOriginalWhiteSpace;
+    }
+    if (element.dataset.webildOriginalWordWrap) {
+      element.style.wordWrap = element.dataset.webildOriginalWordWrap === 'normal' ? '' : element.dataset.webildOriginalWordWrap;
+      delete element.dataset.webildOriginalWordWrap;
+    }
+    if (element.dataset.webildOriginalOverflowWrap) {
+      element.style.overflowWrap = element.dataset.webildOriginalOverflowWrap === 'normal' ? '' : element.dataset.webildOriginalOverflowWrap;
+      delete element.dataset.webildOriginalOverflowWrap;
+    }
+    if (element.dataset.webildOriginalOverflow) {
+      element.style.overflow = element.dataset.webildOriginalOverflow === 'visible' ? '' : element.dataset.webildOriginalOverflow;
+      delete element.dataset.webildOriginalOverflow;
+    }
+    
+    if (element.dataset.beforeInputHandler === 'true') {
+      element.removeEventListener('beforeinput', () => {});
+      delete element.dataset.beforeInputHandler;
+    }
+    
+    if (element.dataset.inputHandler === 'true') {
+      element.removeEventListener('input', () => {});
+      delete element.dataset.inputHandler;
+    }
+    
+    window.parent.postMessage({
+      type: 'webild-text-editing-ended',
+      data: { selector: getElementInfo(element).selector }
+    }, '*');
+    
+    if (save && originalContent !== element.textContent) {
+      const elementInfo = getElementInfo(element);
+      let finalText = element.textContent;
+      
+      // Trim the final text and convert space-only to empty string for saving
+      if (finalText === ' ' || finalText.trim() === '') {
+        finalText = '';
+        // Update the actual element text to empty for display
+        element.textContent = '';
+      }
+      
+      const change = {
+        type: 'updateText',
+        selector: elementInfo.selector,
+        oldValue: originalContent,
+        newValue: finalText,
+        elementType: elementInfo.elementType,
+        sectionId: elementInfo.sectionId,
+        timestamp: Date.now()
+      };
+
+      saveChangeToStorage(change);
+
+      window.parent.postMessage({
+        type: 'webild-element-changed',
+        data: change
+      }, '*');
+    } else if (!save && originalContent !== null) {
+      element.textContent = originalContent;
+    }
+    
+    originalContent = null;
+  };
+  
+  const createHoverOverlay = (element) => {
+    const rect = element.getBoundingClientRect();
+    const overlay = document.createElement('div');
+    overlay.className = 'webild-hover-overlay';
+    overlay.style.cssText = \`
+      position: fixed !important;
+      top: \${rect.top - 2}px !important;
+      left: \${rect.left - 2}px !important;
+      width: \${rect.width + 4}px !important;
+      height: \${rect.height + 4}px !important;
+      background-color: rgba(90, 113, 230, 0.15) !important;
+      pointer-events: none !important;
+      z-index: 999998 !important;
+      transition: all 0.15s ease !important;
+    \`;
+    document.body.appendChild(overlay);
+    return overlay;
+  };
+  
+  const removeHoverOverlay = () => {
+    if (hoverOverlay) {
+      hoverOverlay.remove();
+      hoverOverlay = null;
+    }
+  };
+  
+  const showElementTypeLabel = (element, elementType) => {
+    if (!elementType) return;
+
+    removeElementTypeLabel();
+
+    const rect = element.getBoundingClientRect();
+    elementTypeLabel = document.createElement('div');
+    elementTypeLabel.className = 'webild-element-type-label';
+    const ariaLabel = element.getAttribute('aria-label');
+    let labelText;
+    
+    if (elementType === 'Div') {
+      labelText = 'Div';
+    } else if (elementType === 'Article') {
+      labelText = 'Article';
+    } else if (elementType === 'Section') {
+      labelText = ariaLabel || 'Section';
+    } else {
+      labelText = elementType;
+    }
+    
+    elementTypeLabel.textContent = labelText;
+    document.body.appendChild(elementTypeLabel);
+    const labelRect = elementTypeLabel.getBoundingClientRect();
+    let labelTop = rect.top - labelRect.height - 2;
+    let labelLeft = rect.left - 3;
+    let isLabelOnTop = true;
+    if (labelTop < 0) {
+      labelTop = rect.bottom + 1;
+      isLabelOnTop = false;
+    }
+    if (labelTop + labelRect.height > window.innerHeight) {
+      labelTop = rect.bottom - labelRect.height;
+      isLabelOnTop = false;
+      if (labelTop < 0) {
+        labelTop = rect.top;
+        isLabelOnTop = true;
+      }
+    }
+    if (labelLeft + labelRect.width > window.innerWidth) {
+      labelLeft = window.innerWidth - labelRect.width;
+    }
+    if (labelLeft < 0) {
+      labelLeft = 0;
+    }
+    if (isLabelOnTop) {
+      elementTypeLabel.classList.add('label-top');
+    } else {
+      elementTypeLabel.classList.add('label-bottom');
+    }
+
+    elementTypeLabel.style.cssText = \`
+      left: \${labelLeft}px !important;
+      top: \${labelTop}px !important;
+      transform: none !important;
+    \`;
+  };
+  
+  const removeElementTypeLabel = () => {
+    if (elementTypeLabel) {
+      elementTypeLabel.remove();
+      elementTypeLabel = null;
+    }
+  };
+  
+  const handleMouseOver = (e) => {
+    if (!isActive) return;
+
+    lastMouseX = e.clientX;
+    lastMouseY = e.clientY;
+
+    const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
+
+    if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
+      return;
+    }
+    
+    if (hoveredElement && hoveredElement !== selectedElement) {
+      hoveredElement.classList.remove(hoverClass);
+      if (hoveredElement.dataset.webildOriginalPosition) {
+        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
+        delete hoveredElement.dataset.webildOriginalPosition;
+      }
+      removeHoverOverlay();
+      removeElementTypeLabel();
+    }
+    
+    hoveredElement = target;
+    
+    const computedStyle = window.getComputedStyle(target);
+    const currentPosition = computedStyle.position;
+    
+    if (currentPosition === 'static' || currentPosition === '') {
+      hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
+      hoveredElement.style.position = 'relative';
+    }
+    
+    hoveredElement.classList.add(hoverClass);
+    
+    if ((!selectedElement || selectedElement !== target) && !isScrolling) {
+      hoverOverlay = createHoverOverlay(target);
+    }
+    
+    const elementType = getElementType(target);
+    showElementTypeLabel(target, elementType);
+    
+    window.parent.postMessage({
+      type: 'webild-element-hover',
+      data: getElementInfo(target, false)
+    }, '*');
+  };
+  
+  const handleMouseOut = (e) => {
+    if (!isActive) return;
+    
+    if (hoveredElement && hoveredElement !== selectedElement) {
+      hoveredElement.classList.remove(hoverClass);
+      
+      if (hoveredElement.dataset.webildOriginalPosition) {
+        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
+        delete hoveredElement.dataset.webildOriginalPosition;
+      }
+      
+      removeHoverOverlay();
+      removeElementTypeLabel();
+      
+      hoveredElement = null;
+      
+      window.parent.postMessage({
+        type: 'webild-element-hover',
+        data: null
+      }, '*');
+    }
+  };
+  
+  const handleClick = (e) => {
+  if (!isActive) return;
+
+  if (isEditing) {
+    e.stopPropagation();
+    return;
+  }
+
+  e.preventDefault();
+  e.stopPropagation();
+
+  const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;  
+  if (!isValidElement(target)) return;
+    
+    if (selectedElement && selectedElement !== target) {
+      makeUneditable(selectedElement, false);
+      selectedElement.classList.remove(selectedClass);
+      selectedElement.classList.remove(hoverClass);
+      
+      if (selectedElement.dataset.webildOriginalPosition) {
+        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
+        delete selectedElement.dataset.webildOriginalPosition;
+      }
+      
+      removeHoverOverlay();
+      removeElementTypeLabel();
+    }
+    
+    if (selectedElement === target) {
+      if (target.dataset.webildOriginalPosition) {
+        target.style.position = target.dataset.webildOriginalPosition === 'none' ? '' : target.dataset.webildOriginalPosition;
+        delete target.dataset.webildOriginalPosition;
+      }
+      
+      removeHoverOverlay();
+      removeElementTypeLabel();
+      
+      selectedElement = null;
+      window.parent.postMessage({
+        type: 'webild-element-selected',
+        data: null
+      }, '*');
+      return;
+    }
+    
+    selectedElement = target;
+    selectedElement.classList.add(selectedClass);
+    
+    removeHoverOverlay();
+    removeElementTypeLabel();
+    
+    if (hoveredElement === target) {
+      hoveredElement.classList.remove(hoverClass);
+      hoveredElement = null;
+    }
+    
+    const elementInfo = getElementInfo(target, true);
+    selectedElement.dataset.webildSelector = elementInfo.selector;
+    showElementTypeLabel(target, elementInfo.elementType);
+    
+    window.parent.postMessage({
+      type: 'webild-element-selected',
+      data: elementInfo
+    }, '*');
+    
+    if (isTextElement(target)) {
+      setTimeout(() => makeEditable(target, e), 50);
+    }
+  };
+  
+  const handleKeyDown = (e) => {
+    if (!isActive) return;
+    if (!isEditing || !selectedElement) return;
+    
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      makeUneditable(selectedElement, true);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      makeUneditable(selectedElement, false);
+    }
+  };
+  
+  const handleBlur = (e) => {
+    if (!isActive) return;
+    if (isEditing && selectedElement && e.target === selectedElement) {
+      makeUneditable(selectedElement, true);
+    }
+  };
+  
+  let lastMouseX = 0;
+  let lastMouseY = 0;
+
+  const handleScroll = () => {
+    if (!isActive) return;
+    
+    if (isEditing) return;
+    
+    if (selectedElement) {
+      makeUneditable(selectedElement, false);
+      selectedElement.classList.remove(selectedClass);
+      if (selectedElement.dataset.webildOriginalPosition) {
+        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
+        delete selectedElement.dataset.webildOriginalPosition;
+      }
+      selectedElement = null;
+
+      window.parent.postMessage({
+        type: 'webild-element-selected',
+        data: null
+      }, '*');
+    }
+
+    if (hoveredElement) {
+      hoveredElement.classList.remove(hoverClass);
+      if (hoveredElement.dataset.webildOriginalPosition) {
+        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
+        delete hoveredElement.dataset.webildOriginalPosition;
+      }
+      hoveredElement = null;
+
+      window.parent.postMessage({
+        type: 'webild-element-hover',
+        data: null
+      }, '*');
+    }
+
+    removeHoverOverlay();
+    removeElementTypeLabel();
+
+    isScrolling = true;
+
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
+
+    scrollTimeout = setTimeout(() => {
+      isScrolling = false;
+
+      if (lastMouseX > 0 && lastMouseY > 0) {
+        const target = getMostSpecificElement(lastMouseX, lastMouseY);
+        if (target && isValidElement(target) && target !== selectedElement) {
+          hoveredElement = target;
+
+          const computedStyle = window.getComputedStyle(target);
+          const currentPosition = computedStyle.position;
+
+          if (currentPosition === 'static' || currentPosition === '') {
+            hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
+            hoveredElement.style.position = 'relative';
+          }
+
+          hoveredElement.classList.add(hoverClass);
+          hoverOverlay = createHoverOverlay(target);
+
+          const elementType = getElementType(target);
+          showElementTypeLabel(target, elementType);
+
+          window.parent.postMessage({
+            type: 'webild-element-hover',
+            data: getElementInfo(target, false)
+          }, '*');
+        }
+      }
+    }, 150);
+
+    window.parent.postMessage({
+      type: 'webild-iframe-scroll'
+    }, '*');
+  };
+  
+  const getStorageKey = () => {
+    const url = new URL(window.location.href);
+    const pathParts = url.pathname.split('/').filter(Boolean);
+    return \`webild-changes-\${pathParts.join('-')}\`;
+  };
+
+  const saveChangeToStorage = (change) => {
+    try {
+      const storageKey = getStorageKey();
+      const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
+
+      const filteredChanges = existingChanges.filter(c => {
+        return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
+      });
+      filteredChanges.push(change);
+
+      localStorage.setItem(storageKey, JSON.stringify(filteredChanges));
+
+      window.parent.postMessage({
+        type: 'webild-change-saved-locally',
+        data: { change, allChanges: filteredChanges }
+      }, '*');
+    } catch (error) {
+      console.error('Failed to save change to localStorage:', error);
+    }
+  };
+
+  const clearLocalChanges = () => {
+    try {
+      const storageKey = getStorageKey();
+      localStorage.removeItem(storageKey);
+      window.parent.postMessage({
+        type: 'webild-local-changes-cleared',
+        data: {}
+      }, '*');
+    } catch (error) {
+      console.error('Failed to clear local changes:', error);
+    }
+  };
+
+  const handleMessage = (e) => {
+    if (!e.data || !e.data.type) return;
+
+    if (e.data.type === 'webild-activate-editor') {
+      if (!isActive) {
+        isActive = true;
+        window.parent.postMessage({ type: 'webild-editor-activated' }, '*');
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-deactivate-editor') {
+      if (isActive) {
+        isActive = false;
+
+        if (selectedElement) {
+          makeUneditable(selectedElement, false);
+          selectedElement.classList.remove(selectedClass);
+          selectedElement = null;
+        }
+        if (hoveredElement) {
+          hoveredElement.classList.remove(hoverClass);
+          hoveredElement = null;
+        }
+
+        removeHoverOverlay();
+        removeElementTypeLabel();
+        window.parent.postMessage({ type: 'webild-editor-deactivated' }, '*');
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-clear-local-changes') {
+      clearLocalChanges();
+      return;
+    }
+
+    if (e.data.type === 'webild-cancel-changes') {
+      try {
+        const storageKey = getStorageKey();
+        const savedChanges = localStorage.getItem(storageKey);
+        if (savedChanges) {
+          const changes = JSON.parse(savedChanges);
+          changes.forEach(change => {
+            try {
+              const element = document.querySelector(change.selector);
+              if (!element) return;
+
+              if (change.type === 'updateText') {
+                if (isTextElement(element)) {
+                  element.textContent = change.oldValue;
+                }
+              } else if (change.type === 'updateButton') {
+                if (isButtonElement(element)) {
+                  updateButtonText(element, change.oldValue);
+                }
+              } else if (change.type === 'replaceImage') {
+                const revertTag = element.tagName.toLowerCase();
+                const isBackground = revertTag !== 'img' && revertTag !== 'video';
+                if (isBackground) {
+                  element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
+                } else {
+                  const oldMediaType = getMediaTypeFromUrl(change.oldValue);
+                  if (revertTag === 'video' && oldMediaType === 'image') {
+                    swapMediaElement(element, 'img', change.oldValue);
+                  } else if (revertTag === 'img' && oldMediaType === 'video') {
+                    swapMediaElement(element, 'video', change.oldValue);
+                  } else if (revertTag === 'video') {
+                    element.src = change.oldValue;
+                    element.load();
+                  } else {
+                    element.src = change.oldValue;
+                  }
+                }
+              }
+            } catch (err) {
+              console.warn('[Webild] Failed to revert change:', err);
+            }
+          });
+        }
+        clearLocalChanges();
+      } catch (error) {
+        console.error('[Webild] Failed to cancel changes:', error);
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-update-text') {
+      const { selector, newValue, oldValue, sectionId } = e.data.data;
+      try {
+        let element = null;
+        
+        if (selectedElement && isTextElement(selectedElement)) {
+          element = selectedElement;
+        }
+        else if (selector) {
+          try {
+            element = document.querySelector(selector);
+          } catch (err) {
+            console.warn('[Webild] Invalid selector:', selector);
+          }
+        }
+        
+        if (!element && sectionId) {
+          const sectionElement = document.querySelector('[data-section="' + sectionId + '"]');
+          if (sectionElement) {
+            const textElements = sectionElement.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, button, div');
+            for (let i = 0; i < textElements.length; i++) {
+              const el = textElements[i];
+              if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
+                element = el;
+                const newSelector = getUniqueSelector(element, true);
+                if (newSelector) {
+                  element.dataset.webildSelector = newSelector;
+                }
+                break;
+              }
+            }
+          }
+        }
+        
+        if (element && isTextElement(element)) {
+          element.textContent = newValue;
+          const finalSelector = element.dataset.webildSelector || getUniqueSelector(element, true);
+          
+          window.parent.postMessage({
+            type: 'webild-text-update-success',
+            data: {
+              selector: finalSelector,
+              newValue: newValue
+            }
+          }, '*');
+        } else {
+          window.parent.postMessage({
+            type: 'webild-text-update-failed',
+            data: { selector, newValue }
+          }, '*');
+        }
+      } catch (error) {
+        window.parent.postMessage({
+          type: 'webild-text-update-failed',
+          data: { selector, newValue, error: error.message }
+        }, '*');
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-update-button') {
+      const { selector, text, href } = e.data.data;
+      try {
+        const element = document.querySelector(selector);
+        if (element && isButtonElement(element)) {
+          if (text !== undefined) {
+            updateButtonText(element, text);
+          }
+          if (href !== undefined) {
+            if (element.tagName.toLowerCase() === 'a') {
+              element.href = href;
+            } else {
+              element.setAttribute('data-href', href);
+            }
+          }
+        }
+      } catch (error) {
+        console.error('[Webild] Invalid selector for button update:', selector, error);
+      }
+      return;
+    }
+
+    if (!isActive) return;
+
+    if (e.data.type === 'webild-replace-image') {
+      const { selector, newSrc, isBackground, allowMediaTypeSwap } = e.data.data;
+      let element = null;
+
+      try {
+        element = document.querySelector(selector);
+      } catch {
+        window.parent.postMessage({
+          type: 'webild-image-replacement-error',
+          data: { selector, message: 'Invalid selector: ' + error.message, success: false }
+        }, '*');
+        return;
+      }
+
+      if (!element) {
+        window.parent.postMessage({
+          type: 'webild-image-replacement-error',
+          data: { selector, message: 'Element not found', success: false }
+        }, '*');
+        return;
+      }
+
+      try {
+        let replaced = false;
+        let oldValue = '';
+
+        if (isBackground) {
+          oldValue = window.getComputedStyle(element).backgroundImage;
+          element.style.backgroundImage = \`url('\${newSrc}')\`;
+          replaced = true;
+        } else if (element.tagName.toLowerCase() === 'img') {
+          oldValue = element.src;
+          const newMediaType = getMediaTypeFromUrl(newSrc);
+          if (newMediaType === 'video' && allowMediaTypeSwap) {
+            const swapped = swapMediaElement(element, 'video', newSrc);
+            if (selectedElement === element) selectedElement = swapped;
+            element = swapped;
+          } else {
+            element.src = newSrc;
+          }
+          replaced = true;
+        } else if (element.tagName.toLowerCase() === 'video') {
+          oldValue = element.src || element.currentSrc || '';
+          const newMediaType = getMediaTypeFromUrl(newSrc);
+          const sources = element.querySelectorAll('source');
+          if (newMediaType === 'image' && allowMediaTypeSwap) {
+            const swapped = swapMediaElement(element, 'img', newSrc);
+            if (selectedElement === element) selectedElement = swapped;
+            element = swapped;
+          } else {
+            if (sources.length > 0) {
+              sources.forEach(function(source) { source.src = newSrc; });
+              element.load();
+            } else {
+              element.src = newSrc;
+              element.load();
+            }
+          }
+          replaced = true;
+        } else {
+          const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
+          if (hasBackgroundImage) {
+            oldValue = window.getComputedStyle(element).backgroundImage;
+            element.style.backgroundImage = \`url('\${newSrc}')\`;
+            replaced = true;
+          }
+        }
+
+        if (replaced) {
+          const elementInfo = getElementInfo(element);
+
+          let cleanOldValue = oldValue;
+          if (oldValue.includes('url(')) {
+            const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
+            if (urlMatch) {
+              cleanOldValue = urlMatch[1];
+            }
+          }
+
+          cleanOldValue = extractOriginalUrl(cleanOldValue);
+
+          const change = {
+            type: 'replaceImage',
+            selector: selector,
+            oldValue: cleanOldValue,
+            newValue: newSrc,
+            elementType: elementInfo.elementType,
+            sectionId: elementInfo.sectionId,
+            timestamp: Date.now()
+          };
+
+          saveChangeToStorage(change);
+
+          window.parent.postMessage({
+            type: 'webild-element-changed',
+            data: change
+          }, '*');
+
+          window.parent.postMessage({
+            type: 'webild-image-replaced',
+            data: { selector, newSrc, success: true }
+          }, '*');
+        } else {
+          window.parent.postMessage({
+            type: 'webild-image-replacement-error',
+            data: { selector, message: 'Could not determine how to replace image', success: false }
+          }, '*');
+        }
+      } catch (error) {
+        window.parent.postMessage({
+          type: 'webild-image-replacement-error',
+          data: { selector, message: error.message || 'Failed to replace image', success: false }
+        }, '*');
+      }
+    }
+  };
+  
+  document.addEventListener('mouseover', handleMouseOver, true);
+  document.addEventListener('mouseout', handleMouseOut, true);
+  document.addEventListener('click', handleClick, true);
+  document.addEventListener('keydown', handleKeyDown, true);
+  document.addEventListener('blur', handleBlur, true);
+  window.addEventListener('scroll', handleScroll, true);
+  window.addEventListener('message', handleMessage, true);
+  
+  let lastPathname = window.location.pathname;
+  
+  const notifyPageChange = () => {
+    window.parent.postMessage({
+      type: 'webild-page-changed',
+      data: { pathname: window.location.pathname }
+    }, '*');
+  };
+  
+  window.addEventListener('popstate', () => {
+    if (lastPathname !== window.location.pathname) {
+      lastPathname = window.location.pathname;
+      notifyPageChange();
+    }
+  }, true);
+  
+  const urlCheckInterval = setInterval(() => {
+    if (lastPathname !== window.location.pathname) {
+      lastPathname = window.location.pathname;
+      notifyPageChange();
+    }
+  }, 500);
+  
+  notifyPageChange();
+  
+  window.webildCleanup = () => {
+    isActive = false;
+    
+    if (selectedElement) {
+      makeUneditable(selectedElement, false);
+    }
+    
+    removeHoverOverlay();
+    removeElementTypeLabel();
+    
+    if (urlCheckInterval) {
+      clearInterval(urlCheckInterval);
+    }
+    
+    document.removeEventListener('mouseover', handleMouseOver, true);
+    document.removeEventListener('mouseout', handleMouseOut, true);
+    document.removeEventListener('click', handleClick, true);
+    document.removeEventListener('keydown', handleKeyDown, true);
+    document.removeEventListener('blur', handleBlur, true);
+    window.removeEventListener('scroll', handleScroll, true);
+    window.removeEventListener('message', handleMessage, true);
+    
+    document.querySelectorAll('.' + hoverClass).forEach(el => {
+      el.classList.remove(hoverClass);
+    });
+    document.querySelectorAll('.' + selectedClass).forEach(el => {
+      el.classList.remove(selectedClass);
+    });
+    
+    const styleEl = document.getElementById('webild-inspector-styles');
+    if (styleEl) styleEl.remove();
+    
+    hoveredElement = null;
+    selectedElement = null;
+  };
+  
+  window.parent.postMessage({ type: 'webild-editor-ready' }, '*');
+})();
 `
           }}
         />
-- 
2.49.1


From cf3ee0ccfd24caee629dd3903d34596e6891b1f3 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 11:28:48 +0000
Subject: [PATCH 4/5] Update src/app/page.tsx

---
 src/app/page.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ef75042..d6b17af 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -90,15 +90,15 @@ export default function HomePage() {
           ]}
           slides={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/adjustment-young-adult-man-protective-helmet-gloves-bright-vest-crouching-looking-tool-sideways-camera-construction-site_259150-57664.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/adjustment-young-adult-man-protective-helmet-gloves-bright-vest-crouching-looking-tool-sideways-camera-construction-site_259150-57664.jpg?_wi=1",
               imageAlt: "Professional plumber at work",
             },
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/delivery-man-employee-red-cap-blank-tshirt-uniform-looking-camera-amazed-surprised-presenting-with-arms-his-hands-something-standing-blue-background_141793-134103.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/delivery-man-employee-red-cap-blank-tshirt-uniform-looking-camera-amazed-surprised-presenting-with-arms-his-hands-something-standing-blue-background_141793-134103.jpg?_wi=1",
               imageAlt: "Emergency plumbing response",
             },
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721566.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721566.jpg?_wi=1",
               imageAlt: "Leak repair service",
             },
           ]}
@@ -112,7 +112,7 @@ export default function HomePage() {
           title="Why Choose Tooting Emergency & General Plumbing Services"
           description="With 4.9 stars from 68+ reviews, Abdul delivers trusted local plumbing expertise you can rely on. Fast response times, fair pricing, and friendly service for all your plumbing needs."
           tag="About Us"
-          imageSrc="http://img.b2bpic.net/free-photo/portrait-engineers-work-hours-job-site_23-2151589547.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/portrait-engineers-work-hours-job-site_23-2151589547.jpg?_wi=1"
           imageAlt="Professional plumber at work"
           buttons={[
             {
@@ -235,7 +235,7 @@ export default function HomePage() {
               handle: "@Sarah",
               testimonial: "Arrived within 20 mins of a call and sorted the leak within the hour. Professional and fair priced. Highly recommend!",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg?_wi=1",
               imageAlt: "Sarah Johnson",
             },
             {
@@ -244,7 +244,7 @@ export default function HomePage() {
               handle: "@Michael",
               testimonial: "Quick response and the burst radiator was effectively fixed at a fair price. Great service from a local plumber who cares.",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg?_wi=1",
               imageAlt: "Michael Chen",
             },
             {
@@ -253,7 +253,7 @@ export default function HomePage() {
               handle: "@Emma",
               testimonial: "Needed an emergency plumber on a Sunday and they were great. Fast, friendly, and professional. Best decision to call.",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/shot-beautiful-young-businesswoman-wearing-blue-chiffon-shirt-while-standing-with-folded-arms-black-wall_158595-6868.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/shot-beautiful-young-businesswoman-wearing-blue-chiffon-shirt-while-standing-with-folded-arms-black-wall_158595-6868.jpg?_wi=1",
               imageAlt: "Emma Rodriguez",
             },
             {
@@ -262,7 +262,7 @@ export default function HomePage() {
               handle: "@David",
               testimonial: "Fantastic plumber! Fixed our boiler issue same day with transparent pricing and no hidden charges. Will use again.",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-making-ok-sign_1368-6336.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-making-ok-sign_1368-6336.jpg?_wi=1",
               imageAlt: "David Kim",
             },
             {
@@ -271,7 +271,7 @@ export default function HomePage() {
               handle: "@Jessica",
               testimonial: "As a landlord managing multiple properties, Abdul is my go-to plumber. Reliable, professional, and always available.",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-showing-thumb-up_1187-5092.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-showing-thumb-up_1187-5092.jpg?_wi=1",
               imageAlt: "Jessica Watson",
             },
             {
@@ -280,7 +280,7 @@ export default function HomePage() {
               handle: "@Robert",
               testimonial: "Emergency leak at 11pm on a weeknight. Called Abdul, he arrived quickly and fixed it. Saved my home from major damage!",
               rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-caucasian-man_641386-12.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-caucasian-man_641386-12.jpg?_wi=1",
               imageAlt: "Robert Thompson",
             },
           ]}
@@ -320,7 +320,7 @@ export default function HomePage() {
               content: "Yes! We're open daily and handle emergency calls on weekends and bank holidays. Call 07471 126604 anytime you need urgent plumbing help.",
             },
           ]}
-          imageSrc="http://img.b2bpic.net/free-photo/portrait-engineers-work-hours-job-site_23-2151589547.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/portrait-engineers-work-hours-job-site_23-2151589547.jpg?_wi=2"
           imageAlt="Professional plumber answering questions"
           mediaPosition="left"
           mediaAnimation="slide-up"
-- 
2.49.1


From 0b633c0b90eba89bb1a1bd77af506c031efd4fa4 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 11:28:49 +0000
Subject: [PATCH 5/5] Update src/app/services/page.tsx

---
 src/app/services/page.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 67bbdf9..9493fa0 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -88,15 +88,15 @@ export default function ServicesPage() {
           ]}
           slides={[
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/adjustment-young-adult-man-protective-helmet-gloves-bright-vest-crouching-looking-tool-sideways-camera-construction-site_259150-57664.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/adjustment-young-adult-man-protective-helmet-gloves-bright-vest-crouching-looking-tool-sideways-camera-construction-site_259150-57664.jpg?_wi=2",
               imageAlt: "Professional plumber at work",
             },
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/delivery-man-employee-red-cap-blank-tshirt-uniform-looking-camera-amazed-surprised-presenting-with-arms-his-hands-something-standing-blue-background_141793-134103.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/delivery-man-employee-red-cap-blank-tshirt-uniform-looking-camera-amazed-surprised-presenting-with-arms-his-hands-something-standing-blue-background_141793-134103.jpg?_wi=2",
               imageAlt: "Emergency plumbing response",
             },
             {
-              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721566.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721566.jpg?_wi=2",
               imageAlt: "Leak repair service",
             },
           ]}
@@ -217,7 +217,7 @@ export default function ServicesPage() {
               price: "Urgent Response",
               rating: 5,
               reviewCount: "68+",
-              imageSrc: "http://img.b2bpic.net/free-photo/delivery-man-employee-red-cap-blank-tshirt-uniform-looking-camera-amazed-surprised-presenting-with-arms-his-hands-something-standing-blue-background_141793-134103.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/delivery-man-employee-red-cap-blank-tshirt-uniform-looking-camera-amazed-surprised-presenting-with-arms-his-hands-something-standing-blue-background_141793-134103.jpg?_wi=3",
               imageAlt: "Emergency plumbing response service",
             },
             {
@@ -227,7 +227,7 @@ export default function ServicesPage() {
               price: "Quick Fix",
               rating: 5,
               reviewCount: "68+",
-              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721566.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721566.jpg?_wi=3",
               imageAlt: "Professional leak repair service",
             },
             {
@@ -237,7 +237,7 @@ export default function ServicesPage() {
               price: "Heating Solutions",
               rating: 5,
               reviewCount: "68+",
-              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721547.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721547.jpg?_wi=1",
               imageAlt: "Radiator repair and installation",
             },
             {
@@ -247,7 +247,7 @@ export default function ServicesPage() {
               price: "Expert Diagnosis",
               rating: 5,
               reviewCount: "68+",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-engineers-work-hours-job-site_23-2151589547.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/portrait-engineers-work-hours-job-site_23-2151589547.jpg?_wi=4",
               imageAlt: "Boiler repair and maintenance",
             },
             {
@@ -257,7 +257,7 @@ export default function ServicesPage() {
               price: "Regular Care",
               rating: 5,
               reviewCount: "68+",
-              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721566.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721566.jpg?_wi=4",
               imageAlt: "General plumbing maintenance",
             },
             {
@@ -267,7 +267,7 @@ export default function ServicesPage() {
               price: "Full Service",
               rating: 5,
               reviewCount: "68+",
-              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721547.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721547.jpg?_wi=2",
               imageAlt: "Bathroom plumbing installation",
             },
           ]}
@@ -289,7 +289,7 @@ export default function ServicesPage() {
               value: "7",
               title: "Area Coverage",
               description: "Tooting, Balham, Colliers Wood, Streatham, Wimbledon, Mitcham, Wandsworth",
-              imageSrc: "http://img.b2bpic.net/free-photo/delivery-man-employee-red-cap-blank-tshirt-uniform-looking-camera-amazed-surprised-presenting-with-arms-his-hands-something-standing-blue-background_141793-134103.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/delivery-man-employee-red-cap-blank-tshirt-uniform-looking-camera-amazed-surprised-presenting-with-arms-his-hands-something-standing-blue-background_141793-134103.jpg?_wi=4",
               imageAlt: "Local area coverage map",
             },
             {
@@ -297,7 +297,7 @@ export default function ServicesPage() {
               value: "20-30",
               title: "Minutes Response",
               description: "Fast emergency response time guaranteed across our service area",
-              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721566.jpg",
+              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721566.jpg?_wi=5",
               imageAlt: "Fast response time guarantee",
             },
           ]}
-- 
2.49.1