<!DOCTYPE html>
<html lang="en"><!-- [nospin] -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EC Landscaping - Get Free Consultation</title>
    
    <!-- EmailJS SDK -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
    
    <style>
        /* Reset and Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary: #2c5f2d;
            --primary-dark: #1a3d1b;
            --accent: #7fd44c;
            --text-dark: #1a1a1a;
            --text-light: #666;
            --bg: #f8f9fa;
            --white: #fff;
            --shadow: 0 2px 10px rgba(0,0,0,0.1);
            --error: #ff6b6b;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            background: transparent;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        
        /* Form Container */
        .form-container {
            max-width: 500px;
            margin: 0 auto;
            padding: 15px;
            background: transparent;
            min-height: auto;
        }
        
        /* Form Styles */
        .hero-form {
            background: var(--white);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
            color: var(--text-dark);
            position: relative;
            overflow: hidden;
        }
        
        .hero-form::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, #2c5f2d, #7fd44c);
            border-radius: 15px 15px 0 0;
        }
        
        .hero-form h3 {
            font-size: 24px;
            margin-bottom: 5px;
            color: #2c5f2d;
            font-weight: 700;
        }
        
        .form-subtitle {
            color: #666;
            font-size: 14px;
            margin-bottom: 15px;
        }
        
        .form-badge {
            background: #ff6b6b;
            color: #fff;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            display: inline-block;
            margin-bottom: 15px;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(255,107,107,0.4); }
            70% { box-shadow: 0 0 0 10px rgba(255,107,107,0); }
            100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); }
        }
        
        /* Progress Bar */
        .form-progress {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
            position: relative;
        }
        
        .form-progress::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            height: 2px;
            background: #e0e0e0;
            z-index: 0;
        }
        
        .progress-fill {
            position: absolute;
            top: 20px;
            left: 0;
            height: 2px;
            background: #2c5f2d;
            transition: width 0.5s ease;
            z-index: 1;
        }
        
        .progress-step {
            position: relative;
            z-index: 2;
            text-align: center;
            flex: 1;
        }
        
        .step-number {
            width: 40px;
            height: 40px;
            background: #e0e0e0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            font-weight: bold;
            color: #999;
            transition: all 0.3s;
        }
        
        .progress-step.active .step-number {
            background: #2c5f2d;
            color: #fff;
            transform: scale(1.1);
        }
        
        .progress-step.completed .step-number {
            background: #7fd44c;
            color: #fff;
        }
        
        .step-label {
            font-size: 13px;
            color: #666;
            font-weight: 500;
        }
        
        .progress-step.active .step-label {
            color: #2c5f2d;
        }
        
        .progress-step.completed .step-label {
            color: #7fd44c;
        }
        
        /* Form Steps */
        .form-step {
            display: none;
            animation: fadeIn 0.3s ease;
        }
        
        .form-step.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .step-title {
            font-size: 18px;
            color: #333;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .form-group {
            margin-bottom: 15px;
            position: relative;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
            font-size: 15px;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
            background: #f9f9f9;
            font-family: inherit;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #2c5f2d;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(44,95,45,0.1);
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }
        
        .checkbox-group {
            display: flex;
            align-items: start;
            gap: 10px;
            margin: 20px 0;
        }
        
        .checkbox-group input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin-top: 2px;
            accent-color: #2c5f2d;
            cursor: pointer;
        }
        
        .checkbox-group label {
            font-size: 14px;
            color: #666;
            line-height: 1.4;
            cursor: pointer;
        }
        
        /* Navigation */
        .form-navigation {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }
        
        .btn {
            padding: 14px 28px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            font-family: inherit;
        }
        
        .btn-prev {
            background: #e0e0e0;
            color: #666;
        }
        
        .btn-prev:hover {
            background: #d0d0d0;
        }
        
        .btn-next {
            background: #2c5f2d;
            color: #fff;
            flex: 1;
        }
        
        .btn-next:hover {
            background: #1a3d1b;
            transform: translateY(-1px);
            box-shadow: 0 5px 20px rgba(44,95,45,0.3);
        }
        
        .btn-next:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }
        
        .form-submit {
            width: 100%;
            background: #2c5f2d;
            color: #fff;
            padding: 16px;
            border: none;
            border-radius: 8px;
            font-size: 17px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s;
            font-family: inherit;
        }
        
        .form-submit:hover {
            background: #1a3d1b;
            transform: translateY(-1px);
            box-shadow: 0 5px 20px rgba(44,95,45,0.3);
        }
        
        .form-submit:active {
            transform: translateY(0);
        }
        
        /* Error States */
        .form-group.error input,
        .form-group.error select,
        .form-group.error textarea {
            border-color: #ff6b6b;
            animation: shake 0.3s;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        
        .error-message {
            color: #ff6b6b;
            font-size: 13px;
            margin-top: 5px;
            display: none;
        }
        
        .form-group.error .error-message {
            display: block;
        }
        
        .success-message {
            background: #d4edda;
            color: #155724;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: none;
            text-align: center;
            font-weight: 500;
            font-size: 16px;
        }
        
        .form-footer {
            text-align: center;
            margin-top: 20px;
            font-size: 13px;
            color: #888;
        }
        
        .form-footer svg {
            width: 16px;
            height: 16px;
            vertical-align: middle;
            margin-right: 5px;
        }
        
        /* Loading spinner */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /* Mobile Responsive */
        @media (max-width: 768px) {
            .form-container {
                padding: 10px;
            }
            
            .hero-form {
                padding: 20px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            }
            
            .hero-form h3 {
                font-size: 22px;
            }
            
            .form-progress {
                margin-bottom: 20px;
            }
            
            .step-number {
                width: 35px;
                height: 35px;
                font-size: 14px;
            }
            
            .step-label {
                font-size: 11px;
            }
            
            .step-title {
                font-size: 18px;
                margin-bottom: 15px;
            }
            
            .form-row {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }
            
            .form-group label {
                font-size: 14px;
            }
            
            .form-group input,
            .form-group select,
            .form-group textarea {
                padding: 12px 14px;
                font-size: 15px;
            }
            
            .form-navigation {
                flex-direction: column;
            }
            
            .btn-prev,
            .btn-next,
            .form-submit {
                width: 100%;
            }
            
            .btn-prev {
                margin-bottom: 10px;
            }
        }
        
        /* Smaller screens but keep 2-column */
        @media (max-width: 480px) {
            .form-container {
                padding: 5px;
            }
            
            .hero-form {
                padding: 15px;
            }
            
            .form-group input,
            .form-group select,
            .form-group textarea {
                padding: 10px 12px;
                font-size: 14px;
            }
        }
        
        /* Ultra small mobile adjustments */
        @media (max-width: 400px) {
            .form-row {
                gap: 8px;
            }
            
            .form-group label {
                font-size: 13px;
                margin-bottom: 5px;
            }
            
            .form-group input,
            .form-group select,
            .form-group textarea {
                padding: 10px 12px;
                font-size: 14px;
            }
            
            .hero-form {
                padding: 15px;
            }
            
            .step-number {
                width: 30px;
                height: 30px;
                font-size: 12px;
            }
            
            .step-label {
                font-size: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="form-container">
        <div class="hero-form" id="quote">
            <h3>Get Your Free Consultation</h3>
            <p class="form-subtitle">Tell us about your project in 3 simple steps</p>
            <span class="form-badge">🎉 Get On The Schedule Today!</span>
            
            <div class="success-message" id="successMessage">
                ✅ Thank you! We've received your request and will contact you within 24 hours.
            </div>
            
            <!-- Progress Bar -->
            <div class="form-progress">
                <div class="progress-fill" id="progressFill" style="width: 0%"></div>
                <div class="progress-step active" data-step="1">
                    <div class="step-number">1</div>
                    <div class="step-label">Contact Info</div>
                </div>
                <div class="progress-step" data-step="2">
                    <div class="step-number">2</div>
                    <div class="step-label">Project Details</div>
                </div>
                <div class="progress-step" data-step="3">
                    <div class="step-number">3</div>
                    <div class="step-label">Final Details</div>
                </div>
            </div>
            
            <form id="consultationForm">
                <!-- Step 1: Contact Information -->
                <div class="form-step active" data-step="1">
                    <h4 class="step-title">Let's start with your contact information</h4>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="firstName">First Name *</label>
                            <input type="text" id="firstName" name="firstName" required autofocus>
                            <span class="error-message">Please enter your first name</span>
                        </div>
                        <div class="form-group">
                            <label for="lastName">Last Name *</label>
                            <input type="text" id="lastName" name="lastName" required>
                            <span class="error-message">Please enter your last name</span>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="email">Email Address *</label>
                            <input type="email" id="email" name="email" required>
                            <span class="error-message">Please enter a valid email</span>
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone Number *</label>
                            <input type="tel" id="phone" name="phone" placeholder="(123) 456-7890" required>
                            <span class="error-message">Please enter your phone number</span>
                        </div>
                    </div>
                </div>
                
                <!-- Step 2: Project Details -->
                <div class="form-step" data-step="2">
                    <h4 class="step-title">Tell us about your project</h4>
                    <div class="form-group">
                        <label for="address">Property Address *</label>
                        <input type="text" id="address" name="address" placeholder="Street Address, City, MN ZIP" required>
                        <span class="error-message">Please enter your property address</span>
                    </div>
                    <div class="form-group">
                        <label for="service">Service(s) Needed *</label>
                        <select id="service" name="service" required>
                            <option value="">Choose a service...</option>
                            <option value="lawn-care">Lawn Care & Maintenance</option>
                            <option value="landscape-design">Landscape Design & Installation</option>
                            <option value="hardscape">Hardscape (Patios, Walkways, Walls)</option>
                            <option value="outdoor-living">Outdoor Living Spaces</option>
                            <option value="irrigation">Irrigation System</option>
                            <option value="snow-removal">Snow & Ice Management</option>
                            <option value="garden-design">Garden Design & Plantings</option>
                            <option value="multiple">Multiple Services</option>
                            <option value="other">Other (Please specify in message)</option>
                        </select>
                        <span class="error-message">Please select a service</span>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="projectTimeline">Project Timeline</label>
                            <select id="projectTimeline" name="projectTimeline">
                                <option value="asap">As Soon As Possible</option>
                                <option value="1-month">Within 1 Month</option>
                                <option value="2-3-months">2-3 Months</option>
                                <option value="planning">Just Planning</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="budget">Estimated Budget</label>
                            <select id="budget" name="budget">
                                <option value="not-sure">Not Sure</option>
                                <option value="under-5k">Under $5,000</option>
                                <option value="5k-10k">$5,000 - $10,000</option>
                                <option value="10k-25k">$10,000 - $25,000</option>
                                <option value="25k-50k">$25,000 - $50,000</option>
                                <option value="over-50k">Over $50,000</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- Step 3: Additional Information -->
                <div class="form-step" data-step="3">
                    <h4 class="step-title">Any additional details?</h4>
                    <div class="form-group">
                        <label for="message">Tell Us About Your Vision (Optional)</label>
                        <textarea id="message" name="message" placeholder="Please describe your dream outdoor space, any specific requirements, or questions you have..."></textarea>
                    </div>
                    <div class="checkbox-group">
                        <input type="checkbox" id="newsletter" name="newsletter" checked>
                        <label for="newsletter">Yes, I'd like to receive seasonal landscaping tips and exclusive offers from EC Landscaping</label>
                    </div>
                    <p class="form-footer" style="margin-bottom: 20px;">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                        </svg>
                        Your information is secure and never shared
                    </p>
                </div>
                
                <!-- Navigation Buttons -->
                <div class="form-navigation">
                    <button type="button" class="btn btn-prev" id="prevBtn" style="display: none;">← Back</button>
                    <button type="button" class="btn btn-next" id="nextBtn">Continue →</button>
                    <button type="submit" class="btn form-submit" id="submitBtn" style="display: none;">Get My Free Consultation →</button>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        // Initialize EmailJS with your User ID
        (function() {
            emailjs.init("jeOXwWFHK0-05GrYI"); // Replace with your actual EmailJS User ID
        })();
        
        // Form Elements
        const form = document.getElementById('consultationForm');
        const successMessage = document.getElementById('successMessage');
        const steps = document.querySelectorAll('.form-step');
        const progressSteps = document.querySelectorAll('.progress-step');
        const progressFill = document.getElementById('progressFill');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const submitBtn = document.getElementById('submitBtn');
        
        let currentStep = 1;
        const totalSteps = 3;
        
        // Auto-advance configuration
        const autoAdvanceFields = {
            1: ['firstName', 'lastName', 'email', 'phone'],
            2: [], // No auto-advance on step 2
            3: [] // No auto-advance on last step
        };
        
        // Show specific step
        function showStep(stepNumber) {
            steps.forEach(step => {
                step.classList.remove('active');
            });
            
            const currentStepElement = document.querySelector(`.form-step[data-step="${stepNumber}"]`);
            currentStepElement.classList.add('active');
            
            updateProgressBar(stepNumber);
            updateButtons(stepNumber);
            
            // Focus first input in new step
            setTimeout(() => {
                const firstInput = currentStepElement.querySelector('input, select, textarea');
                if (firstInput) firstInput.focus();
            }, 300);
        }
        
        // Update progress bar
        function updateProgressBar(stepNumber) {
            const progressPercentage = ((stepNumber - 1) / (totalSteps - 1)) * 100;
            progressFill.style.width = progressPercentage + '%';
            
            progressSteps.forEach((step, index) => {
                if (index + 1 < stepNumber) {
                    step.classList.add('completed');
                    step.classList.remove('active');
                } else if (index + 1 === stepNumber) {
                    step.classList.add('active');
                    step.classList.remove('completed');
                } else {
                    step.classList.remove('active', 'completed');
                }
            });
        }
        
        // Update navigation buttons
        function updateButtons(stepNumber) {
            if (stepNumber === 1) {
                prevBtn.style.display = 'none';
                nextBtn.style.display = 'block';
                submitBtn.style.display = 'none';
                nextBtn.style.width = '100%';
            } else if (stepNumber === totalSteps) {
                prevBtn.style.display = 'block';
                nextBtn.style.display = 'none';
                submitBtn.style.display = 'block';
                if (window.innerWidth > 768) {
                    prevBtn.style.width = 'auto';
                    submitBtn.style.width = 'auto';
                }
            } else {
                prevBtn.style.display = 'block';
                nextBtn.style.display = 'block';
                submitBtn.style.display = 'none';
                if (window.innerWidth > 768) {
                    prevBtn.style.width = 'auto';
                    nextBtn.style.width = 'auto';
                }
            }
        }
        
        // Validate current step fields
        function validateStep(stepNumber) {
            const currentStepElement = document.querySelector(`.form-step[data-step="${stepNumber}"]`);
            const requiredFields = currentStepElement.querySelectorAll('[required]');
            let isValid = true;
            
            requiredFields.forEach(field => {
                if (!validateField(field)) {
                    isValid = false;
                }
            });
            
            return isValid;
        }
        
        // Field validation
        function validateField(field) {
            const parent = field.parentElement;
            
            if (field.type === 'email') {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(field.value)) {
                    parent.classList.add('error');
                    return false;
                }
            } else if (field.type === 'tel') {
                const phoneDigits = field.value.replace(/\D/g, '');
                if (phoneDigits.length !== 10) {
                    parent.classList.add('error');
                    return false;
                }
            } else if (field.required && !field.value.trim()) {
                parent.classList.add('error');
                return false;
            }
            
            parent.classList.remove('error');
            return true;
        }
        
        // Check if current step should auto-advance
        function checkAutoAdvance() {
            const fieldsToCheck = autoAdvanceFields[currentStep];
            if (fieldsToCheck.length === 0) return;
            
            let allFieldsValid = true;
            fieldsToCheck.forEach(fieldName => {
                const field = form[fieldName];
                if (!field || !field.value.trim() || (field.required && !validateField(field))) {
                    allFieldsValid = false;
                }
            });
            
            if (allFieldsValid && currentStep < totalSteps) {
                setTimeout(() => {
                    nextBtn.click();
                }, 500);
            }
        }
        
        // Add real-time validation and auto-advance
        const inputs = form.querySelectorAll('input, select');
        inputs.forEach(input => {
            input.addEventListener('blur', function() {
                validateField(this);
            });
            
            input.addEventListener('input', function() {
                if (this.parentElement.classList.contains('error')) {
                    validateField(this);
                }
                if (this.type !== 'tel') {
                    checkAutoAdvance();
                }
            });
            
            if (input.tagName === 'SELECT') {
                input.addEventListener('change', function() {
                    validateField(this);
                    checkAutoAdvance();
                });
            }
        });
        
        // Format phone number
        document.getElementById('phone').addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            if (value.length >= 6) {
                value = value.slice(0, 3) + '-' + value.slice(3, 6) + '-' + value.slice(6, 10);
            } else if (value.length >= 3) {
                value = value.slice(0, 3) + '-' + value.slice(3);
            }
            e.target.value = value;
            
            const digits = value.replace(/\D/g, '');
            if (digits.length === 10) {
                if (this.parentElement.classList.contains('error')) {
                    validateField(this);
                }
                checkAutoAdvance();
            }
        });
        
        // Navigation button handlers
        nextBtn.addEventListener('click', function() {
            if (validateStep(currentStep)) {
                currentStep++;
                showStep(currentStep);
            } else {
                const firstError = document.querySelector('.form-step.active .form-group.error');
                if (firstError) {
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        });
        
        prevBtn.addEventListener('click', function() {
            currentStep--;
            showStep(currentStep);
        });
        
        // Handle form submission
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Validate all steps
            let isValid = true;
            for (let i = 1; i <= totalSteps; i++) {
                if (!validateStep(i)) {
                    isValid = false;
                    currentStep = i;
                    showStep(i);
                    break;
                }
            }
            
            if (!isValid) {
                const firstError = document.querySelector('.form-step.active .form-group.error');
                if (firstError) {
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
                return;
            }
            
            // Prepare template parameters
            const templateParams = {
                firstName: form.firstName.value,
                lastName: form.lastName.value,
                email: form.email.value,
                phone: form.phone.value,
                address: form.address.value,
                service: form.service.options[form.service.selectedIndex].text,
                projectTimeline: form.projectTimeline.options[form.projectTimeline.selectedIndex].text,
                budget: form.budget.options[form.budget.selectedIndex].text,
                message: form.message.value || 'No additional message provided',
                newsletter: form.newsletter.checked ? 'Yes' : 'No',
                date: new Date().toLocaleString(),
                source: window.location.href // Track where form was submitted from
            };
            
            // Disable button and show loading state
            submitBtn.disabled = true;
            submitBtn.innerHTML = 'Sending... <span style="display:inline-block;animation:spin 1s linear infinite">⏳</span>';
            
            // Send email using EmailJS
            emailjs.send('service_1oewf7w', 'template_wchl0ab', templateParams)
                .then(function(response) {
                    console.log('SUCCESS!', response.status, response.text);
                    
                    // Show success message
                    successMessage.style.display = 'block';
                    form.style.display = 'none';
                    
                    // Notify parent window if in iframe
                    if (window.parent !== window) {
                        window.parent.postMessage({
                            type: 'formSubmitted',
                            data: templateParams
                        }, '*');
                    }
                    
                    // Reset form for next submission
                    setTimeout(() => {
                        form.reset();
                        form.style.display = 'block';
                        successMessage.style.display = 'none';
                        currentStep = 1;
                        showStep(1);
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = 'Get My Free Consultation →';
                    }, 10000);
                    
                }, function(error) {
                    console.log('FAILED...', error);
                    alert('Sorry, there was an error sending your request. Please try again or call us directly at (612) 268-4563.');
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = 'Get My Free Consultation →';
                });
        });
        
        // Handle resize for button widths
        window.addEventListener('resize', () => {
            updateButtons(currentStep);
        });
        
        // Initialize
        updateButtons(1);
        
        // Adjust height for iframe
        function adjustHeight() {
            const height = document.body.scrollHeight;
            if (window.parent !== window) {
                window.parent.postMessage({
                    type: 'adjustHeight',
                    height: height
                }, '*');
            }
        }
        
        // Call adjustHeight on load and after any content changes
        window.addEventListener('load', adjustHeight);
        window.addEventListener('resize', adjustHeight);
        
        // Also adjust height when form steps change
        const observer = new MutationObserver(adjustHeight);
        observer.observe(document.querySelector('.hero-form'), {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['style', 'class']
        });
    </script>
    
    <!-- 
    ========================================================================
    IFRAME EMBED CODES AND INSTRUCTIONS
    ========================================================================
    
    1. BASIC IFRAME EMBED:
    ----------------------
    <iframe 
        src="https://eclandscapingmn.com/forms/consultation-form.html" 
        width="100%" 
        height="600" 
        frameborder="0" 
        scrolling="no"
        id="consultation-form">
    </iframe>
    
    
    2. IFRAME WITH AUTO-HEIGHT ADJUSTMENT:
    --------------------------------------
    <iframe 
        src="https://eclandscapingmn.com/forms/consultation-form.html" 
        width="100%" 
        height="600" 
        frameborder="0" 
        scrolling="no"
        id="consultation-form">
    </iframe>
    
    <script>
    // Auto-adjust iframe height based on content
    window.addEventListener('message', function(e) {
        if (e.data.type === 'adjustHeight') {
            document.getElementById('consultation-form').height = e.data.height + 'px';
        }
        if (e.data.type === 'formSubmitted') {
            // Handle form submission event if needed
            console.log('Form submitted:', e.data.data);
            // You can trigger analytics events, show thank you messages, etc.
        }
    });
    </script>
    
    
    3. MODAL/POPUP IMPLEMENTATION:
    ------------------------------
    <button onclick="openFormModal()">Get Free Quote</button>
    
    <div id="formModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeFormModal()">&times;</span>
            <iframe 
                src="https://eclandscapingmn.com/forms/consultation-form.html" 
                width="100%" 
                height="600" 
                frameborder="0">
            </iframe>
        </div>
    </div>
    
    <style>
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
    }
    
    .modal-content {
        background-color: #fefefe;
        margin: 5% auto;
        padding: 0;
        width: 90%;
        max-width: 550px;
        border-radius: 10px;
        overflow: hidden;
    }
    
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        padding: 10px 20px;
        cursor: pointer;
    }
    
    .close:hover {
        color: #000;
    }
    </style>
    
    <script>
    function openFormModal() {
        document.getElementById('formModal').style.display = 'block';
    }
    
    function closeFormModal() {
        document.getElementById('formModal').style.display = 'none';
    }
    
    // Close modal when clicking outside
    window.onclick = function(event) {
        var modal = document.getElementById('formModal');
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }
    </script>
    
    
    4. SIDEBAR SLIDE-IN IMPLEMENTATION:
    -----------------------------------
    <button onclick="openFormSidebar()">Get Quote</button>
    
    <div id="formSidebar" class="sidebar-form">
        <span class="close-sidebar" onclick="closeFormSidebar()">&times;</span>
        <iframe 
            src="https://eclandscapingmn.com/forms/consultation-form.html" 
            width="100%" 
            height="100%" 
            frameborder="0">
        </iframe>
    </div>
    
    <style>
    .sidebar-form {
        position: fixed;
        top: 0;
        right: -500px;
        width: 500px;
        height: 100%;
        background: white;
        box-shadow: -5px 0 20px rgba(0,0,0,0.2);
        transition: right 0.3s ease;
        z-index: 1000;
    }
    
    .sidebar-form.open {
        right: 0;
    }
    
    .close-sidebar {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 30px;
        cursor: pointer;
        z-index: 1001;
    }
    
    @media (max-width: 600px) {
        .sidebar-form {
            width: 100%;
            right: -100%;
        }
    }
    </style>
    
    <script>
    function openFormSidebar() {
        document.getElementById('formSidebar').classList.add('open');
    }
    
    function closeFormSidebar() {
        document.getElementById('formSidebar').classList.remove('open');
    }
    </script>
    
    
    5. INLINE EMBED (REMOVES FORM STYLING):
    ---------------------------------------
    <div style="max-width: 500px; margin: 0 auto;">
        <iframe 
            src="https://eclandscapingmn.com/forms/consultation-form.html" 
            width="100%" 
            height="600" 
            frameborder="0" 
            scrolling="no"
            style="border: none;">
        </iframe>
    </div>
    
    
    6. TWO-COLUMN LAYOUT (LIKE HERO SECTION):
    -----------------------------------------
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 50px 20px;">
        <div>
            <h1>Transform Your Outdoor Space</h1>
            <p>Join 500+ happy homeowners who trust EC Landscaping for beautiful lawns and reliable service.</p>
            <div style="margin-top: 30px;">
                ✓ Licensed & Insured<br>
                ✓ 15+ Years Experience<br>
                ✓ 100% Satisfaction
            </div>
        </div>
        <div>
            <iframe 
                src="https://eclandscapingmn.com/forms/consultation-form.html" 
                width="100%" 
                height="600" 
                frameborder="0" 
                scrolling="no"
                style="border: none;">
            </iframe>
        </div>
    </div>
    
    
    7. EMAILJS CONFIGURATION REMINDER:
    ---------------------------------
    Remember to replace these in the code above:
    - YOUR_EMAILJS_USER_ID (this is your Public Key)
    - YOUR_SERVICE_ID
    - YOUR_TEMPLATE_ID
    
    EmailJS Template Variables to use:
    {{firstName}}
    {{lastName}}
    {{email}}
    {{phone}}
    {{address}}
    {{service}}
    {{projectTimeline}}
    {{budget}}
    {{message}}
    {{newsletter}}
    {{date}}
    {{source}}
    
    ========================================================================
    -->
</body>
<!-- [/nospin] --></html>