🏡 3D Project Visualizer Widget

// 3D Visualizer Widget Configuration
const visualizerConfig = {
  type: 'visualizer',
  name: 'Property Visualizer',
  description: 'Design your dream space in 3D',
  
  // Branding
  branding: {
    primaryColor: '#52c41a',
    secondaryColor: '#1890ff',
    fontFamily: 'Inter, sans-serif',
    logo: 'https://yoursite.com/logo.png'
  },
  
  // Visualizer Features
  visualizerSettings: {
    // Which project types to enable
    mode: '3d',  // '3d' or 'garage-door' mode
    
    enabledFeatures: {
      aduDesigner: true,       // ADU/studio designs
      poolDesigner: true,      // Pool & spa designs
      garageDesigner: false,   // Garage door visualizer
      landscaping: false       // Coming soon
    },
    
    // Design Library
    designLibrary: {
      // ADU Styles to show
      aduStyles: [
        'Modern Studio',
        'Traditional Cottage',
        'Contemporary Flat Roof',
        'Craftsman Style',
        'Tiny Home',
        'Detached Office'
      ],
      
      // Pool Styles
      poolStyles: [
        'Modern Rectangle',
        'Classic Kidney',
        'Freeform Natural',
        'Lap Pool',
        'Infinity Edge',
        'Plunge Pool'
      ]
    },
    
    // Customization Options Customers Can Change
    customizationOptions: {
      colors: true,           // Change exterior colors
      materials: true,        // Change materials (wood, stucco, etc.)
      sizes: true,            // Adjust dimensions
      features: true,         // Add features (deck, patio, etc.)
      positioning: true,      // Move around on property
      lighting: true          // Time of day / lighting
    },
    
    // Pricing Calculator
    pricingCalculator: {
      enabled: true,          // Show real-time pricing
      showBreakdown: true,    // Show cost breakdown
      
      // Base prices per project type
      basePrices: {
        aduStudio: {
          base: 125000,       // Starting price
          perSqFt: 250,       // Cost per sq ft
          features: {
            fullKitchen: 15000,
            fullBathroom: 8000,
            hvac: 5000,
            electricalUpgrade: 3000
          }
        },
        pool: {
          base: 45000,
          perSqFt: 75,
          features: {
            heater: 5000,
            saltSystem: 2500,
            automation: 3500,
            lighting: 2000,
            waterfall: 8000
          }
        }
      }
    },
    
    // Lead Capture After Design
    leadCapture: {
      enabled: true,
      
      // When to show lead form
      trigger: 'after_design',  // 'after_design', 'on_save', 'on_quote'
      
      // Required fields
      requiredFields: ['name', 'email', 'phone', 'address'],
      
      // Custom questions
      questions: [
        {
          id: 'timeline',
          question: 'When would you like to start?',
          type: 'select',
          options: [
            'Within 3 months',
            'Within 6 months',
            'Within a year',
            'Just exploring'
          ]
        }
      ]
    }
  },
  
  // Integration
  integration: {
    domain: 'https://yourwebsite.com',
    allowedOrigins: ['https://yourwebsite.com'],
    
    // Webhook for design submissions
    webhookUrl: 'https://yourapi.com/webhooks/designs',
    
    // Where customers land after submitting
    redirectUrl: 'https://yoursite.com/thank-you'
  },
  
  // Analytics
  analytics: {
    enabled: true,
    trackingId: 'GA-XXXXXXXXX',
    customEvents: [
      'design_started',
      'design_completed',
      'design_saved',
      'quote_requested',
      'style_changed',
      'feature_added'
    ]
  }
};

<!-- Full Page Visualizer -->
<div id="visualizer-widget"></div>

<script src="https://widgets.serviceflow-pro.com/sdk/v1/widget.js"></script>
<script>
  ServiceFlowWidget.create('visualizer-widget', {
    widgetId: 'YOUR-WIDGET-ID',
    type: 'visualizer',
    
    // Event handlers
    onDesignCreated: function(design) {
      console.log('Customer created design:', design);
      
      // Track in analytics
      gtag('event', 'design_created', {
        design_type: design.type,
        estimated_value: design.estimatedPrice
      });
    },
    
    onQuoteRequested: function(quote) {
      console.log('Quote requested:', quote);
      
      // Could redirect to custom thank you page
      // window.location.href = '/thank-you?design=' + quote.designId;
    },
    
    onDesignSaved: function(design) {
      console.log('Design saved:', design);
    }
  });
</script>

<style>
  #visualizer-widget {
    width: 100%;
    min-height: 700px;
    border-radius: 12px;
    overflow: hidden;
  }
</style>

<!-- Hero Section with CTA -->
<section class="hero">
  <h1>Design Your Dream Backyard</h1>
  <p>See how an ADU or pool would look on your property</p>
  <button id="launch-visualizer" class="btn-cta">
    Start Designing 🎨
  </button>
</section>

<!-- Fullscreen Modal -->
<div id="visualizer-modal" class="visualizer-modal">
  <div class="modal-header">
    <button id="close-visualizer" class="close-btn">×</button>
  </div>
  <div id="visualizer-container"></div>
</div>

<script>
  let visualizerInitialized = false;
  
  // Launch visualizer on button click
  document.getElementById('launch-visualizer').addEventListener('click', function() {
    const modal = document.getElementById('visualizer-modal');
    modal.style.display = 'flex';
    
    // Initialize widget on first open
    if (!visualizerInitialized) {
      ServiceFlowWidget.create('visualizer-container', {
        widgetId: 'YOUR-WIDGET-ID',
        type: 'visualizer',
        fullscreen: true,
        
        onQuoteRequested: function(quote) {
          // Close modal and redirect
          modal.style.display = 'none';
          window.location.href = '/thank-you?design=' + quote.designId;
        }
      });
      visualizerInitialized = true;
    }
  });
  
  // Close button
  document.getElementById('close-visualizer').addEventListener('click', function() {
    document.getElementById('visualizer-modal').style.display = 'none';
  });
</script>

<style>
  .visualizer-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    z-index: 10000;
    flex-direction: column;
  }
  
  .modal-header {
    padding: 20px;
    background: rgba(0,0,0,0.05);
    display: flex;
    justify-content: flex-end;
  }
  
  .close-btn {
    font-size: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
  }
  
  #visualizer-container {
    flex: 1;
    overflow: hidden;
  }
</style>