// Water Heater featured section — the big push
const { useState: useStateWH, useEffect: useEffectWH, useRef: useRefWH } = React;

// Fixtures with realistic GPM draws (hot-side only)
const WH_FIXTURES = [
  { id: 'shower', label: 'Shower',     gpm: 2.0, icon: '🚿' },
  { id: 'bath',   label: 'Tub Fill',   gpm: 4.0, icon: '🛁' },
  { id: 'sink',   label: 'Hot Sink',   gpm: 1.0, icon: '🚰' },
  { id: 'dish',   label: 'Dishwasher', gpm: 2.0, icon: '🍽' },
  { id: 'wash',   label: 'Washer',     gpm: 3.0, icon: '🧺' },
];

const WH_TANK_GAL = 50;            // 50-gal tank
const WH_RECOVERY_GPH = 42;        // 42 gal/hour recovery
const WH_USABLE_PCT = 0.70;        // ~70% of tank is usable hot before mixing dilutes too much
const WH_SIM_SPEED = 45;           // Accelerated demo time so the tank visibly runs down
const WH_KY_INLET_F = 52;          // Rheem Zone 4 / Central KY winter sizing estimate
const WH_TANKLESS_ZONE4_GPM = 5.9; // High-output Rheem-style capacity at ~52F inlet
const WH_TANKLESS_OUTPUT_BTU = 186000; // Approx. usable output from a 199k BTU condensing unit

const WH_SIZE_FIXTURES = [
  { id: 'shower', label: 'Shower', gpm: 2.0, max: 4 },
  { id: 'body', label: 'Body spray', gpm: 1.5, max: 6 },
  { id: 'tub', label: 'Tub fill', gpm: 4.0, max: 1 },
  { id: 'bathSink', label: 'Bath faucet', gpm: 1.0, max: 3 },
  { id: 'kitchen', label: 'Kitchen faucet', gpm: 1.5, max: 2 },
  { id: 'dish', label: 'Dishwasher', gpm: 2.0, max: 1 },
  { id: 'wash', label: 'Washing machine', gpm: 3.0, max: 1 },
];

const WH_SIZE_EMPTY = WH_SIZE_FIXTURES.reduce((acc, f) => ({ ...acc, [f.id]: 0 }), {});
const WH_SIZE_PRESETS = [
  { id: 'couple', label: '2 showers', counts: { shower: 2 } },
  { id: 'rush', label: 'family rush', counts: { shower: 2, kitchen: 1, wash: 1 } },
  { id: 'spa', label: 'spa shower', counts: { shower: 1, body: 3 } },
];

