// pages.jsx — dane realizacji, strona „Realizacje" i strona „Kontakt"
const { useState: pUseState } = React;

/* ── Dane realizacji ────────────────────────────────────── */
const REALIZACJE = [
  { slug: "siemianice", city: "Siemianice", kwp: "6,3", mag: "15" },
  { slug: "swarzedz", city: "Swarzędz", kwp: "8,93", mag: "18,06" },
  { slug: "dlugi-kat", city: "Długi Kąt", kwp: "9", mag: "18,08" },
  { slug: "uherce", city: "Uherce Mineralne", kwp: "10,35", mag: "10" },
  { slug: "wipsowo", city: "Wipsowo", kwp: "10", mag: "30" },
  { slug: "stary-wielislaw", city: "Stary Wielisław", kwp: "12", mag: "2,48" },
  { slug: "rzgow", city: "Rzgów", kwp: "10", mag: "16" },
  { slug: "pruszcz", city: "Pruszcz Gdański", kwp: "7", mag: "10" },
  { slug: "plock", city: "Płock", kwp: "8,5", mag: "15" },
  { slug: "plewiska", city: "Plewiska", kwp: "50", mag: null },
  { slug: "lodz-6", city: "Łódź", kwp: "6", mag: "16" },
  { slug: "lodz-54", city: "Łódź", kwp: "5,4", mag: "16" },
  { slug: "dabrowa-gornicza", city: "Dąbrowa Górnicza", kwp: "7,6", mag: "16" },
  { slug: "biala", city: "Biała Podlaska", kwp: "10,5", mag: null },
  { slug: "realizacja-14", city: null, kwp: null, mag: null, title: "Instalacja fotowoltaiczna + magazyn energii" },
  { slug: "lodz-14", city: "Łódź", kwp: "14", mag: null },
  { slug: "koluszki", city: "Koluszki", kwp: null, mag: null },
  { slug: "wolka", city: "Wólka Tyrzyńska", kwp: "10", mag: "16" },
  { slug: "wziachowo", city: "Wziąchowo Wielkie", kwp: "3", mag: "16" },
  { slug: "slawkow", city: "Sławków", kwp: "12", mag: "30" },
  { slug: "warszkowko", city: "Warszkówko", kwp: "5", mag: "16" },
  { slug: "ulhowek", city: "Ulhówek", kwp: "9,2", mag: "15" },
];
const realTitle = (r) => {
  if (r.title) return r.title;
  let t = r.city || "Realizacja";
  if (r.kwp) t += ` — fotowoltaika ${r.kwp} kWp`;
  if (r.mag) t += ` + magazyn energii ${r.mag} kWh`;
  return t;
};

