<template>
  <view class="container">
    <!-- Header Navigation -->
    <view class="header-nav">
      <view class="nav-content">
        <view class="nav-title">存客宝</view>
        <view class="nav-avatar" @click="goToLogin">
          <image class="avatar-img" src="/static/tabbar/me.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>
    <!-- Hero Section -->
    <view class="hero-section">
      <view class="hero-content">
        <view class="badge">场景化客户留存 SaaS 工具</view>
        <view class="hero-title">
          <text class="title-main">存客宝</text>
          <text class="title-sub">私域流量运营专家</text>
        </view>
        <view class="hero-desc">
          专注于场景化客户留存的私域流量运营工具，帮助中小企业将多平台公域流量高效转化为私域客户资产，通过数据驱动的精细化运营提升客户粘性和生命周期价值
        </view>
      </view>
    </view>

    <!-- 立即体验按钮 -->
    <view class="cta-button-section">
      <button class="cta-button" @click="showDialogBtn">
        <text class="button-text">立即体验</text>
        <text class="arrow">→</text>
      </button>
    </view>

    <!-- Core Values Section -->
    <view class="section values-section">
      <view class="section-header">
        <view class="section-title">核心价值与优势</view>
        <view class="section-desc">通过统一管理、智能触达和数据驱动，全面提升企业私域运营效率</view>
      </view>

      <view class="values-grid">
        <view class="value-card">
          <view class="card-icon users-icon">👥</view>
          <view class="card-title">统一管理 (存客)</view>
          <view class="card-desc">一站式平台统一存储、管理和追踪来自各渠道的客户数据及关联的微信号状态，告别数据分散管理困难</view>
        </view>

        <view class="value-card">
          <view class="card-icon target-icon">🎯</view>
          <view class="card-title">智能触达 (获客)</view>
          <view class="card-desc">场景化获客配置打通线上线下流量入口，利用AI智能内容库和多平台工作台高效触达转化客户</view>
        </view>

        <view class="value-card">
          <view class="card-icon chart-icon">📊</view>
          <view class="card-title">数据驱动 (宝)</view>
          <view class="card-desc">通过数据统计与分析量化运营效果，优化营销策略，实现营销活动的标准化和数据化决策</view>
        </view>
      </view>
    </view>

    <!-- Functional Modules Section -->
    <view class="section modules-section">
      <view class="section-header">
        <view class="section-title">五大核心功能模块</view>
        <view class="section-desc">从数据概览到客户获取，从内容管理到多平台运营，全方位覆盖私域运营需求</view>
      </view>

      <view class="modules-grid">
        <view class="module-card primary-border">
          <view class="module-header">
            <view class="module-icon primary-bg">📊</view>
            <view class="module-title">数据概览</view>
          </view>
          <view class="module-desc">实时展示微信号总数、健康度、新增好友数等关键指标，提供运营全局概览和数据可视化分析</view>
        </view>

        <view class="module-card secondary-border">
          <view class="module-header">
            <view class="module-icon secondary-bg">🌐</view>
            <view class="module-title">场景化获客</view>
          </view>
          <view class="module-desc">标准化多渠道获客入口配置，支持抖音、小红书、公众号、海报、付款码等多种获客场景</view>
        </view>

        <view class="module-card accent-border">
          <view class="module-header">
            <view class="module-icon accent-bg">🧠</view>
            <view class="module-title">智能内容库</view>
          </view>
          <view class="module-desc">多源内容采集、智能分类标签、AI分析改写，提供内容集中管理和API接口开放能力</view>
        </view>

        <view class="module-card orange-border">
          <view class="module-header">
            <view class="module-icon orange-bg">⚡</view>
            <view class="module-title">运营工作台</view>
          </view>
          <view class="module-desc">社交矩阵运营操作中心，支持多渠道内容推送、跨设备同步、智能优化建议和任务调度</view>
        </view>

        <view class="module-card red-border">
          <view class="module-header">
            <view class="module-icon red-bg">⚙️</view>
            <view class="module-title">设备监控</view>
          </view>
          <view class="module-desc">实时监控设备状态、微信号健康度，支持微信号替换后的数据继承和异常预警机制</view>
        </view>
      </view>
    </view>

    <!-- Scenario Examples Section -->
    <view class="section scenarios-section">
      <view class="section-header">
        <view class="section-title">应用场景示例</view>
        <view class="section-desc">不同行业和业务场景下的实际应用案例</view>
      </view>

      <view class="scenarios-grid">
        <view class="scenario-card">
          <view class="scenario-badge">电商零售</view>
          <view class="scenario-title">多平台流量整合</view>
          <view class="scenario-desc">某服装品牌通过存客宝整合抖音、小红书、微信公众号等多平台流量，统一管理客户数据，通过场景化获客配置提升转化率30%，客户复购率提升45%。</view>
          <view class="scenario-tags">
            <text class="tag">抖音获客</text>
            <text class="tag">内容分发</text>
            <text class="tag">客户留存</text>
          </view>
        </view>

        <view class="scenario-card">
          <view class="scenario-badge">教育培训</view>
          <view class="scenario-title">智能内容运营</view>
          <view class="scenario-desc">某在线教育机构利用AI内容改写功能，将课程内容智能适配不同平台特点，内容生产效率提升60%，学员互动率提升35%，课程转化率显著提升。</view>
          <view class="scenario-tags">
            <text class="tag">AI改写</text>
            <text class="tag">多平台推送</text>
            <text class="tag">数据分析</text>
          </view>
        </view>
      </view>
    </view>

    <!-- CTA Section -->
    <view class="cta-section">
      <view class="cta-content">
        <view class="cta-title">开始您的私域运营之旅</view>
        <view class="cta-desc">加入数千家企业的选择，用存客宝提升您的客户留存和运营效率</view>
        
        <button class="cta-main-button" @click="showDialogBtn">
          <text class="button-text" style='color:#333;'>立即体验</text>
          <text class="arrow" style='color:#333;'>→</text>
        </button>
        
        <button class="cta-secondary-button" @click="goToSite">
          <text class="button-text">访问老游条电竞学院</text>
          <text class="arrow">→</text>
        </button>

        <view class="stats-grid">
          <view class="stat-item">
            <view class="stat-number">1000+</view>
            <view class="stat-label">企业用户</view>
          </view>
          <view class="stat-item">
            <view class="stat-number">50万+</view>
            <view class="stat-label">管理客户</view>
          </view>
          <view class="stat-item">
            <view class="stat-number">30%</view>
            <view class="stat-label">转化提升</view>
          </view>
          <view class="stat-item">
            <view class="stat-number">24/7</view>
            <view class="stat-label">技术支持</view>
          </view>
        </view>
      </view>
    </view>

    <!-- Footer -->
    <view class="footer">
      <view class="footer-text">© {{currentYear}} 存客宝. 保留所有权利 | 遵循"事事有回应，件件有结果，日日精进"的服务理念</view>
    </view>

    <!-- 弹窗遮罩 -->
    <view v-if="showDialog" class="dialog-overlay" @click="hideDialog">
      <view class="dialog-content" @click.stop>
        <view class="dialog-header">
          <view class="dialog-title">申请体验存客宝</view>
          <view class="dialog-desc">我们的客服团队将在24小时内为您创建专属体验账号，并提供一对一的产品演示和使用指导。</view>
        </view>
        
        <view class="dialog-form">
          <view class="form-item">
            <view class="form-label">手机号</view>
            <input class="form-input" v-model="phoneNumber" placeholder="请输入手机号" type="number" maxlength="11" />
          </view>
        </view>
        
        <view class="dialog-buttons">
          <button class="dialog-button cancel-button" @click="hideDialog">取消</button>
          <button class="dialog-button confirm-button" @click="confirmBtn">确认</button>
        </view>
      </view>
    </view>

    <!-- 成功提示 -->
    <view v-if="showSuccessMessage" class="success-toast">
      <text class="success-text">申请已提交</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false,
      showSuccessMessage: false,
	  taskid: 127,
      currentYear: new Date().getFullYear(),
      phoneNumber: ''
    }
  },
  methods: {
    showDialogBtn() {
      this.showDialog = true
    },
    hideDialog() {
      this.showDialog = false
    },
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    
    goToSite() {
      uni.navigateTo({
        url: '/pages/index/site'
      })
    },

    confirmBtn() {
      let that = this;
      if (!this.phoneNumber) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none',
          duration: 2000
        })
        return
      }else{
        uni.showLoading({
          title: '请求中...',
          mask: true
        })
	  uni.request({
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
					'token': that.token
				},
				url: that.$config.apiUrl2 + '/v1/frontend/business/poster/decryptphones',
				data: {
					id: that.taskid,
					phone: this.phoneNumber
				},
				success: (res) => {
					uni.hideLoading();
					if (res.data.code == 200) {
            this.showDialog = false
						uni.showModal({
							title: '提示',
							content: '申请成功',
							success: function(res) {
								console.log(res)
							}
						})
					this.showDialog = false
					} else {
						uni.showToast({
							title: '申请失败',
							icon: 'none',
							duration: 2000
						});
					}
				}
			});


        
      }
    },


	// 获取用户手机号
	getPhoneNumber(res) {
		let that = this;
		if (res.detail.errMsg == "getPhoneNumber:ok") {
			uni.showLoading({
				title: '请求中...',
				mask: true
			})
			uni.request({
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
					'token': that.token
				},
				url: that.$config.apiUrl2 + '/v1/frontend/business/poster/decryptphone',
				data: {
					id: that.taskid,
					code: res.detail.code
				},
				success: (res) => {
					uni.hideLoading();
					if (res.data.code == 10000) {
						uni.showModal({
							title: '提示',
							content: that.task.sTip,
							success: function(res) {
								console.log(res)
							}
						})
					this.showDialog = false
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						});
					}
				}
			});
	
		}
	},
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #ffffff;
}

