<script setup>
import IconMark from './IconMark.vue'
import QrPlaceholder from './QrPlaceholder.vue'
import SectionTitle from './SectionTitle.vue'
</script>

<template>
  <section id="contact" class="contact-section page-section page-section--compact">
    <div class="container">
      <SectionTitle title="联系我们" />
      <div class="contact-card">
        <a
          class="address-row"
          href="https://uri.amap.com/search?keyword=%E6%9D%AD%E5%B7%9E%E5%B8%82%E8%A5%BF%E6%B9%96%E5%8C%BA%E7%BF%A0%E8%8B%91%E8%A1%97%E9%81%93%E5%A1%98%E8%8B%97%E8%B7%AF1%E5%8F%B74%E5%8F%B7%E6%A5%BC2%E6%A5%BC"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="在地图中打开办公地址"
        >
          <span class="address-icon">
            <IconMark name="map-pin" :size="22" />
          </span>
          <strong>办公地址：</strong>
          <span>杭州市西湖区翠苑街道塘苗路1号4号楼2楼</span>
        </a>
        <div class="contact-manager-grid">
          <article class="manager-card">
            <QrPlaceholder image="/assets/王经理二维码.jpg" label="微信长按扫码联系王经理" />
          </article>
          <article class="manager-card">
            <QrPlaceholder image="/assets/罗经理二维码.png" label="微信长按扫码联系罗经理" />
          </article>
        </div>
      </div>
    </div>
  </section>
</template>
