<script setup>
import ContactPageHero from '../components/ContactPageHero.vue'
import ContactPageSectionHeader from '../components/ContactPageSectionHeader.vue'
import AppFooter from '../components/AppFooter.vue'
import contactMapImg from '../static/mapimg.png'
import { contactContent } from '../data/site'

const emit = defineEmits(['navigate'])
</script>

<template>
  <ContactPageHero />

  <section class="contact-page-section">
    <div class="container">
      <ContactPageSectionHeader />

      <div class="contact-page-body">
        <div class="contact-page-info">
          <h3 class="contact-page-info__label">
            联系我们 <span>CONTACT US</span>
          </h3>
          <p class="contact-page-info__greeting">{{ contactContent.greeting }}</p>
          <p class="contact-page-info__intro">{{ contactContent.intro }}</p>
          <div class="contact-page-info__block">
            <h4>{{ contactContent.address.title }}</h4>
            <p v-for="(line, index) in contactContent.address.lines" :key="index">
              {{ line }}
            </p>
          </div>
          <div class="contact-page-info__block">
            <h4>{{ contactContent.methods.title }}</h4>
            <p v-for="(line, index) in contactContent.methods.lines" :key="index">
              {{ line }}
            </p>
          </div>
        </div>

        <img class="contact-page-map" :src="contactMapImg" alt="公司位置地图" />
      </div>
    </div>
  </section>

  <AppFooter @navigate="emit('navigate', $event)" />
</template>
