// Section 05 — How it works: clickable animated diagram
const HowItWorks = () => {
  const [step, setStep] = React.useState(0);

  const steps = [
    {
      t: "Powietrze na zewnątrz",
      d: 'Nawet w mroźny dzień powietrze zawiera energię cieplną. Pompa ciepła „wyciąga” ją z powietrza (albo z gruntu) i przenosi do środka.'
    },
    {
      t: "Serce: sprężarka",
      d: "Urządzenie wielkości lodówki zagęszcza czynnik chłodniczy — w ten sposób niska temperatura z zewnątrz zamienia się w wysoką temperaturę w środku. Działa jak lodówka, tylko odwrotnie."
    },
    {
      t: "Zasobnik na ciepłą wodę",
      d: "Pompa podgrzewa wodę w dużych zbiornikach w piwnicy (900–1000 litrów każdy). Zasób wystarcza całemu budynkowi na poranny szczyt."
    },
    {
      t: "Woda leci do mieszkań",
      d: "Rurami w budynku woda dociera do każdego kranu. Mieszkaniec odkręca — i jest. Bez żadnego urządzenia w lokalu."
    },
  ];

  // SVG scene with highlighted part based on step
  const colorOf = (i) => (step === i ? '#E8782B' : '#CFC1A3');

  return (
    <section className="screen bg-paper" data-screen-label="05 Jak to działa">
      <div className="wrap">
        <div className="eyebrow reveal">Jak to właściwie działa</div>
        <h2 className="big-title reveal reveal-d1" style={{ marginBottom: 16 }}>
          Cztery kroki.<br/><span className="italic">Bez magii.</span>
        </h2>
        <p className="lede reveal reveal-d2" style={{ marginBottom: 48 }}>
          Kliknij kolejne kroki po prawej, żeby zobaczyć gdzie co się dzieje.
        </p>

        <div className="how-layout reveal reveal-d3">
          <div className="how-vis">
            <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
              {/* sky */}
              <rect x="0" y="0" width="500" height="200" fill="#F1E8D4" />
              {/* ground */}
              <rect x="0" y="200" width="500" height="300" fill="#E8DCC0" />
              {/* sun */}
              <circle cx="430" cy="60" r="24" fill="#E8C980" opacity="0.7" />
              {/* air waves (step 0) */}
              {[...Array(5)].map((_, i) => (
                <circle key={i} cx="100" cy="120" r={20 + i * 14}
                  fill="none" stroke={colorOf(0)} strokeWidth="1.5"
                  opacity={step === 0 ? (0.7 - i * 0.12) : 0.18}
                  style={{ transition: 'all 0.4s' }}
                />
              ))}

              {/* outdoor unit */}
              <g style={{ transition: 'all 0.3s' }}>
                <rect x="60" y="180" width="80" height="70" rx="4"
                  fill={step === 1 ? '#F9D9BB' : '#fff'}
                  stroke={step === 1 ? '#E8782B' : '#6F665A'}
                  strokeWidth="2" />
                <circle cx="100" cy="215" r="20" fill="none" stroke="#6F665A" strokeWidth="1.5" />
                <path d="M 100 195 L 115 215 L 100 235 L 85 215 Z" fill="#6F665A" opacity="0.4" />
                <text x="100" y="268" textAnchor="middle" fontSize="10" fill="#6F665A"
                  fontFamily="JetBrains Mono, monospace">SPRĘŻARKA</text>
              </g>

              {/* building */}
              <rect x="200" y="150" width="260" height="260" fill="#FBF7EF" stroke="#2A241C" strokeWidth="2" />
              {/* basement line */}
              <line x1="200" y1="340" x2="460" y2="340" stroke="#2A241C" strokeWidth="1" strokeDasharray="3,3" />
              <text x="210" y="355" fontSize="9" fill="#6F665A" fontFamily="JetBrains Mono, monospace">PIWNICA</text>

              {/* windows (upper floors) */}
              {[0, 1, 2].map((row) =>
                [0, 1, 2, 3].map((col) => (
                  <rect key={`${row}-${col}`}
                    x={215 + col * 58} y={165 + row * 50}
                    width="42" height="32" rx="2"
                    fill={step === 3 ? '#F9D9BB' : '#EFE6D6'}
                    stroke="#6F665A" strokeWidth="1"
                    style={{ transition: 'fill 0.3s' }}
                  />
                ))
              )}

              {/* water tanks (step 2) */}
              <g style={{ transition: 'all 0.3s' }}>
                <rect x="230" y="348" width="36" height="54" rx="18"
                  fill={step === 2 ? '#F9D9BB' : '#fff'}
                  stroke={step === 2 ? '#E8782B' : '#6F665A'}
                  strokeWidth="2" />
                <rect x="275" y="348" width="36" height="54" rx="18"
                  fill={step === 2 ? '#F9D9BB' : '#fff'}
                  stroke={step === 2 ? '#E8782B' : '#6F665A'}
                  strokeWidth="2" />
                <text x="273" y="418" textAnchor="middle" fontSize="9" fill="#6F665A"
                  fontFamily="JetBrains Mono, monospace">ZASOBNIKI CWU</text>
              </g>

              {/* pipes between outdoor unit and tanks */}
              <path d="M 140 215 Q 180 215 200 370"
                fill="none" stroke={colorOf(1)} strokeWidth="3"
                strokeDasharray={step === 1 ? "0" : "4,4"}
                style={{ transition: 'stroke 0.3s' }}
              />

              {/* pipes going up to flats (step 3) */}
              <path d="M 293 348 L 293 170"
                fill="none" stroke={colorOf(3)} strokeWidth="3"
                style={{ transition: 'stroke 0.3s' }}
              />
              <path d="M 293 200 L 420 200 M 293 250 L 420 250 M 293 300 L 420 300"
                fill="none" stroke={colorOf(3)} strokeWidth="2"
                opacity={step === 3 ? 1 : 0.35}
                style={{ transition: 'all 0.3s' }}
              />

              {/* tap + hands indicator (step 3) */}
              {step === 3 && (
                <g>
                  <circle cx="450" cy="200" r="5" fill="#6FA8D9">
                    <animate attributeName="cy" values="200;215;200" dur="1.5s" repeatCount="indefinite" />
                    <animate attributeName="opacity" values="1;0;1" dur="1.5s" repeatCount="indefinite" />
                  </circle>
                </g>
              )}

              {/* step label */}
              <text x="250" y="460" fontSize="13" fill="#2A241C"
                fontFamily="Instrument Serif, serif" fontStyle="italic" fontWeight="400">
                Krok {step + 1} / 4
              </text>
            </svg>
          </div>
          <div className="how-steps">
            {steps.map((s, i) => (
              <div
                key={i}
                className={`how-step ${step === i ? 'active' : ''}`}
                onClick={() => setStep(i)}
              >
                <div className="num">0{i + 1}</div>
                <div>
                  <h4>{s.t}</h4>
                  <p>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="reveal reveal-d4" style={{ marginTop: 32, fontSize: 13, color: 'var(--ink-soft)', maxWidth: 720 }}>
          <strong style={{ color: 'var(--ink)' }}>Efektywność (COP):</strong> z&nbsp;1&nbsp;kWh energii
          elektrycznej pompa robi <strong style={{ color: 'var(--orange-deep)' }}>2,7–4,5&nbsp;kWh ciepła</strong>.
          Dlatego mimo że prąd jest droższy niż gaz — eksploatacja jest znacznie tańsza.
        </div>
      </div>
    </section>
  );
};
window.HowItWorks = HowItWorks;