---
const columns: Record<string, string[]> = {
  Product: ['Features', 'Product', 'Download'],
  Privacy: ['Privacy Policy', 'Protected Space', 'Security'],
  Company: ['About', 'Support', 'Contact'],
}
---

<footer class="bg-surface-footer px-[130px] pt-[58px] pb-[30px] w-full">
  <div class="flex gap-[42px] items-start max-w-[1180px]">
    <!-- Brand -->
    <div class="flex flex-col gap-[14px] w-[280px]">
      <div class="bg-brand rounded-[12px] size-9"></div>
      <p class="font-bold text-text-primary text-[18px] tracking-[-0.54px]">Talk Pro</p>
      <div class="text-text-secondary text-[14px] font-normal leading-[1.7]">
        <p>Designed for modern communication,</p>
        <p>privacy, and intelligent connection.</p>
      </div>
    </div>

    <div class="flex-1"></div>

    {Object.entries(columns).map(([heading, items]) => (
      <div class="flex flex-col gap-3">
        <p class="font-bold text-text-primary text-[15px]">{heading}</p>
        {items.map((item) => (
          <a href="#" class="text-text-secondary text-[14px] font-normal hover:text-text-primary transition-colors whitespace-nowrap">{item}</a>
        ))}
      </div>
    ))}
  </div>

  <div class="h-11"></div>
  <div class="max-w-[1180px] border-t border-border-light"></div>
  <div class="h-6"></div>

  <div class="flex items-center gap-5 max-w-[1180px]">
    <p class="text-text-secondary text-[14px] font-normal">© 2026 Talk Pro. All rights reserved.</p>
    <div class="flex-1"></div>
    <p class="text-text-secondary text-[14px] font-normal">Terms of Use · Privacy Policy · Support</p>
  </div>
</footer>