/* Header Navigation */
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rpx);
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  height: 88rpx;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #6366f1;
}

.nav-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 2rpx solid #e5e7eb;
  cursor: pointer;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

/* Hero Section */
.hero-section {
  margin-top: calc(88rpx + var(--status-bar-height));
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, #ffffff 50%, rgba(168, 85, 247, 0.05) 100%);
  padding: 80rpx 32rpx 120rpx;
  text-align: center;
}

.hero-content {
  max-width: 1200rpx;
  margin: 0 auto;
}

.badge {
  display: inline-block;
  background-color: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  padding: 12rpx 24rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  margin-bottom: 32rpx;
}

.hero-title {
  margin-bottom: 32rpx;
}

.title-main {
  display: block;
  font-size: 80rpx;
  font-weight: bold;
  color: #1f2937;
  line-height: 1.2;
}

.title-sub {
  display: block;
  font-size: 64rpx;
  font-weight: bold;
  color: #6366f1;
  margin-top: 16rpx;
}

.hero-desc {
  font-size: 32rpx;
  color: #6b7280;
  line-height: 1.6;
  max-width: 1000rpx;
  margin: 0 auto;
}

/* CTA Button Section */
.cta-button-section {
  padding: 64rpx 32rpx;
  text-align: center;
  background-color: #ffffff;
}

