function Problem() {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); }}, {threshold: 0.2});
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return (
    <section className="problem section-pad" ref={ref}>
      <div className="shell">
        <div className="problem-head">
          <div>
            <div className="eyebrow">§ 04 — Problem & Solution</div>
            <h2 className="kicker" style={{marginTop:14, color:'var(--bone)'}}>Diesel<br/>is over.</h2>
          </div>
          <div>
            <p className="body-lg" style={{opacity:0.78}}>
              A 70-decibel companion that needs refuelling every shift, drips oil onto the ground, fails its WoF on emissions, and costs more than the sticker price ever suggested. Councils now restrict generator use after 7pm. Tier-1 contractors are reporting Scope 1 emissions on every tender. The default is no longer the default.
            </p>
            <div className="problem-stat">
              <div className="problem-stat-num">~$24,000</div>
              <div className="problem-stat-lbl">Average 5-yr saving · Tier 02 vs. an 8 kVA diesel</div>
            </div>
          </div>
        </div>

        <div className={`compare-grid ${seen ? 'in' : ''}`}>
          <div className="compare-col diesel">
            <div className="compare-tag"><span className="dot"/> Diesel generator</div>
            <div className="compare-title">The old way</div>
            <p className="compare-sub">8 kVA mid-size diesel — running 12-hour days on a NZ build site.</p>
            <div className="metric-row">
              <div className="metric">
                <div className="metric-label">Noise</div>
                <div className="metric-bar"><span style={{'--w':'92%','--c':'var(--rust)'}}/></div>
                <div className="metric-val">72<span className="unit">dB @ 1m</span></div>
              </div>
              <div className="metric">
                <div className="metric-label">Fuel/day</div>
                <div className="metric-bar"><span style={{'--w':'78%','--c':'var(--rust)'}}/></div>
                <div className="metric-val">$110<span className="unit">/day</span></div>
              </div>
              <div className="metric">
                <div className="metric-label">CO₂</div>
                <div className="metric-bar"><span style={{'--w':'95%','--c':'var(--rust)'}}/></div>
                <div className="metric-val">28<span className="unit">kg/day</span></div>
              </div>
              <div className="metric">
                <div className="metric-label">Service</div>
                <div className="metric-bar"><span style={{'--w':'70%','--c':'var(--rust)'}}/></div>
                <div className="metric-val">Monthly</div>
              </div>
            </div>
            <div className="diesel-noise-viz" aria-hidden>
              {Array.from({length:24}).map((_,i)=> <span key={i}/>)}
            </div>
          </div>
          <div className="compare-col solar">
            <div className="compare-tag"><span className="dot"/> Solar trailer</div>
            <div className="compare-title">The new default</div>
            <p className="compare-sub">Tier 2 Crew — 5 kW solar, 20 kWh battery, sine-wave inverter.</p>
            <div className="metric-row">
              <div className="metric">
                <div className="metric-label">Noise</div>
                <div className="metric-bar"><span style={{'--w':'8%','--c':'var(--signal)'}}/></div>
                <div className="metric-val">&lt;30<span className="unit">dB @ 1m</span></div>
              </div>
              <div className="metric">
                <div className="metric-label">Fuel/day</div>
                <div className="metric-bar"><span style={{'--w':'2%','--c':'var(--signal)'}}/></div>
                <div className="metric-val">$0<span className="unit">/day</span></div>
              </div>
              <div className="metric">
                <div className="metric-label">CO₂</div>
                <div className="metric-bar"><span style={{'--w':'2%','--c':'var(--signal)'}}/></div>
                <div className="metric-val">0<span className="unit">kg/day</span></div>
              </div>
              <div className="metric">
                <div className="metric-label">Service</div>
                <div className="metric-bar"><span style={{'--w':'12%','--c':'var(--signal)'}}/></div>
                <div className="metric-val">Annual</div>
              </div>
            </div>
            <div className="solar-flatline"/>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Problem = Problem;