// ============================================================
// home-v2.jsx — KONCEPT V2: one-page. Wszystko w jednym scrollu:
// hero → liczniki → koncepcja (01–06, w tym mapa) → przed/po →
// dla gmin → dla inwestorów → o mnie → kontakt
// ============================================================

// Ścieżki, które na stronie v2 są sekcjami (nie podstronami) —
// nadpisujemy globalny Link, żeby nie skakał na górę strony.
const V2_SECTION_ROUTES = ["/koncepcja", "/mapa", "/gminy", "/inwestorzy", "/kontakt", "/o-mnie"];
window.Link = function Link({ to, className, children, ...rest }) {
  return (
    <a href={"#" + to} className={className}
      onClick={() => { if (to !== "/" && V2_SECTION_ROUTES.indexOf(to) < 0) window.scrollTo(0, 0); }}
      {...rest}>{children}</a>
  );
};

// ---------- nawigacja one-page ----------
function NavV2({ route }) {
  const links = [
    ["/koncepcja", "Koncepcja"],
    ["/gminy", "Dla gmin"],
    ["/inwestorzy", "Dla inwestorów"],
    ["/kontakt", "Kontakt", "hide-m"],
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#/" className="nav-logo" onClick={() => window.scrollTo(0, 0)}>
          <LogoMark />
          <span><LogoWordmark /><span style={{ color: "var(--ink-3)", fontWeight: 400 }} className="hide-m"> / budowle ochronne</span></span>
        </a>
        <div className="nav-links">
          {links.map(([to, label, cls]) => (
            <a key={to} href={"#" + to} className={"nav-link " + (cls || "") + (route === to ? " active" : "")}>{label}</a>
          ))}
          <a href="#/mapa" className="nav-link cta">Mapa i głosowanie</a>
        </div>
      </div>
    </nav>
  );
}