.cta-button {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border: none;
  border-radius: 12rpx;
  padding: 24rpx 64rpx;
  font-size: 32rpx;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 32rpx rgba(99, 102, 241, 0.3);
}

.button-text {
  color: white;
}

.arrow {
  margin-left: 16rpx;
  color: white;
}

/* Section Styles */
.section {
  padding: 120rpx 32rpx;
}

.values-section {
  background-color: rgba(249, 250, 251, 0.5);
}

.section-header {
  text-align: center;
  margin-bottom: 80rpx;
}

.section-title {
  font-size: 64rpx;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 24rpx;
}

.section-desc {
  font-size: 32rpx;
  color: #6b7280;
  line-height: 1.6;
  max-width: 800rpx;
  margin: 0 auto;
}

/* Values Grid */
.values-grid {
  display: flex;
  flex-direction: column;
  gap: 48rpx;
}

.value-card {
  background: white;
  border-radius: 16rpx;
  padding: 48rpx 32rpx;
  text-align: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.card-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24rpx;
  font-size: 48rpx;
}

.users-icon {
  background-color: rgba(99, 102, 241, 0.1);
}

.target-icon {
  background-color: rgba(168, 85, 247, 0.1);
}

.chart-icon {
  background-color: rgba(34, 197, 94, 0.1);
}

.card-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 16rpx;
}

.card-desc {
  font-size: 28rpx;
  color: #6b7280;
  line-height: 1.6;
}

