<script setup lang="ts">
import { footerLinks } from '~/data/navigation'
import { siteInfo } from '~/data/site'
</script>

<template>
  <footer class="site-footer">
    <div class="upper-footer">
      <div class="container">
        <div class="row">
          <div class="col col-lg-3 col-md-3 col-sm-6">
            <div class="widget about-widget">
              <div class="logo widget-title">
                <img :src="siteInfo.footerLogo" :alt="siteInfo.companyName">
              </div>
              <img :src="siteInfo.wechatOfficialImage" alt="微信公众号" style="width: 100px; margin-left: 10px;">
              <p style="margin-left: 10px;">关注公司微信号</p>
            </div>
          </div>

          <div class="col col-lg-2 col-md-3 col-sm-6">
            <div class="widget link-widget">
              <div class="widget-title">
                <h3>相关链接</h3>
              </div>
              <ul>
                <li v-for="link in footerLinks" :key="link.label">
                  <NuxtLink :to="link.to">{{ link.label }}</NuxtLink>
                </li>
              </ul>
            </div>
          </div>

          <div class="col col-lg-3 col-md-3 col-sm-6">
            <div class="widget contact-widget service-link-widget">
              <div class="widget-title">
                <h3>公司信息</h3>
              </div>
              <ul>
                <li><span>地址：</span>{{ siteInfo.address }}</li>
                <li><span>电话：</span>{{ siteInfo.phone }}</li>
                <li><span>邮箱：</span>{{ siteInfo.email }}</li>
              </ul>
            </div>
          </div>

          <div class="col col-lg-3 col-md-3 col-sm-6">
            <div class="widget newsletter-widget">
              <div class="widget-title">
                <h3>业务咨询邮箱</h3>
              </div>
              <form>
                <div class="input-1">
                  <p style="font-size: 18px; font-weight: 600;">{{ siteInfo.email }}</p>
                  <p><span>工作时间：</span>{{ siteInfo.businessHours }}</p>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="lower-footer">
      <div class="container">
        <div class="row">
          <div class="separator" />
          <div class="col col-xs-12">
            <p class="copyright">
              Copyright © {{ siteInfo.companyName }}
              <a :href="siteInfo.icpHref" target="_blank" rel="noreferrer">{{ siteInfo.icpText }}</a>
            </p>
            <a
              :href="siteInfo.publicSecurityHref"
              target="_blank"
              rel="noreferrer"
              style="display: inline-block; text-decoration: none; height: 20px; line-height: 20px;"
            >
              <img :src="siteInfo.publicSecurityImage" :alt="siteInfo.publicSecurityText" style="float: left;">
              <p style="float: left; height: 20px; font-size: 0.875rem; line-height: 20px; margin: 0 0 0 5px;">
                {{ siteInfo.publicSecurityText }}
              </p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>
