// Section 01 — Hero
const HeroSection = () => {
  return (
    <section className="screen bg-cream" data-screen-label="01 Hero" id="hero">
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <div className="eyebrow reveal">Dla spółdzielni i wspólnot mieszkaniowych</div>
            <h1 className="hero-title reveal reveal-d1">
              <span className="hero-title-line">Ciepła woda,</span>
              <span className="hero-title-line">której <span className="italic">nie&nbsp;musisz</span></span>
              <span className="hero-title-line">się <span className="hero-underline">bać</span>.</span>
            </h1>
            <p className="lede reveal reveal-d2" style={{ marginTop: 32 }}>
              Centralna pompa ciepła do ciepłej wody użytkowej — zamiast
              piecyka gazowego w każdym mieszkaniu. Bez ryzyka zaczadzenia,
              z niższym rachunkiem, bez remontu u lokatorów.
            </p>
            <div className="hero-meta reveal reveal-d3">
              <span><strong>3</strong> zrealizowane budynki</span>
              <span><strong>~2,9×</strong> niższy koszt m³ CWU</span>
              <span><strong>0</strong> piecyków w mieszkaniach</span>
            </div>
            <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }} className="reveal reveal-d4">
              <a href="#alarm" className="btn">Zobacz, dlaczego warto
                <span style={{ fontSize: 18 }}>↓</span>
              </a>
              <a href="#kontakt" className="btn btn-outline">Umów rozmowę</a>
            </div>
          </div>
          <div className="hero-visual reveal reveal-d2">
            <div className="stripes" />
            <div className="photo-frame">
              <img src="assets/kotlownia-1.png" alt="Kotłownia z pompą ciepła CWU" />
            </div>
            <div className="overlay-caption">
              <strong>ul. Malczewskiego 13, Bielsko-Biała</strong>
              <span>centralna pompa ciepła + zasobniki CWU · 2026</span>
            </div>
            <div className="tag">FOT. 01</div>
          </div>
        </div>
      </div>
      <div className="scroll-hint">
        <span>PRZEWIŃ</span>
        <div className="line" />
      </div>
    </section>
  );
};
window.HeroSection = HeroSection;