<!-- 🌟 Embed Code Box for Users -->
<div style="max-width: 600px; margin: 40px auto; padding: 20px; background: #f9fafb; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); font-family: 'Segoe UI', sans-serif;">
  <h2 style="margin-bottom: 12px; color: #111827;">Embed Your Chatbot</h2>
  <p style="margin-bottom: 16px; color: #4b5563; font-size: 14px;">
    Paste the following script <strong>before the <code>&lt;/body&gt;</code> tag</strong> of your website.
  </p>

  <div style="position: relative;">
    <textarea id="embedCode" readonly style="width: 100%; padding: 12px; font-size: 13px; border-radius: 8px; border: 1px solid #d1d5db; background: #ffffff; color: #1f2937; font-family: monospace; resize: none;" rows="26">
<!-- 🌟 Voiceflow Webchat Container -->
<div id="vf-chat" style="position: fixed; bottom: 24px; right: 24px; z-index: 9999;"></div>

<!-- 🌟 Voiceflow Dynamic Chatbot -->
<script type="module" src="https://cdn.voiceflow.com/widget-next/bundle.mjs"></script>

<script type="module">
const businessID = localStorage.getItem('businessID')?.trim();
const businessName = localStorage.getItem('businessName')?.trim() || 'Our Store';
const specialty = localStorage.getItem('specialty')?.trim() || 'Our Specialty';
const websiteURL = localStorage.getItem('websiteURL') || 'Our website';

if (!businessID) {
  console.error('❌ No businessID found in localStorage. Cannot load chatbot.');
} else {
  console.log('✅ Using businessID:', businessID);

  window.voiceflow.chat.load({
    verify: { projectID: '680e1f986074d454a37ba5ec' },
    url: 'https://general-runtime.voiceflow.com',
    versionID: 'production',
    userID: businessID,
    assistant: { persistence: 'localStorage' },
    render: { container: '#vf-chat' },
    launch: {
      event: {
        type: 'launch',
        payload: {
          businessID: businessID,
          businessName: businessName,
          specialty: specialty,
          websiteURL: websiteURL
        }
      }
    }
  });
}
</script>
    </textarea>

    <button onclick="copyEmbedCode()" title="Copy to clipboard"
      style="position: absolute; top: 8px; right: 8px; padding: 6px 10px; background: #3b82f6; color: #fff; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;">
      📝 Copy
    </button>
  </div>

  <p id="copySuccess" style="color: #16a34a; margin-top: 10px; font-size: 13px; display: none;">✅ Script copied to clipboard!</p>
</div>

<!-- 📋 Script to copy embed code -->
<script>
function copyEmbedCode() {
  const textarea = document.getElementById("embedCode");
  navigator.clipboard.writeText(textarea.value).then(() => {
    const successMsg = document.getElementById("copySuccess");
    successMsg.style.display = "block";
    setTimeout(() => {
      successMsg.style.display = "none";
    }, 2500);
  }).catch((err) => {
    console.error('❌ Failed to copy:', err);
  });
}
</script>