---
import { arr2Tree } from '@/utils/array'

// const [menus] = arr2Tree(Astro.locals._menus || [])

const { lang } = Astro.props

const home = lang == 'zh' ? '首页' : 'Home'
function getName(item = {}) {
  return (
    item[`categaryName${lang.charAt(0).toUpperCase() + lang.slice(1)}`] ||
    item.categaryNameEn ||
    item.categaryNameZh
  )
}

const menus = [
  {
    id: '1',
    name: '首页',
  },
  {
    id: '2',
    name: '产品与解决方案',
    url: '/',
    children: [
      {
        name: '智慧物联',
        path: 'products-solutions/lot',
      },
      {
        name: '工业互联网',
        path: 'products-solutions/industrial-internet',
      },
      {
        name: '政企医疗',
        path: 'product/gov-ent-health',
      },
      {
        name: '其他业务',
        path: 'product/others',
      },
    ],
  },
  {
    id: '3',
    name: '最新资讯',
  },
  {
    id: '4',
    name: '关于云致',
  },
  {
    id: '5',
    name: '联系我们',
  },
]

const colNum = Math.ceil(12 / (menus?.length + 1))
---

<div class="bg-l">
  <div class="container">
    <footer class="row py-5 my-5">
      <div class={`col-md-4 col-sm-12 mb-3`}>
        <a
          href="/"
          class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none"
        >
          <img class="bi me-2" width="120" src="/public/logo.png" />
        </a>
        <p class="text-body-secondary">© 2024</p>
      </div>

      <div class={`col-md-1 col-sm-12 mb-3`}></div>

      <div class={`col-md-7 col-sm-12 mb-3 row justify-content-between`}>
        {
          menus?.map((item) => {
            return (
              <div class={`col-md-${colNum} col-sm-12 mb-3`}>
                <h5>{item?.name}</h5>
                <ul class="nav flex-column">
                  {item?.children?.map((child) => (
                    <li class="nav-item mb-2">
                      <a
                        href={`/${lang}/${child.path}`}
                        class="nav-link p-0 text-body-secondary"
                      >
                        {child?.name}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            )
          })
        }
      </div>
    </footer>
  </div>
</div>
