// ============================================================
// pages.jsx — strony statyczne: /, /gminy, /inwestorzy, /kontakt,
// /polityka-prywatnosci, /regulamin, /moje
// ============================================================

function PageHome() {
  useStore();
  const t = platformTotals();
  return (
    <div className="page">
      {/* HERO */}
      <header style={{ borderBottom: "1px solid var(--line)", background: "var(--surface)" }}>
        <div className="container" 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" }}>
              <Link to="/mapa" className="btn primary lg">Zobacz mapę i zagłosuj</Link>
              <Link to="/koncepcja" className="btn ghost lg">Poznaj koncepcję</Link>
            </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 — wmontowana ze strony /koncepcja (pierwszy blok treści) */}
      <KoncepcjaNarrative />

      {/* CTA MAPA — zaraz pod koncepcją */}
      <section className="section">
        <div className="container card" style={{ padding: 0, overflow: "hidden", display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)" }}>
          <img src={window.__resources.mapaLok} alt="Mapa koncepcyjnych lokalizacji w Krośnie" style={{ height: "100%", objectFit: "cover" }} />
          <div style={{ padding: 44, display: "flex", flexDirection: "column", gap: 16, justifyContent: "center" }}>
            <span className="kicker green">głosowanie mieszkańców</span>
            <h2 style={{ fontSize: 27 }}>Twój głos to argument na sesji rady</h2>
            <p className="muted">
              Każdy głos — potwierdzony e-mailem, a opcjonalnie tożsamością (mojeID / mObywatel) —
              buduje twardy dowód zapotrzebowania, który trafia do gmin i inwestorów wyłącznie
              jako zagregowane statystyki.
            </p>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              <Link to="/mapa" className="btn accent">Głosuj na lokalizację</Link>
              <Link to="/zglos" className="btn ghost">➕ Zaproponuj własną</Link>
            </div>
          </div>
        </div>
      </section>

      {/* PRZED / PO — kafel pod mapą */}
      <section className="section" style={{ background: "var(--surface)" }}>
        <div className="container">
          <div style={{ maxWidth: 680, marginBottom: 24 }}>
            <span className="kicker">wizualizacja</span>
            <h2 style={{ fontSize: 27, margin: "10px 0 12px" }}>Przed / po: przykładowa lokalizacja w Krośnie</h2>
            <p className="muted">Przeciągnij suwak. Istniejący parking naziemny → parking podziemny z funkcją schronu (MS 600 / mp 100) → odtworzona powierzchnia biologicznie czynna.</p>
          </div>
          <BeforeAfter />
        </div>
      </section>

      {/* 3 ŚCIEŻKI */}
      <section className="section">
        <div className="container">
          <span className="kicker">trzy ścieżki</span>
          <h2 style={{ fontSize: 30, marginTop: 10, marginBottom: 36 }}>Dla kogo jest ta platforma</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 18 }}>
            {[
              { to: "/gminy", tag: "B2G", title: "Dla gmin", body: "Analiza lokalizacyjna budowli ochronnych finansowalna z Programu Ochrony Ludności — gmina nie płaci z własnego budżetu.", cta: "Oferta dla gmin" },
              { to: "/inwestorzy", tag: "B2B", title: "Dla inwestorów", body: "Od 2026 r. nowe budynki muszą uwzględniać funkcje ochronne. Audyt projektu, optymalizacja kosztu, wsparcie w dotacjach.", cta: "Oferta dla inwestorów" },
              { to: "/mapa", tag: "Mieszkańcy", title: "Dla mieszkańców", body: "Zagłosuj na lokalizację parkingu podziemnego z funkcją schronu w swojej okolicy — albo zaproponuj własną na mapie.", cta: "Przejdź do mapy" },
            ].map((c) => (
              <Link key={c.to} to={c.to} className="card pad hover" style={{ textDecoration: "none", display: "flex", flexDirection: "column", gap: 12 }}>
                <span className="badge blue" style={{ alignSelf: "flex-start" }}>{c.tag}</span>
                <h3 style={{ fontSize: 21 }}>{c.title}</h3>
                <p className="small muted" style={{ flex: 1 }}>{c.body}</p>
                <span style={{ fontWeight: 600, fontSize: 14, color: "var(--accent)" }}>{c.cta} →</span>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* KIM JESTEM */}
      <section className="section" style={{ background: "var(--surface)" }}>
        <div className="container" 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>
            <Link to="/koncepcja" className="btn ghost" style={{ alignSelf: "flex-start" }}>Zaplecze naukowe koncepcji →</Link>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
function PageGminy() {
  useStore();
  const agg = communeAggregates();
  const krosno = agg.find((a) => a.commune === "Krosno") || { total: 0, verified: 0 };
  return (
    <div className="page">
      <header className="section" style={{ background: "var(--surface)", borderBottom: "1px solid var(--line)" }}>
        <div className="container" style={{ maxWidth: 880 }}>
          <span className="kicker">oferta dla gmin · B2G</span>
          <h1 style={{ fontSize: 38, margin: "14px 0 18px" }}>Analiza lokalizacyjna budowli ochronnych — finansowalna w 100% z Programu Ochrony Ludności</h1>
          <p style={{ fontSize: 17, color: "var(--ink-2)" }}>
            Ustawa o ochronie ludności i obronie cywilnej nakłada na gminy obowiązek zapewnienia miejsc
            zbiorowej ochrony dla 50% mieszkańców, w tym 25% w budowlach ochronnych. Program Ochrony
            Ludności finansuje 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>
      </header>

      <section className="section">
        <div className="container">
          <h2 style={{ fontSize: 26, marginBottom: 8 }}>Co to oznacza dla Państwa gminy</h2>
          <p className="muted" data-comment-anchor="0b175783b8-div-69-11" style={{ marginBottom: 28, maxWidth: 760 }}>
            Ustawa o ochronie ludności i obronie cywilnej wymaga miejsc zbiorowej ochrony dla połowy
            mieszkańców. W Krośnie (43 594 mieszkańców) oznacza to 21 797 miejsc, z czego 10 899
            w budowlach ochronnych. Takich obiektów w polskich miastach niemal nie ma — a wolnych
            terenów pod nowe inwestycje w śródmieściach brakuje.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 18 }}>
            {[["21 797", "wymaganych miejsc we wszystkich obiektach zbiorowej ochrony", "50% populacji"],
              ["10 899", "w tym w budowlach ochronnych", "25% populacji"],
              ["7 550", "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: 36, margin: "12px 0 6px" }}>{n}</div>
                <p className="small muted">{l}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--surface)" }}>
        <div className="container">
          <span className="kicker">zakres współpracy</span>
          <h2 style={{ fontSize: 26, margin: "10px 0 28px" }}>Trzy pakiety</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 18 }}>
            {[
              { n: "I", t: "Analiza wstępna", items: ["Bilans zapotrzebowania wg ustawy", "Siatka heksagonalna 500 m (zasięg dojścia)", "Inwentaryzacja parkingów naziemnych", "Raport PDF"] },
              { n: "II", t: "Analiza pełna", items: ["Wszystko z pakietu I", "Koncepcje lokalizacyjne (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", "Prezentacja dla rady gminy"] },
            ].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>
      </section>

      <section className="section">
        <div className="container" style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: 40, alignItems: "center" }}>
          <div>
            <span className="kicker">case study</span>
            <h2 style={{ fontSize: 26, margin: "10px 0 14px" }}>Krosno: metoda w praktyce</h2>
            <p className="muted" style={{ marginBottom: 18 }}>
              Siatka heksagonalna 500 m wyznacza zasięgi dojścia; analiza urbanistyczna istniejących
              parkingów naziemnych wskazuje lokalizacje spełniające warunki techniczne budowli ochronnych.
            </p>
            <div className="card pad" style={{ background: "var(--accent-soft)", borderColor: "transparent" }}>
              <div style={{ fontWeight: 600, marginBottom: 4 }}>Dane popytowe z platformy</div>
              <p className="small" style={{ color: "var(--ink-2)" }}>
                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ą.
              </p>
            </div>
            <Link to="/koncepcja" className="btn ghost" style={{ marginTop: 18 }}>Pełna koncepcja →</Link>
          </div>
          <div style={{ display: "grid", gap: 14 }}>
            <img className="card" src={window.__resources.siatka} alt="Siatka heksagonalna 500 m — Krosno" />
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--surface)" }}>
        <div className="container" style={{ maxWidth: 660 }}>
          <span className="kicker">bezpłatna wstępna ocena</span>
          <h2 style={{ fontSize: 26, margin: "10px 0 8px" }}>Sprawdź potencjał swojej gminy</h2>
          <p className="muted" style={{ marginBottom: 24 }}>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" }],
            ["phone", "Telefon (opcjonalnie)", {}],
          ]} />
        </div>
      </section>
    </div>
  );
}

