/* Referenzen page with lightbox gallery */
const { useState: rS, useEffect: rE } = React;

const GALLERY = [
  { id: 1, title: "Landhaus am Donauufer", category: "Fassade", img: "facade1", year: "2025", desc: "Komplette Fassadensanierung mit Silikatfarbe nach denkmalpflegerischer Beratung." },
  { id: 2, title: "Wohnung Marktplatz", category: "Innen", img: "livingRoom", year: "2025", desc: "Wohnzimmer mit warmem Erdton, Decke kreidig weiß, Kantenarbeit ohne Tape." },
  { id: 3, title: "Holzfenster Pfarrhof", category: "Lack", img: "woodDetail", year: "2024", desc: "Sieben Sprossenfenster, abgelaugt und neu mit Leinölfarbe gestrichen." },
  { id: 4, title: "Schlafzimmer Aldersbach", category: "Innen", img: "bedroom", year: "2024", desc: "Glattputz mit Spachtelgrund, dann zweimal seidenmatt in gebrochenem Weiß." },
  { id: 5, title: "Einfamilienhaus Ortenburg", category: "Fassade", img: "facade2", year: "2024", desc: "Sockelschutz, Risssanierung, neue Beschichtung in Sandbeige." },
  { id: 6, title: "Flur & Treppenhaus", category: "Innen", img: "hallway", year: "2024", desc: "Dreigeschossiges Treppenhaus, Wandsockel in dunklem Walnussbraun abgesetzt." },
  { id: 7, title: "Küche Vilshofen-Süd", category: "Innen", img: "kitchen", year: "2023", desc: "Spachteltechnik mit Eisenoxid-Pigmenten, lebhaft und doch ruhig." },
  { id: 8, title: "Eingangstür Pfarrgasse", category: "Lack", img: "facade3", year: "2023", desc: "Historische Eichentür, abgebeizt, neu lasiert mit drei Schichten Bootslack." },
  { id: 9, title: "Esszimmer Hofmark", category: "Innen", img: "diningRoom", year: "2023", desc: "Decke und drei Wände kreidig weiß, eine Wand in tiefem Salbeigrün." },
];

function ReferencesPage() {
  useReveal();
  const [filter, setFilter] = rS("Alle");
  const [lbIdx, setLbIdx] = rS(null);
  const cats = ["Alle", "Innen", "Fassade", "Lack"];
  const filtered = filter === "Alle" ? GALLERY : GALLERY.filter(p => p.category === filter);
  const lbItems = filtered.map(p => ({ src: window.IMAGES[p.img], label: p.title, caption: `${p.category} · ${p.year}` }));

  return (
    <>
      <Nav active="referenzen" />
      <section style={{ borderBottom: "1px solid var(--line)" }}>
        <div className="container" style={{ padding: "clamp(48px, 7vw, 96px) var(--pad)" }}>
          <div className="h-eyebrow" style={{ marginBottom: 24 }}>— Referenzen</div>
          <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 96px)", maxWidth: 1000 }}>
            Eine Auswahl aus<br/>
            <em style={{ color: "var(--accent)" }}>{GALLERY.length} Projekten</em> der letzten Jahre.
          </h1>
          <p className="lede" style={{ marginTop: 28 }}>
            Klicken Sie auf ein Bild, um es größer zu sehen. Eine vollständige Referenzliste mit Adressen senden wir gerne auf Anfrage.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "flex", gap: 8, marginBottom: 48, flexWrap: "wrap" }}>
            {cats.map(c => (
              <button key={c} onClick={() => setFilter(c)} className="btn" style={{
                background: filter === c ? "var(--fg)" : "transparent",
                color: filter === c ? "var(--bg)" : "var(--fg)",
                border: filter === c ? "1px solid var(--fg)" : "1px solid var(--line-strong)",
                padding: "10px 20px",
                fontSize: 13
              }}>{c}</button>
            ))}
            <div style={{ marginLeft: "auto", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".15em", color: "var(--fg-mute)", alignSelf: "center", textTransform: "uppercase" }}>
              {filtered.length} {filtered.length === 1 ? "Projekt" : "Projekte"}
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))", gap: 24 }}>
            {filtered.map((p, i) => (
              <button key={p.id} onClick={() => setLbIdx(i)} className="reveal" style={{
                display: "block", textAlign: "left", background: "transparent", padding: 0, cursor: "zoom-in", width: "100%"
              }}>
                <div style={{ overflow: "hidden", position: "relative" }}>
                  <ImgWithLabel src={window.IMAGES[p.img]} label={p.title} ratio={i % 3 === 0 ? "4/5" : "4/3"} />
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 14, gap: 16 }}>
                  <div>
                    <div className="h-eyebrow">{p.category}</div>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic", marginTop: 4 }}>{p.title}</div>
                  </div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".15em", color: "var(--fg-mute)" }}>{p.year}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      <Lightbox items={lbItems} openIdx={lbIdx} onClose={() => setLbIdx(null)} />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ReferencesPage />);