# CMS Roofing — Landing Page (Finalized)

**Brand Colors:** Red / Gray / Black (pulled from CMSRoofing.com)  
**Logo Path:** `/assets/cms-logo.png` (self-hosted)  
**GA4 Measurement ID:** `G-twgg9t71y9`  
**Apps Script Endpoint:** `https://script.google.com/macros/s/AKfycbx1qzatbTUO2v4eUXT3SmBBPpeQ6RfRvxearX1P30SgG68Ws9-u3d56F9M6hBNGvhHi0A/exec`

---
## Google Sheets + Email Integration
Form submission handler:
```html
<script>
  const APPS_SCRIPT_ENDPOINT = 'https://script.google.com/macros/s/AKfycbx1qzatbTUO2v4eUXT3SmBBPpeQ6RfRvxearX1P30SgG68Ws9-u3d56F9M6hBNGvhHi0A/exec';

  async function submitLead(e){
    e.preventDefault();
    const form = e.target;
    const data = Object.fromEntries(new FormData(form).entries());

    try { gtag('event','generate_lead',{event_category:'Lead',event_label:'Commercial Landing',value:1}); } catch(_){ }

    try {
      await fetch(APPS_SCRIPT_ENDPOINT, {
        method: 'POST',
        mode: 'no-cors',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
      alert('Thanks! We received your request and will contact you shortly.');
      form.reset();
    } catch (err) {
      alert('Submission failed. Please call 270-843-5405 or email office@cmsroofing.com.');
    }
    return false;
  }
</script>
```

---
## Schedule Now Popup
Button:
```html
<button onclick="openScheduler()" class="schedule-btn">Schedule Now</button>
```
Popup HTML:
```html
<div id="schedulerModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:9999;">
  <div style="position:relative; margin:5% auto; background:#fff; padding:20px; width:90%; max-width:800px;">
    <span onclick="closeScheduler()" style="position:absolute; top:10px; right:20px; font-size:24px; cursor:pointer;">&times;</span>
    <iframe src="https://go.thryv.com/site/cmsroofing/online-scheduling" width="100%" height="600px" style="border:none;"></iframe>
  </div>
</div>
```
Popup JS:
```html
<script>
  function openScheduler(){
    document.getElementById('schedulerModal').style.display = 'block';
    try { gtag('event','open_scheduler',{event_category:'Engagement',event_label:'Thryv Popup'}); } catch(_){ }
  }
  function closeScheduler(){
    document.getElementById('schedulerModal').style.display = 'none';
  }
</script>
```

---
## GA4 Snippet
```html
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-twgg9t71y9"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config','G-twgg9t71y9',{debug_mode:true});
</script>
```

---
## Branding
- Logo: `<img src="/assets/cms-logo.png" alt="CMS Roofing" height="60">`
- Colors: buttons and highlights use CMS red (#c8102e), gray (#6d6e71), black (#000000).
- Schema markup for LocalBusiness + FAQ included.

---
This version is **upload‑ready** for Bluehost. Just place it in `/public_html/` and ensure your `/assets/cms-logo.png` is uploaded.