<template>
	<view class="service-card" @click="handleClick">
		<view class="service-inner">
			<view class="service-left">
				<view class="service-icon-wrap">
					<image class="service-icon" src="/static/link.png" mode="aspectFit"></image>
				</view>
				<view class="service-content">
					<text class="service-title">需要帮助？</text>
					<text class="service-desc">专属客服在线解答</text>
				</view>
			</view>
			<view class="service-btn">立即联系</view>
		</view>
	</view>
</template>

<script setup>
	const emit = defineEmits(['tap']);

	const handleClick = () => {
		emit('tap');
	};
</script>

<style scoped lang="scss">
	.service-card {
		position: fixed;
		bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
		left: var(--space-4);
		right: var(--space-4);
		z-index: 999;
	}

	.service-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-4) var(--space-5);
		background: var(--bg-surface);
		border-radius: var(--radius-xl);
		box-shadow: var(--shadow-lg);
	}

	.service-left {
		display: flex;
		align-items: center;
		gap: var(--space-4);
	}

	.service-icon-wrap {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--primary-tint);
		border-radius: var(--radius-md);
	}

	.service-icon {
		width: 44rpx;
		height: 44rpx;
	}

	.service-content {
		display: flex;
		flex-direction: column;
		gap: 2rpx;
	}

	.service-title {
		font-size: 28rpx;
		font-weight: 600;
		color: var(--text-primary);
		line-height: 1.3;
	}

	.service-desc {
		font-size: 24rpx;
		color: var(--text-tertiary);
		line-height: 1.3;
	}

	.service-btn {
		padding: var(--space-3) var(--space-5);
		background: var(--primary);
		color: var(--text-inverse);
		font-size: 26rpx;
		font-weight: 600;
		border-radius: var(--radius-full);
		line-height: 1;
	}
</style>