// Über mich page

function PageUeber({ navigate }) {
  const timeline = [
  {
    year: "Seit 2025",
    title: "Planula – Planungsbüro für Naturschutz und Landschaftsökologie",
    desc: "Mitarbeit an artenschutzrechtlichen Fachbeiträgen, Kartierungen und Gutachten in Schleswig-Holstein."
  },
  {
    year: "2024",
    title: "Ingenieurgemeinschaft Reese + Wulff",
    desc: "Kooperationspartner im Rahmen der Bachelorarbeit – Schnittstelle zwischen Hochschule und Planungspraxis."
  },
  {
    year: "2023",
    title: "Praktikum · Lebendige Alster",
    desc: "Praktische Naturschutzarbeit an den Hamburger Gewässern: Renaturierung, Monitoring und Umweltbildung."
  },
  {
    year: "2021 – 2024",
    title: "B.Sc. Naturschutz und Landnutzungsplanung",
    desc: "Hochschule Neubrandenburg – Schwerpunkte Vegetationsökologie, Faunistik und Planungsrecht."
  },
  {
    year: "2020 – 2021",
    title: "Bundesfreiwilligendienst · Forst Klövensteen",
    desc: "Erste praktische Station: Waldpflege, Wildtiermonitoring und Umweltbildung im Hamburger Stadtwald."
  }];


  return (
    <main>
      <section className="hero-slim">
        <div className="bg" style={{ backgroundImage: `url(${IMG.woodland})` }} />
        <div className="overlay" />
        <span className="eyebrow on-dark">Über mich</span>
        <h1 style={{ marginTop: 12 }}>Felix Kwasny</h1>
        <p className="lead">
          Umweltplaner aus Hamburg – mit Leidenschaft für Norddeutschlands
          Moore, Marschen und alten Knicks.
        </p>
      </section>

      {/* Intro */}
      <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">Gründer · Inhaber</span>
              <h2 style={{ margin: "14px 0 22px" }}>
                Ein Fachbüro, das mit­denkt.
              </h2>
              <p style={{ color: "var(--muted)" }}>
                Ich bin studierter Umweltplaner (B.Sc. Naturschutz und
                Landnutzungs­planung, HS Neubrandenburg) und habe in den letzten
                Jahren bei verschiedenen Stationen in Norddeutschland tiefe
                Einblicke in Genehmigungsverfahren, Kartierungs­methodik und
                den praktischen Naturschutz gesammelt.
              </p>
              <p style={{ color: "var(--muted)" }}>
                Biotope-Studio begleitet Sie von der frühen Planung bis zur
                Genehmigung und sorgt für eine fachlich fundierte und
                rechtssichere Umsetzung naturschutzfachlicher Anforderungen.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Philosophy */}
      <section className="section-pad bg-cream">
        <div className="container">
          <div className="grid-2">
            <div>
              <span className="eyebrow">Philosophie</span>
              <h2 style={{ margin: "14px 0 22px" }}>
                Naturschutz, der<br />in der Realität ankommt.
              </h2>
            </div>
            <div>
              <p style={{ color: "var(--muted)", fontSize: "1.08rem" }}>
                Gute Umweltplanung lebt davon, dass sie nicht im Aktenordner
                endet. Mein Anspruch ist es, Gutachten zu liefern, die sowohl
                im Genehmigungsverfahren bestehen als auch im Gelände
                Wirkung entfalten – pragmatisch, transparent und auf Augenhöhe
                mit allen Beteiligten.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section style={{ background: "#fff", padding: "120px 0" }}>
        <div className="container">
          <div className="section-head" style={{ marginBottom: 56 }}>
            <span className="eyebrow">Werdegang</span>
            <h2>Stationen</h2>
          </div>
          <div style={{ maxWidth: 760, margin: "0 auto" }}>
            <div className="timeline">
              {timeline.map((t, i) =>
              <div key={i} className="timeline-item">
                  <span className="dot" />
                  <span className="year">{t.year}</span>
                  <h4>{t.title}</h4>
                  <p>{t.desc}</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

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

}

window.PageUeber = PageUeber;