// Homepage (Start)

function PageStart({ navigate }) {
  const services = [
    {
      icon: <Icon.Leaf />,
      title: "Artenschutzfachbeitrag",
      desc: "Rechtssichere Bewertung Ihres Vorhabens im Sinne des §44 BNatSchG – fundiert und genehmigungsfähig.",
      to: "leistungen",
      section: "afb",
    },
    {
      icon: <Icon.Scale />,
      title: "Eingriffsregelung",
      desc: "Ermittlung von Eingriffen in Natur und Landschaft, inklusive Bilanzierung und Kompensationskonzepten.",
      to: "leistungen",
      section: "eingriffsregelung",
    },
    {
      icon: <Icon.Map />,
      title: "Kartierungen & Gutachten",
      desc: "Systematische Erfassung von Flora und Fauna – digital mit QField/GIS, präzise und nachvollziehbar.",
      to: "leistungen",
      section: "kartierungen",
    },
  ];

  const projects = [
    {
      img: IMG.rails,
      title: "Amphibienhabitatanalyse – Marschbahntrasse",
      client: "Bio-Consult SH · 2026",
      desc: "Dokumentation von ca. 414 Gewässern entlang der Bahnstrecke Hamburg–Westerland in QField GIS.",
    },
    {
      img: IMG.hedge,
      title: "Artenschutzrechtliche Gehölzprüfung",
      client: "Imken Immobilienverwaltung GmbH · 2026",
      desc: "Heckenbewertung in Hamburg-Eimsbüttel im Vorfeld einer geplanten Balkonsanierung.",
    },
  ];

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="bg" style={{ backgroundImage: `url(${IMG.hero})` }} />
        <div className="overlay" />
        <div className="hero-inner">
          <span className="eyebrow on-dark reveal">
            Artenschutz · Ökologie · Umweltplanung
          </span>
          <h1 className="reveal delay-1">
            Nachhaltig planen.<br />
            Arten schützen.<br />
            Zukunft sichern.
          </h1>
          <p className="subtext reveal delay-2">
            Biotope-Studio begleitet Ihr Projekt von der frühen Planung bis zur
            Genehmigung – fachlich fundiert und rechtssicher.
          </p>
          <div className="cta-row reveal delay-3">
            <a className="btn btn-primary" onClick={() => navigate("leistungen")}>
              Leistungen entdecken <Icon.ArrowRight />
            </a>
            <a className="btn btn-ghost on-dark" onClick={() => navigate("kontakt")}>
              Kontakt aufnehmen
            </a>
          </div>
        </div>
        <div className="scroll-cue">
          <span>Mehr entdecken</span>
          <Icon.ChevronDown />
        </div>
      </section>

      {/* SERVICES PREVIEW */}
      <section className="section-pad bg-cream">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Leistungen</span>
            <h2>Was wir für Sie tun</h2>
          </div>
          <div className="grid-3">
            {services.map((s, i) => (
              <div
                key={i}
                className="icon-card"
                onClick={() => navigate(s.to, s.section)}
              >
                <span className="icon">{s.icon}</span>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                <a className="more">
                  Mehr erfahren <span className="arr"><Icon.ArrowRight size={12} /></span>
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      <WaveDivider from="var(--cream)" to="#fff" />

      {/* ABOUT TEASER */}
      <section style={{ background: "#fff", padding: "120px 0" }}>
        <div className="container">
          <div className="grid-2">
            <div style={{ display: "flex", justifyContent: "center" }}>
              <div
                className="avatar"
                style={{ backgroundImage: `url(${IMG.felix})` }}
              />
            </div>
            <div>
              <span className="eyebrow">Über mich</span>
              <h2 style={{ margin: "14px 0 22px" }}>
                Felix Kwasny, Umweltplaner
              </h2>
              <p style={{ color: "var(--muted)" }}>
                Ich bin Felix Kwasny, studierter Umweltplaner (B.Sc.) mit
                Schwerpunkt Ökologie und Naturschutz, und habe Biotope-Studio
                2025 gegründet. Mein Ziel ist es, Naturschutz und
                Vorhabensplanung Hand in Hand zu denken.
              </p>
              <p style={{ color: "var(--muted)" }}>
                Eine frühzeitige Beachtung des Naturschutzes erhält unsere
                heimische Flora und Fauna – und sorgt zugleich für einen
                reibungslosen Planungsprozess, der Verzögerungen und Kosten
                minimiert.
              </p>
              <a
                className="btn btn-ghost"
                onClick={() => navigate("ueber")}
                style={{ marginTop: 18 }}
              >
                Mehr über mich <Icon.ArrowRight />
              </a>
            </div>
          </div>
        </div>
      </section>

      <WaveDivider from="#fff" to="var(--cream)" />

      {/* REFERENCES TEASER */}
      <section className="section-pad bg-cream">
        <div className="container">
          <div
            className="section-head"
            style={{ textAlign: "left", margin: "0 0 56px", alignItems: "flex-start" }}
          >
            <span className="eyebrow">Referenzen</span>
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "flex-end",
                width: "100%",
                gap: 24,
                flexWrap: "wrap",
              }}
            >
              <h2>Aktuelle Projekte</h2>
              <a
                onClick={() => navigate("referenzen")}
                className="btn btn-ghost"
              >
                Alle Referenzen <Icon.ArrowRight />
              </a>
            </div>
          </div>
          <div className="grid-2-wide">
            {projects.map((p, i) => (
              <article
                key={i}
                className="project-card"
                onClick={() => navigate("referenzen")}
                style={{ cursor: "pointer" }}
              >
                <div className="img" style={{ backgroundImage: `url(${p.img})` }} />
                <div className="body">
                  <div className="meta">
                    <span>{p.client}</span>
                  </div>
                  <h3>{p.title}</h3>
                  <p>{p.desc}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

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

window.PageStart = PageStart;