<div id="autonomiss-audit" style="max-width:650px;margin:auto;font-family:Inter, sans-serif;padding:20px;border:2px solid #f7c1df;border-radius:12px;background:#fff7fc;">
 <h2 style="color:#d63384;text-align:center;margin-bottom:10px;font-size:28px;font-weight:700;">
   Autonomiss Accessibility Audit
 </h2>

 <p style="text-align:center;color:#555;margin-top:0;margin-bottom:20px;">
   Enter a website URL and get an instant accessibility snapshot.
 </p>

 <label for="website-url" style="font-weight:600;color:#d63384;">Website URL</label>
 <input id="website-url" type="text" placeholder="https://example.com"
   style="width:100%;padding:12px;border:2px solid #d63384;border-radius:8px;margin-top:6px;font-size:16px;">

 <button id="run-audit"
   style="margin-top:16px;width:100%;padding:14px;background:#d63384;color:white;border:none;border-radius:8px;font-size:18px;font-weight:600;cursor:pointer;transition:0.2s;">
   Run Audit
 </button>

 <div id="audit-status" style="margin-top:18px;color:#555;font-style:italic;text-align:center;"></div>

 <div id="audit-results" style="margin-top:25px;padding:20px;border-radius:10px;background:#ffe6f3;display:none;">
 </div>
</div>

<script>
document.getElementById("run-audit").addEventListener("click", async () => {
 const websiteUrl = document.getElementById("website-url").value.trim();
 const status = document.getElementById("audit-status");
 const results = document.getElementById("audit-results");

 results.style.display = "none";
 results.innerHTML = "";
 status.textContent = "";

 // ⭐ FIX: Ensure URL starts with http/https
 let finalUrl = websiteUrl;
 if (finalUrl && !finalUrl.startsWith("http://") && !finalUrl.startsWith("https://")) {
   finalUrl = "https://" + finalUrl;
 }

 if (!finalUrl) {
   status.textContent = "Please enter a website URL.";
   return;
 }

 status.textContent = "Running audit…";

 try {
   const response = await fetch(
     "https://autonomiss-accessibility.app.n8n.cloud/webhook/ea2ba9bd-db23-4a54-ac63-7b8efca36c71",
     {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ url: finalUrl })
     }
   );

   const data = await response.json();
   status.textContent = "";

   results.style.display = "block";
   results.innerHTML = `
     <h3 style="color:#d63384;margin-top:0;">Audit Results</h3>

     <p><strong>Score:</strong> ${data.score ?? "N/A"}</p>
     <p><strong>Risk Level:</strong> ${data.risk ?? "N/A"}</p>
     <p><strong>Summary:</strong> ${data.summary ?? "No summary provided."}</p>

     <p><strong>Issues:</strong></p>
     <ul style="padding-left:20px;">
       ${(data.issues || []).map(issue => `<li>${issue}</li>`).join("")}
     </ul>
   `;
 } catch (err) {
   status.textContent = "Something went wrong. Please try again.";
   console.error(err);
 }
});
</script>