Header Ready

<div class="duet-example-without-padding">
  <duet-header
    language="fi"
    contact="Ota yhteyttä"
    skip-to-id="#content"
    current-href="/"
  >
    <div slot="logo-utility" class="mobile-basket">
      <style>
        .mobile-basket button {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          gap: 1rem;
          background: #ffffff;
          padding: 0.5rem 0.675rem;
          border: 1px solid #e1e3e6;
          border-radius: 4px;
        }

        .mobile-basket {
          position: absolute;
          right: 56px;
        }

        .mobile-basket span {
          background: #e6f2f8;
          border-radius: 20rem;
          padding: 0.125rem 0.5rem;
          font-weight: 400;
          font-size: 0.75rem;
        }
      </style>
      <button><duet-icon name="messaging-buy-online" margin="none" size="small"></duet-icon><span>0</span></button>
      </div>
      <div slot="utility" class="desktop-basket">
      <style>
        .desktop-basket button {
          width: 100%;
          height: 100%;
          display: flex;
          gap: 0.5rem;
          align-items: center;
          background: #ffffff;
          padding: 0.5rem 1rem;
          color: rgb(0, 41, 77);
          font-weight: 600;
          font-size: 0.875rem;
          border: 1px solid #e1e3e6;
          border-radius: 4px;
        }

        .desktop-basket {
          display: none;
          position: absolute;
          top: 72px;
          right: 72px; 
          z-index: 700;
        }

        @media (min-width: 62em) {
          .desktop-basket {
            display: block;
          }
        }

        .desktop-basket .amount {
          background: #e6f2f8;
          border-radius: 20rem;
          padding: 0.125rem 0.5rem;
          font-weight: 400;
          font-size: 0.75rem;
        }
      </style>
      <button><duet-icon name="messaging-buy-online" margin="none" size="small"></duet-icon><span>Yhteydenottokori</span><span class="amount">0</span></button>
      </div>
  </duet-header>
</div>
<duet-hero
  heading="Laskut"
  description="Tällä sivulla näet vakuutuksiisi liittyvät laskut. Voit myös
    vaihtaa e-laskutukseen klikkaamalla&nbsp;alta."
  image="https://cdn.duetds.com/api/assets/illustrations/placeholder-light.svg"
  button-label="Vaihda e-laskutukseen"
  button-url="#"
  >
</duet-hero>
<script>
  // Select the above navigation component
  var header = document.querySelector("duet-header")

  // Set the main navigation items
  header.items = [
    { label: "Henkilöasiakkaat", href: "#", active: true, items: [
      { label: "Vakuutukset", href: "#", active: true, items: [
        { label: "Ajoneuvot", href: "#", icon: "category-car" },
        { label: "Koti", href: "#", icon: "category-apartment" },
        { label: "Terveys", href: "#", icon: "category-personal", active: true },
        { label: "Matka", href: "#", icon: "category-travel"},
        { label: "Henki", href: "#", icon: "category-life-insurance"},
        { label: "Eläimet", href: "#", icon: "category-pet"},
        { label: "Metsä", href: "#", icon: "category-forest"},
      ] },
      { label: "Talous", href: "#", items: [
        { label: "Raha", href: "#", icon: "category-business" },
        { label: "Varallisuus", href: "#", icon: "category-wealth" },
      ] },
      { label: "Tietoa meistä", href: "#", items: [
        { label: "LähiTapiola", href: "#", icon: "category-union" },
        { label: "Vauraus", href: "#", icon: "category-legal-liability" },
      ] },
      { label: "Asiakaspalvelu", href: "#", items: [
        { label: "Ota yhteyttä", href: "#", icon: "category-liability-damage" },
        { label: "Lupauksemme", href: "#", icon: "category-motor-boat" },
      ] },
    ] },
    { label: "Yritysasiakkaat", href: "#"}
  ]

  // Set the language menu items
  header.languageItems = [
    { label: "Suomeksi", country: "fi", href: "/?lang=fi" },
    { label: "På Svenska", country: "sv", href: "/?lang=sv" },
    { label: "In English", country: "en", href: "/?lang=en" },
  ]

  // Set label and href for session link
  header.session = {
    label: "Kirjaudu",
    href: "/?login",
    type: "login",
  }

  header.search = {
    label: "Hae",
    href: "/?hae",
  }

  // Listen for language selection events
  header.addEventListener("duetLanguageSelect", function (e) {
    console.log("Language selection detected in nav:", e.detail)

    // Set document language correctly when changing language
    e.detail.originalEvent.preventDefault()
    document.documentElement.setAttribute("lang", e.detail.data.country)
  })

  // Listen for language selection events
  header.addEventListener("duetSessionClick", function (e) {
    console.log("Session click detected in nav:", e.detail)
    e.detail.originalEvent.preventDefault()
  })
</script>