---
const logoIcon = "/assets/header-logo-icon.png";
const logoWordmark = "/assets/header-logo-wordmark.svg";
const globeIcon = "/assets/header-globe.svg";
---

<header class="bg-white border-b border-[#e3d9d1] w-full flex items-center justify-center h-[72px] sticky top-0 z-50">
  <div class="flex items-center w-[1280px]">
    <!-- Logo -->
    <div class="flex flex-1 items-center min-w-0">
      <a href="/" class="relative h-[42px] w-[143px] shrink-0 block">
        <div class="absolute h-[42px] left-0 top-0 w-[53px] overflow-hidden">
          <img alt="TalkPro icon" class="absolute h-[126.98%] left-0 max-w-none top-[-13.49%] w-full" src={logoIcon} />
        </div>
        <div class="absolute inset-[26.97%_0_7.92%_45.45%]">
          <img alt="TalkPro" class="absolute block inset-0 max-w-none size-full" src={logoWordmark} />
        </div>
      </a>
    </div>

    <!-- Nav -->
    <nav class="flex items-center gap-[32px] shrink-0">
      <a href="#" class="font-semibold text-[14px] text-[#f28a4b] tracking-[-0.09px] whitespace-nowrap leading-normal">Home</a>
      <a href="#features" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Features</a>
      <a href="#experience" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Experience</a>
      <a href="#use-cases" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Use Cases</a>
      <a href="#reliability" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Reliability</a>
    </nav>

    <!-- Actions -->
    <div class="flex flex-1 gap-[12px] items-center justify-end min-w-0">
      <button class="border border-[rgba(46,42,40,0.3)] flex gap-[8px] h-[43px] items-center justify-center pl-[12px] pr-[16px] rounded-[17px] shrink-0 hover:border-[#f28a4b] transition-colors">
        <img alt="Language" class="block size-[26px] object-contain" src={globeIcon} />
        <span class="font-semibold text-[14px] text-[#2e2a28] tracking-[-0.09px] whitespace-nowrap leading-[14px]">EN</span>
      </button>
      <a href="#download" class="bg-[#f28a4b] flex items-center justify-center px-[22px] py-[13px] rounded-[17px] shrink-0 hover:bg-[#e07a3b] transition-colors">
        <span class="font-bold text-[14px] text-white leading-normal whitespace-nowrap">Download</span>
      </a>
    </div>
  </div>
</header>
