{{ define "main" }}
<header id="mainHeader">

  {{ with .Params.banner }}
  {{ if .enable }}
  <!-- HERO / SLIDER -->
  <section class="slider {{ if .bg_overlay }}overly{{ end }} gif-background"
    style="height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;">
    <div class="my-container" style="position: relative; z-index: 2;">

      <!-- *Logo-Zeile mit zwei Frames* -->
      <div class="logo-container">
        <div class="frame1">
          <img src="{{ .logo_image1 | relURL }}" alt="Logo Frame 1" class="banner-logo">
        </div>
        <div class="frame2">
          <img src="{{ .logo_image2 | relURL }}" alt="Logo Frame 2" class="banner-logo">
        </div>
      </div>

      <!-- *Haupttitel + Button* -->
      <div class="block" style="display: flex; flex-direction: column; justify-content: flex-end; min-height: 10vh; padding: 1rem; box-sizing: border-box;">
        {{ with .title }}
        <h1 class="title-custom title-custom-margin fade-in-title">{{ . | markdownify }}</h1>
        {{ end }}

        {{ with .button }}
        {{ if .enable }}
        <div class="scrolldown" onclick="document.getElementById('service').scrollIntoView({ behavior: 'smooth' });"
          style="--color: rgb(0, 0, 0); cursor: pointer;">
          <div class="chevrons">
            <div class='chevrondown'></div>
            <div class='chevrondown'></div>
          </div>
        </div>
        {{ end }}
        {{ end }}
      </div>
    </div>
  </section>
  {{ end }}
  {{ end }}
</header>

<!-- Scroll/Hide Header -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var scrolldown = document.querySelector('.scrolldown');
    scrolldown?.addEventListener('click', function () {
      const serviceSection = document.getElementById('service');
      const offset = 100;
      const targetPosition = serviceSection.getBoundingClientRect().top + window.pageYOffset - offset;
      window.scrollTo({ top: targetPosition, behavior: 'smooth' });
    });

    window.addEventListener("scroll", function () {
      if (window.scrollY > 100) {
        scrolldown?.classList.add('hide');
      } else {
        scrolldown?.classList.remove('hide');
      }
    });

    var header = document.getElementById('mainHeader');
    var lastScrollPosition = window.scrollY;

    window.addEventListener('scroll', function () {
      var currentScrollPosition = window.scrollY;
      header.style.top = (currentScrollPosition > lastScrollPosition) ? '-100vh' : '0';
      if (currentScrollPosition === 0) header.style.top = '0';
      lastScrollPosition = currentScrollPosition;
    });
  });
</script>

<div style="height: 200px;"></div>

