{{ define "main" }}

{{ partial "page-title.html" . }}

<!-- Intro Section: Wir sind AMPERION -->
{{ with .Params.intro_section }}
{{ if .enable }}
<section id="about-intro" class="section py-5">
  <div class="my-container">

    <!-- Zentrale Unterüberschrift mit reduziertem Abstand -->
    <div class="text-center" style="margin-top: -25px; margin-bottom: 20px;">
      <h3 class="services-description" style="margin-top: 0; font-weight: 400;">
        Technik mit Verantwortung. Planung mit Weitblick.
      </h3>
    </div>

    <div class="row align-items-center">

      <!-- TEXT (links, mobil oben) -->
      <div class="col-md-6 col-sm-12 text-left">
        <div class="content">
          {{ .text | markdownify }}
        </div>
      </div>

      <!-- BILD (rechts, mobil unten) -->
      <div class="col-md-6 col-sm-12 text-center">
        <img
          src="{{ .image | relURL }}"
          alt="AMPERION Intro"
          class="img-responsive"
          style="max-width:420px; width:100%; height:auto; margin:0 auto;">
      </div>

    </div>
  </div>
</section>
{{ end }}
{{ end }}






<!-- AMPERION Mehrwerte – mit SVG-Icons, gleich hohe Kacheln -->
<section class="section p-0 m-0" style="background-color: #f7f7f7;">
  <div class="container text-center mb-5">
    <h3 class="mb-4">
      Was uns auszeichnet: <strong>AMPERION</strong> bietet <em>echte Mehrwerte</em> für Ihr Projekt
    </h3>
  </div>

  <div class="container-fluid px-0;">
    <div class="mehrwerte-grid">
      
      <!-- Kachel 1 -->
      <div class="mehrwerte-box" style="background-color: #006464;">
        <div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
          <img src="/icons/stamp.svg" alt="Staatlich geprüft Icon" class="mehrwert-icon mb-3" width="50" height="50">
          <h4 class="fw-bold text-black">Staatlich geprüftes Ingenieurbüro</h4>
          <p class="mb-0">Als konzessionierter Fachbetrieb für Elektrotechnik garantieren wir Fachkompetenz, Qualität und Sicherheit.</p>
        </div>
      </div>

      <!-- Kachel 2 -->
      <div class="mehrwerte-box" style="background-color: #007979;">
        <div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
          <img src="/icons/brain.svg" alt="Innovation Icon" class="mehrwert-icon mb-3" width="50" height="50">
          <h4 class="fw-bold text-black">Erfahrung &amp; Innovation</h4>
          <p class="mb-0">Über 10 Jahre Branchenerfahrung vereinen sich bei AMPERION mit frischen Ideen, neuesten Technologien und aktuellen Förderstandards.</p>
        </div>
      </div>

      <!-- Kachel 3 -->
      <div class="mehrwerte-box" style="background-color: #008c8c;">
        <div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
          <img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz Icon" class="mehrwert-icon mb-3" width="50" height="50">
          <h4 class="fw-bold text-black">Ganzheitlicher Ansatz</h4>
          <p class="mb-0">Wir betrachten jedes Projekt technisch, wirtschaftlich und ökologisch – von Beginn an zukunftssicher gedacht.</p>
        </div>
      </div>

      <!-- Kachel 4 -->
      <div class="mehrwerte-box" style="background-color: #009292;">
        <div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
          <img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung Icon" class="mehrwert-icon mb-3" width="50" height="50">
          <h4 class="fw-bold text-black">Unabhängige Beratung</h4>
          <p class="mb-0">Wir schlagen nur Lösungen vor, die zu Ihrem Projekt passen – herstellerneutral und objektiv.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Mission, Vision, Ziel -->
  <div class="container py-5" style="padding-top: 6rem;">
    <div class="row">
      {{ with .Params.mission_vision }}
      {{ if .enable }}
      <div class="col-md-12">
        <div class="tabCommon">
          <ul class="nav nav-tabs">
            {{ range $index, $elements := .tabs }}
            <li {{ if eq $index 0 }} class="active" {{ end }}>
              <a href="#{{ .name | urlize }}" data-toggle="tab">{{ .name }}</a>
            </li>
            {{ end }}
          </ul>
          <div class="tab-content">
            {{ range $index, $elements := .tabs }}
            <div id="{{ .name | urlize }}" class="tab-pane fade {{ if eq $index 0 }} active in {{ end }}">
              {{ .content | $.Page.RenderString (dict "display" "block") }}
            </div>
            {{ end }}
          </div>
        </div>
      </div>
      {{ end }}
      {{ end }}
    </div>
  </div>
</section>

<!-- About Section (Gründerteam) -->
{{ with .Params.about }}
{{ if .enable }}
<section class="about section pt-0">
  <div class="container-fluid">
    
    <!-- Überschrift -->
    <p class="lead text-center mb-3" style="margin-top: 40px;">Das AMPERION Gründerteam</p>

    <!-- Zentraler Einleitungstext -->
    <p class="text-center px-3" style="margin-bottom: 40px;">
  Gegründet wurde AMPERION im Jahr 2024 von Markus Wimmer, BSc und Ing. Alexander Stosic, MSc, die als Geschäftsführer das Unternehmen leiten. Gemeinsam verfügen unsere Gründer über mehr als ein Jahrzehnt Erfahrung in der Planung und Umsetzung nachhaltiger Energieprojekte.
</p>


    <div class="row gx-5 gy-5 align-items-center">
      
      <!-- Markus Wimmer (LINKS) -->
      <div class="col-lg-4 col-md-12 order-lg-1 order-2 d-flex justify-content-center">
        <div class="w-100">
          {{ with .left_person }}
            {{ with .name }}<h3 class="text-center">{{ . | markdownify }}</h3>{{ end }}
            {{ with .description }}
              <p class="text-justify px-3">{{ . | $.Page.RenderString (dict "display" "block") }}</p>
            {{ end }}
          {{ end }}
        </div>
      </div>

      <!-- Bild (MITTE) -->
      <div class="col-lg-4 col-md-12 order-lg-2 order-1 d-flex justify-content-center">
        <img src="{{ .image | relURL }}"
             alt="AMPERION Gründerteam"
             class="img-fluid founder-img rounded shadow"
             style="max-width: 100%; height: auto;">
      </div>

      <!-- Alexander Stosic (RECHTS) -->
      <div class="col-lg-4 col-md-12 order-lg-3 order-3 d-flex justify-content-center">
        <div class="w-100">
          {{ with .right_person }}
            {{ with .name }}<h3 class="text-center">{{ . | markdownify }}</h3>{{ end }}
            {{ with .description }}
              <p class="text-justify px-3">{{ . | $.Page.RenderString (dict "display" "block") }}</p>
            {{ end }}
          {{ end }}
        </div>
      </div>

    </div>
  </div>
</section>
{{ end }}
{{ end }}


<!-- Call to Action -->
{{ if .Params.cta.enable }}
{{ partial "cta.html" . }}
{{ end }}

{{ end }}