// ============================================================
// koncepcja.jsx — narracja strony głównej wg INDEX:
// 01 lokalizacja na istniejących parkingach → 02 jeden obiekt,
// trzy funkcje (+ Park&Protect) → 03 mapa i głosowanie →
// 04 przed/po. Slider przed/po (BeforeAfter) bez zmian.
// ============================================================

function BeforeAfter() {
  const [pos, setPos] = React.useState(0.5);
  const [mode, setMode] = React.useState("zielen"); // 'zielen' | 'koncepcja'
  const ref = React.useRef(null);
  const dragging = React.useRef(false);

  const move = (clientX) => {
    const r = ref.current.getBoundingClientRect();
    setPos(Math.min(0.98, Math.max(0.02, (clientX - r.left) / r.width)));
  };
  React.useEffect(() => {
    const mm = (e) => {if (dragging.current) move(e.touches ? e.touches[0].clientX : e.clientX);};
    const up = () => {dragging.current = false;};
    window.addEventListener("mousemove", mm);window.addEventListener("mouseup", up);
    window.addEventListener("touchmove", mm);window.addEventListener("touchend", up);
    return () => {window.removeEventListener("mousemove", mm);window.removeEventListener("mouseup", up);window.removeEventListener("touchmove", mm);window.removeEventListener("touchend", up);};
  }, []);

  const after = mode === "zielen" ? window.__resources.zielen : window.__resources.koncepcjaParking;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div ref={ref} className="card" style={{ position: "relative", overflow: "hidden", aspectRatio: "1060/657", cursor: "ew-resize", userSelect: "none" }}
      onMouseDown={(e) => {dragging.current = true;move(e.clientX);}}
      onTouchStart={(e) => {dragging.current = true;move(e.touches[0].clientX);}}>
        <img src={after} alt="Koncepcja" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} draggable="false" />
        <div style={{ position: "absolute", inset: 0, width: pos * 100 + "%", overflow: "hidden" }}>
          <img src={window.__resources.istniejacy} alt="Istniejący parking" style={{ width: ref.current ? ref.current.getBoundingClientRect().width + "px" : "100%", height: "100%", objectFit: "cover", maxWidth: "none" }} draggable="false" />
        </div>
        <div style={{ position: "absolute", top: 0, bottom: 0, left: pos * 100 + "%", width: 3, background: "#fff", boxShadow: "0 0 8px rgba(0,0,0,0.5)", transform: "translateX(-50%)" }}>
          <div style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", width: 38, height: 38, borderRadius: 99, background: "#fff", display: "grid", placeItems: "center", fontSize: 13, color: "var(--ink)", boxShadow: "var(--shadow-1)", fontFamily: "var(--font-mono)" }}>◂▸</div>
        </div>
        <span className="badge fill" style={{ position: "absolute", top: 12, left: 12 }}>istniejący parking</span>
        <span className="badge green" style={{ position: "absolute", top: 12, right: 12, background: "#fff" }}>{mode === "zielen" ? "odzysk zieleni" : "parking podziemny + schron"}</span>
      </div>
      <div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
        <button className={"btn sm " + (mode === "koncepcja" ? "accent" : "ghost")} onClick={() => setMode("koncepcja")}>Warstwa: parking podziemny (MS 600 / mp 100)</button>
        <button className={"btn sm " + (mode === "zielen" ? "green" : "ghost")} onClick={() => setMode("zielen")}>Warstwa: odtworzona zieleń</button>
      </div>
    </div>);

}

function StepNum({ n }) {
  return <span className="stat-num" style={{ fontSize: 14, color: "var(--accent)", border: "1px solid var(--line-strong)", borderRadius: 99, padding: "4px 12px", background: "var(--surface)" }}>{n}</span>;
}

function KoncepcjaNarrative() {
  const sec = { display: "grid", gridTemplateColumns: "minmax(0,5fr) minmax(0,7fr)", gap: 48, alignItems: "start" };
  return (
    <React.Fragment>
      {/* 01 LOKALIZACJA NA ISTNIEJĄCYCH PARKINGACH */}
      <section className="section" id="koncepcja" style={{ background: "var(--surface)", scrollMarginTop: 64 }} data-comment-anchor="2dfcf9c17f-section-92-7">
        <div className="container grid-collapse" style={sec}>
          <div>
            <div style={{ marginBottom: 14 }}><span className="kicker">koncepcja</span></div>
            <StepNum n="01" />
            <h2 style={{ fontSize: 26, margin: "14px 0 12px" }}>Lokalizacja budowli ochronnych na terenach istniejących parkingów naziemnych</h2>
            <p className="muted">
              Koncepcja obiektów podwójnego zastosowania — parkingów podziemnych z funkcją
              ochrony ludności. W momencie kryzysowym auta wyjeżdżają, a ten sam poziom
              przejmuje funkcję ochronną.
            </p>
          </div>
          <figure style={{ margin: 0 }}>
            <img className="card" src={window.__resources.istniejacy} alt="Istniejący parking naziemny — przykładowa lokalizacja" />
            <figcaption className="small muted mono" style={{ marginTop: 8, fontSize: 11.5 }}>istniejący parking naziemny — przykładowa lokalizacja</figcaption>
          </figure>
        </div>
      </section>

      {/* 02 PROJEKT: JEDEN OBIEKT, TRZY FUNKCJE + PARK&PROTECT */}
      <section className="section">
        <div className="container grid-collapse" style={sec}>
          <div>
            <StepNum n="02" />
            <h2 style={{ fontSize: 26, margin: "14px 0 12px" }}>Projekt: jeden obiekt, trzy funkcje</h2>
            <ul style={{ margin: "0 0 14px", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
              {["parking podziemny z miejscami parkingowymi na sprzedaż lub wynajem",
                "funkcja ochronna w ramach ochrony ludności i obrony cywilnej",
                "odtworzenie zieleni na powierzchni"].map((it, i) => (
                <li key={i} className="muted" style={{ display: "flex", gap: 10 }}>
                  <span style={{ color: "var(--accent)" }}>—</span>{it}
                </li>
              ))}
            </ul>
          </div>
          <figure style={{ margin: 0 }}>
            <img className="card" src={window.__resources.koncepcjaParking} alt="Przykładowy projekt Park&Protect" />
            <figcaption className="small muted mono" style={{ marginTop: 8, fontSize: 11.5 }}>przykładowy projekt Park&amp;Protect</figcaption>
          </figure>
        </div>
      </section>

      {/* 03 MAPA I GŁOSOWANIE — osadzona na stronie, pełna wysokość ekranu */}
      <section id="mapa" className="mapa-section">
        <div className="mapa-head">
          <StepNum n="03" />
          <div>
            <h2>Mapa i głosowanie</h2>
            <p className="small muted" style={{ margin: 0 }}>Wybierz lokalizację na mapie Krosna i oddaj głos — albo zaproponuj własną. Twój głos to argument na sesji rady.</p>
          </div>
        </div>
        <PageMapa />
      </section>

      {/* 04 PRZED / PO */}
      <section className="section">
        <div className="container">
          <div style={{ maxWidth: 680, marginBottom: 24 }}>
            <StepNum n="04" />
            <h2 style={{ fontSize: 26, margin: "14px 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>
    </React.Fragment>);

}

Object.assign(window, { KoncepcjaNarrative, BeforeAfter });