---
import { nav, partners, site } from "../data/site";
---

<footer class="site-footer">
  <section class="footer-cta" aria-labelledby="footer-cta-title">
    <div class="container footer-cta-grid">
      <div>
        <p class="label">Direkter Draht</p>
        <h2 id="footer-cta-title">Sprechen wir über Ihr Dach.</h2>
      </div>
      <div class="footer-actions">
        <a class="button primary" href={site.phoneHref}>Anrufen</a>
        <a class="button secondary" href={`mailto:${site.email}`}>E-Mail schreiben</a>
      </div>
    </div>
  </section>

  <div class="container footer-main">
    <div class="footer-brand">
      <img src="/assets/img/logo-heidrich.png" alt="Heinz Heidrich GmbH" width="300" height="73" />
      <p>{site.description}</p>
      <address>
        {site.address[0]}<br />
        {site.address[1]}<br />
        <a href={site.phoneHref}>{site.phone}</a><br />
        <a href={`mailto:${site.email}`}>{site.email}</a>
      </address>
    </div>

    <nav class="footer-nav" aria-label="Footer Navigation">
      <h2>Seiten</h2>
      {nav.map((item) => <a href={item.href}>{item.label}</a>)}
      <a href="/velux/">VELUX</a>
    </nav>

    <div class="footer-nav">
      <h2>Rechtliches</h2>
      <a href="/impressum/">Impressum</a>
      <a href="/datenschutzerklaerung/">Datenschutz</a>
      <a href="/datenverarbeitung-velux/">VELUX Datenverarbeitung</a>
    </div>

    <div class="footer-partners">
      <h2>Partner</h2>
      <div class="partner-mini">
        {partners.map((partner) => (
          <a href={partner.href} rel="noreferrer" target="_blank">
            <img src={partner.logo} alt={partner.name} loading="lazy" />
          </a>
        ))}
      </div>
    </div>
  </div>
  <p class="footer-bottom">© {new Date().getFullYear()} Heinz Heidrich GmbH</p>
</footer>
