Create an interactive Pressure Washing Estimate Calculator and publish it inside the "Quotes" channel.

UI: a Service Type dropdown with: Fleet Car Washing, Driveway Cleaning, Fence Cleaning, Roof Cleaning, Gutter Cleaning, Deck/Patio Cleaning, House Washing.
For every service except Fleet Car Washing, show two tabs named "Condition" and "Size [Sqr Feet]".

Condition: dropdown → Light, Average, Heavy.

Size [Sqr Feet]: numeric input for custom sq ft.

For Fleet Car Washing, show two tabs named "Number Of Vehicles" and "Plans".

Number Of Vehicles: numeric input (how many vehicles).

Plans: dropdown → Standard, Premium.

Pricing rules:

Driveway Cleaning: if size ≤ 500 → flat $75.99. If size > 500 → $75.99 + ((size − 500) × $0.17). Apply condition multiplier: Light ×1.0, Average ×1.2, Heavy ×1.4.

Fence & Deck/Patio: Light = size × $0.25; Average = size × $0.35; Heavy = size × $0.45.

Roof Cleaning: Light = size × $0.35; Average = size × $0.45; Heavy = size × $0.55.

House Washing (industry standard): Light = size × $0.30; Average = size × $0.40; Heavy = size × $0.50.

Gutter Cleaning: input is length (ft) in the Size tab; price = length × $1.25. (Condition tab may be hidden or disabled for gutters.)

Fleet Car Washing: Base per-car price: Standard = $25, Premium = $35. Bulk discounts applied per car when quantity ≥ 3: 3–5 cars → subtract $2 per car; 6–10 → subtract $3 per car; 11+ → subtract $5 per car. (Example: 5 premium cars = 5 × (35 − 2) = $165.)

Behavior: auto-calculate and display “Estimated Total: $___” live whenever inputs change. Reset irrelevant inputs when switching services. Validate numeric inputs (no negatives). Format output as currency.

Style: clean card layout, rounded corners, bold labels, subtle blue accent, smooth transitions between tabs.

components/estimate-calculator.js

@@ -1 +1,307 @@
+class EstimateCalculator extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .calculator-card {
+          background: white;
+          border-radius: 12px;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          padding: 2rem;
+          max-width: 600px;
+          margin: 0 auto;
+        }
+        .form-group {
+          margin-bottom: 1.5rem;
+        }
+        .form-label {
+          display: block;
+          font-weight: 600;
+          color: #1e293b;
+          margin-bottom: 0.5rem;
+        }
+        .form-input, .form-select {
+          width: 100%;
+          padding: 0.75rem;
+          border: 1px solid #e2e8f0;
+          border-radius: 0.5rem;
+          transition: all 0.3s ease;
+          font-size: 1rem;
+        }
+        .form-input:focus, .form-select:focus {
+          outline: none;
+          border-color: #3b82f6;
+          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+        }
+        .tabs-container {
+          display: flex;
+          margin-bottom: 1.5rem;
+          border-bottom: 1px solid #e2e8f0;
+        }
+        .tab {
+          padding: 0.75rem 1.5rem;
+          background: white;
+          border: 1px solid #e2e8f0;
+          border-bottom: none;
+          border-radius: 0.5rem 0.5rem 0 0;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          font-weight: 500;
+          color: #64748b;
+        }
+        .tab.active {
+          background: #3b82f6;
+          color: white;
+        }
+        .result {
+          margin-top: 2rem;
+          padding: 1.5rem;
+          background: #f8fafc;
+          border-radius: 0.5rem;
+          text-align: center;
+          font-weight: 600;
+          color: #1e293b;
+          border: 1px solid #e2e8f0;
+          font-size: 1.25rem;
+          transition: all 0.3s ease;
+        }
+        .hidden {
+          display: none;
+        }
+        .error {
+          color: #dc2626;
+          font-size: 0.875rem;
+          margin-top: 0.5rem;
+        }
+        input[type="number"]::-webkit-outer-spin-button,
+        input[type="number"]::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+        input[type="number"] {
+          -moz-appearance: textfield;
+        }
+      </style>
+      <div class="calculator-card">
+        <div class="form-group">
+          <label class="form-label">Service Type</label>
+          <select id="service" class="form-select">
+            <option value="">Select a service</option>
+            <option value="fleet">Fleet Car Washing</option>
+            <option value="driveway">Driveway Cleaning</option>
+            <option value="fence">Fence Cleaning</option>
+            <option value="roof">Roof Cleaning</option>
+            <option value="gutter">Gutter Cleaning</option>
+            <option value="deck">Deck/Patio Cleaning</option>
+            <option value="house">House Washing</option>
+          </select>
+        </div>
 
