<template>
	<view class="terms-page">
		<view class="content">
			<view class="title">{{ $t('legal.termsAndConditions') }}</view>
			
			<view class="section">
				<view class="section-title">{{ $t('legal.applicableLaw') }}</view>
				<view class="section-content">
					<text>{{ $t('legal.applicableLawContent') }}</text>
				</view>
			</view>

			<view class="section">
				<view class="section-title">{{ $t('legal.paymentMethods') }}</view>
				<view class="section-content">
					<text>{{ $t('legal.paymentMethodsContent') }}</text>
				</view>
			</view>

			<view class="section">
				<view class="section-title">{{ $t('legal.refundPolicy') }}</view>
				<view class="section-content">
					<text>{{ $t('legal.refundPolicyContent') }}</text>
				</view>
			</view>

			<view class="section">
				<view class="section-title">{{ $t('legal.serviceTerms') }}</view>
				<view class="section-content">
					<text>{{ $t('legal.serviceTermsContent') }}</text>
				</view>
			</view>

			<view class="section">
				<view class="section-title">{{ $t('legal.liabilityLimitation') }}</view>
				<view class="section-content">
					<text>{{ $t('legal.liabilityLimitationContent') }}</text>
				</view>
			</view>

			<view class="section">
				<view class="section-title">{{ $t('legal.disputeResolution') }}</view>
				<view class="section-content">
					<text>{{ $t('legal.disputeResolutionContent') }}</text>
				</view>
			</view>

			<view class="footer">
				<text class="update-time">{{ $t('legal.lastUpdate') }}: 2025-02-05</text>
				<text class="notice">{{ $t('legal.footerNotice') }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted } from 'vue'
import { useI18n } from '@/utils/i18n.js'

const { t } = useI18n()

onMounted(() => {
	uni.setNavigationBarTitle({
		title: t('legal.termsAndConditions')
	})
})
</script>

<style lang="scss" scoped>
.terms-page {
	min-height: 100vh;
	background-color: #f6f6f6;
	padding-bottom: env(safe-area-inset-bottom);
}

.content {
	background-color: #ffffff;
	padding: 40rpx 30rpx;
	margin: 20rpx;
	border-radius: 16rpx;
}

.title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
	margin-bottom: 40rpx;
}

.section {
	margin-bottom: 40rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 20rpx;
	padding-left: 20rpx;
	border-left: 6rpx solid #07c160;
}

.section-content {
	font-size: 28rpx;
	color: #666666;
	line-height: 1.8;
	text-align: justify;
	padding: 20rpx;
	background-color: #f9f9f9;
	border-radius: 8rpx;
}

.footer {
	margin-top: 60rpx;
	padding-top: 30rpx;
	border-top: 1rpx solid #e5e5e5;
	text-align: center;
}

.update-time {
	display: block;
	font-size: 24rpx;
	color: #999999;
	margin-bottom: 20rpx;
}

.notice {
	display: block;
	font-size: 26rpx;
	color: #666666;
	line-height: 1.6;
}
</style>

