// Section 06 — Costs comparison with interactive slider
const CostsSection = () => {
  const [m3, setM3] = React.useState(185); // m³/month default

  // Constants
  const costPerM3_PC = 12.63;
  const costPerM3_Gas = 38.5; // mid of 36-41
  const monthlyPC = m3 * costPerM3_PC;
  const monthlyGas = m3 * costPerM3_Gas;
  const monthlySave = monthlyGas - monthlyPC;
  const yearlySave = monthlySave * 12;

  const fmt = (n) => new Intl.NumberFormat('pl-PL', { maximumFractionDigits: 0 }).format(n);

  return (
    <section className="screen bg-cream" data-screen-label="06 Koszty" id="koszty">
      <div className="wrap">
        <div className="eyebrow reveal">Policzmy</div>
        <h2 className="big-title reveal reveal-d1" style={{ marginBottom: 16, maxWidth: 1100 }}>
          Ile <span className="italic">naprawdę</span> kosztuje<br/>
          podgrzanie wody?
        </h2>
        <p className="lede reveal reveal-d2" style={{ marginBottom: 48 }}>
          Koszt podgrzania 1&nbsp;m³ wody z&nbsp;8°C do&nbsp;55°C. Ceny energii
          z&nbsp;taryf URE 2025/2026 (brutto, z&nbsp;dystrybucją).
        </p>

        <div className="cost-compare reveal reveal-d3">
          <div className="cost-card-big bad">
            <div className="label">Stary system</div>
            <h4>Gazowy piecyk przepływowy</h4>
            <div className="price">
              38<small>PLN</small>
            </div>
            <p className="price-sub">za 1&nbsp;m³ ciepłej wody (zakres 36–41&nbsp;zł)</p>
            <ul>
              <li>Sprawność <span>~60%</span></li>
              <li>Cena gazu <span>~0,42 zł/kWh</span></li>
              <li>Przeglądy rocznie <span>w każdym mieszkaniu</span></li>
            </ul>
          </div>
          <div className="cost-card-big good">
            <div className="label">Rozwiązanie Limańczyk</div>
            <h4>Centralna pompa ciepła CWU</h4>
            <div className="price">
              13<small>PLN</small>
            </div>
            <p className="price-sub">za 1&nbsp;m³ ciepłej wody (dokładnie 12,63&nbsp;zł)</p>
            <ul>
              <li>Efektywność (COP) <span>2,7 – 4,5</span></li>
              <li>Cena en. el. <span>~1,04 zł/kWh</span></li>
              <li>Przeglądy rocznie <span>jeden punkt serwisowy</span></li>
            </ul>
          </div>
        </div>

        <div className="reveal reveal-d4" style={{ marginTop: 48, background: 'var(--paper)', padding: 32, borderRadius: 8, border: '1px solid var(--rule)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8, flexWrap: 'wrap', gap: 12 }}>
            <h4 className="serif" style={{ fontSize: 26 }}>Policz oszczędność dla swojego budynku</h4>
            <span className="small-label">INTERAKTYWNY KALKULATOR</span>
          </div>
          <p style={{ color: 'var(--ink-soft)', fontSize: 14, marginBottom: 24 }}>
            Przesuń suwak, żeby wpisać miesięczne zużycie ciepłej wody w&nbsp;Twoim budynku.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: 'var(--ink-soft)', marginBottom: 8, display: 'flex', justifyContent: 'space-between' }}>
                <span>ZUŻYCIE CWU</span>
                <span>{fmt(m3)} m³ / miesiąc</span>
              </div>
              <input
                type="range" min="50" max="500" step="5"
                value={m3}
                onChange={(e) => setM3(+e.target.value)}
                style={{ width: '100%', accentColor: '#E8782B' }}
              />
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--ink-faint)', fontFamily: "'JetBrains Mono', monospace", marginTop: 6 }}>
                <span>mały blok</span>
                <span>duży zasób</span>
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="serif" style={{ fontSize: 52, lineHeight: 1, color: 'var(--orange-deep)', letterSpacing: '-0.02em' }}>
                {fmt(yearlySave)}&nbsp;zł
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 4 }}>rocznej oszczędności</div>
              <div style={{ fontSize: 12, color: 'var(--ink-faint)', marginTop: 2, fontFamily: "'JetBrains Mono', monospace" }}>
                = {fmt(monthlySave)} zł / miesiąc
              </div>
            </div>
          </div>
        </div>

        <p className="cost-foot reveal reveal-d4" style={{ marginTop: 20 }}>
          OBLICZENIA: Q = 54,66 kWh energii użytecznej na m³ (ΔT = 47°C). Gaz: taryfa W PGNiG 07.2025 + dystrybucja PSG.
          Energia el.: taryfa G11 + dystrybucja. Oszczędności szacunkowe — zależą od warunków umów i indywidualnych taryf.
        </p>
      </div>
    </section>
  );
};
window.CostsSection = CostsSection;