<template>
	<view class="mode-page" :class="'theme-' + activeMode">
		<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view>
		<view class="nav">
			<view class="back" @tap="back">‹</view>
			<view class="nav-title">i/e 选择</view>
			<view class="ghost"></view>
		</view>
		<view class="head">
			<view class="eyebrow">Today Mode</view>
			<view class="title">今天想以哪种方式被陪伴？</view>
			<view class="sub">不是人格测试，只是此刻的社交能量。</view>
		</view>

		<view class="mode-card i" :class="{ active: activeMode === 'i' }" @tap="activeMode = 'i'">
			<view class="mark">i</view>
			<view class="copy">
				<view class="name">安静陪伴</view>
				<view class="desc">慢回复、少说话、允许沉默。像两个人坐在操场边。</view>
			</view>
			<view class="state">月光 / 耳机 / 图书馆</view>
		</view>

		<view class="mode-card e" :class="{ active: activeMode === 'e' }" @tap="activeMode = 'e'">
			<view class="mark">e</view>
			<view class="copy">
				<view class="name">轻轻热闹</view>
				<view class="desc">有人开场、聊点废话，把情绪拉亮一点。</view>
			</view>
			<view class="state">便利店 / 夜跑 / 随机话题</view>
		</view>

		<view class="continue" @tap="goHome">进入此刻</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeMode: 'i',
				menuButtonInfo: { top: 44 }
			}
		},
		onLoad() {
			if (uni.getMenuButtonBoundingClientRect) {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			}
		},
		methods: {
			back() {
				uni.redirectTo({ url: '/package1/ieBrowser/index' })
			},
			goHome() {
				uni.redirectTo({ url: '/package1/ieBrowser/index?mode=' + this.activeMode })
			}
		}
	}
</script>

<style lang="scss" scoped>
	page { background: #f7f9ff; }
	.mode-page {
		min-height: 100vh;
		padding: 0 32rpx 72rpx;
		box-sizing: border-box;
		color: #151a2d;
		background:
			radial-gradient(circle at 82% 8%, rgba(139, 124, 255, .24), transparent 290rpx),
			linear-gradient(180deg, #fbfdff, #eef4ff);
		transition: background .35s ease;
	}
	.theme-e {
		background:
			radial-gradient(circle at 82% 8%, rgba(255, 184, 209, .36), transparent 300rpx),
			radial-gradient(circle at 18% 70%, rgba(255, 214, 165, .38), transparent 320rpx),
			linear-gradient(180deg, #fffaf4, #f7f9ff);
	}
	.nav { height: 90rpx; display: flex; align-items: center; }
	.back, .ghost { width: 70rpx; font-size: 56rpx; color: rgba(21, 26, 45, .55); }
	.nav-title { flex: 1; text-align: center; font-size: 30rpx; font-weight: 800; }
	.head { padding-top: 10rpx; }
	.eyebrow { color: rgba(21, 26, 45, .42); font-size: 22rpx; letter-spacing: 5rpx; text-transform: uppercase; }
	.title { width: 570rpx; margin-top: 18rpx; font-size: 52rpx; line-height: 66rpx; font-weight: 800; }
	.sub { margin-top: 18rpx; color: rgba(21, 26, 45, .5); font-size: 25rpx; }
	.mode-card {
		position: relative;
		margin-top: 34rpx;
		padding: 34rpx;
		border: 1rpx solid rgba(255, 255, 255, .74);
		border-radius: 44rpx;
		background: rgba(255, 255, 255, .56);
		backdrop-filter: blur(24rpx);
		box-shadow: 0 28rpx 80rpx rgba(96, 112, 160, .13);
		transition: transform .22s ease, border-color .22s ease;
	}
	.mode-card.active { transform: scale(1.02); border-color: rgba(169, 255, 231, .95); }
	.mark { width: 92rpx; height: 92rpx; border-radius: 32rpx; text-align: center; line-height: 92rpx; font-size: 52rpx; font-weight: 800; }
	.i .mark { color: #f7f4ff; background: #7771d8; }
	.e .mark { color: #11162a; background: #a9ffe7; }
	.copy { margin-top: 26rpx; }
	.name { font-size: 38rpx; font-weight: 800; }
	.desc { margin-top: 12rpx; color: rgba(21, 26, 45, .58); font-size: 26rpx; line-height: 42rpx; }
	.state { margin-top: 28rpx; color: rgba(21, 26, 45, .42); font-size: 22rpx; }
	.continue {
		position: fixed;
		left: 32rpx;
		right: 32rpx;
		bottom: 40rpx;
		height: 104rpx;
		border-radius: 999rpx;
		text-align: center;
		line-height: 104rpx;
		color: #11162a;
		background: linear-gradient(135deg, #effffb, #a9ffe7);
		font-size: 30rpx;
		font-weight: 800;
	}
</style>