+        <!-- Standard Tabs for most services -->
+        <div id="standardTabs" class="hidden">
+          <div class="tabs-container">
+            <div class="tab active" data-tab="condition">Condition</div>
+            <div class="tab" data-tab="size">Size [Sqr Feet]</div>
+        </div>
+
+        <!-- Fleet Car Washing Tabs -->
+        <div id="fleetTabs" class="hidden">
+          <div class="tabs-container">
+            <div class="tab active" data-tab="vehicles">Number Of Vehicles</div>
+            <div class="tab" data-tab="plans">Plans</div>
+        </div>
+
+        <!-- Condition Tab Content -->
+        <div id="conditionTab" class="tab-content active">
+          <div class="form-group">
+            <label class="form-label">Condition</label>
+            <select id="condition" class="form-select">
+              <option value="light">Light</option>
+              <option value="average">Average</option>
+              <option value="heavy">Heavy</option>
+          </div>
+        </div>
+
+        <!-- Size Tab Content -->
+        <div id="sizeTab" class="tab-content">
+          <div class="form-group">
+            <label class="form-label">Size [Sqr Feet]</label>
+            <input type="number" id="size" class="form-input" min="0" placeholder="Enter square footage">
+          </div>
+        </div>
+
+        <!-- Vehicles Tab Content -->
+        <div id="vehiclesTab" class="tab-content hidden">
+          <div class="form-group">
+            <label class="form-label">Number Of Vehicles</label>
+            <input type="number" id="vehicles" class="form-input" min="0" placeholder="Enter number of vehicles">
+          </div>
+        </div>
+
+        <!-- Plans Tab Content -->
+        <div id="plansTab" class="tab-content hidden">
+          <div class="form-group">
+            <label class="form-label">Plans</label>
+            <select id="plan" class="form-select">
+              <option value="standard">Standard</option>
+              <option value="premium">Premium</option>
+          </div>
+        </div>
+
+        <div id="result" class="result">
+          Estimated Total: $0.00
+        </div>
+      </div>
+    `;
+
+    this.initializeCalculator();
+  }
+
+  initializeCalculator() {
+    const serviceSelect = this.shadowRoot.getElementById('service');
+    const conditionSelect = this.shadowRoot.getElementById('condition');
+    const sizeInput = this.shadowRoot.getElementById('size');
+    const vehiclesInput = this.shadowRoot.getElementById('vehicles');
+    const planSelect = this.shadowRoot.getElementById('plan');
+    const resultDiv = this.shadowRoot.getElementById('result');
+
+    // Tab switching functionality
+    const tabs = this.shadowRoot.querySelectorAll('.tab');
+    tabs.forEach(tab => {
+      tab.addEventListener('click', () => {
+        const tabType = tab.getAttribute('data-tab');
+        
+        // Deactivate all tabs
+        tabs.forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        
+        // Show corresponding tab content
+        const tabContents = this.shadowRoot.querySelectorAll('.tab-content');
+        tabContents.forEach(content => content.classList.add('hidden'));
+        
+        const targetTab = this.shadowRoot.getElementById(`${tabType}Tab`);
+        if (targetTab) {
+          targetTab.classList.remove('hidden');
+        }
+      });
+    });
+
+    // Calculate function
+    const calculateEstimate = () => {
+      const service = serviceSelect.value;
+      const condition = conditionSelect.value;
+      const size = parseFloat(sizeInput.value) || 0;
+      const vehicles = parseInt(vehiclesInput.value) || 0;
+      const plan = planSelect.value;
+
+      let price = 0;
+
+      // Validation
+      if (size < 0 || vehicles < 0) {
+        resultDiv.textContent = 'Please enter valid positive numbers';
+        return;
+      }
+
+      switch (service) {
+        case 'driveway':
+          if (size <= 500) {
+            price = 75.99;
+          } else {
+            price = 75.99 + ((size - 500) * 0.17);
+          }
+          // Apply condition multiplier
+          if (condition === 'average') price *= 1.2;
+          if (condition === 'heavy') price *= 1.4;
+          break;
+
+        case 'fence':
+        case 'deck':
+          if (condition === 'light') price = size * 0.25;
+          if (condition === 'average') price = size * 0.35;
+          if (condition === 'heavy') price = size * 0.45;
+          break;
+
+        case 'roof':
+          if (condition === 'light') price = size * 0.35;
+          if (condition === 'average') price = size * 0.45;
+          if (condition === 'heavy') price = size * 0.55;
+          break;
+
+        case 'house':
+          if (condition === 'light') price = size * 0.30;
+          if (condition === 'average') price = size * 0.40;
+          if (condition === 'heavy') price = size * 0.50;
+          break;
+
+        case 'gutter':
+          price = size * 1.25;
+          break;
+
+        case 'fleet':
+          let basePrice = plan === 'standard' ? 25 : 35;
+          
+          // Apply bulk discounts
+          if (vehicles >= 3 && vehicles <= 5) {
+            basePrice -= 2;
+          } else if (vehicles >= 6 && vehicles <= 10) {
+            basePrice -= 3;
+          } else if (vehicles >= 11) {
+            basePrice -= 5;
+          }
+          price = basePrice * vehicles;
+          break;
+      }
+
+      // Format as currency
+      const formattedPrice = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD'
+      }).format(price);
+
+      resultDiv.textContent = `Estimated Total: ${formattedPrice}`;
+    }
+
+    // Service change handler
+    serviceSelect.addEventListener('change', () => {
+      const service = serviceSelect.value;
+      
+      // Reset inputs
+      conditionSelect.value = 'light';
+      sizeInput.value = '';
+      vehiclesInput.value = '';
+      planSelect.value = 'standard';
+
+      // Show/hide appropriate tabs
+      const standardTabs = this.shadowRoot.getElementById('standardTabs');
+      const fleetTabs = this.shadowRoot.getElementById('fleetTabs');
+      
+      if (service === 'fleet') {
+        standardTabs.classList.add('hidden');
+        fleetTabs.classList.remove('hidden');
+        
+        // Show vehicles tab by default
+        this.shadowRoot.querySelectorAll('.tab-content').forEach(content => content.classList.add('hidden'));
+        this.shadowRoot.getElementById('vehiclesTab').classList.remove('hidden');
+      } else {
+        standardTabs.classList.remove('hidden');
+        fleetTabs.classList.add('hidden');
+        
+        // Show condition tab by default
+        this.shadowRoot.getElementById('conditionTab').classList.remove('hidden');
+      }
+
+      calculateEstimate();
+    });
+
+    // Input change listeners
+    conditionSelect.addEventListener('change', calculateEstimate);
+    sizeInput.addEventListener('input', calculateEstimate);
+    vehiclesInput.addEventListener('input', calculateEstimate);
+    planSelect.addEventListener('change', calculateEstimate);
+
+    // Initial calculation
+    calculateEstimate();
+  }
+}
+
+customElements.define('estimate-calculator', EstimateCalculator);

components/navbar.js

@@ -124,8 +124,8 @@ class CustomNavbar extends HTMLElement {
             <li class="nav-link"><a href="/">Home</a></li>
             <li class="nav-link"><a href="/services.html">Services</a></li>
             <li class="nav-link"><a href="/gallery.html">Gallery</a></li>
-<li class="nav-link"><a href="/contact.html">Contact</a></li>
-            <li class="nav-link"><a href="/contact.html" class="cta-button">Free Quote</a></li>
+            <li class="nav-link"><a href="/contact.html">Contact</a></li>
+            <li class="nav-link"><a href="/estimate-calculator.html">Free Quote Calculator</a></li>
 </ul>
 <button class="mobile-menu-button">
             <i data-feather="menu"></i>

estimate-calculator.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Free Quote Calculator | Phoenix Pressure Washing | Oklahoma City</title>
+    <meta name="description" content="Get an instant pressure washing estimate for your Oklahoma City property. Calculate pricing for driveway, roof, fence, house washing and more.">
+    <link rel="icon" type="image/x-icon" href="/assets/img/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link rel="stylesheet" href="/assets/css/styles.css">
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    
+    <!-- Calculator Hero -->
+    <section class="hero-banner">
+        <div class="container mx-auto px-4">
+            <div class="max-w-3xl">
+                <h1>Free Quote Calculator</h1>
+                <p>Get an instant estimate for our professional pressure washing services in Oklahoma City</p>
+                <a href="/contact.html" class="inline-block bg-primary text-white font-bold py-3 px-8 rounded-lg hover:bg-red-600 transition duration-300 shadow-lg hover:shadow-xl">Contact Us Directly</a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Calculator Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-800 mb-4">Instant Pressure Washing Estimate</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Select your service type and provide details for an accurate quote</p>
+            </div>
+            
+            <estimate-calculator></estimate-calculator>
+            
+            <div class="text-center mt-12">
+                <p class="text-gray-600 mb-4">Need a more detailed quote or have special requirements?</p>
+                <a href="/contact.html" class="inline-block bg-primary text-white font-bold py-3 px-8 rounded-lg hover:bg-red-600 transition duration-300">Contact Us for a Custom Quote</a>
+            </div>
+        </div>
+    </section>
+
+    <!-- FAQ -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-800 mb-4">Calculator FAQ</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Common questions about our pressure washing pricing and services</p>
+            </div>
+            
+            <div class="max-w-3xl mx-auto">
+                <div class="faq-item">
+                    <div class="faq-question">
+                        <h3 class="text-xl font-semibold text-gray-800">How accurate is this calculator?</h3>
+                        <i data-feather="chevron-down" class="text-primary transition-transform duration-300"></i>
+                    </div>
+                    <div class="faq-answer">
+                        <p class="text-gray-600">Our calculator provides estimates based on our standard pricing structure. Final quotes may vary based on site-specific conditions, accessibility, and additional requirements.</p>
+                    </div>
+                </div>
+                
+                <div class="faq-item">
+                    <div class="faq-question">
+                        <h3 class="text-xl font-semibold text-gray-800">Do you offer discounts for multiple services?</h3>
+                        <i data-feather="chevron-down" class="text-primary transition-transform duration-300"></i>
+                    </div>
+                    <div class="faq-answer">
+                        <p class="text-gray-600">Yes! When you book multiple services together, we offer package discounts. Contact us directly for the best pricing on bundled services.</p>
+                    </div>
+                </div>
+                
+                <div class="faq-item">
+                    <div class="faq-question">
+                        <h3 class="text-xl font-semibold text-gray-800">What's included in the quoted price?</h3>
+                        <i data-feather="chevron-down" class="text-primary transition-transform duration-300"></i>
+                    </div>
+                    <div class="faq-answer">
+                        <p class="text-gray-600">All quoted prices include labor, equipment, and eco-friendly cleaning solutions. Additional charges may apply for extremely difficult access, extensive prep work, or heavily soiled conditions requiring multiple passes.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <custom-footer></custom-footer>
+    
+    <script src="/components/navbar.js"></script>
+    <script src="/components/footer.js"></script>
+    <script src="/components/estimate-calculator.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>