// Section 07 — Zarząd FAQ / fears accordion
const FearsSection = () => {
  const [open, setOpen] = React.useState(0);

  const fears = [
    {
      q: `„To będzie drogo kosztować — nie mamy pieniędzy”`,
      a: (
        <>
          <p>Inwestycję można sfinansować z&nbsp;funduszu remontowego spółdzielni,
          kredytem BGK lub z&nbsp;<strong>dofinansowania</strong>: Czyste Powietrze dla
          wspólnot, programy wojewódzkie WFOŚiGW, fundusze EOG, KPO.</p>
          <p>Okres zwrotu z&nbsp;samych oszczędności na&nbsp;gazie to&nbsp;typowo
          <strong> 5–8 lat</strong> przy założeniu obecnych cen energii.</p>
          <div style={{ marginTop: 10 }}>
            <span className="pill">dofinansowania</span>
            <span className="pill">zwrot 5–8 lat</span>
            <span className="pill">fundusz remontowy</span>
          </div>
        </>
      )
    },
    {
      q: `„A jak będzie awaria, to cały blok bez wody?”`,
      a: (
        <>
          <p>W naszych instalacjach pracują <strong>dwa niezależne zbiorniki CWU</strong>
          i&nbsp;co najmniej dwa źródła ciepła (dwie pompy ciepła lub pompa + grzałka
          rezerwowa). Awaria jednego elementu nie zatrzymuje systemu.</p>
          <p>Dodatkowo — każda instalacja ma <strong>elektryczną grzałkę awaryjną</strong>,
          która natychmiast przejmuje pracę w&nbsp;razie problemu. Automatyka powiadamia
          serwis jeszcze zanim mieszkańcy cokolwiek zauważą.</p>
          <div style={{ marginTop: 10 }}>
            <span className="pill">2 zbiorniki</span>
            <span className="pill">redundancja</span>
            <span className="pill">grzałka awaryjna</span>
            <span className="pill">monitoring 24/7</span>
          </div>
        </>
      )
    },
    {
      q: `„A jak zimą pompa nie da rady?”`,
      a: (
        <>
          <p>Nowoczesne pompy ciepła <strong>pracują do&nbsp;–25°C na&nbsp;zewnątrz</strong>.
          Przy bardzo niskich temperaturach sprawność (COP) spada do&nbsp;~2,7 — nadal
          tańsza niż gaz.</p>
          <p>A jeśli jest potrzeba — uruchamia się grzałka elektryczna jako wsparcie
          (tzw.&nbsp;tryb biwalentny). Mieszkańcy nigdy nie odczują różnicy.</p>
          <div style={{ marginTop: 10 }}>
            <span className="pill">pracuje do –25°C</span>
            <span className="pill">tryb biwalentny</span>
            <span className="pill">zawsze ciepła woda</span>
          </div>
        </>
      )
    },
    {
      q: `„Nikt z&nbsp;naszych sąsiadów tego nie robił”`,
      a: (
        <>
          <p>Myśmy to zrobili już <strong>w&nbsp;trzech budynkach wielorodzinnych</strong>
          w&nbsp;Bielsku-Białej: Malczewskiego&nbsp;8, Malczewskiego&nbsp;13,
          Poprzeczna&nbsp;14. Wszystkie działają, wszystkie z&nbsp;mieszkającymi
          lokatorami, wszystkie z&nbsp;potwierdzonymi danymi z&nbsp;liczników.</p>
          <p>Prezesów tych spółdzielni można odwiedzić i&nbsp;zapytać bezpośrednio —
          organizujemy wizyty referencyjne.</p>
          <div style={{ marginTop: 10 }}>
            <span className="pill">3 realizacje</span>
            <span className="pill">wizyty referencyjne</span>
            <span className="pill">publikacja Globenergia</span>
          </div>
        </>
      )
    },
    {
      q: `„Nie umiemy tego obsługiwać”`,
      a: (
        <>
          <p>Nie musicie. System jest w&nbsp;pełni zautomatyzowany i&nbsp;objęty
          <strong> umową serwisową</strong>. Temperatura CWU, ciśnienie, praca
          sprężarek — wszystko monitoruje sterownik i&nbsp;nasz zespół zdalnie.</p>
          <p>Administrator dostaje raz w&nbsp;miesiącu raport. Jeśli coś wymaga
          interwencji — wiemy o&nbsp;tym my, nie mieszkańcy.</p>
          <div style={{ marginTop: 10 }}>
            <span className="pill">automatyka</span>
            <span className="pill">monitoring zdalny</span>
            <span className="pill">umowa serwisowa</span>
            <span className="pill">raporty miesięczne</span>
          </div>
        </>
      )
    },
  ];

  return (
    <section className="screen bg-cream" data-screen-label="07 Obawy">
      <div className="wrap-narrow">
        <div className="eyebrow reveal" style={{ justifyContent: 'center', textAlign: 'center' }}>Co zwykle pyta zarząd</div>
        <h2 className="big-title reveal reveal-d1" style={{ textAlign: 'center', marginBottom: 16 }}>
          Pięć szczerych <span className="italic">obaw.</span><br/>
          Pięć odpowiedzi.
        </h2>
        <p className="lede reveal reveal-d2" style={{ textAlign: 'center', marginLeft: 'auto', marginRight: 'auto', marginBottom: 48 }}>
          Z doświadczenia — dokładnie te pytania padają na&nbsp;każdym pierwszym
          spotkaniu z&nbsp;zarządem spółdzielni.
        </p>

        <div className="fear-list reveal reveal-d3">
          {fears.map((f, i) => (
            <div key={i} className={`fear ${open === i ? 'open' : ''}`}>
              <button className="fear-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span dangerouslySetInnerHTML={{ __html: f.q }} />
                <span className="toggle">+</span>
              </button>
              <div className="fear-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.FearsSection = FearsSection;