  </div>
  <div class="smurf-divider"></div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
(function(){
  const snippetsEl = document.getElementById('pageSnippetsJson');
  const contentBox = document.querySelector('textarea[name="content"]');
  if (snippetsEl && contentBox) {
    let snippets = {};
    try { snippets = JSON.parse(snippetsEl.textContent || '{}'); } catch (e) {}
    document.querySelectorAll('.page-snippet-btn').forEach(btn => {
      btn.addEventListener('click', function(){
        const key = this.dataset.snippet;
        if (!snippets[key]) return;
        const cur = contentBox.value;
        contentBox.value = (cur ? cur + "\n\n" : "") + snippets[key];
        contentBox.dispatchEvent(new Event('input'));
      });
    });
  }

  const title = document.querySelector('input[name="title"]');
  const summary = document.querySelector('textarea[name="summary"]');
  const image = document.querySelector('input[name="image"]');
  const buttonText = document.querySelector('input[name="button_text"]');
  const layout = document.querySelector('select[name="layout_style"]');
  const content = document.querySelector('textarea[name="content"]');
  const previewTitle = document.getElementById('previewTitle');
  const previewSummary = document.getElementById('previewSummary');
  const previewLayout = document.getElementById('previewLayout');
  const previewContent = document.getElementById('previewContent');
  const previewHero = document.getElementById('previewHero');
  const previewButton = document.getElementById('previewButton');
  const previewButtonWrap = document.getElementById('previewButtonWrap');
  function updatePreview(){
    if (previewTitle && title) previewTitle.textContent = title.value || 'Your Page Title';
    if (previewSummary && summary) previewSummary.textContent = summary.value || 'Your intro text will appear here.';
    if (previewLayout && layout) previewLayout.textContent = layout.options[layout.selectedIndex]?.text || 'Standard page';
    if (previewContent && content) previewContent.textContent = (content.value || 'Content blocks preview here').replace(/<[^>]+>/g, ' ').slice(0, 320);
    if (previewButton && previewButtonWrap && buttonText) {
      const txt = buttonText.value.trim();
      previewButton.textContent = txt || 'Call to Action';
      previewButtonWrap.style.display = txt ? '' : 'none';
    }
    if (previewHero && image) {
      const src = image.value.trim();
      if (src) {
        previewHero.innerHTML = '<img src="'+src.replace(/"/g,'&quot;')+'" alt="" style="width:100%;height:100%;max-height:220px;object-fit:cover;display:block;">';
      } else {
        previewHero.innerHTML = '<div class="page-wireframe-empty">No hero image selected yet.</div>';
      }
    }
  }
  [title,summary,image,buttonText,layout,content].forEach(el => el && el.addEventListener('input', updatePreview));
  updatePreview();
})();
</script>
<?php include __DIR__ . '/../../includes/footer.php'; ?>