// ============================================================
function PageInwestorzy() {
  return (
    <div className="page">
      <header className="section" style={{ background: "var(--surface)", borderBottom: "1px solid var(--line)" }}>
        <div className="container" style={{ maxWidth: 880 }}>
          <span className="kicker">oferta dla inwestorów · B2B</span>
          <h1 style={{ fontSize: 38, margin: "14px 0 18px" }}>Funkcja ochronna w garażu podziemnym: koszt do optymalizacji albo dotacja do pozyskania</h1>
          <p style={{ fontSize: 17, color: "var(--ink-2)" }}>
            Od 2026 r. nowe budynki użyteczności publicznej i część budownictwa mieszkaniowego muszą
            uwzględniać funkcje ochronne; garaże podziemne dają możliwość urządzenia miejsc doraźnego
            schronienia. Źle zaprojektowany garaż to nadpłata lub problem z pozwoleniem.
            Dobrze zaprojektowany — dotacja pokrywająca koszty zwiększone funkcją ochronną.
          </p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 18 }}>
            {[
              { t: "Audyt projektu", b: "Weryfikacja projektu garażu pod wymogi techniczne budowli ochronnych — zanim kosztowne zmiany staną się konieczne na etapie pozwolenia." },
              { t: "Optymalizacja kosztu", b: "Funkcja ochronna zaprojektowana tak, by koszty zwiększone były policzalne, minimalne i kwalifikowalne 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>
        </div>
      </section>

      <section className="section" style={{ background: "var(--surface)" }}>
        <div className="container" style={{ maxWidth: 660 }}>
          <span className="kicker">kontakt</span>
          <h2 style={{ fontSize: 26, margin: "10px 0 8px" }}>Porozmawiajmy o Twojej inwestycji</h2>
          <p className="muted" style={{ marginBottom: 24 }}>Im wcześniejszy etap, tym większe pole optymalizacji.</p>
          <LeadForm type="inwestor" sourcePage="/inwestorzy" fields={[
            ["organization", "Firma", { required: true }],
            ["contact", "Imię i nazwisko", { required: true }],
            ["email", "E-mail", { required: true }],
            ["message", "Etap inwestycji i lokalizacja", { textarea: true, placeholder: "np. projekt budowlany w przygotowaniu, Rzeszów, 2 kondygnacje podziemne…" }],
          ]} />
        </div>
      </section>
    </div>
  );
}

// ============================================================
function PageKontakt() {
  return (
    <div className="page">
      <section className="section">
        <div className="container" 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>
            <h1 style={{ fontSize: 34 }}>Sebastian Bogusz</h1>
            <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>
            <h2 style={{ fontSize: 22, marginBottom: 20 }}>Formularz kontaktowy</h2>
            <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>
    </div>
  );
}

// ============================================================
function PageLegal({ kind }) {
  const isPolicy = kind === "polityka";
  return (
    <div className="page">
      <section className="section">
        <div className="container" style={{ maxWidth: 760 }}>
          <span className="kicker">{isPolicy ? "rodo" : "zasady platformy"}</span>
          <h1 style={{ fontSize: 32, margin: "12px 0 24px" }}>{isPolicy ? "Polityka prywatności" : "Regulamin platformy"}</h1>
          <div className="card pad" style={{ display: "flex", flexDirection: "column", gap: 16, color: "var(--ink-2)", fontSize: 14.5, lineHeight: 1.65 }}>
            {isPolicy ? (<React.Fragment>
              <p><b style={{ color: "var(--ink)" }}>Minimalizacja danych.</b> Nie przechowujemy imion i nazwisk. Numer PESEL przetwarzany jest wyłącznie przelotnie podczas weryfikacji tożsamości i zapisywany jako nieodwracalny skrót (HMAC) — wyłącznie w celu zapewnienia rzetelności badania („jedna osoba = jeden głos").</p>
              <p><b style={{ color: "var(--ink)" }}>Udostępnianie.</b> Gminom i inwestorom przekazujemy wyłącznie zagregowane statystyki — nigdy dane jednostkowe.</p>
              <p><b style={{ color: "var(--ink)" }}>Twoje prawa.</b> Głos i dane możesz wycofać w każdej chwili przez panel „Moje głosy" oraz link w każdym e-mailu.</p>
              <p className="small" style={{ color: "var(--ink-3)" }}>[ Prototyp — finalne klauzule do konsultacji prawnej przed startem. ]</p>
            </React.Fragment>) : (<React.Fragment>
              <p><b style={{ color: "var(--ink)" }}>Propozycje lokalizacji.</b> Każda propozycja przechodzi moderację przed publikacją (zwykle do 48 h). Odrzucenie propozycji nie rodzi roszczeń.</p>
              <p><b style={{ color: "var(--ink)" }}>Głosowanie.</b> Deklaracje są niewiążącym badaniem zainteresowania. Jeden adres e-mail = jeden głos na lokalizację; weryfikacja tożsamości gwarantuje zasadę „1 osoba = 1 głos".</p>
              <p><b style={{ color: "var(--ink)" }}>Zdjęcia.</b> Przesyłając zdjęcie udzielasz licencji na jego publikację na karcie lokalizacji. Zakaz zgłaszania cudzych danych.</p>
              <p className="small" style={{ color: "var(--ink-3)" }}>[ Prototyp — finalny regulamin do konsultacji prawnej przed startem. ]</p>
            </React.Fragment>)}
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// /moje — panel magic link
function PageMoje() {
  const s = useStore();
  const votes = s.myVotes.filter((v) => !v.withdrawn);
  const withdraw = (ts) => {
    Store.set({ myVotes: s.myVotes.map((v) => v.ts === ts ? { ...v, withdrawn: true } : v) });
    Store.audit("user", "vote_withdrawn", "declaration", null);
    toast("Głos wycofany");
  };
  return (
    <div className="page">
      <section className="section">
        <div className="container" style={{ maxWidth: 760 }}>
          <span className="kicker">panel użytkownika · magic link</span>
          <h1 style={{ fontSize: 32, margin: "12px 0 6px" }}>Moje głosy i propozycje</h1>
          <p className="muted small" style={{ marginBottom: 28 }}>Dostęp bezstanowy — ten widok otwiera link z e-maila. Możesz wycofać głos lub usunąć dane w każdej chwili.</p>

          <h2 style={{ fontSize: 18, marginBottom: 12 }}>Głosy ({votes.length})</h2>
          {votes.length === 0 && <div className="card pad small muted">Nie oddałeś jeszcze żadnego głosu. <Link to="/mapa" style={{ color: "var(--accent)" }}>Przejdź do mapy →</Link></div>}
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {votes.map((v) => {
              const loc = locById(v.locId);
              return (
                <div key={v.ts} className="card pad" style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
                  <div style={{ flex: 1, minWidth: 200 }}>
                    <Link to={"/lokalizacja/" + (loc ? loc.slug : "")} style={{ fontWeight: 600, textDecoration: "none" }}>{loc ? loc.name : v.locId}</Link>
                    <div className="small muted">{INTERESTS[v.interest]}{v.priceBand ? " · " + v.priceBand : ""}</div>
                  </div>
                  {v.verified ? <span className="badge green">✓ zweryfikowany</span> : <span className="badge">e-mail potwierdzony</span>}
                  <button className="btn danger sm" onClick={() => withdraw(v.ts)}>Wycofaj głos</button>
                </div>
              );
            })}
          </div>

          <h2 style={{ fontSize: 18, margin: "32px 0 12px" }}>Propozycje lokalizacji ({s.myProposals.length})</h2>
          {s.myProposals.length === 0 && <div className="card pad small muted">Brak propozycji. <Link to="/zglos" style={{ color: "var(--accent)" }}>Zaproponuj lokalizację →</Link></div>}
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {s.myProposals.map((p) => {
              const cur = locById(p.id) || p;
              const st = cur.status;
              return (
                <div key={p.id} className="card pad" style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
                  <div style={{ flex: 1, minWidth: 200 }}>
                    <span style={{ fontWeight: 600 }}>{p.name}</span>
                    <div className="small muted">{p.addressLabel}</div>
                  </div>
                  {st === "pending" && <span className="badge amber">oczekuje na moderację</span>}
                  {st === "published" && <span className="badge green">opublikowana</span>}
                  {st === "rejected" && <span className="badge red" title={cur.rejectionReason}>odrzucona</span>}
                  {st === "merged" && <span className="badge">scalona z inną</span>}
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageHome, PageGminy, PageInwestorzy, PageKontakt, PageLegal, PageMoje });