import React, { useState } from 'react'; import { AlertTriangle, Flame, Droplets, Wind, Activity, DollarSign, Wrench, X, Info, ThermometerSnowflake, Waves, Zap, ShowerHead, ShieldAlert } from 'lucide-react'; // Pre-define image paths for each issue popup const issueImages = { warranty: 'https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/shield-alert.svg', hot_water: 'https://i.imgur.com/K9bV3L1.png', sludge: 'https://i.imgur.com/qLh51Tz.png', gas: 'https://i.imgur.com/dO205mU.png', kettling: 'https://i.imgur.com/K7pUq9H.png', exchanger_blockage: 'https://i.imgur.com/g25zQjB.png', pump: 'https://i.imgur.com/N52h27R.png', valves: 'https://i.imgur.com/s63dE0d.png', cycling: 'https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/alert-triangle.svg', leaks: 'https://i.imgur.com/eB3K20Q.png', bills: 'https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/dollar-sign.svg', }; const HeatingSystemGlobal = () => { const [selectedIssue, setSelectedIssue] = useState(null); const [hoveredIssue, setHoveredIssue] = useState(null); const issues = [ { id: 'warranty', title: "Void Warranty", location: "Manufacturer Terms", symptom: "Repair Claims Rejected", description: "Boiler manufacturers (e.g., Worcester, Vaillant, Baxi) require water quality to meet BS 7593:2019 standards. If an engineer finds sludge during a warranty call-out, they will often void the warranty immediately.", consequence: "You pay 100% of repair costs, even on a brand new boiler.", icon: , pos: { top: '12%', left: '42%' }, type: 'critical' }, { id: 'hot_water', title: "Intermittent Hot Water", location: "Plate Heat Exchanger", symptom: "Shower runs Hot then Cold", description: "Combi boilers heat tap water instantly using a secondary 'Plate Heat Exchanger'. These have tiny channels that clog easily with sludge. When blocked, the boiler overheats and cuts out, causing your shower to fluctuate between scalding and freezing.", consequence: "Inconsistent hot water and component failure.", icon: , pos: { top: '30%', left: '8%' }, type: 'water' }, { id: 'sludge', title: "Magnetite Sludge", location: "Downstairs Radiator", symptom: "Cold at the Bottom", description: "Black iron oxide (rust) is heavier than water. It settles in the lowest parts of your system—typically downstairs radiators—blocking the flow channels. This creates a distinct 'cold bottom, hot top' pattern.", consequence: "Restricted heat output and eventual blockage.", icon: , pos: { top: '75%', left: '75%' }, type: 'sludge' }, { id: 'gas', title: "Hydrogen Gas Build-up", location: "Upstairs Radiator", symptom: "Cold at the Top", description: "Often mistaken for 'air', this is actually hydrogen gas—a flammable byproduct of the chemical corrosion process (rusting) eating your radiators. Unlike sludge, gas rises to the highest points.", consequence: "Frequent bleeding required; potential fire hazard.", icon: , pos: { top: '25%', left: '70%' }, type: 'gas' }, { id: 'kettling', title: "Boiler 'Kettling'", location: "Heat Exchanger (Surface)", symptom: "Banging / Whistling Noise", description: "In hard water areas, limescale coats the heat exchanger surface like the element in a kettle. This traps heat, causing water to boil violently (kettle) on the metal surface.", consequence: "Noise nuisance and reduced heat transfer efficiency.", icon: , pos: { top: '40%', left: '40%' }, type: 'scale' }, { id: 'exchanger_blockage', title: "Heat Exchanger Blockage", location: "Heat Exchanger (Internal)", symptom: "Boiler Lockouts / Error Codes", description: "Modern boilers have extremely narrow waterways (often <1mm). Sludge creates a 'traffic jam' here. The trapped heat causes the metal to expand unevenly and crack (Thermal Shock).", consequence: "Catastrophic failure. Usually requires a new boiler (£2,000+).", icon: , pos: { top: '20%', left: '12%' }, type: 'critical' }, { id: 'pump', title: "Pump Seizure", location: "Circulation Pump", symptom: "No Circulation / Overheating", description: "Modern pumps are magnetic. Unfortunately, magnetite sludge is also magnetic. The sludge is attracted to the pump's internal workings, grinding the impeller to a halt.", consequence: "Total system failure; boiler overheats immediately.", icon: , pos: { top: '65%', left: '25%' }, type: 'mechanical' }, { id: 'valves', title: "Stuck TRV Pins", location: "Radiator Valve", symptom: "Radiator Won't Turn On/Off", description: "Sludge is gritty. It works its way into the tiny pins inside Thermostatic Radiator Valves (TRVs), causing them to jam shut (no heat) or jam open (can't control temp).", consequence: "Loss of room temperature control.", icon: , pos: { top: '78%', left: '60%' }, type: 'mechanical' }, { id: 'cycling', title: "Short Cycling", location: "Boiler Electronics", symptom: "Boiler Turns On/Off Rapidly", description: "When flow is restricted by sludge or scale, the boiler can't get rid of its heat fast enough. Sensors detect overheating and shut it down, only to restart seconds later.", consequence: "Massive wear on ignition parts and huge gas waste.", icon: , pos: { top: '5%', left: '25%' }, type: 'efficiency' }, { id: 'leaks', title: "Pinhole Corrosion", location: "Pipework / Radiators", symptom: "Loss of Pressure", description: "Acidity in the water eats through steel radiators and copper pipes from the inside out, creating tiny 'pinhole' leaks that drop boiler pressure constantly.", consequence: "Water damage to floors; constant need to top up pressure.", icon: , pos: { top: '85%', left: '45%' }, type: 'corrosion' }, { id: 'bills', title: "Efficiency Drop", location: "Whole House", symptom: "High Bills / Cold House", description: "A dirty system typically loses 15-30% efficiency. You are paying to heat sludge and scale, not your home.", consequence: "Wasted money and higher carbon footprint.", icon: , pos: { top: '10%', left: '85%' }, type: 'efficiency' } ]; return ( ); }; export default HeatingSystemGlobal;