<template data-orderly-template="footer" data-orderly-for="shop-footer">
  <div class="orderly-shop-footer" aria-label="Sidefod">
    <div class="orderly-shop-footer__brand">
      <a class="orderly-shop-footer__logo" href="/" aria-label="Orderly Example Shop">
        <img class="orderly-shop-footer__logo-image" src="https://orderly.shop/home/App_Icon.svg" alt="Orderly Example Shop">
      </a>
      <p class="orderly-shop-footer__about">
        En demo webshop bygget med Orderly web components. Indholdet er eksempeldata, så layout, navigation, kurv og checkout kan prøves uden en shopspecifik frontend-stack.
      </p>
    </div>

    <section class="orderly-shop-footer__section" aria-labelledby="exampleFooterAddress">
      <h2 id="exampleFooterAddress" class="orderly-shop-footer__heading">Adresse</h2>
      <address class="orderly-shop-footer__address">
        <span>Orderly Example Shop ApS</span>
        <span>Demo Allé 12</span>
        <span>8000 Aarhus C</span>
        <span>Danmark</span>
      </address>
    </section>

    <section class="orderly-shop-footer__section" aria-labelledby="exampleFooterContact">
      <h2 id="exampleFooterContact" class="orderly-shop-footer__heading">Kontakt</h2>
      <ul class="orderly-shop-footer__list">
        <li class="orderly-shop-footer__contact-item">
          <span class="orderly-shop-footer__contact-label">Email</span>
          <a class="orderly-shop-footer__contact-value" href="mailto:hello@example.orderly.shop">hello@example.orderly.shop</a>
        </li>
        <li class="orderly-shop-footer__contact-item">
          <span class="orderly-shop-footer__contact-label">Telefon</span>
          <a class="orderly-shop-footer__contact-value" href="tel:+4512345678">+45 12 34 56 78</a>
        </li>
        <li class="orderly-shop-footer__contact-item">
          <span class="orderly-shop-footer__contact-label">Kundeservice</span>
          <a class="orderly-shop-footer__contact-value" href="https://support.example.orderly.shop">support.example.orderly.shop</a>
        </li>
      </ul>
    </section>

    <section class="orderly-shop-footer__section" aria-labelledby="exampleFooterHours">
      <h2 id="exampleFooterHours" class="orderly-shop-footer__heading">Åbningstider</h2>
      <dl class="orderly-shop-footer__hours">
        <div class="orderly-shop-footer__hours-row">
          <dt class="orderly-shop-footer__hours-label">Mandag - fredag</dt>
          <dd class="orderly-shop-footer__hours-value">09.00 - 17.00</dd>
        </div>
        <div class="orderly-shop-footer__hours-row">
          <dt class="orderly-shop-footer__hours-label">Lørdag</dt>
          <dd class="orderly-shop-footer__hours-value">10.00 - 14.00</dd>
        </div>
        <div class="orderly-shop-footer__hours-row">
          <dt class="orderly-shop-footer__hours-label">Søndag</dt>
          <dd class="orderly-shop-footer__hours-value">Lukket</dd>
        </div>
      </dl>
    </section>

    <section class="orderly-shop-footer__section" aria-labelledby="exampleFooterInformation">
      <h2 id="exampleFooterInformation" class="orderly-shop-footer__heading">Information</h2>
      <ul class="orderly-shop-footer__list">
        <li class="orderly-shop-footer__link-item">
          <a class="orderly-shop-footer__link" href="/forretningsbetingelser.html">Forretningsbetingelser</a>
        </li>
        <li class="orderly-shop-footer__link-item">
          <a class="orderly-shop-footer__link" href="/information/levering-og-retur/">Levering og retur</a>
        </li>
        <li class="orderly-shop-footer__link-item">
          <a class="orderly-shop-footer__link" href="/information/privatlivspolitik/">Privatlivspolitik</a>
        </li>
        <li class="orderly-shop-footer__link-item">
          <a class="orderly-shop-footer__link" href="/information/kontakt/">Kontakt os</a>
        </li>
      </ul>
    </section>
  </div>
</template>
