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

  {{/* ========= Datenquellen: Impressum > params.contact > params (alt) ========= */}}
  {{ $impressum := site.GetPage "page" "impressum" }}

  {{ $addr := or
      (and $impressum $impressum.Params.location)
      (or site.Params.contact.location site.Params.location) }}

  {{ $email := or
      (and $impressum $impressum.Params.email)
      (or site.Params.contact.email site.Params.email) }}

  {{/* phone1: deckt sowohl phone als auch phone1 ab (alt & neu) */}}
  {{ $phone1 := or
      (and $impressum $impressum.Params.telefon)
      (or site.Params.contact.phone site.Params.contact.phone1 site.Params.phone site.Params.phone1) }}

  {{ $phone2 := or
      (and $impressum $impressum.Params.telefon2)
      (or site.Params.contact.phone2 site.Params.phone2) }}

  <style>
    /* Nur Layout-/Hilfsstyles – keine Typo-Overrides */
    .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    .contact-wrap{padding:56px 0}
    .card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.06)}
    .card-pad{padding:24px}
    .stack{display:grid;gap:16px}
    .stack-lg{display:grid;gap:24px}
    .info-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
    .info-item{display:flex;gap:.75rem;align-items:flex-start; justify-content:center; text-align:center}
    .info-item .ico{flex:0 0 auto;line-height:0}
    .info-item .txt a{ text-decoration:none;color:inherit; }

    /* CTA-Buttons & Socials: nutzt eure bestehenden Klassen – nur Layout-Hooks */
    .cta__actions{display:flex;gap:.75rem;flex-wrap:wrap}
    .cta__social{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
    .cta__social-link{width:56px;height:56px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 20px rgba(0,0,0,.06)}

    /* Formular-Grid */
    .form-grid{display:grid;grid-template-columns:1fr;gap:14px}
    @media(min-width:768px){.form-grid{grid-template-columns:1fr 1fr}}
    .form-group{display:flex;flex-direction:column;gap:.4rem}
    .form-group.full{grid-column:1 / -1}
    .form-control{
      width:100%;background:#fff;color:inherit;
      border:1px solid rgba(0,0,0,.12);border-radius:12px;
      padding:.85rem 1rem;outline:0;transition:border-color .15s ease, box-shadow .15s ease;
    }
    textarea.form-control{min-height:160px;resize:vertical}
    .form-control:focus{border-color:#F5A623;box-shadow:0 0 0 3px rgba(245,166,35,.18)}
    .form-legal{margin:0;opacity:.9}
    .card h3{margin:0 0 .5rem}
  </style>

  <section class="contact-wrap">
    <div class="container">
      <div class="row g-4">

        <!-- ===== Kontakt-Infos ===== -->
        <div class="col-lg-5" data-reveal>
          <div class="card card-pad stack-lg">
            <div class="stack">
              <h3>Kontakt</h3>
              <ul class="info-list">
                {{ with $addr }}
                <li class="info-item">
                  <span class="ico" aria-hidden="true">📍</span>
                  <div class="txt">{{ . | markdownify }}</div>
                </li>
                {{ end }}

                {{ with $email }}
                <li class="info-item">
                  <span class="ico" aria-hidden="true">📧</span>
                  <div class="txt">
                    <a href="mailto:{{ . | safeURL }}">{{ . }}</a>
                  </div>
                </li>
                {{ end }}

                {{ with $phone1 }}
                <li class="info-item">
                  <span class="ico" aria-hidden="true">📞</span>
                  <div class="txt">
                    <a href="tel:{{ . | safeURL }}">{{ . }}</a>
                  </div>
                </li>
                {{ end }}

                {{ with $phone2 }}
                <li class="info-item">
                  <span class="ico" aria-hidden="true">📱</span>
                  <div class="txt">
                    <a href="tel:{{ . | safeURL }}">{{ . }}</a>
                  </div>
                </li>
                {{ end }}
              </ul>
            </div>

            <div class="stack">
              <h4>Folgen Sie uns!</h4>
              <div class="cta__social">
                <a class="cta__social-link" href="https://www.instagram.com/amperion.at/" target="_blank" rel="noopener" aria-label="Instagram">
                  <img src="/images/social/instagram.svg" alt="">
                </a>
                <a class="cta__social-link" href="https://www.linkedin.com/company/amperion-gmbh/" target="_blank" rel="noopener" aria-label="LinkedIn">
                  <img src="/images/social/linkedin.svg" alt="">
                </a>
                <a class="cta__social-link" href="https://www.facebook.com/share/1CZ7xm6cdw/?mibextid=wwXIfr" target="_blank" rel="noopener" aria-label="Facebook">
                  <img src="/images/social/facebook.svg" alt="">
                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- ===== Formular ===== -->
        <div class="col-lg-7" data-reveal>
          <form method="POST" action="/send.php" class="card card-pad stack" novalidate>
            <div class="form-grid">
              <div class="form-group">
                <label for="name" class="visually-hidden">Name</label>
                <input id="name" name="name" type="text" autocomplete="name" class="form-control" placeholder="Name" required>
              </div>
              <div class="form-group">
                <label for="email" class="visually-hidden">E-Mail</label>
                <input id="email" name="email" type="email" autocomplete="email" class="form-control" placeholder="E-Mail" required>
              </div>
              <div class="form-group">
                <label for="company" class="visually-hidden">Unternehmen</label>
                <input id="company" name="company" type="text" autocomplete="organization" class="form-control" placeholder="Unternehmen (optional)">
              </div>
              <div class="form-group">
                <label for="phone" class="visually-hidden">Telefon</label>
                <input id="phone" name="phone" type="tel" autocomplete="tel" class="form-control" placeholder="Telefon (optional)">
              </div>
              <div class="form-group full">
                <label for="subject" class="visually-hidden">Betreff</label>
                <input id="subject" name="subject" type="text" class="form-control" placeholder="Betreff" required>
              </div>
              <div class="form-group full">
                <label for="message" class="visually-hidden">Ihre Nachricht</label>
                <textarea id="message" name="message" class="form-control" rows="6" placeholder="Ihre Nachricht …" required></textarea>
              </div>

              <!-- hCaptcha – wird nach Consent via Tarteaucitron gerendert -->
              <div class="form-group full">
                <div class="h-captcha" data-sitekey="15a25108-bbc0-4d02-913c-4ada005ebd20" data-theme="dark"></div>
                <noscript>
                  <div style="color:#b00020;font-size:13px;margin-top:6px;">
                    Hinweis: Bitte aktivieren Sie JavaScript, um das Captcha zu laden.
                  </div>
                </noscript>
              </div>
            </div>

            <p class="form-legal">
              <label for="legal-consent">
                <input id="legal-consent" name="legal_consented" type="checkbox" required>
                Ich bin mit der Verarbeitung meiner Daten zum Zweck der Kontaktaufnahme einverstanden. (Datenschutzhinweise beachten)
              </label>
            </p>

            <div>
              <button class="cta__btn" type="submit" style="--btn-fs:1.5rem; --btn-py:14px; --btn-px:26px;">
                <span aria-hidden="true">➜</span><span>Nachricht senden</span>
              </button>
            </div>
          </form>
        </div>

      </div>
    </div>
  </section>

  {{/* Reveal Init (falls global nicht vorhanden) */}}
  <script>
    (function(){
      if (window.__contactRevealInit) return; window.__contactRevealInit = true;
      var els = document.querySelectorAll("[data-reveal]");
      if (!('IntersectionObserver' in window)){ els.forEach(function(e){e.classList.add('is-visible')}); return; }
      var io = new IntersectionObserver(function(entries){
        entries.forEach(function(entry){
          if(entry.isIntersecting){
            entry.target.classList.add('is-visible');
            io.unobserve(entry.target);
          }
        });
      }, {threshold:.12});
      els.forEach(function(e){io.observe(e)});
    })();
  </script>
{{ end }}