Guangqi LED Street Light Model Comparison<\/title>\n<style>\n\/* ===== Scoped styles: #bx-model-compare-v1 ===== *\/\n#bx-model-compare-v1 {\n max-width: 1100px;\n margin: 0 auto;\n padding: 24px 16px 40px;\n font-family: inherit;\n color: #303030;\n line-height: 1.6;\n box-sizing: border-box;\n}\n\n#bx-model-compare-v1 *,\n#bx-model-compare-v1 *::before,\n#bx-model-compare-v1 *::after {\n box-sizing: border-box;\n}\n\n\/* Headings *\/\n#bx-model-compare-v1 h2,\n#bx-model-compare-v1 h3,\n#bx-model-compare-v1 h4 {\n font-family: inherit !important;\n margin: 0;\n}\n\n#bx-model-compare-v1 h2 {\n text-align: center;\n color: #183090;\n margin-bottom: 8px;\n line-height: 1.3;\n}\n\n#bx-model-compare-v1 .bx-subtitle {\n text-align: center;\n color: #555;\n font-size: 1rem;\n margin-bottom: 32px;\n}\n\n\/* Mono font for data numbers *\/\n#bx-model-compare-v1 .bx-mono {\n font-family: 'IBM Plex Mono', monospace;\n}\n\n\/* Selector area *\/\n#bx-model-compare-v1 .bx-selectors {\n display: flex;\n gap: 24px;\n justify-content: center;\n align-items: flex-end;\n margin-bottom: 32px;\n flex-wrap: wrap;\n}\n\n#bx-model-compare-v1 .bx-selector-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n flex: 1;\n min-width: 240px;\n max-width: 400px;\n}\n\n#bx-model-compare-v1 .bx-selector-group label {\n font-weight: 600;\n font-size: 0.9rem;\n color: #183090;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n#bx-model-compare-v1 .bx-selector-group select {\n width: 100%;\n padding: 12px 14px;\n font-size: 1rem;\n font-family: inherit;\n border: 2px solid #183090;\n border-radius: 6px;\n background: #fff;\n color: #303030;\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23183090' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n background-size: 12px;\n transition: border-color 0.2s;\n}\n\n#bx-model-compare-v1 .bx-selector-group select:focus {\n outline: none;\n border-color: #009048;\n box-shadow: 0 0 0 3px rgba(0, 144, 72, 0.15);\n}\n\n#bx-model-compare-v1 .bx-selector-group select option {\n color: #000018;\n background: #FFFFFF;\n}\n\n#bx-model-compare-v1 .bx-vs-badge {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: #183090;\n color: #fff;\n font-weight: 700;\n font-size: 0.85rem;\n letter-spacing: 0.05em;\n flex-shrink: 0;\n align-self: flex-end;\n margin-bottom: 2px;\n}\n\n\/* Comparison table *\/\n#bx-model-compare-v1 .bx-table-wrap {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n margin-bottom: 28px;\n border-radius: 10px;\n border: 1px solid #e0e4ec;\n box-shadow: 0 2px 12px rgba(24, 48, 144, 0.07);\n}\n\n#bx-model-compare-v1 table {\n width: 100%;\n border-collapse: collapse;\n min-width: 580px;\n}\n\n#bx-model-compare-v1 thead th {\n background: #183090;\n color: #fff;\n padding: 14px 16px;\n text-align: center;\n font-weight: 600;\n font-size: 0.95rem;\n font-family: inherit !important;\n border: none;\n}\n\n#bx-model-compare-v1 thead th:first-child {\n text-align: left;\n width: 28%;\n border-radius: 9px 0 0 0;\n}\n\n#bx-model-compare-v1 thead th:nth-child(2) {\n border-left: 1px solid rgba(255,255,255,0.15);\n width: 36%;\n}\n\n#bx-model-compare-v1 thead th:nth-child(3) {\n border-left: 1px solid rgba(255,255,255,0.15);\n width: 36%;\n border-radius: 0 9px 0 0;\n}\n\n#bx-model-compare-v1 tbody td {\n padding: 12px 16px;\n text-align: center;\n font-size: 0.95rem;\n border-bottom: 1px solid #eef0f5;\n vertical-align: middle;\n transition: background-color 0.2s;\n}\n\n#bx-model-compare-v1 tbody td:first-child {\n text-align: left;\n font-weight: 600;\n color: #183090;\n background: #f5f7fc;\n white-space: nowrap;\n}\n\n#bx-model-compare-v1 tbody tr:last-child td {\n border-bottom: none;\n}\n\n#bx-model-compare-v1 tbody tr:hover td {\n background: #f0f4ff;\n}\n\n#bx-model-compare-v1 tbody tr:hover td:first-child {\n background: #eaeffa;\n}\n\n\/* Winner highlight *\/\n#bx-model-compare-v1 td.bx-winner {\n background: rgba(0, 144, 72, 0.1);\n color: #006030;\n font-weight: 600;\n}\n\n#bx-model-compare-v1 tbody tr:hover td.bx-winner {\n background: rgba(0, 144, 72, 0.16);\n}\n\n\/* Tie \/ equal styling *\/\n#bx-model-compare-v1 td.bx-tie {\n background: transparent;\n}\n\n\/* Common specs row *\/\n#bx-model-compare-v1 .bx-common-row td {\n background: #f9fafb !important;\n color: #555;\n font-style: italic;\n font-size: 0.88rem;\n text-align: center;\n}\n\n#bx-model-compare-v1 .bx-common-row td:first-child {\n background: #f0f2f7 !important;\n color: #183090;\n font-style: normal;\n}\n\n\/* Series badge *\/\n#bx-model-compare-v1 .bx-series-a {\n display: inline-block;\n padding: 3px 10px;\n border-radius: 4px;\n background: #183090;\n color: #fff;\n font-size: 0.82rem;\n font-weight: 600;\n letter-spacing: 0.03em;\n}\n\n#bx-model-compare-v1 .bx-series-b {\n display: inline-block;\n padding: 3px 10px;\n border-radius: 4px;\n background: #009048;\n color: #fff;\n font-size: 0.82rem;\n font-weight: 600;\n letter-spacing: 0.03em;\n}\n\n#bx-model-compare-v1 .bx-series-s {\n display: inline-block;\n padding: 3px 10px;\n border-radius: 4px;\n background: #D81818;\n color: #fff;\n font-size: 0.82rem;\n font-weight: 600;\n letter-spacing: 0.03em;\n}\n\n\/* Placeholder state *\/\n#bx-model-compare-v1 .bx-placeholder {\n text-align: center;\n padding: 60px 20px;\n color: #888;\n font-size: 1.05rem;\n}\n\n#bx-model-compare-v1 .bx-placeholder svg {\n display: block;\n margin: 0 auto 16px;\n opacity: 0.3;\n}\n\n\/* CTA area *\/\n#bx-model-compare-v1 .bx-cta-area {\n text-align: center;\n margin-top: 28px;\n}\n\n#bx-model-compare-v1 .bx-cta-btn {\n display: inline-block;\n padding: 16px 36px;\n font-size: 1.05rem;\n font-weight: 700;\n font-family: inherit;\n color: #fff;\n background: #009048;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n text-transform: none;\n letter-spacing: 0.01em;\n transition: background 0.2s, transform 0.15s, box-shadow 0.2s;\n box-shadow: 0 3px 12px rgba(0, 144, 72, 0.25);\n}\n\n#bx-model-compare-v1 .bx-cta-btn:hover {\n background: #007a3d;\n transform: translateY(-1px);\n box-shadow: 0 5px 18px rgba(0, 144, 72, 0.3);\n}\n\n#bx-model-compare-v1 .bx-cta-btn:active {\n transform: translateY(0);\n box-shadow: 0 2px 8px rgba(0, 144, 72, 0.2);\n}\n\n#bx-model-compare-v1 .bx-cta-btn:disabled {\n background: #aaa;\n cursor: not-allowed;\n box-shadow: none;\n transform: none;\n}\n\n#bx-model-compare-v1 .bx-cta-hint {\n font-size: 0.82rem;\n color: #888;\n margin-top: 8px;\n}\n\n\/* Legend \/ key *\/\n#bx-model-compare-v1 .bx-legend {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-top: 16px;\n flex-wrap: wrap;\n font-size: 0.82rem;\n color: #777;\n}\n\n#bx-model-compare-v1 .bx-legend-item {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n#bx-model-compare-v1 .bx-legend-swatch {\n width: 14px;\n height: 14px;\n border-radius: 3px;\n flex-shrink: 0;\n}\n\n\/* Responsive: 860px breakpoint *\/\n@media (max-width: 860px) {\n #bx-model-compare-v1 {\n padding: 16px 10px 32px;\n }\n\n #bx-model-compare-v1 .bx-selectors {\n flex-direction: column;\n align-items: center;\n gap: 12px;\n }\n\n #bx-model-compare-v1 .bx-selector-group {\n max-width: 100%;\n width: 100%;\n }\n\n #bx-model-compare-v1 .bx-vs-badge {\n width: 36px;\n height: 36px;\n font-size: 0.75rem;\n align-self: center;\n margin-bottom: 0;\n }\n\n #bx-model-compare-v1 thead th {\n padding: 10px 10px;\n font-size: 0.85rem;\n }\n\n #bx-model-compare-v1 tbody td {\n padding: 10px 10px;\n font-size: 0.88rem;\n }\n\n #bx-model-compare-v1 .bx-cta-btn {\n width: 100%;\n max-width: 400px;\n padding: 14px 20px;\n }\n}\n<\/style>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Mono:wght@400;600&display=swap\" rel=\"stylesheet\">\n<\/head>\n<body>\n\n<section id=\"bx-model-compare-v1\">\n\n <h2>Guangqi LED Street Light Model Comparison<\/h2>\n <p class=\"bx-subtitle\">Select two models below to compare specifications side by side<\/p>\n\n \n <div class=\"bx-selectors\">\n <div class=\"bx-selector-group\">\n <label for=\"bx-select-model-a\">Model A<\/label>\n <select id=\"bx-select-model-a\">\n <option value=\"\" disabled selected>— Select first model —<\/option>\n <\/select>\n <\/div>\n <div class=\"bx-vs-badge\">VS<\/div>\n <div class=\"bx-selector-group\">\n <label for=\"bx-select-model-b\">Model B<\/label>\n <select id=\"bx-select-model-b\">\n <option value=\"\" disabled selected>— Select second model —<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div id=\"bx-compare-output\">\n <div class=\"bx-placeholder\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#183090\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n Choose two models above to see a detailed specification comparison.\n <\/div>\n <\/div>\n\n \n <div class=\"bx-cta-area\">\n <button type=\"button\" class=\"bx-cta-btn\" id=\"bx-cta-quote\" disabled>Request Quote for Selected Models<\/button>\n <p class=\"bx-cta-hint\" id=\"bx-cta-hint\">Select two models to enable the quote request<\/p>\n <\/div>\n\n \n <div class=\"bx-legend\">\n <span class=\"bx-legend-item\"><span class=\"bx-legend-swatch\" style=\"background:rgba(0,144,72,0.15);border:1px solid rgba(0,144,72,0.35);\"><\/span> Better \/ higher value<\/span>\n <span class=\"bx-legend-item\"><span class=\"bx-legend-swatch\" style=\"background:#183090;\"><\/span> TKJ-A Series<\/span>\n <span class=\"bx-legend-item\"><span class=\"bx-legend-swatch\" style=\"background:#009048;\"><\/span> TKJ-B Series<\/span>\n <span class=\"bx-legend-item\"><span class=\"bx-legend-swatch\" style=\"background:#D81818;\"><\/span> STSL All-in-One<\/span>\n <\/div>\n\n<\/section>\n\n<script>\n(function() {\n \"use strict\";\n\n \/* ===== MODEL DATA ===== *\/\n var models = [\n {\n id: \"GQ-TKJ-B-200W\",\n name: \"GQ-TKJ-B-200W\",\n series: \"TKJ-B\",\n seriesClass: \"bx-series-b\",\n wattage: 200,\n wattageStr: \"200W\",\n panel: \"60W\",\n panelNum: 60,\n battery: \"15Ah 12.8V LiFePO4\",\n batteryAh: 15,\n batteryV: 12.8,\n efficacy: 170,\n efficacyStr: \"\\u2265170 LM\/W\",\n ledCount: 72,\n ledStr: \"72\\u00d75054 LED\",\n dimensions: \"900\\u00d7401\\u00d7254mm\",\n dimVolume: 900*401*254,\n ip: \"IP65\",\n bestFor: \"Secondary roads, parking lots\"\n },\n {\n id: \"GQ-TKJ-B-300W\",\n name: \"GQ-TKJ-B-300W\",\n series: \"TKJ-B\",\n seriesClass: \"bx-series-b\",\n wattage: 300,\n wattageStr: \"300W\",\n panel: \"80W\",\n panelNum: 80,\n battery: \"20Ah 12.8V LiFePO4\",\n batteryAh: 20,\n batteryV: 12.8,\n efficacy: 170,\n efficacyStr: \"\\u2265170 LM\/W\",\n ledCount: 108,\n ledStr: \"108\\u00d75054 LED\",\n dimensions: \"1140\\u00d7401\\u00d7254mm\",\n dimVolume: 1140*401*254,\n ip: \"IP65\",\n bestFor: \"Main roads, urban streets\"\n },\n {\n id: \"GQ-TKJ-B-400W\",\n name: \"GQ-TKJ-B-400W\",\n series: \"TKJ-B\",\n seriesClass: \"bx-series-b\",\n wattage: 400,\n wattageStr: \"400W\",\n panel: \"100W\",\n panelNum: 100,\n battery: \"25Ah 12.8V LiFePO4\",\n batteryAh: 25,\n batteryV: 12.8,\n efficacy: 170,\n efficacyStr: \"\\u2265170 LM\/W\",\n ledCount: 144,\n ledStr: \"144\\u00d75054 LED\",\n dimensions: \"1380\\u00d7401\\u00d7254mm\",\n dimVolume: 1380*401*254,\n ip: \"IP65\",\n bestFor: \"Highways, arterial roads\"\n },\n {\n id: \"GQ-TKJ-B-500W\",\n name: \"GQ-TKJ-B-500W\",\n series: \"TKJ-B\",\n seriesClass: \"bx-series-b\",\n wattage: 500,\n wattageStr: \"500W\",\n panel: \"120W\",\n panelNum: 120,\n battery: \"30Ah 12.8V LiFePO4\",\n batteryAh: 30,\n batteryV: 12.8,\n efficacy: 170,\n efficacyStr: \"\\u2265170 LM\/W\",\n ledCount: 180,\n ledStr: \"180\\u00d75054 LED\",\n dimensions: \"1660\\u00d7401\\u00d7254mm\",\n dimVolume: 1660*401*254,\n ip: \"IP65\",\n bestFor: \"Expressways, large intersections\"\n },\n {\n id: \"GQ-TKJ-A-100W\",\n name: \"GQ-TKJ-A-100W\",\n series: \"TKJ-A\",\n seriesClass: \"bx-series-a\",\n wattage: 100,\n wattageStr: \"100W\",\n panel: \"60W\",\n panelNum: 60,\n battery: \"60Ah 3.2V LiFePO4\",\n batteryAh: 60,\n batteryV: 3.2,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: 50,\n ledStr: \"50\\u00d75054 LED\",\n dimensions: \"900\\u00d7401\\u00d7175mm\",\n dimVolume: 900*401*175,\n ip: \"IP65\",\n bestFor: \"Village roads, residential areas\"\n },\n {\n id: \"GQ-TKJ-A-200W\",\n name: \"GQ-TKJ-A-200W\",\n series: \"TKJ-A\",\n seriesClass: \"bx-series-a\",\n wattage: 200,\n wattageStr: \"200W\",\n panel: \"80W\",\n panelNum: 80,\n battery: \"80Ah 3.2V LiFePO4\",\n batteryAh: 80,\n batteryV: 3.2,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: 100,\n ledStr: \"100\\u00d75054 LED\",\n dimensions: \"1135\\u00d7401\\u00d7175mm\",\n dimVolume: 1135*401*175,\n ip: \"IP65\",\n bestFor: \"Secondary roads, campus lighting\"\n },\n {\n id: \"GQ-TKJ-A-300W\",\n name: \"GQ-TKJ-A-300W\",\n series: \"TKJ-A\",\n seriesClass: \"bx-series-a\",\n wattage: 300,\n wattageStr: \"300W\",\n panel: \"100W\",\n panelNum: 100,\n battery: \"100Ah 3.2V LiFePO4\",\n batteryAh: 100,\n batteryV: 3.2,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: 150,\n ledStr: \"150\\u00d75054 LED\",\n dimensions: \"1375\\u00d7401\\u00d7175mm\",\n dimVolume: 1375*401*175,\n ip: \"IP65\",\n bestFor: \"Urban streets, industrial parks\"\n },\n {\n id: \"GQ-TKJ-A-400W\",\n name: \"GQ-TKJ-A-400W\",\n series: \"TKJ-A\",\n seriesClass: \"bx-series-a\",\n wattage: 400,\n wattageStr: \"400W\",\n panel: \"120W\",\n panelNum: 120,\n battery: \"120Ah 3.2V LiFePO4\",\n batteryAh: 120,\n batteryV: 3.2,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: 200,\n ledStr: \"200\\u00d75054 LED\",\n dimensions: \"1655\\u00d7401\\u00d7175mm\",\n dimVolume: 1655*401*175,\n ip: \"IP65\",\n bestFor: \"Highways, major roads\"\n },\n {\n id: \"GQ-STSL06-20W\",\n name: \"GQ-STSL06-20W\",\n series: \"STSL All-in-One\",\n seriesClass: \"bx-series-s\",\n wattage: 20,\n wattageStr: \"20W\",\n panel: null,\n panelNum: 0,\n battery: null,\n batteryAh: 0,\n batteryV: 0,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: null,\n ledStr: null,\n dimensions: null,\n dimVolume: 0,\n ip: \"IP65\",\n bestFor: \"Pathways, garden lighting\"\n },\n {\n id: \"GQ-STSL06-35W\",\n name: \"GQ-STSL06-35W\",\n series: \"STSL All-in-One\",\n seriesClass: \"bx-series-s\",\n wattage: 35,\n wattageStr: \"35W\",\n panel: null,\n panelNum: 0,\n battery: null,\n batteryAh: 0,\n batteryV: 0,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: null,\n ledStr: null,\n dimensions: null,\n dimVolume: 0,\n ip: \"IP65\",\n bestFor: \"Residential lanes, small parks\"\n },\n {\n id: \"GQ-STSL09-50W\",\n name: \"GQ-STSL09-50W\",\n series: \"STSL All-in-One\",\n seriesClass: \"bx-series-s\",\n wattage: 50,\n wattageStr: \"50W\",\n panel: null,\n panelNum: 0,\n battery: null,\n batteryAh: 0,\n batteryV: 0,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: null,\n ledStr: null,\n dimensions: null,\n dimVolume: 0,\n ip: \"IP65\",\n bestFor: \"Village roads, courtyards\"\n },\n {\n id: \"GQ-STSL09-100W\",\n name: \"GQ-STSL09-100W\",\n series: \"STSL All-in-One\",\n seriesClass: \"bx-series-s\",\n wattage: 100,\n wattageStr: \"100W\",\n panel: null,\n panelNum: 0,\n battery: null,\n batteryAh: 0,\n batteryV: 0,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: null,\n ledStr: null,\n dimensions: null,\n dimVolume: 0,\n ip: \"IP65\",\n bestFor: \"Secondary roads, commercial areas\"\n }\n ];\n\n \/* ===== ELEMENTS ===== *\/\n var root = document.getElementById(\"bx-model-compare-v1\");\n var selectA = root.querySelector(\"#bx-select-model-a\");\n var selectB = root.querySelector(\"#bx-select-model-b\");\n var output = root.querySelector(\"#bx-compare-output\");\n var ctaBtn = root.querySelector(\"#bx-cta-quote\");\n var ctaHint = root.querySelector(\"#bx-cta-hint\");\n\n \/* ===== POPULATE DROPDOWNS ===== *\/\n function populateDropdowns() {\n var groups = {\n \"TKJ-B Series (12.8V High-Efficiency)\": [],\n \"TKJ-A Series (3.2V High-Capacity)\": [],\n \"STSL All-in-One Solar\": []\n };\n\n models.forEach(function(m) {\n if (m.series === \"TKJ-B\") groups[\"TKJ-B Series (12.8V High-Efficiency)\"].push(m);\n else if (m.series === \"TKJ-A\") groups[\"TKJ-A Series (3.2V High-Capacity)\"].push(m);\n else groups[\"STSL All-in-One Solar\"].push(m);\n });\n\n [selectA, selectB].forEach(function(sel) {\n Object.keys(groups).forEach(function(label) {\n var optgroup = document.createElement(\"optgroup\");\n optgroup.label = label;\n groups[label].forEach(function(m) {\n var opt = document.createElement(\"option\");\n opt.value = m.id;\n opt.textContent = m.name + \" (\" + m.wattageStr + \")\";\n opt.style.color = \"#000018\";\n opt.style.background = \"#FFFFFF\";\n optgroup.appendChild(opt);\n });\n sel.appendChild(optgroup);\n });\n });\n }\n\n \/* ===== FIND MODEL ===== *\/\n function findModel(id) {\n for (var i = 0; i < models.length; i++) {\n if (models[i].id === id) return models[i];\n }\n return null;\n }\n\n \/* ===== COMPARISON LOGIC ===== *\/\n function renderComparison() {\n var idA = selectA.value;\n var idB = selectB.value;\n\n if (!idA || !idB) {\n output.innerHTML = '<div class=\"bx-placeholder\">' +\n '<svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#183090\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>' +\n 'Choose two models above to see a detailed specification comparison.<\/div>';\n ctaBtn.disabled = true;\n ctaHint.textContent = \"Select two models to enable the quote request\";\n return;\n }\n\n if (idA === idB) {\n output.innerHTML = '<div class=\"bx-placeholder\">' +\n '<svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#D81818\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"\/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"\/><\/svg>' +\n 'Please select two different models to compare.<\/div>';\n ctaBtn.disabled = true;\n ctaHint.textContent = \"Select two different models\";\n return;\n }\n\n var mA = findModel(idA);\n var mB = findModel(idB);\n\n if (!mA || !mB) return;\n\n ctaBtn.disabled = false;\n ctaHint.textContent = \"Get pricing for \" + mA.name + \" & \" + mB.name;\n\n \/* Build rows *\/\n var rows = buildSpecRows(mA, mB);\n var html = '<div class=\"bx-table-wrap\"><table>' +\n '<thead><tr>' +\n '<th>Specification<\/th>' +\n '<th>' + escHtml(mA.name) + '<\/th>' +\n '<th>' + escHtml(mB.name) + '<\/th>' +\n '<\/tr><\/thead><tbody>';\n\n rows.forEach(function(row) {\n html += '<tr' + (row.isCommon ? ' class=\"bx-common-row\"' : '') + '>';\n html += '<td>' + row.label + '<\/td>';\n html += '<td class=\"' + (row.winA ? 'bx-winner' : '') + (row.tie ? ' bx-tie' : '') + '\">' + row.valA + '<\/td>';\n html += '<td class=\"' + (row.winB ? 'bx-winner' : '') + (row.tie ? ' bx-tie' : '') + '\">' + row.valB + '<\/td>';\n html += '<\/tr>';\n });\n\n html += '<\/tbody><\/table><\/div>';\n output.innerHTML = html;\n }\n\n function mono(text) {\n if (text === null || text === undefined || text === \"\\u2014\") return \"\\u2014\";\n return '<span class=\"bx-mono\">' + text + '<\/span>';\n }\n\n function escHtml(str) {\n var div = document.createElement(\"div\");\n div.appendChild(document.createTextNode(str));\n return div.innerHTML;\n }\n\n function buildSpecRows(a, b) {\n var rows = [];\n\n \/* Wattage - higher is better for output *\/\n rows.push(numRow(\"Wattage\", a.wattageStr, b.wattageStr, a.wattage, b.wattage, \"higher\"));\n\n \/* Solar Panel *\/\n rows.push(numRow(\"Solar Panel\", a.panel, b.panel, a.panelNum, b.panelNum, \"higher\"));\n\n \/* Battery *\/\n rows.push(textRow(\"Battery\", a.battery, b.battery, a.batteryAh, b.batteryAh, \"higher\"));\n\n \/* System Efficacy *\/\n rows.push(numRow(\"System Efficacy (LM\/W)\", a.efficacyStr, b.efficacyStr, a.efficacy, b.efficacy, \"higher\"));\n\n \/* LED Count *\/\n var ledA = a.ledStr || null;\n var ledB = b.ledStr || null;\n rows.push(numRow(\"LED Count\", ledA, ledB, a.ledCount || 0, b.ledCount || 0, \"higher\"));\n\n \/* Dimensions - smaller is better (compact) *\/\n rows.push(textRow(\"Dimensions\", a.dimensions, b.dimensions, a.dimVolume, b.dimVolume, \"lower\"));\n\n \/* IP Rating *\/\n rows.push({\n label: \"IP Rating\",\n valA: mono(a.ip),\n valB: mono(b.ip),\n winA: false,\n winB: false,\n tie: true,\n isCommon: false\n });\n\n \/* Series *\/\n rows.push({\n label: \"Series\",\n valA: '<span class=\"' + a.seriesClass + '\">' + escHtml(a.series) + '<\/span>',\n valB: '<span class=\"' + b.seriesClass + '\">' + escHtml(b.series) + '<\/span>',\n winA: false,\n winB: false,\n tie: false,\n isCommon: false\n });\n\n \/* Best For *\/\n rows.push({\n label: \"Best For\",\n valA: escHtml(a.bestFor),\n valB: escHtml(b.bestFor),\n winA: false,\n winB: false,\n tie: false,\n isCommon: false\n });\n\n \/* Common specs *\/\n rows.push({\n label: \"Common Specs\",\n valA: mono(\"IP65\") + \" · \" + mono(\"50,000h\") + \" · CRI>\" + mono(\"70\") + \" · \" + mono(\"-20~50\\u00b0C\"),\n valB: mono(\"IP65\") + \" · \" + mono(\"50,000h\") + \" · CRI>\" + mono(\"70\") + \" · \" + mono(\"-20~50\\u00b0C\"),\n winA: false,\n winB: false,\n tie: true,\n isCommon: true\n });\n\n return rows;\n }\n\n function numRow(label, displayA, displayB, numA, numB, direction) {\n var valA = displayA ? mono(displayA) : \"\\u2014\";\n var valB = displayB ? mono(displayB) : \"\\u2014\";\n var winA = false, winB = false, tie = false;\n\n if (numA && numB && numA !== numB) {\n if (direction === \"higher\") {\n winA = numA > numB;\n winB = numB > numA;\n } else {\n winA = numA < numB;\n winB = numB < numA;\n }\n } else if (numA === numB) {\n tie = true;\n }\n\n \/* If one has data and other doesn't, the one with data wins *\/\n if (displayA && !displayB) { winA = true; winB = false; tie = false; }\n if (!displayA && displayB) { winB = true; winA = false; tie = false; }\n\n return { label: label, valA: valA, valB: valB, winA: winA, winB: winB, tie: tie, isCommon: false };\n }\n\n function textRow(label, displayA, displayB, numA, numB, direction) {\n var valA = displayA ? mono(displayA) : \"\\u2014\";\n var valB = displayB ? mono(displayB) : \"\\u2014\";\n var winA = false, winB = false, tie = false;\n\n if (numA && numB && numA !== numB) {\n if (direction === \"higher\") {\n winA = numA > numB;\n winB = numB > numA;\n } else {\n winA = numA < numB;\n winB = numB < numA;\n }\n } else if (numA === numB) {\n tie = true;\n }\n\n if (displayA && !displayB) { winA = true; winB = false; tie = false; }\n if (!displayA && displayB) { winB = true; winA = false; tie = false; }\n\n return { label: label, valA: valA, valB: valB, winA: winA, winB: winB, tie: tie, isCommon: false };\n }\n\n \/* ===== CTA HANDLER ===== *\/\n function handleCTA() {\n var idA = selectA.value;\n var idB = selectB.value;\n if (!idA || !idB || idA === idB) return;\n\n \/* Try to open the CT popup *\/\n var popup = document.querySelector(\"#ct-popup-801\");\n if (popup) {\n \/* Oxygen Builder \/ Breakdance popup trigger *\/\n if (typeof jQuery !== \"undefined\" && jQuery(popup).length) {\n jQuery(popup).trigger(\"click\");\n }\n \/* Try common popup open methods *\/\n if (popup.classList.contains(\"ct-popup\")) {\n popup.classList.add(\"active\");\n }\n \/* Dispatch a custom event for framework compat *\/\n popup.dispatchEvent(new CustomEvent(\"ct-popup-open\", { bubbles: true }));\n }\n\n \/* Fallback: try triggering via Breakdance-specific approach *\/\n if (typeof window.breakdancePopupOpen === \"function\") {\n window.breakdancePopupOpen(801);\n }\n }\n\n \/* ===== EVENT LISTENERS ===== *\/\n selectA.addEventListener(\"change\", renderComparison);\n selectB.addEventListener(\"change\", renderComparison);\n ctaBtn.addEventListener(\"click\", handleCTA);\n\n \/* ===== INIT ===== *\/\n populateDropdowns();\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\n<\/div><\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Guangqi LED Street Light Model Comparison Guangqi LED Street Light Model Comparison Select two models below to compare specifications side by side Model A — Select first model — VS Model B — Select second model — Choose two models above to see a detailed specification comparison. Request Quote for Selected Models Select two models […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":1200,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":"","footnotes":""},"class_list":["post-1299","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/pages\/1299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/comments?post=1299"}],"version-history":[{"count":0,"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/pages\/1299\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/pages\/1200"}],"wp:attachment":[{"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/media?parent=1299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\n\n\nGuangqi LED Street Light Model Comparison<\/title>\n<style>\n\/* ===== Scoped styles: #bx-model-compare-v1 ===== *\/\n#bx-model-compare-v1 {\n max-width: 1100px;\n margin: 0 auto;\n padding: 24px 16px 40px;\n font-family: inherit;\n color: #303030;\n line-height: 1.6;\n box-sizing: border-box;\n}\n\n#bx-model-compare-v1 *,\n#bx-model-compare-v1 *::before,\n#bx-model-compare-v1 *::after {\n box-sizing: border-box;\n}\n\n\/* Headings *\/\n#bx-model-compare-v1 h2,\n#bx-model-compare-v1 h3,\n#bx-model-compare-v1 h4 {\n font-family: inherit !important;\n margin: 0;\n}\n\n#bx-model-compare-v1 h2 {\n text-align: center;\n color: #183090;\n margin-bottom: 8px;\n line-height: 1.3;\n}\n\n#bx-model-compare-v1 .bx-subtitle {\n text-align: center;\n color: #555;\n font-size: 1rem;\n margin-bottom: 32px;\n}\n\n\/* Mono font for data numbers *\/\n#bx-model-compare-v1 .bx-mono {\n font-family: 'IBM Plex Mono', monospace;\n}\n\n\/* Selector area *\/\n#bx-model-compare-v1 .bx-selectors {\n display: flex;\n gap: 24px;\n justify-content: center;\n align-items: flex-end;\n margin-bottom: 32px;\n flex-wrap: wrap;\n}\n\n#bx-model-compare-v1 .bx-selector-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n flex: 1;\n min-width: 240px;\n max-width: 400px;\n}\n\n#bx-model-compare-v1 .bx-selector-group label {\n font-weight: 600;\n font-size: 0.9rem;\n color: #183090;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n#bx-model-compare-v1 .bx-selector-group select {\n width: 100%;\n padding: 12px 14px;\n font-size: 1rem;\n font-family: inherit;\n border: 2px solid #183090;\n border-radius: 6px;\n background: #fff;\n color: #303030;\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23183090' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n background-size: 12px;\n transition: border-color 0.2s;\n}\n\n#bx-model-compare-v1 .bx-selector-group select:focus {\n outline: none;\n border-color: #009048;\n box-shadow: 0 0 0 3px rgba(0, 144, 72, 0.15);\n}\n\n#bx-model-compare-v1 .bx-selector-group select option {\n color: #000018;\n background: #FFFFFF;\n}\n\n#bx-model-compare-v1 .bx-vs-badge {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: #183090;\n color: #fff;\n font-weight: 700;\n font-size: 0.85rem;\n letter-spacing: 0.05em;\n flex-shrink: 0;\n align-self: flex-end;\n margin-bottom: 2px;\n}\n\n\/* Comparison table *\/\n#bx-model-compare-v1 .bx-table-wrap {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n margin-bottom: 28px;\n border-radius: 10px;\n border: 1px solid #e0e4ec;\n box-shadow: 0 2px 12px rgba(24, 48, 144, 0.07);\n}\n\n#bx-model-compare-v1 table {\n width: 100%;\n border-collapse: collapse;\n min-width: 580px;\n}\n\n#bx-model-compare-v1 thead th {\n background: #183090;\n color: #fff;\n padding: 14px 16px;\n text-align: center;\n font-weight: 600;\n font-size: 0.95rem;\n font-family: inherit !important;\n border: none;\n}\n\n#bx-model-compare-v1 thead th:first-child {\n text-align: left;\n width: 28%;\n border-radius: 9px 0 0 0;\n}\n\n#bx-model-compare-v1 thead th:nth-child(2) {\n border-left: 1px solid rgba(255,255,255,0.15);\n width: 36%;\n}\n\n#bx-model-compare-v1 thead th:nth-child(3) {\n border-left: 1px solid rgba(255,255,255,0.15);\n width: 36%;\n border-radius: 0 9px 0 0;\n}\n\n#bx-model-compare-v1 tbody td {\n padding: 12px 16px;\n text-align: center;\n font-size: 0.95rem;\n border-bottom: 1px solid #eef0f5;\n vertical-align: middle;\n transition: background-color 0.2s;\n}\n\n#bx-model-compare-v1 tbody td:first-child {\n text-align: left;\n font-weight: 600;\n color: #183090;\n background: #f5f7fc;\n white-space: nowrap;\n}\n\n#bx-model-compare-v1 tbody tr:last-child td {\n border-bottom: none;\n}\n\n#bx-model-compare-v1 tbody tr:hover td {\n background: #f0f4ff;\n}\n\n#bx-model-compare-v1 tbody tr:hover td:first-child {\n background: #eaeffa;\n}\n\n\/* Winner highlight *\/\n#bx-model-compare-v1 td.bx-winner {\n background: rgba(0, 144, 72, 0.1);\n color: #006030;\n font-weight: 600;\n}\n\n#bx-model-compare-v1 tbody tr:hover td.bx-winner {\n background: rgba(0, 144, 72, 0.16);\n}\n\n\/* Tie \/ equal styling *\/\n#bx-model-compare-v1 td.bx-tie {\n background: transparent;\n}\n\n\/* Common specs row *\/\n#bx-model-compare-v1 .bx-common-row td {\n background: #f9fafb !important;\n color: #555;\n font-style: italic;\n font-size: 0.88rem;\n text-align: center;\n}\n\n#bx-model-compare-v1 .bx-common-row td:first-child {\n background: #f0f2f7 !important;\n color: #183090;\n font-style: normal;\n}\n\n\/* Series badge *\/\n#bx-model-compare-v1 .bx-series-a {\n display: inline-block;\n padding: 3px 10px;\n border-radius: 4px;\n background: #183090;\n color: #fff;\n font-size: 0.82rem;\n font-weight: 600;\n letter-spacing: 0.03em;\n}\n\n#bx-model-compare-v1 .bx-series-b {\n display: inline-block;\n padding: 3px 10px;\n border-radius: 4px;\n background: #009048;\n color: #fff;\n font-size: 0.82rem;\n font-weight: 600;\n letter-spacing: 0.03em;\n}\n\n#bx-model-compare-v1 .bx-series-s {\n display: inline-block;\n padding: 3px 10px;\n border-radius: 4px;\n background: #D81818;\n color: #fff;\n font-size: 0.82rem;\n font-weight: 600;\n letter-spacing: 0.03em;\n}\n\n\/* Placeholder state *\/\n#bx-model-compare-v1 .bx-placeholder {\n text-align: center;\n padding: 60px 20px;\n color: #888;\n font-size: 1.05rem;\n}\n\n#bx-model-compare-v1 .bx-placeholder svg {\n display: block;\n margin: 0 auto 16px;\n opacity: 0.3;\n}\n\n\/* CTA area *\/\n#bx-model-compare-v1 .bx-cta-area {\n text-align: center;\n margin-top: 28px;\n}\n\n#bx-model-compare-v1 .bx-cta-btn {\n display: inline-block;\n padding: 16px 36px;\n font-size: 1.05rem;\n font-weight: 700;\n font-family: inherit;\n color: #fff;\n background: #009048;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n text-transform: none;\n letter-spacing: 0.01em;\n transition: background 0.2s, transform 0.15s, box-shadow 0.2s;\n box-shadow: 0 3px 12px rgba(0, 144, 72, 0.25);\n}\n\n#bx-model-compare-v1 .bx-cta-btn:hover {\n background: #007a3d;\n transform: translateY(-1px);\n box-shadow: 0 5px 18px rgba(0, 144, 72, 0.3);\n}\n\n#bx-model-compare-v1 .bx-cta-btn:active {\n transform: translateY(0);\n box-shadow: 0 2px 8px rgba(0, 144, 72, 0.2);\n}\n\n#bx-model-compare-v1 .bx-cta-btn:disabled {\n background: #aaa;\n cursor: not-allowed;\n box-shadow: none;\n transform: none;\n}\n\n#bx-model-compare-v1 .bx-cta-hint {\n font-size: 0.82rem;\n color: #888;\n margin-top: 8px;\n}\n\n\/* Legend \/ key *\/\n#bx-model-compare-v1 .bx-legend {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-top: 16px;\n flex-wrap: wrap;\n font-size: 0.82rem;\n color: #777;\n}\n\n#bx-model-compare-v1 .bx-legend-item {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n#bx-model-compare-v1 .bx-legend-swatch {\n width: 14px;\n height: 14px;\n border-radius: 3px;\n flex-shrink: 0;\n}\n\n\/* Responsive: 860px breakpoint *\/\n@media (max-width: 860px) {\n #bx-model-compare-v1 {\n padding: 16px 10px 32px;\n }\n\n #bx-model-compare-v1 .bx-selectors {\n flex-direction: column;\n align-items: center;\n gap: 12px;\n }\n\n #bx-model-compare-v1 .bx-selector-group {\n max-width: 100%;\n width: 100%;\n }\n\n #bx-model-compare-v1 .bx-vs-badge {\n width: 36px;\n height: 36px;\n font-size: 0.75rem;\n align-self: center;\n margin-bottom: 0;\n }\n\n #bx-model-compare-v1 thead th {\n padding: 10px 10px;\n font-size: 0.85rem;\n }\n\n #bx-model-compare-v1 tbody td {\n padding: 10px 10px;\n font-size: 0.88rem;\n }\n\n #bx-model-compare-v1 .bx-cta-btn {\n width: 100%;\n max-width: 400px;\n padding: 14px 20px;\n }\n}\n<\/style>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Mono:wght@400;600&display=swap\" rel=\"stylesheet\">\n<\/head>\n<body>\n\n<section id=\"bx-model-compare-v1\">\n\n <h2>Guangqi LED Street Light Model Comparison<\/h2>\n <p class=\"bx-subtitle\">Select two models below to compare specifications side by side<\/p>\n\n \n <div class=\"bx-selectors\">\n <div class=\"bx-selector-group\">\n <label for=\"bx-select-model-a\">Model A<\/label>\n <select id=\"bx-select-model-a\">\n <option value=\"\" disabled selected>— Select first model —<\/option>\n <\/select>\n <\/div>\n <div class=\"bx-vs-badge\">VS<\/div>\n <div class=\"bx-selector-group\">\n <label for=\"bx-select-model-b\">Model B<\/label>\n <select id=\"bx-select-model-b\">\n <option value=\"\" disabled selected>— Select second model —<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div id=\"bx-compare-output\">\n <div class=\"bx-placeholder\">\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#183090\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n Choose two models above to see a detailed specification comparison.\n <\/div>\n <\/div>\n\n \n <div class=\"bx-cta-area\">\n <button type=\"button\" class=\"bx-cta-btn\" id=\"bx-cta-quote\" disabled>Request Quote for Selected Models<\/button>\n <p class=\"bx-cta-hint\" id=\"bx-cta-hint\">Select two models to enable the quote request<\/p>\n <\/div>\n\n \n <div class=\"bx-legend\">\n <span class=\"bx-legend-item\"><span class=\"bx-legend-swatch\" style=\"background:rgba(0,144,72,0.15);border:1px solid rgba(0,144,72,0.35);\"><\/span> Better \/ higher value<\/span>\n <span class=\"bx-legend-item\"><span class=\"bx-legend-swatch\" style=\"background:#183090;\"><\/span> TKJ-A Series<\/span>\n <span class=\"bx-legend-item\"><span class=\"bx-legend-swatch\" style=\"background:#009048;\"><\/span> TKJ-B Series<\/span>\n <span class=\"bx-legend-item\"><span class=\"bx-legend-swatch\" style=\"background:#D81818;\"><\/span> STSL All-in-One<\/span>\n <\/div>\n\n<\/section>\n\n<script>\n(function() {\n \"use strict\";\n\n \/* ===== MODEL DATA ===== *\/\n var models = [\n {\n id: \"GQ-TKJ-B-200W\",\n name: \"GQ-TKJ-B-200W\",\n series: \"TKJ-B\",\n seriesClass: \"bx-series-b\",\n wattage: 200,\n wattageStr: \"200W\",\n panel: \"60W\",\n panelNum: 60,\n battery: \"15Ah 12.8V LiFePO4\",\n batteryAh: 15,\n batteryV: 12.8,\n efficacy: 170,\n efficacyStr: \"\\u2265170 LM\/W\",\n ledCount: 72,\n ledStr: \"72\\u00d75054 LED\",\n dimensions: \"900\\u00d7401\\u00d7254mm\",\n dimVolume: 900*401*254,\n ip: \"IP65\",\n bestFor: \"Secondary roads, parking lots\"\n },\n {\n id: \"GQ-TKJ-B-300W\",\n name: \"GQ-TKJ-B-300W\",\n series: \"TKJ-B\",\n seriesClass: \"bx-series-b\",\n wattage: 300,\n wattageStr: \"300W\",\n panel: \"80W\",\n panelNum: 80,\n battery: \"20Ah 12.8V LiFePO4\",\n batteryAh: 20,\n batteryV: 12.8,\n efficacy: 170,\n efficacyStr: \"\\u2265170 LM\/W\",\n ledCount: 108,\n ledStr: \"108\\u00d75054 LED\",\n dimensions: \"1140\\u00d7401\\u00d7254mm\",\n dimVolume: 1140*401*254,\n ip: \"IP65\",\n bestFor: \"Main roads, urban streets\"\n },\n {\n id: \"GQ-TKJ-B-400W\",\n name: \"GQ-TKJ-B-400W\",\n series: \"TKJ-B\",\n seriesClass: \"bx-series-b\",\n wattage: 400,\n wattageStr: \"400W\",\n panel: \"100W\",\n panelNum: 100,\n battery: \"25Ah 12.8V LiFePO4\",\n batteryAh: 25,\n batteryV: 12.8,\n efficacy: 170,\n efficacyStr: \"\\u2265170 LM\/W\",\n ledCount: 144,\n ledStr: \"144\\u00d75054 LED\",\n dimensions: \"1380\\u00d7401\\u00d7254mm\",\n dimVolume: 1380*401*254,\n ip: \"IP65\",\n bestFor: \"Highways, arterial roads\"\n },\n {\n id: \"GQ-TKJ-B-500W\",\n name: \"GQ-TKJ-B-500W\",\n series: \"TKJ-B\",\n seriesClass: \"bx-series-b\",\n wattage: 500,\n wattageStr: \"500W\",\n panel: \"120W\",\n panelNum: 120,\n battery: \"30Ah 12.8V LiFePO4\",\n batteryAh: 30,\n batteryV: 12.8,\n efficacy: 170,\n efficacyStr: \"\\u2265170 LM\/W\",\n ledCount: 180,\n ledStr: \"180\\u00d75054 LED\",\n dimensions: \"1660\\u00d7401\\u00d7254mm\",\n dimVolume: 1660*401*254,\n ip: \"IP65\",\n bestFor: \"Expressways, large intersections\"\n },\n {\n id: \"GQ-TKJ-A-100W\",\n name: \"GQ-TKJ-A-100W\",\n series: \"TKJ-A\",\n seriesClass: \"bx-series-a\",\n wattage: 100,\n wattageStr: \"100W\",\n panel: \"60W\",\n panelNum: 60,\n battery: \"60Ah 3.2V LiFePO4\",\n batteryAh: 60,\n batteryV: 3.2,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: 50,\n ledStr: \"50\\u00d75054 LED\",\n dimensions: \"900\\u00d7401\\u00d7175mm\",\n dimVolume: 900*401*175,\n ip: \"IP65\",\n bestFor: \"Village roads, residential areas\"\n },\n {\n id: \"GQ-TKJ-A-200W\",\n name: \"GQ-TKJ-A-200W\",\n series: \"TKJ-A\",\n seriesClass: \"bx-series-a\",\n wattage: 200,\n wattageStr: \"200W\",\n panel: \"80W\",\n panelNum: 80,\n battery: \"80Ah 3.2V LiFePO4\",\n batteryAh: 80,\n batteryV: 3.2,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: 100,\n ledStr: \"100\\u00d75054 LED\",\n dimensions: \"1135\\u00d7401\\u00d7175mm\",\n dimVolume: 1135*401*175,\n ip: \"IP65\",\n bestFor: \"Secondary roads, campus lighting\"\n },\n {\n id: \"GQ-TKJ-A-300W\",\n name: \"GQ-TKJ-A-300W\",\n series: \"TKJ-A\",\n seriesClass: \"bx-series-a\",\n wattage: 300,\n wattageStr: \"300W\",\n panel: \"100W\",\n panelNum: 100,\n battery: \"100Ah 3.2V LiFePO4\",\n batteryAh: 100,\n batteryV: 3.2,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: 150,\n ledStr: \"150\\u00d75054 LED\",\n dimensions: \"1375\\u00d7401\\u00d7175mm\",\n dimVolume: 1375*401*175,\n ip: \"IP65\",\n bestFor: \"Urban streets, industrial parks\"\n },\n {\n id: \"GQ-TKJ-A-400W\",\n name: \"GQ-TKJ-A-400W\",\n series: \"TKJ-A\",\n seriesClass: \"bx-series-a\",\n wattage: 400,\n wattageStr: \"400W\",\n panel: \"120W\",\n panelNum: 120,\n battery: \"120Ah 3.2V LiFePO4\",\n batteryAh: 120,\n batteryV: 3.2,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: 200,\n ledStr: \"200\\u00d75054 LED\",\n dimensions: \"1655\\u00d7401\\u00d7175mm\",\n dimVolume: 1655*401*175,\n ip: \"IP65\",\n bestFor: \"Highways, major roads\"\n },\n {\n id: \"GQ-STSL06-20W\",\n name: \"GQ-STSL06-20W\",\n series: \"STSL All-in-One\",\n seriesClass: \"bx-series-s\",\n wattage: 20,\n wattageStr: \"20W\",\n panel: null,\n panelNum: 0,\n battery: null,\n batteryAh: 0,\n batteryV: 0,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: null,\n ledStr: null,\n dimensions: null,\n dimVolume: 0,\n ip: \"IP65\",\n bestFor: \"Pathways, garden lighting\"\n },\n {\n id: \"GQ-STSL06-35W\",\n name: \"GQ-STSL06-35W\",\n series: \"STSL All-in-One\",\n seriesClass: \"bx-series-s\",\n wattage: 35,\n wattageStr: \"35W\",\n panel: null,\n panelNum: 0,\n battery: null,\n batteryAh: 0,\n batteryV: 0,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: null,\n ledStr: null,\n dimensions: null,\n dimVolume: 0,\n ip: \"IP65\",\n bestFor: \"Residential lanes, small parks\"\n },\n {\n id: \"GQ-STSL09-50W\",\n name: \"GQ-STSL09-50W\",\n series: \"STSL All-in-One\",\n seriesClass: \"bx-series-s\",\n wattage: 50,\n wattageStr: \"50W\",\n panel: null,\n panelNum: 0,\n battery: null,\n batteryAh: 0,\n batteryV: 0,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: null,\n ledStr: null,\n dimensions: null,\n dimVolume: 0,\n ip: \"IP65\",\n bestFor: \"Village roads, courtyards\"\n },\n {\n id: \"GQ-STSL09-100W\",\n name: \"GQ-STSL09-100W\",\n series: \"STSL All-in-One\",\n seriesClass: \"bx-series-s\",\n wattage: 100,\n wattageStr: \"100W\",\n panel: null,\n panelNum: 0,\n battery: null,\n batteryAh: 0,\n batteryV: 0,\n efficacy: 150,\n efficacyStr: \"\\u2265150 LM\/W\",\n ledCount: null,\n ledStr: null,\n dimensions: null,\n dimVolume: 0,\n ip: \"IP65\",\n bestFor: \"Secondary roads, commercial areas\"\n }\n ];\n\n \/* ===== ELEMENTS ===== *\/\n var root = document.getElementById(\"bx-model-compare-v1\");\n var selectA = root.querySelector(\"#bx-select-model-a\");\n var selectB = root.querySelector(\"#bx-select-model-b\");\n var output = root.querySelector(\"#bx-compare-output\");\n var ctaBtn = root.querySelector(\"#bx-cta-quote\");\n var ctaHint = root.querySelector(\"#bx-cta-hint\");\n\n \/* ===== POPULATE DROPDOWNS ===== *\/\n function populateDropdowns() {\n var groups = {\n \"TKJ-B Series (12.8V High-Efficiency)\": [],\n \"TKJ-A Series (3.2V High-Capacity)\": [],\n \"STSL All-in-One Solar\": []\n };\n\n models.forEach(function(m) {\n if (m.series === \"TKJ-B\") groups[\"TKJ-B Series (12.8V High-Efficiency)\"].push(m);\n else if (m.series === \"TKJ-A\") groups[\"TKJ-A Series (3.2V High-Capacity)\"].push(m);\n else groups[\"STSL All-in-One Solar\"].push(m);\n });\n\n [selectA, selectB].forEach(function(sel) {\n Object.keys(groups).forEach(function(label) {\n var optgroup = document.createElement(\"optgroup\");\n optgroup.label = label;\n groups[label].forEach(function(m) {\n var opt = document.createElement(\"option\");\n opt.value = m.id;\n opt.textContent = m.name + \" (\" + m.wattageStr + \")\";\n opt.style.color = \"#000018\";\n opt.style.background = \"#FFFFFF\";\n optgroup.appendChild(opt);\n });\n sel.appendChild(optgroup);\n });\n });\n }\n\n \/* ===== FIND MODEL ===== *\/\n function findModel(id) {\n for (var i = 0; i < models.length; i++) {\n if (models[i].id === id) return models[i];\n }\n return null;\n }\n\n \/* ===== COMPARISON LOGIC ===== *\/\n function renderComparison() {\n var idA = selectA.value;\n var idB = selectB.value;\n\n if (!idA || !idB) {\n output.innerHTML = '<div class=\"bx-placeholder\">' +\n '<svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#183090\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>' +\n 'Choose two models above to see a detailed specification comparison.<\/div>';\n ctaBtn.disabled = true;\n ctaHint.textContent = \"Select two models to enable the quote request\";\n return;\n }\n\n if (idA === idB) {\n output.innerHTML = '<div class=\"bx-placeholder\">' +\n '<svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#D81818\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"\/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"\/><\/svg>' +\n 'Please select two different models to compare.<\/div>';\n ctaBtn.disabled = true;\n ctaHint.textContent = \"Select two different models\";\n return;\n }\n\n var mA = findModel(idA);\n var mB = findModel(idB);\n\n if (!mA || !mB) return;\n\n ctaBtn.disabled = false;\n ctaHint.textContent = \"Get pricing for \" + mA.name + \" & \" + mB.name;\n\n \/* Build rows *\/\n var rows = buildSpecRows(mA, mB);\n var html = '<div class=\"bx-table-wrap\"><table>' +\n '<thead><tr>' +\n '<th>Specification<\/th>' +\n '<th>' + escHtml(mA.name) + '<\/th>' +\n '<th>' + escHtml(mB.name) + '<\/th>' +\n '<\/tr><\/thead><tbody>';\n\n rows.forEach(function(row) {\n html += '<tr' + (row.isCommon ? ' class=\"bx-common-row\"' : '') + '>';\n html += '<td>' + row.label + '<\/td>';\n html += '<td class=\"' + (row.winA ? 'bx-winner' : '') + (row.tie ? ' bx-tie' : '') + '\">' + row.valA + '<\/td>';\n html += '<td class=\"' + (row.winB ? 'bx-winner' : '') + (row.tie ? ' bx-tie' : '') + '\">' + row.valB + '<\/td>';\n html += '<\/tr>';\n });\n\n html += '<\/tbody><\/table><\/div>';\n output.innerHTML = html;\n }\n\n function mono(text) {\n if (text === null || text === undefined || text === \"\\u2014\") return \"\\u2014\";\n return '<span class=\"bx-mono\">' + text + '<\/span>';\n }\n\n function escHtml(str) {\n var div = document.createElement(\"div\");\n div.appendChild(document.createTextNode(str));\n return div.innerHTML;\n }\n\n function buildSpecRows(a, b) {\n var rows = [];\n\n \/* Wattage - higher is better for output *\/\n rows.push(numRow(\"Wattage\", a.wattageStr, b.wattageStr, a.wattage, b.wattage, \"higher\"));\n\n \/* Solar Panel *\/\n rows.push(numRow(\"Solar Panel\", a.panel, b.panel, a.panelNum, b.panelNum, \"higher\"));\n\n \/* Battery *\/\n rows.push(textRow(\"Battery\", a.battery, b.battery, a.batteryAh, b.batteryAh, \"higher\"));\n\n \/* System Efficacy *\/\n rows.push(numRow(\"System Efficacy (LM\/W)\", a.efficacyStr, b.efficacyStr, a.efficacy, b.efficacy, \"higher\"));\n\n \/* LED Count *\/\n var ledA = a.ledStr || null;\n var ledB = b.ledStr || null;\n rows.push(numRow(\"LED Count\", ledA, ledB, a.ledCount || 0, b.ledCount || 0, \"higher\"));\n\n \/* Dimensions - smaller is better (compact) *\/\n rows.push(textRow(\"Dimensions\", a.dimensions, b.dimensions, a.dimVolume, b.dimVolume, \"lower\"));\n\n \/* IP Rating *\/\n rows.push({\n label: \"IP Rating\",\n valA: mono(a.ip),\n valB: mono(b.ip),\n winA: false,\n winB: false,\n tie: true,\n isCommon: false\n });\n\n \/* Series *\/\n rows.push({\n label: \"Series\",\n valA: '<span class=\"' + a.seriesClass + '\">' + escHtml(a.series) + '<\/span>',\n valB: '<span class=\"' + b.seriesClass + '\">' + escHtml(b.series) + '<\/span>',\n winA: false,\n winB: false,\n tie: false,\n isCommon: false\n });\n\n \/* Best For *\/\n rows.push({\n label: \"Best For\",\n valA: escHtml(a.bestFor),\n valB: escHtml(b.bestFor),\n winA: false,\n winB: false,\n tie: false,\n isCommon: false\n });\n\n \/* Common specs *\/\n rows.push({\n label: \"Common Specs\",\n valA: mono(\"IP65\") + \" · \" + mono(\"50,000h\") + \" · CRI>\" + mono(\"70\") + \" · \" + mono(\"-20~50\\u00b0C\"),\n valB: mono(\"IP65\") + \" · \" + mono(\"50,000h\") + \" · CRI>\" + mono(\"70\") + \" · \" + mono(\"-20~50\\u00b0C\"),\n winA: false,\n winB: false,\n tie: true,\n isCommon: true\n });\n\n return rows;\n }\n\n function numRow(label, displayA, displayB, numA, numB, direction) {\n var valA = displayA ? mono(displayA) : \"\\u2014\";\n var valB = displayB ? mono(displayB) : \"\\u2014\";\n var winA = false, winB = false, tie = false;\n\n if (numA && numB && numA !== numB) {\n if (direction === \"higher\") {\n winA = numA > numB;\n winB = numB > numA;\n } else {\n winA = numA < numB;\n winB = numB < numA;\n }\n } else if (numA === numB) {\n tie = true;\n }\n\n \/* If one has data and other doesn't, the one with data wins *\/\n if (displayA && !displayB) { winA = true; winB = false; tie = false; }\n if (!displayA && displayB) { winB = true; winA = false; tie = false; }\n\n return { label: label, valA: valA, valB: valB, winA: winA, winB: winB, tie: tie, isCommon: false };\n }\n\n function textRow(label, displayA, displayB, numA, numB, direction) {\n var valA = displayA ? mono(displayA) : \"\\u2014\";\n var valB = displayB ? mono(displayB) : \"\\u2014\";\n var winA = false, winB = false, tie = false;\n\n if (numA && numB && numA !== numB) {\n if (direction === \"higher\") {\n winA = numA > numB;\n winB = numB > numA;\n } else {\n winA = numA < numB;\n winB = numB < numA;\n }\n } else if (numA === numB) {\n tie = true;\n }\n\n if (displayA && !displayB) { winA = true; winB = false; tie = false; }\n if (!displayA && displayB) { winB = true; winA = false; tie = false; }\n\n return { label: label, valA: valA, valB: valB, winA: winA, winB: winB, tie: tie, isCommon: false };\n }\n\n \/* ===== CTA HANDLER ===== *\/\n function handleCTA() {\n var idA = selectA.value;\n var idB = selectB.value;\n if (!idA || !idB || idA === idB) return;\n\n \/* Try to open the CT popup *\/\n var popup = document.querySelector(\"#ct-popup-801\");\n if (popup) {\n \/* Oxygen Builder \/ Breakdance popup trigger *\/\n if (typeof jQuery !== \"undefined\" && jQuery(popup).length) {\n jQuery(popup).trigger(\"click\");\n }\n \/* Try common popup open methods *\/\n if (popup.classList.contains(\"ct-popup\")) {\n popup.classList.add(\"active\");\n }\n \/* Dispatch a custom event for framework compat *\/\n popup.dispatchEvent(new CustomEvent(\"ct-popup-open\", { bubbles: true }));\n }\n\n \/* Fallback: try triggering via Breakdance-specific approach *\/\n if (typeof window.breakdancePopupOpen === \"function\") {\n window.breakdancePopupOpen(801);\n }\n }\n\n \/* ===== EVENT LISTENERS ===== *\/\n selectA.addEventListener(\"change\", renderComparison);\n selectB.addEventListener(\"change\", renderComparison);\n ctaBtn.addEventListener(\"click\", handleCTA);\n\n \/* ===== INIT ===== *\/\n populateDropdowns();\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\n<\/div><\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Guangqi LED Street Light Model Comparison Guangqi LED Street Light Model Comparison Select two models below to compare specifications side by side Model A — Select first model — VS Model B — Select second model — Choose two models above to see a detailed specification comparison. Request Quote for Selected Models Select two models […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":1200,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":"","footnotes":""},"class_list":["post-1299","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/pages\/1299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/comments?post=1299"}],"version-history":[{"count":0,"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/pages\/1299\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/pages\/1200"}],"wp:attachment":[{"href":"https:\/\/gqlamp.com\/ar\/wp-json\/wp\/v2\/media?parent=1299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}