<!-- WHY AMPERION (Kompakte Version) -->
{{ with site.GetPage "/whyamperion" }}
{{ with .Params.service }}
<section class="whyamperion section">
  <div class="container my-container">
    <div class="row">
      <div class="section-title text-center">
        {{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
        {{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
      </div>
    </div>
    <div class="row">
      {{ range .service_item }}
      <div class="col-sm-6 col-md-3">
        <div class="service-item text-center">
          <i class="{{ .icon }}" aria-hidden="true" style="font-size: 2rem; margin-bottom: 0.5rem;"></i>
          <h3>{{ .name | markdownify }}</h3>
          <p>{{ .content | markdownify }}</p>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}

<!-- SERVICES -->
{{ with site.GetPage "/service" }}
{{ with .Params.service }}
<section id="service" class="service">
  <div class="container-fluid my-container">
    <div class="services-title">
      {{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
    </div>
    <div class="services-description">
      {{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
    </div>
    <div class="service-grid">
      {{ range first 3 .service_item }}
      <div class="service-item-fixed">
        <div class="zoom-wrap">
          <a href="{{ .link | relURL }}">
            <img src="{{ .picture | relURL }}" alt="{{ .name }}">
            <div class="overlay-text">{{ .name }}</div>
            <div class="overlay"></div>
          </a>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}

<!-- FOCUSTOPICS -->
{{ with site.GetPage "/focustopic" }}
{{ with .Params.service }}
<section id="focustopic" class="service">
  <div class="container-fluid my-container">
    <div class="services-title">
      {{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
    </div>
    <div class="services-description">
      {{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
    </div>
    <div class="service-grid">
      {{ range first 3 .service_item }}
      <div class="service-item-fixed">
        <div class="zoom-wrap">
          <a href="{{ .link | relURL }}">
            <img src="{{ .picture | relURL }}" alt="{{ .name }}">
            <div class="overlay-text">{{ .name }}</div>
            <div class="overlay"></div>
          </a>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}

<!-- WHY AMPERION – kompakt & detailliert (Hardcoded Version) -->
<section class="whyamperion section" style="background-color:#f3f3f3">
  <div class="container my-container">

    <!-- Titelblock – eigener Wrapper statt .section-title -->
    <div class="row">
      <div class="why-title text-center">
        <h1>Darum AMPERION</h1>
        <h2 class="why-sub"><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2>
      </div>
    </div>

    <!-- Karten -->
<div class="why-grid mt-5">
  <article class="service-card text-center">
    <img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3">
    <h2 class="service-card-title">Technische Planungskompetenz</h2>
    <p class="service-card-description">
      <strong>Langjährige Erfahrung mit komplexer Energieplanung –</strong> normgerecht, effizient &amp; zukunftssicher.
    </p>
  </article>

  <article class="service-card text-center">
    <img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3">
    <h2 class="service-card-title">Intelligente Energiesysteme</h2>
    <p class="service-card-description">
      <strong>Von PV bis Speicher und Lastmanagement –</strong> für maximale Eigenversorgung und Netzverträglichkeit.
    </p>
  </article>

  <article class="service-card text-center">
    <img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3">
    <h2 class="service-card-title">Persönliche Betreuung</h2>
    <p class="service-card-description">
      <strong>Kurze Wege, schnelle Antworten –</strong> direkte Ansprechpartner, auch nach Projektabschluss.
    </p>
  </article>

  <article class="service-card text-center">
    <img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3">
    <h2 class="service-card-title">Reibungslose Projektabwicklung</h2>
    <p class="service-card-description">
      <strong>Wir übernehmen die technische Koordination –</strong> von Einreichung bis Ausschreibung.
    </p>
  </article>

  <article class="service-card text-center">
    <img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3">
    <h2 class="service-card-title">Vernetzte Energiezukunft</h2>
    <p class="service-card-description">
      <strong>Wir denken Energie ganzheitlich –</strong> modular, digital und wachstumsfähig geplant.
    </p>
  </article>

  <article class="service-card text-center">
    <img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3">
    <h2 class="service-card-title">Präzise Systemplanung</h2>
    <p class="service-card-description">
      <strong>Alle Komponenten exakt abgestimmt –</strong> wirtschaftlich und regelkonform.
    </p>
  </article>
</div>

  </div>
</section>


<!-- ABOUT (unverändert) -->
{{ with .Params.about }}
{{ if .enable }}
<section id="about" class="about section">
  <div class="my-container">
    <div class="row">
      <div class="col-12 text-center">
        <div class="services-title">
          {{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
        </div>
        <div class="services-description">
          {{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-9 col-sm-12">
        <div class="text-left">
          {{ with .content }}{{ . | markdownify }}{{ end }}
        </div>
        <div class="hover-link">
          {{ with .link_text }}<a href="{{ "/about/" | relURL }}">{{ . }}</a>{{ end }}
        </div>
      </div>
      <div class="col-md-3 col-sm-12">
        <div class="block">
          <img src="{{ .image | relURL }}" class="custom-image" alt="Img">
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}

<!-- CALL TO ACTION -->
{{ if .Params.cta.enable }}
{{ partial "cta.html" . }}
{{ end }}

<!-- FACTS -->
{{ with .Params.facts }}
{{ if .enable }}
<section class="facts">
  <div class="container">
    <div class="row">
      {{ range .fact_item }}
      <div class="col-md-6">
        <div class="fact-item text-center">
          <img src="{{ .image | relURL }}" alt="{{ .name }}" class="fact-image">
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}

{{ end }}