<template>
  <view class="page-about">
    <!-- 头部 -->
    <view class="page-header">
      <view class="back-btn" @tap="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <text class="header-title">关于我们</text>
      <view class="placeholder"></view>
    </view>

    <!-- Logo区域 -->
    <view class="logo-section">
      <view class="logo-wrap">
        <u-icon name="home-fill" size="60" color="#ff6b35"></u-icon>
      </view>
      <text class="app-name">品住会</text>
      <text class="app-version">v1.0.0</text>
    </view>

    <!-- 介绍卡片 -->
    <view class="intro-card">
      <text class="intro-title">品质住宿，会员优享</text>
      <text class="intro-desc">
        品住会是一个集酒店、民宿、短租、青旅预订于一体的综合性平台。我们致力于为用户提供优质的住宿体验，为商家提供便捷的管理工具。
      </text>
    </view>

    <!-- 功能特色 -->
    <view class="feature-section">
      <text class="section-title">平台特色</text>
      <view class="feature-list">
        <view class="feature-item">
          <view class="feature-icon">
            <u-icon name="search" size="24" color="#ff6b35"></u-icon>
          </view>
          <view class="feature-content">
            <text class="feature-name">智能搜索</text>
            <text class="feature-desc">快速找到心仪的住宿</text>
          </view>
        </view>

        <view class="feature-item">
          <view class="feature-icon">
            <u-icon name="star-fill" size="24" color="#ff6b35"></u-icon>
          </view>
          <view class="feature-content">
            <text class="feature-name">会员权益</text>
            <text class="feature-desc">专属折扣和积分奖励</text>
          </view>
        </view>

        <view class="feature-item">
          <view class="feature-icon">
            <u-icon name="checkmark-circle-fill" size="24" color="#ff6b35"></u-icon>
          </view>
          <view class="feature-content">
            <text class="feature-name">品质保障</text>
            <text class="feature-desc">严选优质商家入驻</text>
          </view>
        </view>

        <view class="feature-item">
          <view class="feature-icon">
            <u-icon name="clock-fill" size="24" color="#ff6b35"></u-icon>
          </view>
          <view class="feature-content">
            <text class="feature-name">24小时客服</text>
            <text class="feature-desc">随时为您解决问题</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 联系方式 -->
    <view class="contact-section">
      <text class="section-title">联系我们</text>
      <view class="contact-list">
        <view class="contact-item" @tap="callPhone">
          <view class="contact-icon">
            <u-icon name="phone-fill" size="20" color="#666"></u-icon>
          </view>
          <text class="contact-label">客服电话</text>
          <text class="contact-value">400-888-8888</text>
          <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
        </view>

        <view class="contact-item" @tap="copyEmail">
          <view class="contact-icon">
            <u-icon name="email-fill" size="20" color="#666"></u-icon>
          </view>
          <text class="contact-label">客服邮箱</text>
          <text class="contact-value">service@pinzhuhui.com</text>
          <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
        </view>

        <view class="contact-item" @tap="showAddress">
          <view class="contact-icon">
            <u-icon name="map-fill" size="20" color="#666"></u-icon>
          </view>
          <text class="contact-label">公司地址</text>
          <text class="contact-value">上海市浦东新区</text>
          <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
        </view>
      </view>
    </view>

    <!-- 法律信息 -->
    <view class="legal-section">
      <view class="legal-item" @tap="showAgreement('用户协议')">
        <text class="legal-text">用户协议</text>
        <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
      </view>
      <view class="legal-item" @tap="showAgreement('隐私政策')">
        <text class="legal-text">隐私政策</text>
        <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
      </view>
    </view>

    <!-- 版权信息 -->
    <view class="copyright">
      <text class="copyright-text">© 2026 品住会 All Rights Reserved</text>
    </view>
  </view>
</template>

<script setup lang="ts">
function goBack() {
  uni.navigateBack();
}

function callPhone() {
  uni.makePhoneCall({
    phoneNumber: '400-888-8888',
  });
}

function copyEmail() {
  uni.setClipboardData({
    data: 'service@pinzhuhui.com',
    success: () => {
      uni.showToast({
        title: '邮箱已复制',
        icon: 'success',
      });
    },
  });
}

function showAddress() {
  uni.showToast({
    title: '上海市浦东新区',
    icon: 'none',
  });
}

