// Leistungen page

function PageLeistungen({ navigate }) {
  const PLACEHOLDER =
    "data:image/svg+xml," +
    encodeURIComponent(
      "<svg xmlns='http://www.w3.org/2000/svg' width='500' height='400'>" +
        "<rect width='500' height='400' fill='#f4eadb'/>" +
        "<g stroke='#e3d6c4' stroke-width='14'>" +
        Array.from({ length: 14 }, (_, i) =>
          "<line x1='" + (-400 + i * 80) + "' y1='0' x2='" + i * 80 + "' y2='400'/>"
        ).join("") +
        "</g>" +
        "<text x='250' y='205' font-family='monospace' font-size='17' fill='#9a8c78' text-anchor='middle'>Bild folgt</text>" +
        "</svg>"
    ).replace(/'/g, "%27");

  const services = [
    {
      id: "afb",
      eyebrow: "01 · Genehmigungsverfahren",
      title: "Artenschutzfachbeitrag",
      desc: "Der Artenschutzfachbeitrag (AFB) prüft, ob ein Vorhaben die artenschutzrechtlichen Verbotstatbestände nach §44 BNatSchG verletzt – ein zentrales Dokument für jedes Genehmigungsverfahren.",
      bullets: [
        "Potentialabschätzung & Relevanzprüfung",
        "Konfliktanalyse mit Bewertung der Verbotstatbestände",
        "Vorgezogene Ausgleichsmaßnahmen (CEF)",
        "Ausnahmeprüfung nach §45 BNatSchG",
      ],
      img: IMG.marsh,
    },
    {
      id: "eingriffsregelung",
      eyebrow: "02 · Bilanzierung",
      title: "Eingriffsregelung",
      desc: "Bewertung von Eingriffen in Natur und Landschaft – mit transparenter Bilanzierung und passgenauen Kompensationsmaßnahmen, die in Genehmigungen Bestand haben.",
      bullets: [
        "Bestandsaufnahme & Biotoptypenbewertung",
        "Eingriffs-/Ausgleichsbilanzierung",
        "Maßnahmenplanung & Kompensationskonzept",
        "Abstimmung mit Behörden",
      ],
      img: IMG.biotop,
    },
    {
      id: "kartierungen",
      eyebrow: "03 · Erfassung",
      title: "Biotop- & Artenkartierungen",
      desc: "Systematische Erfassung von Flora und Fauna nach aktuellen Methodenstandards – digital aufgenommen in QField/QGIS und direkt anschlussfähig an Ihre Planung.",
      bullets: [
        "Brutvogel-, Fledermaus-, Nachtkerzenschwärmer und Amphibien-, und Reptilienkartierungen",
        "Biotoptypen- und Vegetationskartierung",
        "Gehölz- und Habitatbaumkartierung",
        "Digitale Erfassung mit QField & QGIS",
      ],
      img: IMG.kartierungen,
    },
    {
      id: "baubegleitung",
      eyebrow: "04 · Begleitung",
      title: "Ökologische Baubegleitung",
      desc: "Fachliche Begleitung während der Bauphase – damit Ausgleichs- und Vermeidungsmaßnahmen tatsächlich umgesetzt werden und das Vorhaben rechtssicher bleibt.",
      bullets: [
        "Einweisung der Baufirmen",
        "Durchführung und Kontrolle der Vermeidungs- und Minimierungsmaßnahmen",
        "Umsiedlungen & Vergrämungen",
        "Dokumentation und Berichte",
      ],
      img: IMG.baubegleitung,
    },
    {
      id: "gebaeude",
      eyebrow: "05 · Gebäudebrüter",
      title: "Artenschutz am Gebäude",
      desc: "Sanierung, Abriss oder Neubau? Wir prüfen Ihr Bauprojekt auf gebäudebrütende Vogelarten und Fledermausquartiere – inklusive Ersatzkonzept.",
      bullets: [
        "Begehung & Quartiersuche",
        "Bewertung nach BNatSchG",
        "Konzept für Ersatzquartiere",
        "Begleitung der Maßnahmenumsetzung",
      ],
      img: IMG.gebaeude,
    },
    {
      id: "weiteres",
      eyebrow: "06 · Weiteres",
      title: "Weitere Leistungen",
      groups: [
        {
          heading: "Ökologische Gutachten",
          items: [
            "FFH-Verträglichkeitsvorprüfung",
            "Faunistische Planungsraumanalyse",
          ],
        },
        {
          heading: "Entwicklungsplanungen",
          items: [
            "Renaturierungsplanungen",
            "Gewässerunterhaltungspläne",
          ],
        },
      ],
      img: IMG.weiteres,
    },
  ];

  return (
    <main>
      <section className="hero-slim">
        <div className="bg" style={{ backgroundImage: `url(${IMG.leistungenHero})` }} />
        <div className="overlay" />
        <span className="eyebrow on-dark">Leistungen</span>
        <h1 style={{ marginTop: 12 }}>Fachlich fundiert.<br />Rechtssicher.</h1>
        <p className="lead">
          Von der frühen Voruntersuchung bis zur Bauphase – die Bausteine, die
          Ihr Vorhaben ökologisch und juristisch absichern.
        </p>
      </section>

      <section className="bg-cream" style={{ padding: "60px 0 80px" }}>
        <div className="container">
          {services.map((s, i) => (
            <div
              key={i}
              id={s.id}
              className={"svc-row " + (i % 2 === 1 ? "reverse" : "")}
              style={{ scrollMarginTop: 100 }}
            >
              <div
                className="svc-image"
                style={{ backgroundImage: `url(${s.img})` }}
              />
              <div>
                <span className="num">{s.eyebrow}</span>
                <h2>{s.title}</h2>
                {s.desc && (
                  <p style={{ color: "var(--muted)", fontSize: "1.05rem" }}>
                    {s.desc}
                  </p>
                )}
                {s.groups ? (
                  s.groups.map((g, j) => (
                    <div key={j} style={{ marginTop: j === 0 ? 22 : 18 }}>
                      <h3 style={{ fontSize: "1.15rem", marginBottom: 8 }}>
                        {g.heading}
                      </h3>
                      <ul className="bullets" style={{ marginTop: 0 }}>
                        {g.items.map((b, k) => (
                          <li key={k}>{b}</li>
                        ))}
                      </ul>
                    </div>
                  ))
                ) : (
                  <ul className="bullets">
                    {s.bullets.map((b, j) => (
                      <li key={j}>{b}</li>
                    ))}
                  </ul>
                )}
              </div>
            </div>
          ))}
        </div>
      </section>

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

window.PageLeistungen = PageLeistungen;