/* Modules Grid */
.modules-grid {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.module-card {
  background: white;
  border-radius: 12rpx;
  padding: 32rpx;
  border-left: 8rpx solid;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.primary-border { border-left-color: #6366f1; }
.secondary-border { border-left-color: #8b5cf6; }
.accent-border { border-left-color: #22c55e; }
.orange-border { border-left-color: #f97316; }
.red-border { border-left-color: #ef4444; }

.module-header {
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 16rpx;
}

.module-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.primary-bg { background-color: rgba(99, 102, 241, 0.1); }
.secondary-bg { background-color: rgba(139, 92, 246, 0.1); }
.accent-bg { background-color: rgba(34, 197, 94, 0.1); }
.orange-bg { background-color: rgba(249, 115, 22, 0.1); }
.red-bg { background-color: rgba(239, 68, 68, 0.1); }

.module-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
}

.module-desc {
  font-size: 26rpx;
  color: #6b7280;
  line-height: 1.6;
}

/* Scenarios Section */
.scenarios-section {
  background-color: rgba(249, 250, 251, 0.5);
}

.scenarios-grid {
  display: flex;
  flex-direction: column;
  gap: 48rpx;
}

.scenario-card {
  background: white;
  border-radius: 16rpx;
  padding: 48rpx 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.scenario-badge {
  display: inline-block;
  background-color: rgba(168, 85, 247, 0.1);
  color: #8b5cf6;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
  margin-bottom: 16rpx;
}

.scenario-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 24rpx;
}

.scenario-desc {
  font-size: 28rpx;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 32rpx;
}

.scenario-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.tag {
  background-color: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
}

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  padding: 120rpx 32rpx;
}

.cta-content {
  text-align: center;
  max-width: 1000rpx;
  margin: 0 auto;
}

.cta-title {
  font-size: 64rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 32rpx;
}

.cta-desc {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin-bottom: 64rpx;
}

.cta-main-button {
  background: white;
  color: #6366f1;
  border: none;
  border-radius: 12rpx;
  padding: 24rpx 64rpx;
  font-size: 32rpx;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.cta-secondary-button {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  border-radius: 12rpx;
  padding: 20rpx 48rpx;
  font-size: 28rpx;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 64rpx;
  backdrop-filter: blur(10rpx);
}

.cta-secondary-button .button-text {
  margin-right: 8rpx;
}

.cta-secondary-button .arrow {
  font-size: 24rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32rpx;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 48rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

/* Footer */
.footer {
  padding: 64rpx 32rpx;
  background-color: #f9fafb;
}

.footer-text {
  text-align: center;
  font-size: 24rpx;
  color: #6b7280;
}

/* Dialog Overlay */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: 32rpx;
}

/* Dialog Styles */
.dialog-content {
  background: white;
  border-radius: 16rpx;
  padding: 48rpx 32rpx;
  max-width: 600rpx;
  width: 100%;
  box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.2);
}

.dialog-header {
  margin-bottom: 32rpx;
}

.dialog-form {
  margin-bottom: 32rpx;
}

.form-item {
  margin-bottom: 24rpx;
}

.form-label {
  font-size: 28rpx;
  color: #374151;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.form-input {
  width: 100%;
  height: 88rpx;
  border: 2rpx solid #e5e7eb;
  border-radius: 8rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #1f2937;
  background-color: #ffffff;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #6366f1;
  outline: none;
}

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

.dialog-desc {
  font-size: 28rpx;
  color: #6b7280;
  line-height: 1.6;
  text-align: center;
}

.dialog-buttons {
  display: flex;
  gap: 24rpx;
}

.dialog-button {
  flex: 1;
  padding: 24rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 600;
  border: none;
}

.cancel-button {
  background: transparent;
  color: #6b7280;
  border: 2rpx solid #e5e7eb;
}

.confirm-button {
  background: #6366f1;
  color: white;
}

/* Success Toast */
.success-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(34, 197, 94, 0.9);
  color: white;
  padding: 32rpx 48rpx;
  border-radius: 16rpx;
  z-index: 9999;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
}

.success-text {
  font-size: 32rpx;
  font-weight: 600;
  color: white;
}

/* 响应式适配 */
@media (min-width: 768rpx) {
  .values-grid,
  .scenarios-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48rpx;
  }
  
  .modules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32rpx;
  }
  
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024rpx) {
  .values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .modules-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>
