/* Animated "living blueprint" hero scene.
   Pure line-art schematic (no imagery) matching the brand's blueprint motif.
   Three trades spread diagonally across a landscape canvas so the art fills the
   right-hand panel evenly rather than bunching into one corner:
   - Electrical (top-left): wiring + a travelling red surge + a flickering bolt
   - Plumbing/Gas (mid-left): a pipe run with a valve and animated red flow
   - Building (lower-right): a running-bond brick wall that lays in course by course
   All motion is CSS, gated on prefers-reduced-motion. Decorative only. */

function HeroScene() {
  // Running-bond brick wall (lower-right of the scene), sized to stay in bounds.
  const bw = 48, bh = 18, gap = 4, rows = 4, cols = 5, x0 = 432, y0 = 286;
  const bricks = [];
  for (let r = 0; r < rows; r++) {
    const off = (r % 2) * ((bw + gap) / 2);
    for (let c = 0; c < cols; c++) {
      bricks.push({
        x: x0 - off + c * (bw + gap),
        y: y0 + r * (bh + gap),
        delay: (0.3 + r * 0.12 + c * 0.1).toFixed(2),
      });
    }
  }

  const ELEC = 'M96 104 H252 V64 H368';
  const PIPE = 'M96 250 H236 Q266 250 266 280 V356 H392';

  return (
    <div className="hero-scene" aria-hidden="true">
      <svg viewBox="0 0 760 480" fill="none" preserveAspectRatio="xMidYMid meet">
        {/* ---- ELECTRICAL (top-left) ---- */}
        <g className="hs-elec">
          <path className="hs-wire" d={ELEC} />
          <path className="hs-surge" pathLength="100" d={ELEC} />
          <circle className="hs-node" cx="252" cy="64" r="4" />
          <circle className="hs-node" cx="252" cy="104" r="4" />
          <polygon className="hs-bolt" points="376,40 355,82 371,82 359,112 393,66 377,66" />
          <text className="hs-label" x="96" y="92">240V · RING</text>
        </g>

        {/* ---- PLUMBING / GAS (mid-left) ---- */}
        <g className="hs-plumb">
          <path className="hs-pipe" d={PIPE} />
          <path className="hs-flow" d={PIPE} />
          <circle className="hs-valve" cx="266" cy="318" r="10" />
          <path className="hs-tick" d="M258 318 H274 M266 310 V326" />
        </g>

        {/* ---- BUILDING (lower-right) ---- */}
        <g className="hs-build">
          {bricks.map((b, i) => (
            <rect key={i} className="hs-brick" x={b.x} y={b.y} width={bw} height={bh} rx="2"
              style={{ animationDelay: b.delay + 's' }} />
          ))}
          {/* dimension line under the wall */}
          <path className="hs-dim" d="M404 396 H688 M404 391 V401 M688 391 V401" />
        </g>
      </svg>
    </div>
  );
}

Object.assign(window, { HeroScene });