function showAgreement(name: string) {
  let type = 'user';
  if (name === '用户协议') {
    type = 'user';
  } else if (name === '隐私政策') {
    type = 'privacy';
  }
  uni.navigateTo({
    url: `/pages/agreement/index?type=${type}`,
  });
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/common.scss';

.page-about {
  min-height: 100vh;
  background: $bg-page;
  padding-bottom: 40rpx;
}

/* 页面头部 */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-lg $spacing-2xl;
  background: $bg-card;
  border-bottom: 1rpx solid $border-light;
}

.back-btn {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $bg-page;
  border-radius: $radius-round;
  transition: all 0.2s ease;

  &:active {
    background: $bg-hover;
  }
}

.header-title {
  font-size: $font-lg;
  font-weight: $font-semibold;
  color: $text-primary;
}

.placeholder {
  width: 64rpx;
}

/* Logo区域 */
.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx $spacing-2xl 60rpx;
  background: $bg-card;
  margin-bottom: $spacing-xl;
  border-bottom: 1rpx solid $border-light;
}

.logo-wrap {
  width: 160rpx;
  height: 160rpx;
  background: $primary-bg;
  border-radius: $radius-round;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacing-2xl;
  border: 1rpx solid $border-light;
}

.app-name {
  font-size: 44rpx;
  font-weight: $font-semibold;
  color: $text-primary;
  margin-bottom: $spacing-sm;
}

.app-version {
  font-size: 26rpx;
  color: $text-secondary;
}

/* 介绍卡片 */
.intro-card {
  background: $bg-card;
  margin: 0 $spacing-2xl $spacing-xl;
  padding: 40rpx $spacing-2xl;
  border-radius: $radius-lg;
  border: 1rpx solid $border-light;
}

.intro-title {
  font-size: $font-lg;
  font-weight: $font-semibold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-lg;
}

.intro-desc {
  font-size: $font-base;
  color: $text-secondary;
  line-height: 1.8;
  display: block;
}

/* 功能特色 */
.feature-section {
  background: $bg-card;
  margin: 0 $spacing-2xl $spacing-xl;
  padding: 40rpx $spacing-2xl;
  border-radius: $radius-lg;
  border: 1rpx solid $border-light;
}

.section-title {
  font-size: $font-lg;
  font-weight: $font-semibold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-2xl;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: $spacing-xl;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: $spacing-lg;
}

.feature-icon {
  width: 72rpx;
  height: 72rpx;
  background: $primary-bg;
  border-radius: $radius-base;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: $spacing-xs;
}

.feature-name {
  font-size: $font-base;
  font-weight: $font-semibold;
  color: $text-primary;
}

.feature-desc {
  font-size: $font-sm;
  color: $text-secondary;
}

/* 联系方式 */
.contact-section {
  background: $bg-card;
  margin: 0 $spacing-2xl $spacing-xl;
  padding: 40rpx $spacing-2xl;
  border-radius: $radius-lg;
  border: 1rpx solid $border-light;
}

.contact-list {
  display: flex;
  flex-direction: column;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: $spacing-md;
  padding: $spacing-xl 0;
  border-bottom: 1rpx solid $border-light;
  transition: all 0.2s ease;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    opacity: 0.7;
  }
}

.contact-icon {
  width: 56rpx;
  height: 56rpx;
  background: $bg-page;
  border-radius: $radius-base;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-label {
  font-size: $font-base;
  color: $text-secondary;
  width: 140rpx;
  flex-shrink: 0;
}

.contact-value {
  flex: 1;
  font-size: $font-base;
  color: $text-primary;
  font-weight: $font-medium;
}

/* 法律信息 */
.legal-section {
  background: $bg-card;
  margin: 0 $spacing-2xl $spacing-xl;
  border-radius: $radius-lg;
  overflow: hidden;
  border: 1rpx solid $border-light;
}

.legal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-2xl;
  border-bottom: 1rpx solid $border-light;
  transition: all 0.2s ease;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background: $bg-hover;
  }
}

.legal-text {
  font-size: $font-base;
  color: $text-primary;
}

/* 版权信息 */
.copyright {
  text-align: center;
  padding: 40rpx $spacing-2xl;
}

.copyright-text {
  font-size: $font-sm;
  color: $text-secondary;
}
</style>