// ---------- sekcja: dla gmin (skondensowana podstrona) ----------
function GminySection() {
  useStore();
  const agg = communeAggregates();
  const krosno = agg.find((a) => a.commune === "Krosno") || { total: 0, verified: 0 };
  return (
    <section className="section" id="gminy" style={{ scrollMarginTop: 64, borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <span className="kicker">oferta dla gmin · B2G</span>
        <h2 style={{ fontSize: 30, margin: "10px 0 12px", maxWidth: 820 }}>Analiza lokalizacyjna budowli ochronnych — finansowalna w 100% z Programu Ochrony Ludności</h2>
        <p className="muted" data-comment-anchor="0b175783b8-div-69-11" style={{ marginBottom: 28, maxWidth: 780 }}>
          Ustawa o ochronie ludności i obronie cywilnej nakłada na gminy obowiązek zapewnienia
          miejsc zbiorowej ochrony dla 50% mieszkańców miast, w tym 25% w budowlach ochronnych.
          Program Ochrony Ludności finansuje opracowanie analiz — w tym szacowanie liczby,
          pojemności i rozmieszczenia obiektów oraz projektowanie — <b>gmina nie płaci z własnego
          budżetu</b>. Nowelizacja z maja 2026 r. umożliwia wieloletnie, 5-letnie finansowanie rządowe.
        </p>

        <div style={{ maxWidth: 780, marginBottom: 18 }}>
          <span className="kicker">case study</span>
          <h3 style={{ fontSize: 22, margin: "8px 0 6px" }}>Krosno: metoda w praktyce</h3>
          <p className="small muted">
            Przykład: Krosno, 43 594 mieszkańców. Miasto pokrywa siatka heksagonalna o module
            500 m — maksymalnym zasięgu dojścia do miejsca schronienia. W każdym module analizowane
            są istniejące parkingi naziemne pod kątem warunków technicznych budowli ochronnych.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 18, marginBottom: 28 }}>
          {[["21 797", "wymaganych miejsc we wszystkich obiektach zbiorowej ochrony", "50% populacji"],
            ["10 899", "w tym w budowlach ochronnych", "25% populacji"],
            ["> 7 000", "miejsc możliwych do uzyskania na istniejących parkingach naziemnych", "≈ 70% zapotrzebowania"]].map(([n, l, b], i) => (
            <div key={i} className="card pad">
              <span className="badge blue">{b}</span>
              <div className="stat-num" style={{ fontSize: 34, margin: "12px 0 6px" }}>{n}</div>
              <p className="small muted">{l}</p>
            </div>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 36, maxWidth: 900 }} className="grid-collapse">
          <figure style={{ margin: 0 }}>
            <img className="card" src={window.__resources.siatka} alt="Siatka heksagonalna 500 m — Krosno" />
            <figcaption className="small muted mono" style={{ marginTop: 8, fontSize: 11.5 }}>siatka 500 m — zasięgi dojścia</figcaption>
          </figure>
          <figure style={{ margin: 0 }}>
            <img className="card" src={window.__resources.mapaLok} alt="Analiza lokalizacji obiektów ochronnych — Krosno" />
            <figcaption className="small muted mono" style={{ marginTop: 8, fontSize: 11.5 }}>analiza lokalizacji obiektów ochronnych w kontekście zagrożeń naturalnych i antropogenicznych na przykładzie gminy Krosno</figcaption>
          </figure>
        </div>

        <div style={{ maxWidth: 780, marginBottom: 18 }}>
          <span className="kicker">zakres współpracy</span>
          <h3 style={{ fontSize: 22, margin: "8px 0 0" }}>Trzy pakiety</h3>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 18, marginBottom: 36 }}>
          {[
            { n: "I", t: "Analiza wstępna", items: ["Bilans zapotrzebowania wg zapisów Ustawy i warunków technicznych", "Koncepcja lokalizacji Obiektów Zbiorowej Ochrony", "Wskazanie optymalnych lokalizacji", "Raport podsumowujący"] },
            { n: "II", t: "Analiza pełna", items: ["Wszystko z pakietu I", "Wstępne koncepcje wybranych OZO (MS / mp per lokalizacja)", "Wizualizacje przed / po", "Rekomendacje etapowania"], featured: true },
            { n: "III", t: "Wsparcie wdrożenia", items: ["Wszystko z pakietu II", "Montaż finansowy: dotacja + część komercyjna + udział gminy", "Materiały do wniosków o dofinansowanie"] },
          ].map((p) => (
            <div key={p.n} className="card pad" style={p.featured ? { borderColor: "var(--accent)", boxShadow: "var(--shadow-1)" } : null}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className="stat-num" style={{ fontSize: 22, color: "var(--accent)" }}>{p.n}</span>
                {p.featured && <span className="badge blue">najczęściej wybierany</span>}
              </div>
              <h3 style={{ fontSize: 19, margin: "10px 0 14px" }}>{p.t}</h3>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                {p.items.map((it, i) => <li key={i} className="small muted" style={{ display: "flex", gap: 8 }}><span style={{ color: "var(--accent)" }}>—</span>{it}</li>)}
              </ul>
            </div>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: 40, alignItems: "start" }} className="grid-collapse">
          <div>
            <h3 style={{ fontSize: 21, marginBottom: 10 }}>Dane popytowe z platformy</h3>
            <p className="small muted" style={{ marginBottom: 14 }}>
              W Krośnie mieszkańcy oddali już <b className="stat-num">{fmt(krosno.total)}</b> głosów na konkretne
              lokalizacje, w tym <b className="stat-num">{fmt(krosno.verified)}</b> zweryfikowanych tożsamością —
              twardy dowód zapotrzebowania na sesję rady.
            </p>
            <figure style={{ margin: 0 }}>
              <img className="card" src={window.__resources.koncepcjaParking} alt="Koncepcja obiektu podwójnego zastosowania — Krosno" />
              <figcaption className="small muted mono" style={{ marginTop: 8, fontSize: 11.5 }}>koncepcja obiektu podwójnego zastosowania — parking podziemny z funkcją ukrycia w Krośnie przy ul. Krakowskiej / Naftowej / Kolejowej</figcaption>
            </figure>
          </div>
          <div className="card pad">
            <h3 style={{ fontSize: 19, marginBottom: 4 }}>Bezpłatna wstępna ocena gminy</h3>
            <p className="small muted" style={{ marginBottom: 18 }}>Odpowiem z bilansem zapotrzebowania i wstępną oceną potencjału istniejących parkingów.</p>
            <LeadForm type="gmina" sourcePage="/gminy" fields={[
              ["organization", "Gmina / urząd", { required: true, placeholder: "np. Gmina Miasto Krosno" }],
              ["contact", "Imię, nazwisko i stanowisko", { required: true, placeholder: "np. Jan Kowalski, naczelnik WZK" }],
              ["email", "E-mail służbowy", { required: true, placeholder: "adres@gmina.pl" }],
            ]} />
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- sekcja: dla inwestorów (skondensowana) ----------
function InwestorzySection() {
  return (
    <section className="section" id="inwestorzy" style={{ background: "var(--surface)", scrollMarginTop: 64, borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <span className="kicker">dla inwestorów · B2B</span>
        <h2 style={{ fontSize: 30, margin: "10px 0 12px", maxWidth: 820 }}>Funkcja ochronna w garażu podziemnym: koszt do optymalizacji albo dotacja do pozyskania</h2>
        <p className="muted" style={{ marginBottom: 28, maxWidth: 780 }}>
          Ze względu na duży popyt na miejsca parkingowe — zwłaszcza w zurbanizowanych ośrodkach —
          oraz potencjał pogodzenia interesów wielu środowisk i inwestorów, parkingi podziemne
          z funkcją schronów w miejscach istniejących parkingów naziemnych to lokalizacje
          o największym potencjale zarówno biznesowym, jak i społecznym.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 18, marginBottom: 28 }}>
          {[
            { t: "Audyt projektu", b: "Weryfikacja projektu parkingu pod wymogi techniczne budowli ochronnych — zanim kosztowne zmiany staną się konieczne na etapie pozwolenia." },
            { t: "Optymalizacja kosztu", b: "Funkcja ochronna zaprojektowana tak, by jej koszty były kwalifikowane do dofinansowania." },
            { t: "Wsparcie w dotacji", b: "Program Ochrony Ludności finansuje do 100% kosztów zwiększonych funkcją ochronną. Przygotowanie dokumentacji i argumentacji." },
          ].map((c, i) => (
            <div key={i} className="card pad">
              <div className="stat-num" style={{ fontSize: 15, color: "var(--accent)", marginBottom: 10 }}>0{i + 1}</div>
              <h3 style={{ fontSize: 19, marginBottom: 10 }}>{c.t}</h3>
              <p className="small muted">{c.b}</p>
            </div>
          ))}
        </div>
        <a href="#/kontakt" className="btn accent">Porozmawiajmy o Twojej inwestycji →</a>
      </div>
    </section>
  );
}

// ---------- sekcja: kim jestem ----------
function OMnieSection() {
  return (
    <section className="section" id="o-mnie" style={{ scrollMarginTop: 64, borderTop: "1px solid var(--line)" }}>
      <div className="container grid-collapse" style={{ display: "grid", gridTemplateColumns: "minmax(0,4fr) minmax(0,8fr)", gap: 56, alignItems: "center" }}>
        <div className="ph" style={{ aspectRatio: "4/5" }}>[ portret — zdjęcie<br />Sebastiana Bogusza ]</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <span className="kicker">kim jestem</span>
          <h2 style={{ fontSize: 30 }}>Sebastian Bogusz</h2>
          <p style={{ color: "var(--ink-2)", maxWidth: 620 }}>
            mgr inż. arch., architekt IARP. Absolwent studiów Wojskowej Akademii Technicznej
            „Przygotowanie i eksploatacja schronów i ukryć dla ludności" (kierownik pracy:
            płk dr hab. inż. Władysław Harmata, prof. WAT). Radny osiedla Tysiąclecia w Krośnie.
          </p>
          <div style={{ display: "flex", gap: 28, flexWrap: "wrap", marginTop: 6 }}>
            {[["7 550", "miejsc schronienia zidentyfikowanych w Krośnie na istniejących parkingach"],
              ["≈ 70%", "ustawowego zapotrzebowania — bez zajmowania nowych terenów"],
              ["12", "koncepcyjnych lokalizacji opublikowanych na mapie"]].map(([n, l], i) => (
              <div key={i} style={{ maxWidth: 220 }}>
                <div className="stat-num" style={{ fontSize: 30, color: "var(--accent)" }}>{n}</div>
                <div className="small muted" style={{ marginTop: 4 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- sekcja: kontakt ----------
function KontaktSection() {
  return (
    <section className="section" id="kontakt" style={{ background: "var(--surface)", scrollMarginTop: 64, borderTop: "1px solid var(--line)" }}>
      <div className="container grid-collapse" style={{ display: "grid", gridTemplateColumns: "minmax(0,5fr) minmax(0,7fr)", gap: 56 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <span className="kicker">kontakt</span>
          <h2 style={{ fontSize: 30 }}>Sebastian Bogusz</h2>
          <p className="muted">mgr inż. arch., architekt IARP<br />Przygotowanie i eksploatacja schronów i ukryć dla ludności (WAT)</p>
          <div className="card pad" style={{ display: "flex", flexDirection: "column", gap: 10, fontFamily: "var(--font-mono)", fontSize: 14 }}>
            <span>✉ &nbsp;sebastian.bogusz@gmail.com</span>
            <span>☎ &nbsp;793 630 660</span>
            <span>⌖ &nbsp;Krosno, woj. podkarpackie</span>
          </div>
        </div>
        <div>
          <h3 style={{ fontSize: 21, marginBottom: 18 }}>Formularz kontaktowy</h3>
          <LeadForm type="inne" sourcePage="/kontakt" fields={[
            ["contact", "Imię i nazwisko", { required: true }],
            ["organization", "Organizacja (opcjonalnie)", {}],
            ["email", "E-mail", { required: true }],
            ["message", "Wiadomość", { textarea: true, required: true }],
          ]} />
        </div>
      </div>
    </section>
  );
}

// ---------- strona główna v2 (one-page) ----------
function PageHomeV2() {
  useStore();
  const t = platformTotals();
  return (
    <div className="page">
      {/* HERO — super hasło + idea (3 funkcje) jako pierwsza treść */}
      <header style={{ borderBottom: "1px solid var(--line)", background: "var(--surface)" }}>
        <div className="container hero-grid" style={{ padding: "84px 28px 64px", display: "grid", gridTemplateColumns: "minmax(0,7fr) minmax(0,5fr)", gap: 56, alignItems: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <span className="kicker">budowle ochronne podwójnego zastosowania</span>
            <h1 style={{ fontSize: 48, fontWeight: 650, lineHeight: 1.08 }}>
              Schrony, które oddają miastom <span style={{ color: "var(--accent)" }}>zieleń</span>
            </h1>
            <p style={{ fontSize: 18, color: "var(--ink-2)", maxWidth: 560 }}>
              Odpowiedzią są obiekty podwójnego zastosowania: parking podziemny z funkcją schronu —
              a na powierzchni odzyskana zieleń dla mieszkańców.
            </p>
            <div data-comment-anchor="c9e1458cf4-div-94-11" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {[["parking podziemny", "finansowanie komercyjne", "blue"], ["funkcja schronu", "dotacja na koszty zwiększone", "blue"], ["zieleń na powierzchni", "odzysk terenu dla mieszkańców", "green"]].map(([a, b, c], i) => (
                <div key={i} className="card" style={{ padding: "10px 14px", display: "flex", justifyContent: "space-between", gap: 10, alignItems: "center" }}>
                  <b style={{ fontSize: 14 }}>{a}</b><span className={"badge " + c}>{b}</span>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="#/mapa" className="btn primary lg">Zobacz mapę i zagłosuj</a>
              <a href="#/koncepcja" className="btn ghost lg">Poznaj koncepcję</a>
            </div>
          </div>
          <div className="card" style={{ overflow: "hidden" }}>
            <img src={window.__resources.zielen} alt="Koncepcja odtworzenia powierzchni biologicznie czynnej nad parkingiem podziemnym" />
            <div style={{ padding: "12px 16px", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10 }}>
              <span className="small muted">Schron, który oddaje miastu zieleń</span>
              <span className="badge green">koncepcja · Krosno</span>
            </div>
          </div>
        </div>
      </header>

      {/* PASEK LICZNIKÓW */}
      <div style={{ background: "var(--ink)", color: "#fff" }}>
        <div className="container" style={{ display: "flex", gap: 0, flexWrap: "wrap" }}>
          {[
            [fmt(t.locations), "lokalizacji na mapie"],
            [fmt(t.total), "głosów mieszkańców"],
            ["✓ " + fmt(t.verified), "zweryfikowanych tożsamością"],
            ["7 550", "potencjalnych miejsc schronienia w Krośnie"],
          ].map(([num, label], i) => (
            <div key={i} style={{ padding: "20px 36px 20px 0", marginRight: 36, borderRight: i < 3 ? "1px solid rgba(255,255,255,0.15)" : "none", display: "flex", alignItems: "baseline", gap: 10 }}>
              <span className="stat-num" style={{ fontSize: 26 }}>{num}</span>
              <span style={{ fontSize: 13, opacity: 0.65 }}>{label}</span>
            </div>
          ))}
        </div>
      </div>

      {/* KONCEPCJA 01–04: lokalizacja → jeden obiekt trzy funkcje → mapa → przed/po */}
      <KoncepcjaNarrative />

      <GminySection />
      <InwestorzySection />
      <OMnieSection />
      <KontaktSection />
    </div>
  );
}

Object.assign(window, { PageHomeV2, NavV2 });