<script setup>
import { ref } from 'vue'
import SectionHeaderBlock from './SectionHeaderBlock.vue'
import { contactContent } from '../data/site'

const form = ref({ name: '', phone: '', message: '' })
const toastVisible = ref(false)

function handleSubmit() {
  toastVisible.value = true
  form.value = { name: '', phone: '', message: '' }
  setTimeout(() => {
    toastVisible.value = false
  }, 2500)
}
</script>

<template>
  <section class="section section-contact" id="contact">
    <div class="container">
      <SectionHeaderBlock title-en="CONTACT US" title-cn="联系我们" />
      <div class="contact-content">
        <div class="contact-detail">
          <h3 class="contact-greeting">{{ contactContent.greeting }}</h3>
          <p class="contact-intro">{{ contactContent.intro }}</p>
          <div class="contact-block">
            <h4>{{ contactContent.address.title }}</h4>
            <p v-for="(line, index) in contactContent.address.lines" :key="index">{{ line }}</p>
          </div>
          <div class="contact-block">
            <h4>{{ contactContent.methods.title }}</h4>
            <p v-for="(line, index) in contactContent.methods.lines" :key="index">{{ line }}</p>
          </div>
        </div>
       
      </div>
    </div>

    <Teleport to="body">
      <div class="form-toast" :class="{ show: toastVisible }">
        感谢您的留言，我们会尽快与您联系！
      </div>
    </Teleport>
  </section>
</template>
