@extends('layouts.app')
@section('page-title', 'Lighting Planner')

@push('page-css')
<style>
/* Lighting Planner */
.lighting-page { max-width: 960px; margin: 0 auto; padding: 24px 20px; }
.lighting-page h1 { font-size: 1.6rem; margin: 0 0 6px 0; color: #333; }
.lighting-page .page-desc { color: #666; font-size: 0.92rem; margin: 0 0 24px 0; }

.lighting-form {
    background: #fff; border: 1px solid #e0e0e0;
    border-radius: var(--brand-border-radius, 8px);
    padding: 28px 24px; margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.lighting-form .form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.lighting-form .form-group label {
    display: block; margin-bottom: 6px; font-weight: 600;
    font-size: 0.88rem; color: #444;
}
.lighting-form .form-group input,
.lighting-form .form-group select {
    width: 100%; padding: 10px 12px; border: 1px solid #d0d0d0;
    border-radius: var(--brand-border-radius, 6px); font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff; color: #333; box-sizing: border-box;
}
.lighting-form .form-group input:focus,
.lighting-form .form-group select:focus {
    outline: none; border-color: var(--brand-primary, #4CAF50);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #4CAF50) 15%, transparent);
}
.lighting-form .form-group small { display: block; margin-top: 4px; color: #888; font-size: 0.78rem; }

.lighting-form .form-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; }
.lighting-form .form-section h3 { margin: 0 0 16px; font-size: 0.95rem; color: #555; display: flex; justify-content: space-between; align-items: center; }

.lighting-submit {
    margin-top: 24px; padding: 12px 32px;
    background: var(--brand-primary, #4CAF50); color: #fff; border: none;
    border-radius: var(--brand-border-radius, 6px);
    font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: background 0.2s, transform 0.15s; width: 100%;
}
.lighting-submit:hover { background: var(--brand-primary-dark, #388E3C); transform: translateY(-1px); }

/* Zone management */
.lighting-zone {
    background: #f8f9fa; border: 1px solid #eee;
    border-radius: var(--brand-border-radius, 6px);
    padding: 16px; margin-bottom: 16px; position: relative;
}
.lighting-zone-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
.lighting-zone-header h4 { margin: 0; font-size: 0.9rem; color: #555; }
.lighting-zone-remove {
    background: none; border: none; color: #dc3545; cursor: pointer;
    font-size: 0.82rem; font-weight: 600; padding: 4px 8px;
}
.lighting-zone-remove:hover { text-decoration: underline; }

.lighting-add-zone {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border: 2px dashed #ccc; border-radius: var(--brand-border-radius, 6px);
    background: none; cursor: pointer; color: #666; font-weight: 600; font-size: 0.88rem;
    transition: border-color 0.2s, color 0.2s;
}
.lighting-add-zone:hover { border-color: var(--brand-primary, #4CAF50); color: var(--brand-primary, #4CAF50); }

/* Transformer section */
.lighting-transformer { display: none; }
.lighting-transformer.active { display: block; }

/* Results */
.lighting-results { display: none; }

.lighting-card {
    background: #fff; border: 1px solid #e0e0e0;
    border-radius: var(--brand-border-radius, 8px);
    margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden;
}
.lighting-card-header { padding: 16px 20px; border-bottom: 1px solid #eee; }
.lighting-card-header h2 { margin: 0; font-size: 1.15rem; color: #333; }
.lighting-card-body { padding: 20px; }

.lighting-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.lighting-stat { text-align: center; padding: 16px; background: #f8f9fa; border-radius: var(--brand-border-radius, 6px); }
.lighting-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--brand-primary, #4CAF50); line-height: 1.2; }
.lighting-stat-label { font-size: 0.82rem; color: #666; margin-top: 4px; }

.lighting-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.lighting-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid #eee; color: #555; font-weight: 600; }
.lighting-table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; color: #333; }
.lighting-table tr:last-child td { border-bottom: none; }

.lighting-badge { display: inline-block; padding: 3px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 700; }
.lighting-badge-ok { background: #dcfce7; color: #166534; }
.lighting-badge-warn { background: #fef3cd; color: #856404; }
.lighting-badge-fail { background: #fef2f2; color: #991b1b; }

.lighting-warning {
    padding: 12px 16px; background: #fef3cd; border: 1px solid #ffc107;
    border-radius: var(--brand-border-radius, 6px); color: #856404;
    font-size: 0.88rem; margin-top: 16px;
}

.lighting-info {
    padding: 12px 16px; background: #e8f4fd; border: 1px solid #bee5eb;
    border-radius: var(--brand-border-radius, 6px); color: #0c5460;
    font-size: 0.85rem; margin-top: 16px;
}

/* Summary card */
.lighting-summary { background: var(--brand-primary, #4CAF50); border-color: var(--brand-primary, #4CAF50); }
.lighting-summary .lighting-card-header { border-bottom-color: rgba(255,255,255,0.15); }
.lighting-summary .lighting-card-header h2 { color: #fff; }
.lighting-summary .lighting-card-body { color: #fff; }
.lighting-summary .lighting-stat { background: rgba(255,255,255,0.15); }
.lighting-summary .lighting-stat-value { color: #fff; }
.lighting-summary .lighting-stat-label { color: rgba(255,255,255,0.8); }

/* ===== Dark Mode ===== */
body.dark-mode .lighting-page h1 { color: #f0f0f0; }
body.dark-mode .lighting-page .page-desc { color: #aaa; }
body.dark-mode .lighting-form { background: #2d2d2d; border-color: #404040; }
body.dark-mode .lighting-form .form-group label { color: #ccc; }
body.dark-mode .lighting-form .form-group input,
body.dark-mode .lighting-form .form-group select { background: #1e1e1e; border-color: #505050; color: #e0e0e0; }
body.dark-mode .lighting-form .form-section { border-top-color: #404040; }
body.dark-mode .lighting-form .form-section h3 { color: #ccc; }
body.dark-mode .lighting-zone { background: #383838; border-color: #505050; }
body.dark-mode .lighting-zone-header h4 { color: #ccc; }
body.dark-mode .lighting-add-zone { border-color: #505050; color: #aaa; }
body.dark-mode .lighting-card { background: #2d2d2d; border-color: #404040; }
body.dark-mode .lighting-card-header { border-bottom-color: #404040; }
body.dark-mode .lighting-card-header h2 { color: #f0f0f0; }
body.dark-mode .lighting-stat { background: #383838; }
body.dark-mode .lighting-table th { color: #ccc; border-bottom-color: #404040; }
body.dark-mode .lighting-table td { color: #ddd; border-bottom-color: #383838; }
body.dark-mode .lighting-warning { background: #453b1a; border-color: #7f6d1d; color: #ffc107; }
body.dark-mode .lighting-info { background: #1a3a4a; border-color: #2e6474; color: #87ceeb; }
body.dark-mode .lighting-badge-ok { background: #064e3b; color: #6ee7b7; }
body.dark-mode .lighting-badge-warn { background: #453b1a; color: #ffc107; }
body.dark-mode .lighting-badge-fail { background: #451a1a; color: #fca5a5; }

/* ===== Theme overrides ===== */
body.theme-forest .lighting-form, body.theme-forest .lighting-card { background: #243020; border-color: #3d5235; }
body.theme-forest .lighting-form .form-group label { color: #b8d4a8; }
body.theme-forest .lighting-form .form-group input, body.theme-forest .lighting-form .form-group select { background: #1a2418; border-color: #3d5235; color: #b8d4a8; }
body.theme-forest .lighting-form .form-section { border-top-color: #3d5235; }
body.theme-forest .lighting-form .form-section h3 { color: #8aaa78; }
body.theme-forest .lighting-zone { background: #1a2418; border-color: #3d5235; }
body.theme-forest .lighting-zone-header h4 { color: #8aaa78; }
body.theme-forest .lighting-card-header { border-bottom-color: #3d5235; }
body.theme-forest .lighting-card-header h2 { color: #b8d4a8; }
body.theme-forest .lighting-page h1 { color: #b8d4a8; }
body.theme-forest .lighting-page .page-desc { color: #8aaa78; }
body.theme-forest .lighting-stat { background: #1a2418; }
body.theme-forest .lighting-table th { color: #8aaa78; }
body.theme-forest .lighting-table td { color: #b8d4a8; }

body.theme-ocean .lighting-form, body.theme-ocean .lighting-card { background: #1c2636; border-color: #2e4460; }
body.theme-ocean .lighting-form .form-group label { color: #a0c4e8; }
body.theme-ocean .lighting-form .form-group input, body.theme-ocean .lighting-form .form-group select { background: #141e2e; border-color: #2e4460; color: #a0c4e8; }
body.theme-ocean .lighting-form .form-section { border-top-color: #2e4460; }
body.theme-ocean .lighting-form .form-section h3 { color: #7a9ab8; }
body.theme-ocean .lighting-zone { background: #141e2e; border-color: #2e4460; }
body.theme-ocean .lighting-zone-header h4 { color: #7a9ab8; }
body.theme-ocean .lighting-card-header { border-bottom-color: #2e4460; }
body.theme-ocean .lighting-card-header h2 { color: #a0c4e8; }
body.theme-ocean .lighting-page h1 { color: #a0c4e8; }
body.theme-ocean .lighting-page .page-desc { color: #7a9ab8; }
body.theme-ocean .lighting-stat { background: #141e2e; }
body.theme-ocean .lighting-table th { color: #7a9ab8; }
body.theme-ocean .lighting-table td { color: #a0c4e8; }

body.theme-slate .lighting-form, body.theme-slate .lighting-card { background: #faf7f2; border-color: #c8bfb0; }
body.theme-slate .lighting-form .form-group label { color: #504840; }
body.theme-slate .lighting-form .form-group input, body.theme-slate .lighting-form .form-group select { background: #f5f0e8; border-color: #c8bfb0; color: #504840; }
body.theme-slate .lighting-form .form-section { border-top-color: #c8bfb0; }
body.theme-slate .lighting-form .form-section h3 { color: #8b7d6b; }
body.theme-slate .lighting-zone { background: #f5f0e8; border-color: #c8bfb0; }
body.theme-slate .lighting-zone-header h4 { color: #8b7d6b; }
body.theme-slate .lighting-card-header { border-bottom-color: #c8bfb0; }
body.theme-slate .lighting-card-header h2 { color: #504840; }
body.theme-slate .lighting-page h1 { color: #504840; }
body.theme-slate .lighting-page .page-desc { color: #8b7d6b; }
body.theme-slate .lighting-stat { background: #f5f0e8; }
body.theme-slate .lighting-table th { color: #8b7d6b; }
body.theme-slate .lighting-table td { color: #504840; }

body.theme-sunset .lighting-form, body.theme-sunset .lighting-card { background: #fff8f5; border-color: #e0bfb0; }
body.theme-sunset .lighting-form .form-group label { color: #6b3f35; }
body.theme-sunset .lighting-form .form-group input, body.theme-sunset .lighting-form .form-group select { background: #fdf5f0; border-color: #e0bfb0; color: #6b3f35; }
body.theme-sunset .lighting-form .form-section { border-top-color: #e0bfb0; }
body.theme-sunset .lighting-form .form-section h3 { color: #a06858; }
body.theme-sunset .lighting-zone { background: #fdf5f0; border-color: #e0bfb0; }
body.theme-sunset .lighting-zone-header h4 { color: #a06858; }
body.theme-sunset .lighting-card-header { border-bottom-color: #e0bfb0; }
body.theme-sunset .lighting-card-header h2 { color: #6b3f35; }
body.theme-sunset .lighting-page h1 { color: #6b3f35; }
body.theme-sunset .lighting-page .page-desc { color: #a06858; }
body.theme-sunset .lighting-stat { background: #fdf5f0; }
body.theme-sunset .lighting-table th { color: #a06858; }
body.theme-sunset .lighting-table td { color: #6b3f35; }

@media (max-width: 640px) {
    .lighting-form .form-grid { grid-template-columns: 1fr; }
    .lighting-stat-grid { grid-template-columns: 1fr 1fr; }
}
</style>
@endpush

@section('content')
<div class="lighting-page">
    <h1>Lighting Planner</h1>
    <p class="page-desc">Plan deck and garden lighting with voltage drop calculations and cable sizing.</p>

    <form id="lightingForm" class="lighting-form">
        <div class="form-grid">
            <div class="form-group">
                <label for="systemVoltage">System Voltage</label>
                <select id="systemVoltage">
                    <option value="12">12V (Low voltage)</option>
                    <option value="240">240V (Mains)</option>
                </select>
            </div>
            <div class="form-group lighting-transformer active" id="transformerGroup">
                <label for="transformerWattage">Transformer Rating</label>
                <select id="transformerWattage">
                    <option value="60">60W</option>
                    <option value="100">100W</option>
                    <option value="150" selected>150W</option>
                    <option value="200">200W</option>
                    <option value="300">300W</option>
                </select>
                <small>Use max 80% of rating</small>
            </div>
        </div>

        <div class="form-section">
            <h3>Light Zones <button type="button" class="lighting-add-zone" id="addZoneBtn">+ Add Zone</button></h3>
        </div>

        <div id="zonesContainer">
            <div class="lighting-zone" data-zone="1">
                <div class="lighting-zone-header">
                    <h4>Zone 1</h4>
                </div>
                <div class="form-grid">
                    <div class="form-group">
                        <label>Light Type</label>
                        <select class="zone-type">
                            <option value="deck-spots">Deck Spots (3W)</option>
                            <option value="post-caps">Post Cap Lights (2W)</option>
                            <option value="step-lights">Step Lights (2W)</option>
                            <option value="rope">Rope/Strip Light (per m, 5W/m)</option>
                            <option value="bollards">Bollard Lights (7W)</option>
                            <option value="custom">Custom Wattage</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Quantity</label>
                        <input type="number" class="zone-qty" min="1" value="6" placeholder="e.g. 6">
                    </div>
                    <div class="form-group">
                        <label>Wattage Each (W)</label>
                        <input type="number" class="zone-watts" min="0.5" step="0.5" value="3">
                    </div>
                </div>
                <div class="form-grid" style="margin-top:0">
                    <div class="form-group">
                        <label>Cable Run Distance (m)</label>
                        <input type="number" class="zone-distance" min="1" step="0.5" value="10" placeholder="e.g. 10">
                        <small>Distance from transformer/consumer unit to lights</small>
                    </div>
                </div>
            </div>
        </div>

        <button type="submit" class="lighting-submit">Calculate</button>
    </form>

    <div id="lightingResults" class="lighting-results">
        <div class="lighting-card lighting-summary">
            <div class="lighting-card-header"><h2>System Summary</h2></div>
            <div class="lighting-card-body">
                <div class="lighting-stat-grid" id="lightingStats"></div>
            </div>
        </div>

        <div class="lighting-card">
            <div class="lighting-card-header"><h2>Per-Zone Breakdown</h2></div>
            <div class="lighting-card-body">
                <table class="lighting-table">
                    <thead><tr><th>Zone</th><th>Wattage</th><th>Current</th><th>Cable Size</th><th>V-Drop</th><th>Status</th></tr></thead>
                    <tbody id="zoneTable"></tbody>
                </table>
                <div id="lightingWarnings"></div>
            </div>
        </div>

        <div class="lighting-card">
            <div class="lighting-card-header"><h2>Recommendations</h2></div>
            <div class="lighting-card-body" id="recommendations"></div>
        </div>
    </div>
</div>
@endsection

@push('page-scripts')
<script>
(function() {
    let zoneCount = 1;

    const defaultWattages = {
        'deck-spots': 3, 'post-caps': 2, 'step-lights': 2,
        'rope': 5, 'bollards': 7, 'custom': 5
    };

    // Show/hide transformer based on voltage
    document.getElementById('systemVoltage').addEventListener('change', function() {
        const tg = document.getElementById('transformerGroup');
        if (this.value === '12') {
            tg.classList.add('active');
        } else {
            tg.classList.remove('active');
        }
    });

    // Add zone
    document.getElementById('addZoneBtn').addEventListener('click', function() {
        zoneCount++;
        const zone = document.createElement('div');
        zone.className = 'lighting-zone';
        zone.dataset.zone = zoneCount;
        zone.innerHTML = `
            <div class="lighting-zone-header">
                <h4>Zone ${zoneCount}</h4>
                <button type="button" class="lighting-zone-remove" onclick="this.closest('.lighting-zone').remove()">Remove</button>
            </div>
            <div class="form-grid">
                <div class="form-group">
                    <label>Light Type</label>
                    <select class="zone-type">
                        <option value="deck-spots">Deck Spots (3W)</option>
                        <option value="post-caps">Post Cap Lights (2W)</option>
                        <option value="step-lights">Step Lights (2W)</option>
                        <option value="rope">Rope/Strip Light (per m, 5W/m)</option>
                        <option value="bollards">Bollard Lights (7W)</option>
                        <option value="custom">Custom Wattage</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Quantity</label>
                    <input type="number" class="zone-qty" min="1" value="4" placeholder="e.g. 4">
                </div>
                <div class="form-group">
                    <label>Wattage Each (W)</label>
                    <input type="number" class="zone-watts" min="0.5" step="0.5" value="3">
                </div>
            </div>
            <div class="form-grid" style="margin-top:0">
                <div class="form-group">
                    <label>Cable Run Distance (m)</label>
                    <input type="number" class="zone-distance" min="1" step="0.5" value="10">
                </div>
            </div>
        `;
        document.getElementById('zonesContainer').appendChild(zone);
        // Hook up auto-wattage
        zone.querySelector('.zone-type').addEventListener('change', handleTypeChange);
    });

    // Auto-fill wattage on type change
    document.querySelectorAll('.zone-type').forEach(el => el.addEventListener('change', handleTypeChange));

    function handleTypeChange(e) {
        const zone = e.target.closest('.lighting-zone');
        const watts = zone.querySelector('.zone-watts');
        watts.value = defaultWattages[e.target.value] || 5;
    }

    document.getElementById('lightingForm').addEventListener('submit', function(e) {
        e.preventDefault();
        calculate();
    });

    function calculate() {
        const voltage = parseFloat(document.getElementById('systemVoltage').value);
        const transformerW = parseFloat(document.getElementById('transformerWattage').value);
        const zones = document.querySelectorAll('.lighting-zone');
        const is12V = voltage === 12;

        const zoneData = [];
        let totalWatts = 0;
        const warnings = [];

        zones.forEach((zone, i) => {
            const qty = parseFloat(zone.querySelector('.zone-qty').value) || 0;
            const watts = parseFloat(zone.querySelector('.zone-watts').value) || 0;
            const distance = parseFloat(zone.querySelector('.zone-distance').value) || 0;
            const type = zone.querySelector('.zone-type').value;

            const zoneWatts = qty * watts;
            const current = zoneWatts / voltage;

            // Recommend cable size
            let cableSize, cableArea;
            if (current < 2) { cableSize = '1.0mm²'; cableArea = 1.0; }
            else if (current < 4) { cableSize = '1.5mm²'; cableArea = 1.5; }
            else if (current < 6) { cableSize = '2.5mm²'; cableArea = 2.5; }
            else { cableSize = '4.0mm²'; cableArea = 4.0; }

            // Voltage drop: V = (2 × L × I × ρ) / A
            // ρ for copper = 0.0175 Ω·mm²/m
            const vDrop = (2 * distance * current * 0.0175) / cableArea;
            const vDropPct = (vDrop / voltage) * 100;

            let status = 'ok';
            if (vDropPct > 5) {
                status = 'fail';
                warnings.push(`Zone ${i + 1}: Voltage drop of ${vDropPct.toFixed(1)}% exceeds 5% limit. Use a larger cable or shorter run.`);
            } else if (vDropPct > 3) {
                status = 'warn';
            }

            totalWatts += zoneWatts;
            zoneData.push({ index: i + 1, type, qty, watts, zoneWatts, current, distance, cableSize, vDrop, vDropPct, status });
        });

        const totalCurrent = totalWatts / voltage;

        // Transformer check
        let transformerOk = true;
        if (is12V) {
            const maxLoad = transformerW * 0.8;
            if (totalWatts > maxLoad) {
                transformerOk = false;
                warnings.push(`Total load (${totalWatts}W) exceeds 80% of transformer rating (${maxLoad}W). Upgrade transformer or reduce lights.`);
            }
        }

        // Stats
        document.getElementById('lightingStats').innerHTML = `
            <div class="lighting-stat"><div class="lighting-stat-value">${totalWatts.toFixed(0)}W</div><div class="lighting-stat-label">Total Load</div></div>
            <div class="lighting-stat"><div class="lighting-stat-value">${totalCurrent.toFixed(2)}A</div><div class="lighting-stat-label">Total Current</div></div>
            <div class="lighting-stat"><div class="lighting-stat-value">${voltage}V</div><div class="lighting-stat-label">System Voltage</div></div>
            ${is12V ? `<div class="lighting-stat"><div class="lighting-stat-value">${transformerOk ? '<span style="color:#6ee7b7">OK</span>' : '<span style="color:#fca5a5">OVER</span>'}</div><div class="lighting-stat-label">Transformer (${transformerW}W)</div></div>` : ''}
            <div class="lighting-stat"><div class="lighting-stat-value">${zoneData.length}</div><div class="lighting-stat-label">Zones</div></div>
        `;

        // Zone table
        document.getElementById('zoneTable').innerHTML = zoneData.map(z => {
            const badgeClass = z.status === 'ok' ? 'lighting-badge-ok' : (z.status === 'warn' ? 'lighting-badge-warn' : 'lighting-badge-fail');
            const badgeText = z.status === 'ok' ? 'OK' : (z.status === 'warn' ? 'WARN' : 'FAIL');
            return `<tr>
                <td><strong>Zone ${z.index}</strong><br><small>${z.qty} × ${z.watts}W</small></td>
                <td>${z.zoneWatts.toFixed(0)}W</td>
                <td>${z.current.toFixed(2)}A</td>
                <td>${z.cableSize}</td>
                <td>${z.vDrop.toFixed(2)}V (${z.vDropPct.toFixed(1)}%)</td>
                <td><span class="lighting-badge ${badgeClass}">${badgeText}</span></td>
            </tr>`;
        }).join('');

        // Warnings
        let warningsHtml = '';
        if (warnings.length) {
            warningsHtml = warnings.map(w => `<div class="lighting-warning">${w}</div>`).join('');
        }
        document.getElementById('lightingWarnings').innerHTML = warningsHtml;

        // Recommendations
        let recsHtml = '<div class="lighting-info"><strong>IP Rating Reminders:</strong><ul style="margin:8px 0 0 16px;padding:0">';
        recsHtml += '<li>IP65 minimum for outdoor ground-level / deck spots</li>';
        recsHtml += '<li>IP44 minimum for covered / sheltered areas</li>';
        recsHtml += '<li>IP67+ for submerged / water feature lighting</li>';
        recsHtml += '</ul></div>';

        if (is12V) {
            recsHtml += `<div class="lighting-info" style="margin-top:12px"><strong>12V System Tips:</strong><ul style="margin:8px 0 0 16px;padding:0">
                <li>Keep cable runs as short as possible to minimise voltage drop</li>
                <li>Use a hub/daisy-chain layout rather than long home runs</li>
                <li>Transformer should be rated at least 25% above total load (${Math.ceil(totalWatts * 1.25)}W recommended)</li>
                <li>Use outdoor-rated connectors with IP68 gel-filled joints</li>
            </ul></div>`;
        } else {
            recsHtml += `<div class="lighting-info" style="margin-top:12px"><strong>240V System Tips:</strong><ul style="margin:8px 0 0 16px;padding:0">
                <li>All outdoor 240V circuits must be protected by a 30mA RCD</li>
                <li>Cables must be SWA (Steel Wire Armoured) or in conduit</li>
                <li>Installation must be carried out or certified by a Part P qualified electrician</li>
            </ul></div>`;
        }

        document.getElementById('recommendations').innerHTML = recsHtml;

        document.getElementById('lightingResults').style.display = 'block';
        document.getElementById('lightingResults').scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
})();
</script>
@endpush