File

Back Back Up Advanced Editor

<?php include "../autoload.php"; ?>

<div class="input-containerx mb-12">
                <h2 class="text-3xl font-semibold text-gray-800 mb-6">Enter Your TV, Soundbar, Console, & Entertainment Unit Details</h2>
                <p class="text-gray-500 mb-8 text-lg">Input dimensions to check if your TV, soundbar, and gaming console fit on/in the entertainment unit.</p>
                <form id="tvStandFitForm" class="space-y-8">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div class="space-y-3">
                            <label for="tvWidth" class="block text-sm font-medium text-gray-700">TV Width (in)</label>
                            <div class="relative flex items-center">
                                <i data-lucide="tv" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="number" id="tvWidth" 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="55.0" step="0.1" min="32" max="85" value="55.0" required>
                            </div>
                            <input type="range" id="tvWidthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="32" max="85" step="0.1" value="55">
                            <p id="tvWidthValue" class="text-sm text-gray-500">55.0 in</p>
                        </div>
                        <div class="space-y-3">
                            <label for="soundbarWidth" class="block text-sm font-medium text-gray-700">Soundbar Width (in)</label>
                            <div class="relative flex items-center">
                                <i data-lucide="volume-2" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="number" id="soundbarWidth" 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="38.0" step="0.1" min="0" max="60" value="38.0" required>
                            </div>
                            <input type="range" id="soundbarWidthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="0" max="60" step="0.1" value="38">
                            <p id="soundbarWidthValue" class="text-sm text-gray-500">38.0 in</p>
                        </div>
                        <div class="space-y-3">
                            <label for="consoleWidth" class="block text-sm font-medium text-gray-700">Console Width (in)</label>
                            <div class="relative flex items-center">
                                <i data-lucide="gamepad-2" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="number" id="consoleWidth" 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="12.0" step="0.1" min="0" max="20" value="12.0" required>
                            </div>
                            <input type="range" id="consoleWidthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="0" max="20" step="0.1" value="12">
                            <p id="consoleWidthValue" class="text-sm text-gray-500">12.0 in</p>
                        </div>
                        <div class="space-y-3">
                            <label for="unitWidth" class="block text-sm font-medium text-gray-700">Unit Width (in)</label>
                            <div class="relative flex items-center">
                                <i data-lucide="table" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                <input type="number" id="unitWidth" 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="60.0" step="0.1" min="36" max="100" value="60.0" required>
                            </div>
                            <input type="range" id="unitWidthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="36" max="100" step="0.1" value="60">
                            <p id="unitWidthValue" class="text-sm text-gray-500">60.0 in</p>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="space-y-3">
                            <label for="unitDepth" class="block text-sm font-medium text-gray-700">Unit 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="unitDepth" 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="18.0" step="0.1" min="12" max="30" value="18.0" required>
                            </div>
                            <input type="range" id="unitDepthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="12" max="30" step="0.1" value="18">
                            <p id="unitDepthValue" class="text-sm text-gray-500">18.0 in</p>
                        </div>
                        <div class="space-y-3">
                            <label for="shelfHeight" class="block text-sm font-medium text-gray-700">Shelf 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="shelfHeight" 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="10.0" step="0.1" min="6" max="20" value="10.0" required>
                            </div>
                            <input type="range" id="shelfHeightRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="6" max="20" step="0.1" value="10">
                            <p id="shelfHeightValue" class="text-sm text-gray-500">10.0 in</p>
                        </div>
                        <div class="space-y-3">
                            <label for="placement" class="block text-sm font-medium text-gray-700">Console Placement</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="placement" 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="On Top">On Top</option>
                                    <option value="In Shelf" selected>In Shelf</option>
                                </select>
                            </div>
                        </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 Entertainment Unit 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 Entertainment Unit Fit 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 interior design and home entertainment setup 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="tv" class="mr-3 text-blue-500 h-6 w-6"></i>
                        Interactive Entertainment Unit Visualization
                    </h3>
                    <div class="relative w-full h-96 bg-gray-200 rounded-xl overflow-hidden shadow-lg">
                        <canvas id="unitCanvas" class="w-full h-full"></canvas>
                    </div>
                    <p class="text-sm text-gray-600 mt-4">Visualization showing the TV, soundbar, and console scaled to the entertainment unit width.</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 Entertainment Setup
                    </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 on sides of TV and soundbar for ventilation and aesthetics.</span>
                        </li>
                        <li class="flex items-start">
                            <i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
                            <span><strong>Depth:</strong> Ensure unit depth supports soundbar and console without overhang.</span>
                        </li>
                        <li class="flex items-start">
                            <i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
                            <span><strong>Shelf Space:</strong> Verify shelf height accommodates console (typically 6-10 in).</span>
                        </li>
                        <li class="flex items-start">
                            <i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
                            <span><strong>Cable Management:</strong> Choose units with rear openings for clean wiring.</span>
                        </li>
                        <li class="flex items-start">
                            <i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
                            <span><strong>Balance:</strong> Center the TV and align components for visual harmony.</span>
                        </li>
                    </ul>
                </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('tvWidth', 'tvWidthRange', 'tvWidthValue');
        syncInputs('soundbarWidth', 'soundbarWidthRange', 'soundbarWidthValue');
        syncInputs('consoleWidth', 'consoleWidthRange', 'consoleWidthValue');
        syncInputs('unitWidth', 'unitWidthRange', 'unitWidthValue');
        syncInputs('unitDepth', 'unitDepthRange', 'unitDepthValue');
        syncInputs('shelfHeight', 'shelfHeightRange', 'shelfHeightValue');

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

