{{ define "main" }}
<header>


  {{ with .Params.banner }}
    {{ if .enable }}
      <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-Container mit 2 Frames (40% / 60%), 10% Rand links & rechts -->
          <div class="logo-container">
            <!-- Frame 1 -->
            <div class="frame1">
              <img
                src="{{ .logo_image1 | relURL }}"
                alt="Logo Frame 1"
                class="banner-logo"
              >
            </div>
            <!-- Frame 2 -->
            <div class="frame2">
              <img
                src="{{ .logo_image2 | relURL }}"
                alt="Logo Frame 2"
                class="banner-logo"
              >
            </div>
          </div>

          <!-- Titel / Content / Button -->
          <div class="block" style="display: flex; flex-direction: column; justify-content: flex-end; min-height: 10vh; padding: 1rem; box-sizing: border-box; overflow-wrap: break-word;">
            {{ 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>




<script>
  document.addEventListener("scroll", function() {
    var scrolldown = document.querySelector('.scrolldown');
    if (window.scrollY > 100) {  // Adjust this value based on when you want to hide the icon
      scrolldown.classList.add('hide');
    } else {
      scrolldown.classList.remove('hide');
    }
  });
</script>


<!-- service -->
{{ with site.GetPage "/service" }}
{{ with .Params.service }}
<section id="service" class="service">
  <!-- container-fluid + my-container => um beides kombinieren zu können -->
  <div class="container-fluid my-container">

    <!-- Block mit Titel und Beschreibung -->
    <div class="service-header">
      {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
      {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
    </div>

    <!-- CSS-Grid/Flexbox-Bereich mit den Bildern -->
    <div class="service-grid">
      {{ range first 9 .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><!-- /service-grid -->

  </div><!-- /container-fluid.my-container -->
</section>
{{ end }}
{{ end }}
<!-- /service -->
<div style="height: 100px;"></div>
<!-- why-amperion -->
{{ with site.GetPage "/why-amperion" }}
<section id="why-amperion" class="why-amperion">
  <div class="my-container">
    <!-- Überschriften (zentriert) -->
    <div class="section-title1 text-center">
      {{ with .Params.icon }}
        <img src="{{ . | relURL }}" alt="Icon" class="title-icon1">
      {{ end }}
      {{ with .Title }}
        <h2 class="why-title1">{{ . | markdownify }}</h2>
      {{ end }}
    </div>

    {{ with .Params.subtitle }}
      <h3 class="why-subtitle text-center">{{ . | markdownify }}</h3>
    {{ end }}

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


    <div class="row align-items-center">
      <!-- Linke Spalte: drei Themen-Blocks -->
      <div class="col-md-4">
        {{ range .Params.left_blocks }}
          <div class="why-block text-right">

        <div class="row icon-heading">
          <div class="col-md-10">
           <h4 class="text-right">{{ .heading | markdownify }}</h4>
          </div>
          <div class="col-md-2">
           <img src="{{ .icon | relURL }}" alt="{{ .heading }}" class="why-icon1">
          </div>
        </div>
            <p>{{ .content | markdownify }}</p>
          </div>
        {{ end }}
      </div>

      <!-- Mittlere Spalte: Logo -->
      <div class="col-md-4 text-center">
        <img src="{{ .Params.middle_image | relURL }}" alt="Amperion Logo" class="why-logo">
      </div>

      <!-- Rechte Spalte: drei Themen-Blocks -->
      <div class="col-md-4 text-left">
        {{ range .Params.right_blocks }}
          <div class="why-block text-left">

             <div class="row icon-heading">
              <div class="col-md-2">
               <img src="{{ .icon | relURL }}" alt="{{ .heading }}" class="why-icon1">
              </div>
              <div class="col-md-10">
               <h4 class="text-left">{{ .heading | markdownify }}</h4>
              </div>
             </div>
            <p>{{ .content | markdownify }}</p>
          </div>
        {{ end }}
      </div>
    </div> <!-- /row -->
  </div> <!-- /my-container -->
</section>
{{ end }}
<!-- /why-amperion -->

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

<!-- about -->
{{ 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="section-title">
          {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
          {{ with .description }}<h3>{{ . | markdownify }}</h3>{{ end }}
        </div>
        <div style="height: 20px;"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-9 col-sm-12">
        <div class="block">
          {{ with .content }}{{ . | markdownify }}{{ 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 }}
<!-- /about -->

<div style="height: 100px;"></div>
<!-- call to action -->
{{ if .Params.cta.enable }}
{{ partial "cta.html" . }}
{{ end }}
<!-- /call to action -->
<div style="height: 100px;"></div>
<!-- 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 }}


<style>
  .testimonial-item .images-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Abstand zwischen den Bildern */
  }

  .testimonial-item .testimonial-image {
    width: 10px; /* Anpassen der Breite nach Bedarf */
    height: auto;
  }
</style>


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


<script>
  document.addEventListener('DOMContentLoaded', function() {
    var scrollDownButton = document.querySelector('.scroll-down-button');
    scrollDownButton.addEventListener('click', function() {
      document.querySelector('#about').scrollIntoView({
        behavior: 'smooth'
      });
    });
  });
</script>
  
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var scrolled = false;
    var initialScrollListener = function() {
      if (!scrolled) {
        window.removeEventListener('scroll', initialScrollListener);
        document.getElementById('welcome').scrollIntoView({ behavior: 'smooth' });
        scrolled = true;
      }
    };

    window.addEventListener('scroll', initialScrollListener);
  });

  document.addEventListener("scroll", function() {
    var scrolldown = document.querySelector('.scrolldown');
    if (window.scrollY > 100) {  // Adjust this value based on when you want to hide the icon
      scrolldown.classList.add('hide');
    } else {
      scrolldown.classList.remove('hide');
    }
  });
</script>







{{ end }}