// Section 08 — Zrealizowane budynki
const RealizationsSection = () => {
  const [activePhoto, setActivePhoto] = React.useState(0);

  const photos = [
    { src: 'assets/kotlownia-1.png', caption: 'Zasobniki CWU i moduły pompy ciepła', sub: 'kotłownia w piwnicy — stan po modernizacji' },
    { src: 'assets/kotlownia-2.png', caption: 'Moduł sterujący pompy', sub: 'automatyka z monitoringiem zdalnym' },
  ];

  const cards = [
    { year: '2022', name: 'ul. Malczewskiego 8', city: 'Bielsko-Biała', note: 'Pierwsza realizacja. Pełna dokumentacja. Działa od ponad 3 lat.' },
    { year: '2024', name: 'ul. Poprzeczna 14', city: 'Bielsko-Biała', note: 'Potwierdzone dane eksploatacyjne: 3,3–4,1 MWh/mies. na CWU.' },
    { year: '2026', name: 'ul. Malczewskiego 13', city: 'Bielsko-Biała', note: 'Najnowsza realizacja. Publikacja w Globenergia. Opisana na tym materiale.' },
  ];

  return (
    <section className="screen bg-paper" data-screen-label="08 Realizacje">
      <div className="wrap">
        <div className="eyebrow reveal">To się dzieje naprawdę</div>
        <h2 className="big-title reveal reveal-d1" style={{ marginBottom: 16, maxWidth: 1100 }}>
          Trzy budynki.<br/>
          <span className="italic">Żadnego</span> piecyka.
        </h2>
        <p className="lede reveal reveal-d2" style={{ marginBottom: 48 }}>
          Zrealizowane inwestycje w&nbsp;Bielsku-Białej. Wszystkie działają. Wszystkie
          z&nbsp;mieszkającymi lokatorami. Chętnie pokażemy na żywo.
        </p>

        <div className="real-layout">
          <div className="real-cards reveal reveal-d3">
            {cards.map((c, i) => (
              <div key={i} className="real-card-x">
                <div className="year">{c.year}</div>
                <div style={{ flex: 1 }}>
                  <h4>{c.name}</h4>
                  <p>{c.city} · {c.note}</p>
                </div>
                <div className="status">ZREALIZOWANO</div>
              </div>
            ))}

            <div style={{ marginTop: 16, padding: 20, background: 'var(--cream-2)', borderRadius: 6, fontSize: 14, color: 'var(--ink-2)' }}>
              <strong style={{ color: 'var(--ink)' }}>Bonus:</strong>&nbsp; o realizacji
              z&nbsp;Bielska-Białej pisał portal <strong>Globenergia.pl</strong> jako
              o&nbsp;modelowym przykładzie modernizacji budynku wielorodzinnego.
            </div>
          </div>

          <div className="reveal reveal-d4">
            <div className="real-photo" style={{ aspectRatio: '4/5' }}>
              <img src={photos[activePhoto].src} alt={photos[activePhoto].caption} />
              <div className="caption">
                <strong>{photos[activePhoto].caption}</strong>
                {photos[activePhoto].sub}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
              {photos.map((p, i) => (
                <button key={i}
                  onClick={() => setActivePhoto(i)}
                  style={{
                    flex: 1,
                    padding: '8px 12px',
                    background: activePhoto === i ? 'var(--ink)' : 'transparent',
                    color: activePhoto === i ? 'var(--cream)' : 'var(--ink-soft)',
                    border: '1px solid ' + (activePhoto === i ? 'var(--ink)' : 'var(--rule)'),
                    borderRadius: 4,
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 11,
                    letterSpacing: '0.06em',
                    cursor: 'pointer'
                  }}
                >
                  FOT · 0{i + 1}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.RealizationsSection = RealizationsSection;