function calculateUnitFit() {
            const tvWidth = parseFloat(document.getElementById('tvWidth').value);
            const soundbarWidth = parseFloat(document.getElementById('soundbarWidth').value);
            const consoleWidth = parseFloat(document.getElementById('consoleWidth').value);
            const unitWidth = parseFloat(document.getElementById('unitWidth').value);
            const unitDepth = parseFloat(document.getElementById('unitDepth').value);
            const shelfHeight = parseFloat(document.getElementById('shelfHeight').value);
            const placement = document.getElementById('placement').value;

if (!tvWidth || !soundbarWidth || !consoleWidth || !unitWidth || !unitDepth || !shelfHeight ||
                tvWidth < 32 || soundbarWidth < 0 || consoleWidth < 0 || unitWidth < 36 || unitDepth < 12 || shelfHeight < 6) {
                alert('Please enter valid values (TV Width ≥ 32 in, Soundbar/Console Width ≥ 0 in, Unit Width ≥ 36 in, Depth ≥ 12 in, Shelf Height ≥ 6 in).');
                return;
            }

// Assume typical depths and heights for components
            const tvDepth = 10; // Standard TV stand depth
            const soundbarDepth = 4; // Typical soundbar depth
            const consoleDepth = 12; // Typical console depth
            const consoleHeight = 6; // Typical console height

// Calculate total width needed on top (TV and soundbar, 2 in clearance each side)
            const topWidthNeeded = Math.max(tvWidth, soundbarWidth) + 4; // 2 in each side
            const widthFit = unitWidth >= topWidthNeeded;

// Check depth for TV and soundbar (on top)
            const topDepthFit = unitDepth >= Math.max(tvDepth, soundbarDepth);

// Check console placement
            let consoleFit = true;
            if (placement === 'On Top' && consoleWidth > 0) {
                // Console on top adds to width needed
                const totalTopWidth = Math.max(tvWidth, soundbarWidth, consoleWidth) + 4;
                if (unitWidth < totalTopWidth || unitDepth < consoleDepth) {
                    consoleFit = false;
                }
            } else if (placement === 'In Shelf' && consoleWidth > 0) {
                // Console in shelf checks width, depth, and height
                if (unitWidth < consoleWidth + 4 || unitDepth < consoleDepth || shelfHeight < consoleHeight) {
                    consoleFit = false;
                }
            }

const overallFit = widthFit && topDepthFit && consoleFit ? 'Yes' : 'No';

// Calculate clearances
            const widthClearance = unitWidth - Math.max(tvWidth, soundbarWidth, placement === 'On Top' && consoleWidth > 0 ? consoleWidth : 0);
            const depthClearance = unitDepth - Math.max(tvDepth, soundbarDepth, placement === 'On Top' && consoleWidth > 0 ? consoleDepth : 0);
            const shelfClearance = placement === 'In Shelf' && consoleWidth > 0 ? shelfHeight - consoleHeight : shelfHeight;

// 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">TV Width</p>
                        <p class="text-lg">${tvWidth.toFixed(1)} in</p>
                    </div>
                    <div>
                        <p class="font-medium text-gray-700">Soundbar Width</p>
                        <p class="text-lg">${soundbarWidth.toFixed(1)} in</p>
                    </div>
                    <div>
                        <p class="font-medium text-gray-700">Console Details</p>
                        <p class="text-lg">${consoleWidth.toFixed(1)} in (Placed ${placement})</p>
                    </div>
                    <div>
                        <p class="font-medium text-gray-700">Unit Dimensions</p>
                        <p class="text-lg">${unitWidth.toFixed(1)} x ${unitDepth.toFixed(1)} in, Shelf ${shelfHeight.toFixed(1)} in</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 components fit with ${widthClearance.toFixed(1)} in width clearance and ${depthClearance.toFixed(1)} in depth clearance.`
                                : `Issues: ${
                                    !widthFit ? `Insufficient width (need ≥${topWidthNeeded.toFixed(1)} in, have ${unitWidth.toFixed(1)} in). ` : ''
                                }${
                                    !topDepthFit ? `Insufficient depth (need ≥${Math.max(tvDepth, soundbarDepth).toFixed(1)} in, have ${unitDepth.toFixed(1)} in). ` : ''
                                }${
                                    !consoleFit && consoleWidth > 0 ? `Console does not fit (${placement === 'In Shelf' ? `Shelf too small: need ≥${consoleWidth.toFixed(1)} x ${consoleDepth.toFixed(1)} x ${consoleHeight.toFixed(1)} in` : `Top too small: need ≥${consoleWidth.toFixed(1)} x ${consoleDepth.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> Ensure proper ventilation for electronics and check unit weight capacity.</p>
                </div>
            `;

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

// Draw visualization
            drawVisualization(tvWidth, soundbarWidth, consoleWidth, unitWidth, placement);

// Setup PDF download
            setupPdfDownload(tvWidth, soundbarWidth, consoleWidth, unitWidth, unitDepth, shelfHeight, placement, overallFit, widthClearance, depthClearance, shelfClearance);
        }

function drawVisualization(tvWidth, soundbarWidth, consoleWidth, unitWidth, placement) {
            const canvas = document.getElementById('unitCanvas');
            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 / (unitWidth * 1.5); // Scale to fit canvas
            const tvW = tvWidth * scale;
            const soundbarW = soundbarWidth * scale;
            const consoleW = consoleWidth * scale;
            const unitW = unitWidth * scale;

// Draw background with unit 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 unit outline (dashed)
            ctx.strokeStyle = '#1e40af';
            ctx.lineWidth = 2;
            ctx.setLineDash([5, 5]);
            ctx.strokeRect(canvas.width * 0.55, canvas.height * 0.2, unitW, canvas.height * 0.4);
            ctx.fillStyle = '#bfdbfe';
            ctx.globalAlpha = 0.3;
            ctx.fillRect(canvas.width * 0.55, canvas.height * 0.2, unitW, canvas.height * 0.4);
            ctx.globalAlpha = 1.0;
            ctx.setLineDash([]);

// Draw entertainment unit with realistic effects
            ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
            ctx.shadowBlur = 15;
            ctx.shadowOffsetX = 8;
            ctx.shadowOffsetY = 8;
            ctx.fillStyle = '#2d3748';
            const unitX = canvas.width * 0.15;
            const unitY = canvas.height * 0.3;
            ctx.fillRect(unitX, unitY, unitW, canvas.height * 0.3);

// Draw unit texture
            const unitGradient = ctx.createLinearGradient(unitX, unitY, unitX + unitW, unitY + canvas.height * 0.3);
            unitGradient.addColorStop(0, 'rgba(255, 255, 255, 0.15)');
            unitGradient.addColorStop(1, 'rgba(255, 255, 255, 0.05)');
            ctx.fillStyle = unitGradient;
            ctx.fillRect(unitX + 5, unitY + 5, unitW - 10, canvas.height * 0.3 - 10);

// Draw TV (on top)
            ctx.fillStyle = '#1f2937';
            const tvX = unitX + (unitW - tvW) / 2;
            const tvY = unitY - canvas.height * 0.1;
            ctx.fillRect(tvX, tvY, tvW, canvas.height * 0.08);

// Draw soundbar (below TV)
            if (soundbarWidth > 0) {
                ctx.fillStyle = '#4b5563';
                const soundbarX = unitX + (unitW - soundbarW) / 2;
                const soundbarY = unitY - canvas.height * 0.02;
                ctx.fillRect(soundbarX, soundbarY, soundbarW, canvas.height * 0.02);
            }

// Draw console
            if (consoleWidth > 0) {
                ctx.fillStyle = '#6b7280';
                if (placement === 'On Top') {
                    const consoleX = unitX + (unitW - consoleW) / 2;
                    const consoleY = unitY + canvas.height * 0.08;
                    ctx.fillRect(consoleX, consoleY, consoleW, canvas.height * 0.03);
                } else {
                    const consoleX = unitX + (unitW - consoleW) / 2;
                    const consoleY = unitY + canvas.height * 0.15;
                    ctx.fillRect(consoleX, consoleY, consoleW, canvas.height * 0.03);
                }
            }

// Draw text
            ctx.shadowColor = 'transparent';
            ctx.fillStyle = '#ffffff';
            ctx.font = 'bold 16px Poppins';
            ctx.textAlign = 'center';
            ctx.fillText(`TV (${tvWidth.toFixed(1)} in)`, tvX + tvW / 2, tvY + canvas.height * 0.04);
            if (soundbarWidth > 0) {
                ctx.fillText(`Soundbar (${soundbarWidth.toFixed(1)} in)`, unitX + (unitW - soundbarW) / 2 + soundbarW / 2, unitY - canvas.height * 0.01);
            }
            if (consoleWidth > 0) {
                const consoleX = unitX + (unitW - consoleW) / 2;
                const consoleY = placement === 'On Top' ? unitY + canvas.height * 0.11 : unitY + canvas.height * 0.18;
                ctx.fillText(`Console (${consoleWidth.toFixed(1)} in)`, consoleX + consoleW / 2, consoleY);
            }
            ctx.fillStyle = '#1e40af';
            ctx.fillText(`Unit (${unitWidth.toFixed(1)} in)`, canvas.width * 0.55 + unitW / 2, canvas.height * 0.4);
            ctx.font = '14px Poppins';
            ctx.fillStyle = '#4b5563';
            ctx.fillText(`Components vs. Entertainment Unit Width`, canvas.width / 2, canvas.height - 30);
        }

function setupPdfDownload(tvWidth, soundbarWidth, consoleWidth, unitWidth, unitDepth, shelfHeight, placement, overallFit, widthClearance, depthClearance, shelfClearance) {
            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 - Entertainment Unit Fit 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 Entertainment Unit Fit Assessment', 20, 40);

doc.setFontSize(11);
                doc.text(`TV Width: ${tvWidth.toFixed(1)} in`, 20, 50);
                doc.text(`Soundbar Width: ${soundbarWidth.toFixed(1)} in`, 20, 58);
                doc.text(`Console Width: ${consoleWidth.toFixed(1)} in (Placed ${placement})`, 20, 66);
                doc.text(`Unit Dimensions: ${unitWidth.toFixed(1)} x ${unitDepth.toFixed(1)} in, Shelf ${shelfHeight.toFixed(1)} in`, 20, 74);
                doc.text(`Fit Assessment: ${overallFit === 'Yes' ? 'Perfect Fit' : 'May Not Fit Comfortably'}`, 20, 82);
                doc.text(`Clearance: ${widthClearance.toFixed(1)} in (width), ${depthClearance.toFixed(1)} in (depth), ${shelfClearance.toFixed(1)} in (shelf)`, 20, 90);
                doc.text(`Recommendation: ${
                    overallFit === 'Yes' 
                        ? 'The components are suitable for your entertainment unit.' 
                        : 'Consider a larger unit or different component placement.'
                }`, 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 on sides for ventilation and aesthetics.', 20, 118);
                doc.text('• Depth: Ensure unit depth supports components without overhang.', 20, 126);
                doc.text('• Shelf Space: Verify shelf height fits console (6-10 in).', 20, 134);
                doc.text('• Cable Management: Choose units with rear openings for wiring.', 20, 142);
                doc.text('• Balance: Center TV and align components for visual harmony.', 20, 150);

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