<template>
	<view class="container">
		<!-- Hero 区域 -->
		<view class="hero">
			<image src="/static/logo.png" class="logo" mode="aspectFit" />
			<text class="title">秦皇岛安尔然营销策划有限公司</text>
			<text class="subtitle">为您提供专业的营销策划服务</text>
			<button class="btn" @click="gotoAbout">了解更多</button>
		</view>

		<!-- 服务区域 -->
		<view class="section">
			<text class="section-title">我们的服务</text>
			<view class="service-list">
				<view class="service-item" v-for="(item, index) in services" :key="index">
					{{ item }}
				</view>
			</view>
		</view>

		<!-- 联系我们模块 -->
		<view class="contact-section">
			<button class="contact-btn" @click="lianxi">联系我们</button>
		</view>

		<!-- 页脚 -->
		<view class="footer">
			<text>© 2025 秦皇岛安尔然营销策划有限公司</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue"
import { Login } from "@/api"
import { onLoad } from "@dcloudio/uni-app"

const services = ['营销策划', '会议服务', '商务咨询', '庆典服务', '礼仪服务']

const gotoAbout = () => {
	uni.navigateTo({ url: '/pages/about' })
}

const lianxi = () => {
	uni.navigateTo({ url: '/pages/contact' })
}

const handleLogin = async () => {
	try {
		const res = await wx.login()
		if (res.code) {
		 
			Login({ code: res.code }).then(res => {
				if(res.status){
					uni.setStorageSync("openid",res.data.openid)
					if ( res.data.member !== null && res.data.url !== null) {
						uni.navigateTo({ url: '/pages/h5?url=' + res.data.url })
					}
				}
				
			})
		} else {
			console.error('登录失败', res.errMsg)
		}
	} catch (error) {
		console.error('登录异常', error)
	}
}

onLoad(() => {
	handleLogin()
})
</script>

<style scoped>
.container {
	padding: 20rpx;
	background: #f9fafb;
	box-sizing: border-box;
	min-height: 100vh;
	position: relative;
}

.hero {
	text-align: center;
	padding: 80rpx 40rpx;
	background: linear-gradient(135deg, #1e40af, #3182ce);
	color: white;
	border-radius: 24rpx;
	margin-bottom: 50rpx;
	box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
}

.logo {
	width: 180rpx;
	height: 180rpx;
	margin-bottom: 30rpx;
	border-radius: 50%;
	background: white;
	padding: 12rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
}

.title {
	font-size: 48rpx;
	font-weight: bold;
	display: block;
	margin: 20rpx 0;
	line-height: 1.3;
}

.subtitle {
	font-size: 32rpx;
	opacity: 0.95;
	display: block;
	margin-bottom: 40rpx;
}

.btn {
	background: #ffffff;
	color: #1e40af;
	border: none;
	padding: 18rpx 60rpx;
	border-radius: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	transition: transform 0.2s;
}
.btn:active {
	transform: scale(0.96);
}

.section-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 24rpx;
	color: #1e293b;
	display: block;
}

.service-list {
	display: flex;
	flex-wrap: wrap;
	gap: 24rpx;
	justify-content: center;
}

.service-item {
	background: #ffffff;
	padding: 24rpx 40rpx;
	border-radius: 18rpx;
	font-size: 28rpx;
	color: #1e293b;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	min-width: 180rpx;
	text-align: center;
}

/* 联系我们模块 */
.contact-section {
	text-align: center;
	margin: 50rpx 0;
}

.contact-btn {
	background: linear-gradient(135deg, #3b82f6, #1d4ed8);
	color: white;
	border: none;
	padding: 20rpx 70rpx;
	border-radius: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 6rpx 16rpx rgba(59, 130, 246, 0.4);
	transition: transform 0.2s, box-shadow 0.2s;
}
.contact-btn:active {
	transform: scale(0.97);
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
}

.footer {
	text-align: center;
	margin-top: 40rpx;
	color: #64748b;
	font-size: 24rpx;
	padding-bottom: 40rpx;
}
</style>