/* ── Strona REALIZACJE ──────────────────────────────────── */
function RealizacjePage() {
  const [lightbox, setLightbox] = pUseState(null);
  return (
    <div data-screen-label="Realizacje">
      <section className="page-hero section-tight">
        <div className="container">
          <div className="eyebrow">Nasze instalacje</div>
          <h1 className="h-xl">Poznaj przykładowe realizacje</h1>
          <p style={{ marginTop: 10 }}>
            Każdą instalację projektujemy i montujemy własną ekipą — od audytu po uruchomienie.
          </p>
        </div>
      </section>

      <div className="container">
        <Reveal className="eco-ribbon">
          <div className="eco-ribbon-lead">
            <span className="eco-ribbon-badge"><Ic.Leaf size={26} /></span>
            <div>
              <strong>Każda instalacja to czystsze powietrze</strong>
              <p>Realne oszczędności dla Ciebie i mniej CO₂ dla planety — z każdym słonecznym dniem.</p>
            </div>
          </div>
          <div className="eco-ribbon-stats">
            <div className="eco-stat"><span className="eco-ic"><Ic.Sun size={20} /></span> 100% energii ze słońca</div>
            <div className="eco-stat"><span className="eco-ic"><Ic.Leaf size={20} /></span> mniej CO₂ w atmosferze</div>
            <div className="eco-stat"><span className="eco-ic"><Ic.Recycle size={20} /></span> w pełni odnawialne źródło</div>
          </div>
        </Reveal>
      </div>

      {REALIZACJE.map((r, i) => {
        const dark = i % 2 === 1;
        return (
          <section key={r.slug} className={`real-section ${dark ? "dark" : ""}`} data-screen-label={`Realizacja: ${r.city}`}>
            <div className="container">
              <Reveal>
                <h2 className="h-lg">{realTitle(r)}</h2>
                <div className="real-meta">
                  {r.kwp ? <span className="real-chip"><Ic.Bolt size={12} /> {r.kwp} kWp</span> : null}
                  {r.mag ? <span className="real-chip"><Ic.Battery size={12} /> magazyn {r.mag} kWh</span> : null}
                  {r.city ? <span className="real-chip">{r.city}</span> : null}
                </div>
                <div className="real-gallery">
                  {[1, 2, 3].map((n) => (
                    <div key={n} className="real-photo-wrap">
                      <picture>
                        <source srcSet={`assets/real/${r.slug}-${n}.webp`} type="image/webp" />
                        <img src={`assets/real/${r.slug}-${n}.jpg`} alt={`${realTitle(r)} — zdjęcie ${n}`}
                             loading="lazy" width="1280" height="900"
                             style={{ width: "100%", height: "230px", objectFit: "cover", display: "block", borderRadius: "14px", background: "var(--mint)" }} />
                      </picture>
                      <button className="zoom-btn" aria-label={`Powiększ zdjęcie ${n} — ${r.city}`}
                              onClick={() => setLightbox({ src: `assets/real/${r.slug}-${n}-lg.jpg`, srcWebp: `assets/real/${r.slug}-${n}-lg.webp`, caption: realTitle(r) })}>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
                          <circle cx="11" cy="11" r="7"></circle><path d="m20 20-4-4M11 8v6M8 11h6"></path>
                        </svg>
                      </button>
                    </div>
                  ))}
                </div>
              </Reveal>
            </div>
          </section>
        );
      })}

      {lightbox ? <Lightbox src={lightbox.src} srcWebp={lightbox.srcWebp} caption={lightbox.caption} onClose={() => setLightbox(null)} /> : null}
    </div>
  );
}

/* ── Strona KONTAKT ─────────────────────────────────────── */
function KontaktPage() {
  return (
    <div data-screen-label="Kontakt">
      <section className="page-hero section-tight">
        <div className="container">
          <div className="eyebrow">Jesteśmy do dyspozycji</div>
          <h1 className="h-xl">Skontaktuj się z nami!</h1>
          <p style={{ marginTop: 10 }}>
            Skontaktuj się z nami poprzez numer telefonu lub formularz kontaktowy.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container split-2">
          <Reveal style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div className="card card-pad" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <h3>Dane kontaktowe</h3>
              <div className="footer-line" style={{ color: "var(--ink)" }}>
                <span style={{ color: "var(--green-700)" }}><Ic.Phone /></span>
                <a href="tel:798040369" style={{ color: "inherit", textDecoration: "none", fontWeight: 700 }}>798-040-369</a>
              </div>
              <div className="footer-line" style={{ color: "var(--ink)" }}>
                <span style={{ color: "var(--green-700)" }}><Ic.Clock /></span> pn–pt 10:00–16:00
              </div>
              <div className="footer-line" style={{ color: "var(--ink)" }}>
                <span style={{ color: "var(--green-700)" }}><Ic.Mail /></span>
                <a href="mailto:kontakt@twojkalkulatoroze.com" style={{ color: "inherit", textDecoration: "none", fontWeight: 700 }}>kontakt@twojkalkulatoroze.com</a>
              </div>
              <p style={{ margin: 0, color: "var(--muted)", fontSize: "0.92rem" }}>
                Odpowiadamy na wiadomości z formularza w ciągu jednego dnia roboczego.
              </p>
            </div>
            <picture>
              <source srcSet="assets/team.webp" type="image/webp" />
              <img src="assets/team.jpg" alt="Zespół Twój Kalkulator OZE"
                   style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", objectPosition: "center", display: "block", borderRadius: "20px" }} />
            </picture>
          </Reveal>
          <Reveal>
            <LeadForm title="Napisz do nas" doubleConsent submitLabel="WYŚLIJ" context={{ typ: "kontakt" }} />
          </Reveal>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { REALIZACJE, realTitle, RealizacjePage, KontaktPage });