// Referenzen page

function PageReferenzen({ navigate }) {
  const projects = [
    {
      img: IMG.rails,
      title: "Amphibienhabitatanalyse – Elektrifizierung der Marschbahntrasse",
      client: "Bio-Consult SH",
      year: "2026",
      desc: "Die Bahnstrecke Hamburg–Westerland soll zur klimaneutralen Verkehrsachse der Westküste werden. Biotope-Studio prüfte rund 414 Sölle, Gräben und Kleingewässer im Raum Husum auf ihre Eignung als Amphibienlebensräume – digital dokumentiert in QField.",
      tags: ["Amphibien", "GIS / QField", "Schleswig-Holstein"],
    },
    {
      img: IMG.building,
      title: "Artenschutzfachbeitrag – Ersatzneubau Wohngebäude",
      client: "Rackelhahn GmbH",
      year: "2026",
      desc: "Bewertung möglicher artenschutzrechtlicher Konflikte im Zuge eines Gebäudeabbruchs und Neubaus in Hamburg. Gebäude, Freiflächen und Gehölze wurden auf Habitateignung für Brutvögel, Fledermäuse und weitere planungsrelevante Arten untersucht.",
      tags: ["Gebäudebrüter", "Fledermäuse", "Hamburg"],
    },
    {
      img: IMG.hedge,
      title: "Artenschutzrechtliche Überprüfung zur Entnahme von Gehölzen",
      client: "Imken Immobilienverwaltung GmbH",
      year: "2026",
      desc: "Heckenbegutachtung in Hamburg-Eimsbüttel im Zuge einer geplanten Balkonerneuerung. Die zur Rodung vorgesehenen Gehölze wurden auf potenzielle Brutstätten und artenschutz­rechtlich relevante Strukturen überprüft.",
      tags: ["Gehölzbewertung", "Sanierung", "Hamburg"],
    },
    {
      img: IMG.facade,
      title: "Artenschutzrechtliche Überprüfung zur Entnahme von Gehölzen",
      client: "NEUE LÜBECKER Norddeutsche Baugenossenschaft eG",
      year: "2026",
      desc: "Begutachtung der zu fällenden Gehölze im Zuge einer Fassadenerneuerung in Ratzeburg. Frühzeitige Erkennung planungsrelevanter Habitatstrukturen für Brutvögel – Grundlage für einen positiven Fällantrag.",
      tags: ["Gehölzbewertung", "Brutvögel", "Schleswig-Holstein"],
    },
  ];

  return (
    <main>
      <section className="hero-slim">
        <div className="bg" style={{ backgroundImage: `url(${IMG.marsh})` }} />
        <div className="overlay" />
        <span className="eyebrow on-dark">Referenzen</span>
        <h1 style={{ marginTop: 12 }}>Ausgewählte Projekte<br />aus unserer Arbeit</h1>
        <p className="lead">
          Ein Einblick in die von Biotope-Studio durchgeführten Projekte.
        </p>
      </section>

      <section className="section-pad bg-cream">
        <div className="container">
          <div className="grid-2-wide">
            {projects.map((p, i) => (
              <article key={i} className="project-card">
                <div className="img" style={{ backgroundImage: `url(${p.img})` }} />
                <div className="body">
                  <div className="meta">
                    <span>{p.client}</span>
                    <span>·</span>
                    <span>{p.year}</span>
                  </div>
                  <h3>{p.title}</h3>
                  <p>{p.desc}</p>
                  <div
                    style={{
                      display: "flex",
                      gap: 8,
                      flexWrap: "wrap",
                      marginTop: 8,
                    }}
                  >
                    {p.tags.map((t, j) => (
                      <span
                        key={j}
                        style={{
                          fontSize: "0.78rem",
                          padding: "5px 12px",
                          borderRadius: 999,
                          background: "var(--cream-2)",
                          color: "var(--green)",
                          fontWeight: 500,
                          letterSpacing: "0.02em",
                        }}
                      >
                        {t}
                      </span>
                    ))}
                  </div>
                </div>
              </article>
            ))}
          </div>

          <div
            style={{
              marginTop: 80,
              textAlign: "center",
              padding: "48px 32px",
              background: "#fff",
              borderRadius: 20,
              border: "1px solid var(--line)",
            }}
          >
            <p style={{ color: "var(--muted)", margin: "0 0 18px" }}>
              Weitere Referenzen folgen – sprechen Sie uns gerne direkt auf
              vergleichbare Projekte an.
            </p>
            <a className="btn btn-primary" onClick={() => navigate("kontakt")}>
              Projekt besprechen <Icon.ArrowRight />
            </a>
          </div>
        </div>
      </section>

      <CTABanner navigate={navigate} />
    </main>
  );
}

window.PageReferenzen = PageReferenzen;