function WaterHeaters({ onQuote, onBook }) {
  const wh = window.CB_DATA.waterHeaters;
  const brand = window.CB_DATA.brand;
  const [hover, setHover] = useStateWH(null);
  const [copied, setCopied] = useStateWH(false);
  const [tempF, setTempF] = useStateWH(120);
  const [hotLevel, setHotLevel] = useStateWH(WH_TANK_GAL); // gallons of hot water remaining
  const [activeFixtures, setActiveFixtures] = useStateWH(new Set());
  const [sizeCounts, setSizeCounts] = useStateWH(() => ({ ...WH_SIZE_EMPTY }));
  const lastTickRef = useRefWH(Date.now());

  const totalDraw = [...activeFixtures].reduce((sum, id) => {
    const f = WH_FIXTURES.find(x => x.id === id);
    return sum + (f ? f.gpm : 0);
  }, 0);

  // Tank simulation — runs every 100ms with accelerated demo time
  useEffectWH(() => {
    const id = setInterval(() => {
      const now = Date.now();
      const dt = ((now - lastTickRef.current) / 1000) * WH_SIM_SPEED; // simulated seconds
      lastTickRef.current = now;

      // Draw subtracts from tank, recovery adds back
      // Recovery only runs when not at full
      setHotLevel(prev => {
        const drawGal = (totalDraw / 60) * dt;     // gpm → gal/sec * dt
        const recoveryGal = (WH_RECOVERY_GPH / 3600) * dt; // gph → gal/sec * dt
        let next = prev - drawGal + recoveryGal;
        if (next > WH_TANK_GAL) next = WH_TANK_GAL;
        if (next < 0) next = 0;
        return next;
      });
    }, 100);
    return () => clearInterval(id);
  }, [totalDraw]);

  const toggleFixture = (id) => {
    setActiveFixtures(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const resetTank = () => {
    setHotLevel(WH_TANK_GAL);
    setActiveFixtures(new Set());
  };

  const changeSizeCount = (id, delta) => {
    const fixture = WH_SIZE_FIXTURES.find(f => f.id === id);
    if (!fixture) return;
    setSizeCounts(prev => ({
      ...prev,
      [id]: Math.max(0, Math.min(fixture.max, (prev[id] || 0) + delta)),
    }));
  };

  const applySizingPreset = (presetCounts) => {
    setSizeCounts({ ...WH_SIZE_EMPTY, ...presetCounts });
  };

  // Derived metrics
  const hotPct = (hotLevel / WH_TANK_GAL) * 100;
  const usablePct = WH_USABLE_PCT * 100;
  const isCold = hotPct < (100 - usablePct);          // bottom 30% = effectively cold
  const isWarning = hotPct < 50 && totalDraw > 0;
  // Time to cold shower if currently drawing
  const netDrainGpm = totalDraw - (WH_RECOVERY_GPH / 60);
  const usableGalsRemaining = Math.max(0, hotLevel - (WH_TANK_GAL * (1 - WH_USABLE_PCT)));
  const minutesToCold = (netDrainGpm > 0)
    ? (usableGalsRemaining / netDrainGpm)
    : null;
  const tankStatus = isCold ? 'cold' : isWarning ? 'low' : totalDraw > 0 ? 'drawing' : 'ready';
  const tankStatusText = isCold ? 'COLD WATER' : isWarning ? 'RUNNING LOW' : totalDraw > 0 ? 'HOT WATER DRAW' : 'HEATED + READY';
  const tanklessStatusText = totalDraw > 0 ? 'BURNER FIRING' : 'STANDBY';
  const tanklessTempText = totalDraw > 0 ? `${tempF}°F CONTINUOUS` : 'HOT ON DEMAND';

  const sizeItems = WH_SIZE_FIXTURES
    .map(f => ({ ...f, count: sizeCounts[f.id] || 0 }))
    .filter(f => f.count > 0);
  const sizeGpm = sizeItems.reduce((sum, f) => sum + (f.gpm * f.count), 0);
  const sizeTempRise = Math.max(0, tempF - WH_KY_INLET_F);
  const sizeBtu = Math.round((500 * sizeGpm * sizeTempRise) / 1000) * 1000;
  const sizeBtuLoad = sizeGpm > 0 ? Math.round((sizeBtu / WH_TANKLESS_OUTPUT_BTU) * 100) : 0;
  const sizeFlowLoad = sizeGpm > 0 ? Math.round((sizeGpm / WH_TANKLESS_ZONE4_GPM) * 100) : 0;
  const sizeLoad = Math.max(sizeBtuLoad, sizeFlowLoad);
  const sizeUnits = sizeGpm > 0 ? Math.max(1, Math.ceil(Math.max(sizeBtu / WH_TANKLESS_OUTPUT_BTU, sizeGpm / WH_TANKLESS_ZONE4_GPM))) : 0;
  const sizeMood = sizeGpm === 0 ? 'empty' : sizeLoad <= 78 ? 'good' : sizeLoad <= 100 ? 'edge' : 'multi';
  const sizeTitle = sizeGpm === 0
    ? 'Build your hot-water rush'
    : sizeUnits === 1 && sizeLoad <= 78
      ? 'One tankless should cruise'
      : sizeUnits === 1
        ? 'One high-output unit is close'
        : `${sizeUnits} units may be needed`;
  const sizeCopy = sizeGpm === 0
    ? 'Tap the fixtures a customer may run at the same time. The score updates instantly.'
    : sizeUnits === 1 && sizeLoad <= 78
      ? 'This looks comfortable for a high-output gas tankless in a Central Kentucky winter.'
      : sizeUnits === 1
        ? 'This is near the top of one unit. Gas line, venting, and real fixture flow matter.'
        : 'This is a big hot-water load. A linked tankless setup or staged usage may be the right call.';
  const sizeSummary = sizeItems.length
    ? sizeItems.map(f => `${f.count} ${f.label}${f.count > 1 ? 's' : ''}`).join(', ')
    : 'No fixtures selected';

  const copyCode = () => {
    navigator.clipboard.writeText(wh.code);
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };

  const sendSizingToBooking = () => {
    if (!onBook) return;
    onBook({
      problem: 'wh-tankless-sizing',
      presetService: 'Tankless Water Heater Sizing',
      notes: `Tankless sizing check: ${sizeSummary}. Simultaneous demand ${sizeGpm.toFixed(1)} GPM. ${sizeTempRise}F temp rise from ${WH_KY_INLET_F}F inlet to ${tempF}F setpoint. Estimated heat load ${sizeBtu.toLocaleString()} BTU/hr. Recommendation shown: ${sizeTitle}.`,
      promo: wh.code,
    });
  };

  return (
    <section className="wh" id="waterheaters" data-screen-label="water-heaters">
      {/* Hazard stripe */}
      <div className="wh-hazard">
        <div className="wh-hazard-inner">
          {Array.from({length: 22}).map((_, i) => (
            <span key={i}>● HOT WATER · {brand.region.toUpperCase()} · 24/7 INSTALL & REPAIR · </span>
          ))}
        </div>
      </div>

      <div className="container wh-inner">
        <div className="sec-head">
          <div>
            <div className="eyebrow"><span className="dot" /> 07 · HOT WATER</div>
            <h2>Hot water,<br/>handled.<br/><span className="accent">Same day.</span></h2>
          </div>
          <p>
            Tank's leaking? No hot water at 6am? Endless hot water on the wishlist? Our crew installs and services every kind of water heater on the market — and we do it factory-certified, code-clean, with a written warranty on every install.
          </p>
        </div>

        {/* HEADLINE OFFER + LIVE TANK READOUT */}
        <div className="wh-headline">
          <div className="wh-offer">
            <div className="wh-offer-eye">
              <span className="dot" /> LIMITED-TIME OFFER · CODE {wh.code}
            </div>
            <div className="wh-offer-amount">
              <span className="wh-amt-num">$100</span>
              <span className="wh-amt-sub">OFF</span>
            </div>
            <div className="wh-offer-line">{wh.sub}</div>
            <div className="wh-offer-fine">
              Tank, tankless, hybrid, or commercial. New install or full replacement. Cannot combine with other coupons. Mention code at booking.
            </div>
            <div className="wh-offer-actions">
              <button className="btn-coupon" onClick={copyCode}>
                <span className="cc-label">PROMO CODE</span>
                <span className="cc-code">{wh.code}</span>
                <span className="cc-copy">{copied ? '✓ COPIED' : 'TAP TO COPY'}</span>
              </button>
              <button className="btn btn-primary big-btn" onClick={() => onBook && onBook({ problem: 'wh-install', presetService: 'Water Heater Install', promo: wh.code })}>
                <span className="btn-line">CLAIM $100 OFF</span>
                <span className="btn-line big">BOOK NOW →</span>
              </button>
            </div>
          </div>

          <div className={`wh-tank-rig wh-status-${tankStatus} ${totalDraw > 0 ? 'is-flowing' : ''}`}>
            <div className="wh-tank-head">
              <span>INTERACTIVE HOT WATER DEMO</span>
              <span className={`wh-online ${isCold ? 'wh-cold' : isWarning ? 'wh-warn' : ''}`}>
                ● {tankStatusText}
              </span>
            </div>

            <div className="wh-live-demo">
              <div className="wh-cutaway-card wh-cutaway-card-tank">
                <div className="wh-cutaway-title">
                  <span>STORAGE TANK</span>
                  <strong>{WH_TANK_GAL} GAL</strong>
                </div>
                <div className="wh-tank">
                  <div className="wh-tank-topcap" />
                  <div className="wh-top-pipe wh-top-pipe-cold">
                    <span>COLD IN</span>
                    <i />
                  </div>
                  <div className="wh-top-pipe wh-top-pipe-hot">
                    <span>HOT OUT</span>
                    <i />
                  </div>

                  {/* Cold water enters at the top, then the dip tube carries it to the bottom. */}
                  <div className="wh-dip-tube">
                    <span className="wh-dip-label">DIP TUBE TO BOTTOM</span>
                    <span className="wh-dip-arrow wh-dip-arrow-a" />
                    <span className="wh-dip-arrow wh-dip-arrow-b" />
                    <span className="wh-dip-arrow wh-dip-arrow-c" />
                  </div>
                  <div className="wh-hot-pickup">
                    <span>HOT PULLED FROM TOP</span>
                  </div>

                  {/* Cold water layer (bottom grows as hot water is used). */}
                  <div className="wh-tank-cold" style={{height: `${100 - hotPct}%`}}>
                    <span className="wh-tank-zone-label">INCOMING COLD</span>
                  </div>
                  {/* Hot water layer (top supply drops as fixtures draw). */}
                  <div className="wh-tank-water" style={{height: `${hotPct}%`}}>
                    {hotPct < 100 && [...Array(8)].map((_, i) => (
                      <span key={i} className="wh-bubble" style={{
                        left: `${(i*11+8)%88}%`,
                        animationDelay: `${(i*0.5)%4}s`,
                        animationDuration: `${3 + (i%3)}s`,
                      }} />
                    ))}
                    {hotPct > 15 && <span className="wh-tank-zone-label wh-tank-zone-hot">HOT STORAGE · {tempF}°F</span>}
                    <div className="wh-coil" />
                  </div>

                  <div className="wh-dial">
                    <div className="wh-dial-ring">
                      <span className="wh-dial-temp">{tempF}°F</span>
                      <span className="wh-dial-label">SETPOINT</span>
                    </div>
                  </div>

                  <div className="wh-tank-fill-marker" style={{bottom: `${hotPct}%`}}>
                    <span>{hotLevel.toFixed(1)} GAL HOT</span>
                  </div>
                </div>
                <div className="wh-demo-note">
                A tank has stored hot water. Multiple fixtures pull from the top faster than the burner can recover, so the hot layer drops and cold water takes over. Demo time is accelerated so you can see it happen.
                </div>
              </div>

              <div className={`wh-cutaway-card wh-cutaway-card-tankless ${totalDraw > 0 ? 'is-firing' : ''}`}>
                <div className="wh-cutaway-title">
                  <span>TANKLESS</span>
                  <strong>{tanklessStatusText}</strong>
                </div>
                <div className="wh-tankless">
                  <div className="wh-tankless-shell">
                    <div className="wh-tankless-vent" />
                    <div className="wh-tankless-screen">
                      <strong>{tanklessTempText}</strong>
                      <span>{totalDraw > 0 ? `${totalDraw.toFixed(1)} GPM FLOWING` : 'WAITING FOR FLOW'}</span>
                    </div>
                    <div className="wh-heat-exchanger">
                      {[0,1,2,3].map(i => <span key={i} />)}
                    </div>
                    <div className="wh-flame-bank">
                      <span />
                      <span />
                      <span />
                    </div>
                    <div className="wh-tankless-line wh-tankless-cold">
                      <em>COLD IN</em>
                    </div>
                    <div className="wh-tankless-line wh-tankless-hot">
                      <em>HOT OUT</em>
                    </div>
                  </div>
                  <div className="wh-tankless-flow">
                    <span>COLD WATER PASSES THROUGH</span>
                    <strong>HEATED AS IT FLOWS</strong>
                    <em>NO STORAGE TANK TO EMPTY</em>
                  </div>
                </div>
                <div className="wh-demo-note">
                  Tankless does not store a 50-gallon supply. When a fixture opens, the burner fires and heats water as it passes through the exchanger.
                </div>
              </div>
            </div>

            <div className="wh-tank-readout">
              <div className="wh-readout-row">
                <span>FLOW DRAW</span>
                <span className={`v ${totalDraw > 0 ? 'accent' : ''}`}>{totalDraw.toFixed(1)} GPM</span>
              </div>
              <div className="wh-readout-row">
                <span>RECOVERY</span>
                <span className="v">{WH_RECOVERY_GPH} GPH</span>
              </div>
              <div className="wh-readout-row">
                <span>TANKLESS OUTPUT</span>
                <span className={`v ${totalDraw > 0 ? 'ok' : ''}`}>{tanklessTempText}</span>
              </div>
              <div className="wh-readout-row">
                <span>HOT REMAINING</span>
                <span className={`v ${isCold ? 'wh-cold-text' : isWarning ? 'wh-warn-text' : 'ok'}`}>{hotPct.toFixed(0)}%</span>
              </div>
              <div className="wh-readout-row">
                <span>{netDrainGpm > 0 ? 'TANK RUNS COLD IN' : netDrainGpm < 0 ? 'REFILL IN' : 'STATUS'}</span>
                <span className={`v ${minutesToCold !== null && minutesToCold < 3 ? 'wh-warn-text' : 'accent'}`}>
                  {netDrainGpm > 0
                    ? (minutesToCold < 1 ? `${Math.floor(minutesToCold * 60)} SEC` : `${minutesToCold.toFixed(1)} MIN`)
                    : netDrainGpm < 0
                      ? (hotPct >= 99 ? 'FULL' : `${(((WH_TANK_GAL - hotLevel) / -netDrainGpm)).toFixed(1)} MIN`)
                      : 'IDLE'}
                </span>
              </div>
            </div>

            {/* Fixture toggles */}
            <div className="wh-fixtures">
              <div className="wh-fixtures-head">
                <span className="wh-fixtures-label">TURN ON A FIXTURE → TANK DRAINS · TANKLESS FIRES</span>
                <button className="wh-fixtures-reset" onClick={resetTank} type="button">RESET</button>
              </div>
              <div className="wh-fixtures-grid">
                {WH_FIXTURES.map(f => (
                  <button
                    key={f.id}
                    type="button"
                    className={`wh-fixture ${activeFixtures.has(f.id) ? 'on' : ''}`}
                    onClick={() => toggleFixture(f.id)}
                  >
                    <span className="wh-fixture-icon">{f.icon}</span>
                    <span className="wh-fixture-label">{f.label}</span>
                    <span className="wh-fixture-gpm">{f.gpm} GPM</span>
                  </button>
                ))}
              </div>
            </div>

            <div className={`wh-size-check wh-size-${sizeMood}`}>
              <div className="wh-size-top">
                <div>
                  <span className="wh-size-kicker">TANKLESS SIZE CHECK</span>
                  <strong>Build your morning rush.</strong>
                </div>
                <button className="wh-fixtures-reset" type="button" onClick={() => applySizingPreset({})}>CLEAR</button>
              </div>

              <div className="wh-size-presets">
                {WH_SIZE_PRESETS.map(p => (
                  <button key={p.id} type="button" onClick={() => applySizingPreset(p.counts)}>
                    {p.label}
                  </button>
                ))}
              </div>

              <div className="wh-size-grid">
                <div className="wh-size-pickers">
                  {WH_SIZE_FIXTURES.map(f => {
                    const count = sizeCounts[f.id] || 0;
                    return (
                      <div key={f.id} className={`wh-size-item ${count ? 'on' : ''}`}>
                        <div>
                          <strong>{f.label}</strong>
                          <span>{f.gpm} GPM</span>
                        </div>
                        <div className="wh-size-stepper">
                          <button type="button" onClick={() => changeSizeCount(f.id, -1)} aria-label={`Remove ${f.label}`}>-</button>
                          <span>{count}</span>
                          <button type="button" onClick={() => changeSizeCount(f.id, 1)} aria-label={`Add ${f.label}`}>+</button>
                        </div>
                      </div>
                    );
                  })}
                </div>

                <div className="wh-size-score">
                  <div className="wh-size-result-label">ONE-UNIT LOAD</div>
                  <div className="wh-size-meter" aria-label={`One unit load ${sizeLoad}%`}>
                    <span style={{width: `${Math.min(sizeLoad, 100)}%`}} />
                  </div>
                  <div className="wh-size-load">{sizeGpm > 0 ? `${sizeLoad}%` : '--'}</div>
                  <h4>{sizeTitle}</h4>
                  <p>{sizeCopy}</p>
                  <div className="wh-size-stats">
                    <div><span>DEMAND</span><strong>{sizeGpm.toFixed(1)} GPM</strong></div>
                    <div><span>TEMP RISE</span><strong>{sizeTempRise} F</strong></div>
                    <div><span>HEAT LOAD</span><strong>{sizeBtu ? sizeBtu.toLocaleString() : '--'} BTU</strong></div>
                    <div><span>ROUGH FIT</span><strong>{sizeUnits ? `${sizeUnits} UNIT${sizeUnits > 1 ? 'S' : ''}` : '--'}</strong></div>
                  </div>
                  <button className="btn btn-primary wh-size-send" type="button" disabled={!sizeGpm} onClick={sendSizingToBooking}>
                    SEND MY FIXTURE LIST →                  </button>
                  <div className="wh-size-note">
                    Uses 52 F Kentucky winter inlet water, a {tempF} F setpoint, and 500 x GPM x temp rise. Final sizing depends on gas line, venting, model, and code.
                  </div>
                </div>
              </div>
            </div>

            <div className="wh-temp-control">
              <span className="wh-temp-label">ADJUST SETPOINT</span>
              <input
                type="range"
                min="100"
                max="140"
                value={tempF}
                onChange={(e) => setTempF(parseInt(e.target.value))}
                className="wh-temp-slider"
              />
              <span className="wh-temp-warn">{tempF >= 130 ? '⚠ SCALD RISK · CODE: 120°F MAX RESIDENTIAL' : tempF < 110 ? '⚠ LEGIONELLA RISK · MIN 110°F' : '✓ SAFE OPERATING RANGE'}</span>
            </div>
          </div>
        </div>

        {/* TYPE GRID */}
        <div className="wh-types-head">
          <div className="eyebrow"><span className="dot" /> ALL TYPES · ALL BRANDS</div>
          <div className="wh-brands-row">
            <span className="wh-brand-label">FACTORY-CERTIFIED ON</span>
            {wh.brands.map(b => (
              <span key={b} className="wh-brand">{b}</span>
            ))}
          </div>
        </div>

        <div className="wh-types-grid">
          {wh.types.map((t, i) => (
            <div
              key={t.id}
              className={`wh-type ${hover === t.id ? 'is-hover' : ''}`}
              onMouseEnter={() => setHover(t.id)}
              onMouseLeave={() => setHover(null)}
              onClick={() => onBook && onBook({ problem: t.id, presetService: `Water Heater · ${t.name}`, promo: wh.code })}
            >
              <div className="wh-type-num">{String(i+1).padStart(2,'0')}</div>
              <div className="wh-type-body">
                <div className="wh-type-name">{t.name}</div>
                <div className="wh-type-spec">{t.spec}</div>
              </div>
              <div className="wh-type-foot">
                <span className="wh-type-price">{t.range}</span>
                <span className="wh-type-arrow">→</span>
              </div>
            </div>
          ))}
        </div>

        {/* COMPARISON: TANK vs TANKLESS vs HYBRID */}
        <div className="wh-compare">
          <div className="wh-compare-head">
            <div className="eyebrow"><span className="dot" /> WHICH IS RIGHT FOR ME?</div>
            <h3>30-second decision matrix.</h3>
          </div>
          <div className="wh-compare-table">
            <div className="wh-row wh-row-head">
              <div></div>
              <div>TANK</div>
              <div className="hot">TANKLESS</div>
              <div>HYBRID</div>
            </div>
            <div className="wh-row">
              <div className="wh-rk">Hot water</div>
              <div>40–75 gal storage</div>
              <div className="hot">Endless</div>
              <div>50–80 gal storage</div>
            </div>
            <div className="wh-row">
              <div className="wh-rk">Energy bill</div>
              <div>Standard</div>
              <div className="hot">−30%</div>
              <div className="hot">−60%</div>
            </div>
            <div className="wh-row">
              <div className="wh-rk">Lifespan</div>
              <div>10–12 yrs</div>
              <div className="hot">20+ yrs</div>
              <div>13–15 yrs</div>
            </div>
            <div className="wh-row">
              <div className="wh-rk">Footprint</div>
              <div>Closet-sized</div>
              <div className="hot">Suitcase-sized</div>
              <div>Closet-sized</div>
            </div>
            <div className="wh-row">
              <div className="wh-rk">Best for</div>
              <div>Budget · 1–2 baths</div>
              <div className="hot">3+ baths · long term</div>
              <div>Eco · low bill goal</div>
            </div>
            <div className="wh-row">
              <div className="wh-rk">Install</div>
              <div>Free quote</div>
              <div className="hot">Free quote</div>
              <div>Free quote</div>
            </div>
          </div>
        </div>

        {/* SIGNS YOU NEED A NEW ONE */}
        <div className="wh-signs">
          <div className="wh-signs-head">
            <div className="eyebrow"><span className="dot" /> READ THE WARNING SIGNS</div>
            <h3>Six signs your water heater is dying.</h3>
            <p>Catch one or more? Call us before it pops a leak in the middle of the night and turns into a Floodbusterz job.</p>
          </div>
          <div className="wh-signs-grid">
            {[
              { n: '01', sign: 'Rusty / discolored hot water', why: 'Tank lining is corroding from the inside out.' },
              { n: '02', sign: 'Rumbling, popping, or banging', why: 'Sediment buildup. Heater is working overtime.' },
              { n: '03', sign: 'Hot water runs out fast', why: 'Sediment is stealing storage capacity.' },
              { n: '04', sign: 'Puddles around the base', why: 'Tank is cracked. Failure is days, not months, away.' },
              { n: '05', sign: '10+ years old', why: 'Past expected lifespan. Replace before it leaks.' },
              { n: '06', sign: 'Energy bill creeping up', why: 'Heater losing efficiency. New unit pays for itself.' },
            ].map(s => (
              <div key={s.n} className="wh-sign">
                <div className="wh-sign-n">{s.n}</div>
                <div className="wh-sign-h">{s.sign}</div>
                <div className="wh-sign-p">{s.why}</div>
              </div>
            ))}
          </div>
        </div>

        {/* BOTTOM CTA */}
        <div className="wh-cta-bar">
          <div className="wh-cta-text">
            <div className="wh-cta-h">Same-day install. Most jobs done in 4 hours.</div>
            <div className="wh-cta-sub">Free in-home estimate · 0% financing for 12 months · Manufacturer warranties registered for you</div>
          </div>
          <div className="wh-cta-actions">
            <a href={`tel:${brand.phoneRaw}`} className="phone-pill">
              <span>●</span>{brand.phone}
            </a>
            <button className="btn btn-primary" onClick={() => onBook && onBook({ problem: 'wh-install', presetService: 'Water Heater Install', promo: wh.code })}>
              BOOK INSTALL →
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

window.WaterHeaters = WaterHeaters;