<!-- Google Analytics 4 Event Tracking for ROI Calculator -->
<!-- Add this to your homepage, after the GA4 base tag -->

<script>
// Wait for DOM to load
document.addEventListener('DOMContentLoaded', function() {
  
  // Track calculator modal opens
  const calcOpenBtn = document.querySelector('[data-calc-open], .calc-trigger, button[id*="calc"]');
  if (calcOpenBtn) {
    calcOpenBtn.addEventListener('click', function() {
      gtag('event', 'calculator_open', {
        'event_category': 'engagement',
        'event_label': 'ROI Calculator Modal Opened'
      });
      console.log('GA4: calculator_open event sent');
    });
  }
  
  // Track form submissions
  const calcForm = document.querySelector('form[id*="calc"], form[class*="calc"]');
  if (calcForm) {
    calcForm.addEventListener('submit', function(e) {
      // Get form values (anonymized)
      const homesites = this.querySelector('input[name*="home"]')?.value || 'unknown';
      const propertyType = this.querySelector('select[name*="type"]')?.value || 'unknown';
      
      gtag('event', 'calculator_submit', {
        'event_category': 'conversion',
        'event_label': 'ROI Calculator Submitted',
        'value': 1,
        'homesites': homesites,
        'property_type': propertyType
      });
      
      console.log('GA4: calculator_submit event sent');
    });
  }
  
  // Track API response (success/failure)
  // You'll need to hook this into your existing submit handler
  window.trackCalculatorSuccess = function(data) {
    gtag('event', 'calculator_success', {
      'event_category': 'conversion',
      'event_label': 'ROI Calculator Results Shown',
      'value': 1,
      'annual_income': data.annual_income || 'unknown',
      'reserve_funds': data.reserve_funds || 'unknown'
    });
    console.log('GA4: calculator_success event sent');
  };
  
  window.trackCalculatorError = function(error) {
    gtag('event', 'calculator_error', {
      'event_category': 'error',
      'event_label': 'ROI Calculator Error',
      'error_message': error?.message || 'unknown'
    });
    console.log('GA4: calculator_error event sent');
  };
  
});
</script>

<!-- 
INSTALLATION INSTRUCTIONS:
1. Add this script AFTER your GA4 base tag (gtag.js)
2. Make sure gtag is initialized (your site already has this)
3. Test in browser console - you should see "GA4: calculator_open event sent" when clicking calculator
4. Check GA4 Realtime report to verify events are coming through

TRACKED EVENTS:
- calculator_open: User opens the calculator modal
- calculator_submit: User submits the form
- calculator_success: API returns results successfully
- calculator_error: API call fails

These will appear in GA4 under:
- Reports → Engagement → Events
- Realtime → Event count (for testing)
-->
