Embed

<div id="quote-container" style="font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px;">
  <h1 style="color:#4169E1; text-align:center; margin-bottom: 10px;">Your Instant Roof Quote</h1>
  <p id="loading" style="text-align:center; font-size:18px;">Loading your quote...</p>

  <div id="quote-content" style="display:none;">
    <h2 id="address" style="text-align:center; margin-bottom: 20px;"></h2>

    <div style="display:flex; justify-content:center; gap:20px; flex-wrap:wrap;">
      <div style="border:1px solid #ddd; padding:20px; width:250px; border-radius:8px;">
        <h3 style="color:#4169E1; text-align:center;">Good</h3>
        <p id="good-price" style="font-size:24px; font-weight:bold; text-align:center;"></p>
      </div>

      <div style="border:1px solid #ddd; padding:20px; width:250px; border-radius:8px;">
        <h3 style="color:#4169E1; text-align:center;">Better</h3>
        <p id="better-price" style="font-size:24px; font-weight:bold; text-align:center;"></p>
      </div>

      <div style="border:1px solid #ddd; padding:20px; width:250px; border-radius:8px;">
        <h3 style="color:#4169E1; text-align:center;">Best</h3>
        <p id="best-price" style="font-size:24px; font-weight:bold; text-align:center;"></p>
      </div>
    </div>

    <p id="sqft" style="text-align:center; margin-top:20px;"></p>
    <p id="source" style="text-align:center; font-style:italic;"></p>

    <div id="map" style="margin-top:30px; text-align:center;"></div>

    <div style="text-align:center; margin-top:30px;">
      <a href="tel:832-427-0970" style="background:#CE2029; color:white; padding:14px 28px; text-decoration:none; border-radius:6px; font-size:18px; font-weight:bold;">
        Call Knight Roofing
      </a>
    </div>
  </div>
</div>

<script>
  async function loadQuote() {
    const params = new URLSearchParams(window.location.search);
    const id = params.get("id");

    if (!id) {
      document.getElementById("loading").innerText = "Invalid quote link.";
      return;
    }

    try {
      const res = await fetch(`https://knightroofing-backend.vercel.app/api/quote-data?id=${id}`);
      const data = await res.json();

      if (!data.success) {
        document.getElementById("loading").innerText = "Quote not found.";
        return;
      }

      document.getElementById("loading").style.display = "none";
      document.getElementById("quote-content").style.display = "block";

      document.getElementById("address").innerText = data.address;
      document.getElementById("good-price").innerText = "$" + data.good.toLocaleString();
      document.getElementById("better-price").innerText = "$" + data.better.toLocaleString();
      document.getElementById("best-price").innerText = "$" + data.best.toLocaleString();
      document.getElementById("sqft").innerText = `Estimated Roof Size: ${data.sqft} sq ft`;

      document.getElementById("source").innerText = data.usedGoogle
        ? "Measurements powered by Google Solar API"
        : "Measurements estimated using fallback system";

      if (data.lat && data.lng) {
        document.getElementById("map").innerHTML = `
          <img src="https://maps.googleapis.com/maps/api/staticmap?center=${data.lat},${data.lng}&zoom=20&size=600x400&maptype=satellite&key=YOUR_GOOGLE_API_KEY"
               style="width:100%; border-radius:8px;" />
        `;
      }

    } catch (err) {
      document.getElementById("loading").innerText = "Error loading quote.";
    }
  }

  loadQuote();
</script>


Knight Roofing General Contractors, LLC

Knight Roofing General Contractors is a trusted residential roofing company based in Pearland and proudly serving Houston and the surrounding communities. We specialize in roof repairs, full replacements, storm‑damage inspections, and insurance‑claim guidance. Our team is committed to honest communication, quality workmanship, and helping homeowners protect their biggest investment. Whether you need a quick repair or a full roof upgrade, we deliver reliable service with professionalism and integrity.