File

Back Back Up Advanced Editor

<?php include "../autoload.php"; ?>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
        .gradient-bg {
            background: linear-gradient(135deg, #1e40af 0%, #60a5fa 100%);
        }
        .result-card {
            background: linear-gradient(145deg, #ffffff, #f0f7ff);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s ease, opacity 0.3s ease;
        }
        .result-card.hidden {
            transform: translateY(20px);
            opacity: 0;
        }
        .result-card:not(.hidden) {
            transform: translateY(0);
            opacity: 1;
        }
        .input-container {
            background: linear-gradient(145deg, #ffffff, #f9fafb);
            transition: all 0.3s ease;
        }
        .input-container:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }
        .range-input::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: #1e40af;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }
        .range-input::-moz-range-thumb {
            width: 20px;
            height: 20px;
            background: #1e40af;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }
        .btn-primary {
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }
        .visual-container {
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="%23f3f4f6" width="100" height="100"/><circle cx="50" cy="50" r="30" fill="%23dbeafe" opacity="0.5"/></svg>') repeat;
            border-radius: 12px;
            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        select {
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="%234b5563" d="M7 10l5 5 5-5H7z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 12px;
        }
    </style>

<div class="x">
        <div class="x">
            
            <div class="mb-12">
                <h2 class="text-3xl font-semibold text-gray-800 mb-6">Enter Your Item & Staircase/Hallway Details</h2>
                <p class="text-gray-500 mb-8 text-lg">Input dimensions to check if your item can navigate through the staircase or hallway.</p>
                <form id="moveInForm" class="space-y-8">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div class="space-y-3">
                            <label for="itemType" class="block text-sm font-medium text-gray-700">Item Type</label>
                            <div class="relative flex items-center">
                                <i data-lucide="archive" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <select id="itemType" class="pl-12 pr-10 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" required>
                                    <option value="Couch" selected>Couch</option>
                                    <option value="Bed">Bed</option>
                                    <option value="Appliance">Appliance</option>
                                </select>
                            </div>
                        </div>
                        <div class="space-y-3">
                            <label for="itemWidth" class="block text-sm font-medium text-gray-700">Item Width (in)</label>
                            <div class="relative flex items-center">
                                <i data-lucide="maximize" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="number" id="itemWidth" class="pl-12 pr-4 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" placeholder="36.0" step="0.1" min="12" max="96" value="36.0" required>
                            </div>
                            <input type="range" id="itemWidthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="12" max="96" step="0.1" value="36">
                            <p id="itemWidthValue" class="text-sm text-gray-500">36.0 in</p>
                        </div>
                        <div class="space-y-3">
                            <label for="itemDepth" class="block text-sm font-medium text-gray-700">Item Depth (in)</label>
                            <div class="relative flex items-center">
                                <i data-lucide="expand" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="number" id="itemDepth" class="pl-12 pr-4 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" placeholder="30.0" step="0.1" min="12" max="60" value="30.0" required>
                            </div>
                            <input type="range" id="itemDepthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="12" max="60" step="0.1" value="30">
                            <p id="itemDepthValue" class="text-sm text-gray-500">30.0 in</p>
                        </div>
                        <div class="space-y-3">
                            <label for="itemHeight" class="block text-sm font-medium text-gray-700">Item Height (in)</label>
                            <div class="relative flex items-center">
                                <i data-lucide="ruler" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="number" id="itemHeight" class="pl-12 pr-4 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" placeholder="30.0" step="0.1" min="12" max="60" value="30.0" required>
                            </div>
                            <input type="range" id="itemHeightRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="12" max="60" step="0.1" value="30">
                            <p id="itemHeightValue" class="text-sm text-gray-500">30.0 in</p>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="space-y-3">
                            <label for="pathWidth" class="block text-sm font-medium text-gray-700">Staircase/Hallway Width (in)</label>
                            <div class="relative flex items-center">
                                <i data-lucide="door-open" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="number" id="pathWidth" class="pl-12 pr-4 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" placeholder="40.0" step="0.1" min="24" max="60" value="40.0" required>
                            </div>
                            <input type="range" id="pathWidthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="24" max="60" step="0.1" value="40">
                            <p id="pathWidthValue" class="text-sm text-gray-500">40.0 in</p>
                        </div>
                        <div class="space-y-3">
                            <label for="pathHeight" class="block text-sm font-medium text-gray-700">Staircase/Hallway Height (in)</label>
                            <div class="relative flex items-center">
                                <i data-lucide="ruler" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="number" id="pathHeight" class="pl-12 pr-4 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" placeholder="80.0" step="0.1" min="60" max="120" value="80.0" required>
                            </div>
                            <input type="range" id="pathHeightRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="60" max="120" step="0.1" value="80">
                            <p id="pathHeightValue" class="text-sm text-gray-500">80.0 in</p>
                        </div>
                        <div class="space-y-3">
                            <label for="turnRadius" class="block text-sm font-medium text-gray-700">Min Turn Radius (in)</label>
                            <div class="relative flex items-center">
                                <i data-lucide="corner-right-down" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="number" id="turnRadius" class="pl-12 pr-4 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" placeholder="36.0" step="0.1" min="24" max="60" value="36.0" required>
                            </div>
                            <input type="range" id="turnRadiusRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="24" max="60" step="0.1" value="36">
                            <p id="turnRadiusValue" class="text-sm text-gray-500">36.0 in</p>
                        </div>
                    </div>
                    <button type="submit" class="btn-primary w-full bg-blue-600 text-white py-4 px-8 rounded-xl hover:bg-blue-700 flex items-center justify-center text-lg">
                        <i data-lucide="search" class="mr-3 h-5 w-5"></i>
                        Check Move-In Fit
                    </button>
                </form>
            </div>

<div id="resultSection" class="result-card rounded-2xl p-10 hidden">
                <h2 class="text-3xl font-semibold text-gray-800 mb-6 flex items-center">
                    <i data-lucide="check-circle-2" class="mr-3 text-green-500 h-7 w-7"></i>
                    Your Staircase Move-In Assessment
                </h2>
                <div id="resultOutput" class="text-gray-700 space-y-6 text-base">
                    
                </div>
                <div class="mt-10 flex flex-col md:flex-row justify-between items-center gap-6">
                    <div class="flex items-center text-blue-600">
                        <i data-lucide="info" class="mr-2 h-5 w-5"></i>
                        <p class="text-sm font-medium">Based on furniture moving and interior design standards.</p>
                    </div>
                    <button id="downloadPdf" class="btn-primary bg-green-600 text-white py-3 px-8 rounded-xl hover:bg-green-700 flex items-center text-base">
                        <i data-lucide="download" class="mr-2 h-5 w-5"></i>
                        Download PDF Report
                    </button>
                </div>
                
                <div class="mt-10 visual-container p-8">
                    <h3 class="text-xl font-medium text-gray-800 mb-4 flex items-center">
                        <i data-lucide="move-3d" class="mr-3 text-blue-500 h-6 w-6"></i>
                        Interactive Item & Pathway Visualization
                    </h3>
                    <div class="relative w-full h-96 bg-gray-200 rounded-xl overflow-hidden shadow-lg">
                        <canvas id="moveInCanvas" class="w-full h-full"></canvas>
                    </div>
                    <p class="text-sm text-gray-600 mt-4">Visualization showing the item scaled to the staircase/hallway width and turn radius.</p>
                </div>
                
                <div class="mt-10 bg-blue-50 p-8 rounded-xl shadow-sm">
                    <h3 class="text-xl font-medium text-gray-800 mb-4 flex items-center">
                        <i data-lucide="lightbulb" class="mr-3 text-yellow-500 h-6 w-6"></i>
                        Expert Insights for Moving Furniture
                    </h3>
                    <ul class="list-none space-y-4 text-gray-700 text-sm">
                        <li class="flex items-start">
                            <i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
                            <span><strong>Clearance:</strong> Allow 2 in clearance for safe navigation through pathways.</span>
                        </li>
                        <li class="flex items-start">
                            <i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
                            <span><strong>Orientation:</strong> Rotate or tilt item to fit through tight spaces or turns.</span>
                        </li>
                        <li class="flex items-start">
                            <i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
                            <span><strong>Turns:</strong> Ensure item’s smallest dimension fits within turn radius.</span>
                        </li>
                        <li class="flex items-start">
                            <i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
                            <span><strong>Protection:</strong> Use padding or covers to prevent damage to item or walls.</span>
                        </li>
                        <li class="flex items-start">
                            <i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
                            <span><strong>Disassembly:</strong> Consider disassembling large items (e.g., bed frames) for easier transport.</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

// Sync range and number inputs
        function syncInputs(numberId, rangeId, valueId) {
            const numberInput = document.getElementById(numberId);
            const rangeInput = document.getElementById(rangeId);
            const valueDisplay = document.getElementById(valueId);

numberInput.addEventListener('input', () => {
                rangeInput.value = numberInput.value;
                valueDisplay.textContent = `${parseFloat(numberInput.value).toFixed(1)} in`;
            });
            rangeInput.addEventListener('input', () => {
                numberInput.value = rangeInput.value;
                valueDisplay.textContent = `${parseFloat(rangeInput.value).toFixed(1)} in`;
            });
        }

syncInputs('itemWidth', 'itemWidthRange', 'itemWidthValue');
        syncInputs('itemDepth', 'itemDepthRange', 'itemDepthValue');
        syncInputs('itemHeight', 'itemHeightRange', 'itemHeightValue');
        syncInputs('pathWidth', 'pathWidthRange', 'pathWidthValue');
        syncInputs('pathHeight', 'pathHeightRange', 'pathHeightValue');
        syncInputs('turnRadius', 'turnRadiusRange', 'turnRadiusValue');

// Form Submission
        document.getElementById('moveInForm').addEventListener('submit', function (e) {
            e.preventDefault();
            calculateMoveInFit();
        });

function calculateMoveInFit() {
            const itemType = document.getElementById('itemType').value;
            const itemWidth = parseFloat(document.getElementById('itemWidth').value);
            const itemDepth = parseFloat(document.getElementById('itemDepth').value);
            const itemHeight = parseFloat(document.getElementById('itemHeight').value);
            const pathWidth = parseFloat(document.getElementById('pathWidth').value);
            const pathHeight = parseFloat(document.getElementById('pathHeight').value);
            const turnRadius = parseFloat(document.getElementById('turnRadius').value);

if (!itemWidth || !itemDepth || !itemHeight || !pathWidth || !pathHeight || !turnRadius ||
                itemWidth < 12 || itemDepth < 12 || itemHeight < 12 || pathWidth < 24 || pathHeight < 60 || turnRadius < 24) {
                alert('Please enter valid values (Item Width/Depth/Height ≥ 12 in, Path Width ≥ 24 in, Path Height ≥ 60 in, Turn Radius ≥ 24 in).');
                return;
            }

// Check fit: smallest item dimension must fit within path width and turn radius with 2 in clearance
            const minItemDimension = Math.min(itemWidth, itemDepth, itemHeight);
            const pathFit = pathWidth >= minItemDimension + 2; // 1 in clearance each side
            const heightFit = pathHeight >= minItemDimension + 2; // 1 in clearance top/bottom
            const turnFit = turnRadius >= minItemDimension + 2; // 1 in clearance each side for turns

// Additional check: at least one orientation allows passage (width or depth fits height)
            const orientationFit = pathHeight >= Math.min(itemWidth, itemDepth) + 2;

const overallFit = pathFit && heightFit && turnFit && orientationFit ? 'Yes' : 'No';

// Calculate clearances
            const pathWidthClearance = pathWidth - minItemDimension;
            const pathHeightClearance = pathHeight - minItemDimension;
            const turnClearance = turnRadius - minItemDimension;

// Generate output
            const output = `
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 bg-white p-6 rounded-xl shadow-sm">
                    <div>
                        <p class="font-medium text-gray-700">Item Type</p>
                        <p class="text-lg">${itemType}</p>
                    </div>
                    <div>
                        <p class="font-medium text-gray-700">Item Dimensions</p>
                        <p class="text-xl text-blue-600 font-semibold">${itemWidth.toFixed(1)} x ${itemDepth.toFixed(1)} x ${itemHeight.toFixed(1)} in</p>
                    </div>
                    <div>
                        <p class="font-medium text-gray-700">Pathway Dimensions</p>
                        <p class="text-lg">${pathWidth.toFixed(1)} in (width), ${pathHeight.toFixed(1)} in (height), ${turnRadius.toFixed(1)} in (turn radius)</p>
                    </div>
                    <div>
                        <p class="font-medium text-gray-700">Fit Assessment</p>
                        <p class="text-lg ${overallFit === 'Yes' ? 'text-green-600' : 'text-red-600'} font-semibold">
                            ${overallFit === 'Yes' ? 'Perfect Fit' : 'May Not Fit Comfortably'}
                        </p>
                        <p class="text-sm text-gray-600">${
                            overallFit === 'Yes' 
                                ? `The item can navigate with ${pathWidthClearance.toFixed(1)} in width clearance, ${pathHeightClearance.toFixed(1)} in height clearance, and ${turnClearance.toFixed(1)} in turn clearance.`
                                : `Issues: ${
                                    !pathFit ? `Path width too narrow (need ≥${(minItemDimension + 2).toFixed(1)} in, have ${pathWidth.toFixed(1)} in). ` : ''
                                }${
                                    !heightFit ? `Path height too low (need ≥${(minItemDimension + 2).toFixed(1)} in, have ${pathHeight.toFixed(1)} in). ` : ''
                                }${
                                    !turnFit ? `Turn radius too tight (need ≥${(minItemDimension + 2).toFixed(1)} in, have ${turnRadius.toFixed(1)} in). ` : ''
                                }${
                                    !orientationFit ? `No orientation allows passage through height (need ≥${(Math.min(itemWidth, itemDepth) + 2).toFixed(1)} in).` : ''
                                }`
                        }</p>
                    </div>
                </div>
                <div class="bg-blue-50 p-4 rounded-lg">
                    <p class="text-sm"><span class="font-medium">Tip:</span> Tilt or rotate the item and measure the tightest points in your staircase or hallway.</p>
                </div>
            `;

document.getElementById('resultOutput').innerHTML = output;
            document.getElementById('resultSection').classList.remove('hidden');

// Draw visualization
            drawVisualization(itemWidth, itemDepth, pathWidth, turnRadius);

// Setup PDF download
            setupPdfDownload(itemType, itemWidth, itemDepth, itemHeight, pathWidth, pathHeight, turnRadius, overallFit, pathWidthClearance, pathHeightClearance, turnClearance);
        }

function drawVisualization(itemWidth, itemDepth, pathWidth, turnRadius) {
            const canvas = document.getElementById('moveInCanvas');
            const ctx = canvas.getContext('2d');
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;

// Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Scale factors
            const scale = canvas.width / (Math.max(pathWidth, turnRadius) * 1.5); // Scale to fit canvas
            const itemW = itemWidth * scale;
            const itemH = itemDepth * scale;
            const pathW = pathWidth * scale;
            const turnR = turnRadius * scale;

// Draw background with pathway texture
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, '#e5e7eb');
            gradient.addColorStop(1, '#d1d5db');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw floor
            ctx.fillStyle = 'rgba(120, 113, 108, 0.2)';
            ctx.fillRect(0, canvas.height * 0.7, canvas.width, canvas.height * 0.3);

// Draw pathway (hallway)
            ctx.strokeStyle = '#1e40af';
            ctx.lineWidth = 2;
            ctx.setLineDash([5, 5]);
            ctx.strokeRect(canvas.width * 0.55, canvas.height * 0.2, pathW, canvas.height * 0.4);
            ctx.fillStyle = '#bfdbfe';
            ctx.globalAlpha = 0.3;
            ctx.fillRect(canvas.width * 0.55, canvas.height * 0.2, pathW, canvas.height * 0.4);
            ctx.globalAlpha = 1.0;
            ctx.setLineDash([]);

// Draw turn radius (arc)
            ctx.beginPath();
            ctx.arc(canvas.width * 0.55 + pathW, canvas.height * 0.2 + canvas.height * 0.4, turnR, -Math.PI / 2, 0);
            ctx.strokeStyle = '#1e40af';
            ctx.lineWidth = 2;
            ctx.setLineDash([5, 5]);
            ctx.stroke();
            ctx.setLineDash([]);

// Draw item with realistic effects
            ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
            ctx.shadowBlur = 15;
            ctx.shadowOffsetX = 8;
            ctx.shadowOffsetY = 8;
            ctx.fillStyle = '#4b5563';
            const itemX = canvas.width * 0.15;
            const itemY = canvas.height * 0.3;
            ctx.fillRect(itemX, itemY, itemW, itemH);

// Draw item texture
            const itemGradient = ctx.createLinearGradient(itemX, itemY, itemX + itemW, itemY + itemH);
            itemGradient.addColorStop(0, 'rgba(255, 255, 255, 0.15)');
            itemGradient.addColorStop(1, 'rgba(255, 255, 255, 0.05)');
            ctx.fillStyle = itemGradient;
            ctx.fillRect(itemX + 5, itemY + 5, itemW - 10, itemH - 10);

// Draw text
            ctx.shadowColor = 'transparent';
            ctx.fillStyle = '#ffffff';
            ctx.font = 'bold 18px Poppins';
            ctx.textAlign = 'center';
            ctx.fillText(`Item (${itemWidth.toFixed(1)} x ${itemDepth.toFixed(1)} in)`, itemX + itemW / 2, itemY + itemH / 2);
            ctx.fillStyle = '#1e40af';
            ctx.fillText(`Pathway (${pathWidth.toFixed(1)} in)`, canvas.width * 0.55 + pathW / 2, canvas.height * 0.2 + canvas.height * 0.2);
            ctx.fillText(`Turn Radius (${turnRadius.toFixed(1)} in)`, canvas.width * 0.55 + pathW + turnR / 2, canvas.height * 0.2 + canvas.height * 0.4 + 20);
            ctx.font = '14px Poppins';
            ctx.fillStyle = '#4b5563';
            ctx.fillText(`Item vs. Pathway Width & Turn`, canvas.width / 2, canvas.height - 30);
        }

function setupPdfDownload(itemType, itemWidth, itemDepth, itemHeight, pathWidth, pathHeight, turnRadius, overallFit, pathWidthClearance, pathHeightClearance, turnClearance) {
            document.getElementById('downloadPdf').onclick = function () {
                const { jsPDF } = window.jspdf;
                const doc = new jsPDF();

// Header
                doc.setFont('helvetica', 'bold');
                doc.setFontSize(20);
                doc.setTextColor(31, 64, 175);
                doc.text('HomeFit Tools - Staircase Move-In Assessment Report', 20, 20);

doc.setFont('helvetica', 'normal');
                doc.setFontSize(10);
                doc.setTextColor(100, 100, 100);
                doc.text(`Generated on: ${new Date().toLocaleString()}`, 20, 28);

// Results
                doc.setFontSize(14);
                doc.setTextColor(0, 0, 0);
                doc.text('Your Staircase Move-In Assessment', 20, 40);

doc.setFontSize(11);
                doc.text(`Item Type: ${itemType}`, 20, 50);
                doc.text(`Item Dimensions: ${itemWidth.toFixed(1)} x ${itemDepth.toFixed(1)} x ${itemHeight.toFixed(1)} in`, 20, 58);
                doc.text(`Pathway Dimensions: ${pathWidth.toFixed(1)} in (width), ${pathHeight.toFixed(1)} in (height)`, 20, 66);
                doc.text(`Turn Radius: ${turnRadius.toFixed(1)} in`, 20, 74);
                doc.text(`Fit Assessment: ${overallFit === 'Yes' ? 'Perfect Fit' : 'May Not Fit Comfortably'}`, 20, 82);
                doc.text(`Clearance: ${pathWidthClearance.toFixed(1)} in (width), ${pathHeightClearance.toFixed(1)} in (height), ${turnClearance.toFixed(1)} in (turn)`, 20, 90);
                doc.text(`Recommendation: ${
                    overallFit === 'Yes' 
                        ? 'The item can navigate the staircase or hallway.' 
                        : 'Consider disassembling the item or using an alternative route.'
                }`, 20, 98);

// Expert Insights
                doc.setFont('helvetica', 'bold');
                doc.setFontSize(12);
                doc.text('Expert Insights', 20, 110);
                doc.setFont('helvetica', 'normal');
                doc.setFontSize(10);
                doc.text('• Clearance: Allow 2 in for safe navigation.', 20, 118);
                doc.text('• Orientation: Rotate or tilt item to fit tight spaces.', 20, 126);
                doc.text('• Turns: Smallest dimension must fit turn radius.', 20, 134);
                doc.text('• Protection: Use padding to prevent damage.', 20, 142);
                doc.text('• Disassembly: Consider disassembling large items.', 20, 150);

doc.save('HomeFit_Staircase_MoveIn_Assessment.pdf');
            };
        }
    </script>