<template>
  <div id="app">
    <!-- 导航栏 -->
    <header class="header">
      <div class="container">
        <a href="#" class="logo">
          <span class="logo-icon">51</span>
          <span>51租</span>
        </a>
        <nav class="nav">
          <a href="#about">关于我们</a>
          <a href="#models">车型展示</a>
          <a href="#stories">用户故事</a>
          <a href="#contact">联系我们</a>
        </nav>
      </div>
    </header>

    <!-- 页面内容 -->
    <main>
      <!-- Hero 区域 -->
      <section class="hero" id="hero">
        <div class="container">
          <div class="hero-content">
            <h1>让出行更简单</h1>
            <p>专业电动车租赁平台，多车型统一管理，助您高效运营</p>
            <div class="hero-buttons">
              <a href="#models" class="btn btn-primary">查看车型</a>
              <a href="#contact" class="btn btn-secondary">联系我们</a>
            </div>
          </div>
        </div>
      </section>

      <!-- 关于我们 -->
      <section class="section" id="about">
        <div class="container">
          <div class="section-title">
            <h2>关于51租</h2>
          </div>
          <div class="about-content">
            <div class="about-text">
              <p>51租是一家专业的电动车租赁平台，隶属于51bike在线生态。我们致力于为骑手提供便捷的租车服务，为运营商提供高效的车辆管理解决方案。</p>
              <p>平台支持多种车型统一管理，订单实时追踪，财务一键结算，让运营效率提升300%。无论是个人骑手还是连锁运营商，都能在这里找到最适合的解决方案。</p>
            </div>
            <div class="about-image">
              <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&h=400&fit=crop" alt="51租团队">
            </div>
          </div>
        </div>
      </section>

      <!-- 车型展示 -->
      <section class="section section-gray" id="models">
        <div class="container">
          <div class="section-title">
            <h2>我们的车型</h2>
          </div>
          <div class="models-grid">
            <div class="model-card" v-for="model in models" :key="model.name">
              <img :src="model.image" :alt="model.name">
              <div class="model-info">
                <div class="model-name">{{ model.name }}</div>
                <div class="model-price">{{ model.price }}</div>
                <div class="model-desc">{{ model.desc }}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- AI智能团队 -->
      <section class="section" id="team">
        <div class="container">
          <div class="section-title">
            <h2>AI智能团队</h2>
            <p class="section-subtitle">51租由专业AI Agent团队打造，24小时智能运营，效率提升300%</p>
          </div>
          <div class="team-grid">
            <div class="team-card" v-for="member in teamMembers" :key="member.name">
              <div class="team-avatar">{{ member.avatar }}</div>
              <div class="team-name">{{ member.name }}</div>
              <div class="team-role">{{ member.role }}</div>
              <div class="team-desc">{{ member.desc }}</div>
            </div>
          </div>
          <div class="team-capabilities">
            <div class="capability-item" v-for="cap in capabilities" :key="cap.title">
              <div class="capability-icon">{{ cap.icon }}</div>
              <div class="capability-title">{{ cap.title }}</div>
              <div class="capability-desc">{{ cap.desc }}</div>
            </div>
          </div>
        </div>
      </section>

      <!-- 用户故事 -->
      <section class="section" id="stories">
        <div class="container">
          <div class="section-title">
            <h2>他们与51租同行</h2>
          </div>
          <div class="stories-grid">
            <div class="story-card" v-for="story in stories" :key="story.author">
              <img :src="story.avatar" :alt="story.author" class="story-avatar">
              <div class="story-quote">"{{ story.quote }}"</div>
              <div class="story-author">{{ story.author }}</div>
            </div>
          </div>
        </div>
      </section>

      <!-- 联系我们 -->
      <section class="section section-gray" id="contact">
        <div class="container">
          <div class="section-title">
            <h2>联系我们</h2>
          </div>
          <div class="contact-content">
            <div class="contact-info">
              <div class="contact-item">
                <div class="contact-icon">📍</div>
                <div class="contact-text">
                  <h4>地址</h4>
                  <p>全国服务热线</p>
                </div>
              </div>
              <div class="contact-item">
                <div class="contact-icon">📞</div>
                <div class="contact-text">
                  <h4>电话</h4>
                  <p>400-888-8888</p>
                </div>
              </div>
              <div class="contact-item">
                <div class="contact-icon">✉️</div>
                <div class="contact-text">
                  <h4>邮箱</h4>
                  <p>contact@51bike.online</p>
                </div>
              </div>
              <div class="contact-item">
                <div class="contact-icon">💬</div>
                <div class="contact-text">
                  <h4>加盟微信</h4>
                  <p>扫码添加客服</p>
                </div>
              </div>
            </div>
            <div class="contact-form">
              <form @submit.prevent="handleSubmit">
                <div class="form-group">
                  <label>您的姓名</label>
                  <input type="text" v-model="form.name" placeholder="请输入姓名" required>
                </div>
                <div class="form-group">
                  <label>联系电话</label>
                  <input type="tel" v-model="form.phone" placeholder="请输入手机号" required>
                </div>
                <div class="form-group">
                  <label>留言内容</label>
                  <textarea v-model="form.message" placeholder="请输入留言内容" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary" style="width: 100%;">提交留言</button>
              </form>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- Footer -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-links">
            <a href="https://admin.51bike.online" target="_blank">管理后台</a>
            <a href="https://store.51bike.online" target="_blank">门店端</a>
            <a href="https://rider.51bike.online" target="_blank">骑手端</a>
          </div>
        </div>
        <div class="footer-copyright">
          © 2026 51租 | 51bike.online
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const models = [
  {
    name: '电动自行车',
    price: '¥30-50/日',
    desc: '轻便灵活，适合城市短途配送，单次续航60-80公里',
    image: 'https://images.unsplash.com/photo-1571068316344-75bc76f77890?w=400&h=300&fit=crop'
  },
  {
    name: '电动摩托车',
    price: '¥60-100/日',
    desc: '动力充沛，适合中距离配送，单次续航100-150公里',
    image: 'https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?w=400&h=300&fit=crop'
  },
  {
    name: '电动三轮车',
    price: '¥100-180/日',
    desc: '载货量大，适合商超配送和外卖聚合配送',
    image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop'
  },
  {
    name: '轻型电动卡车',
    price: '¥200-350/日',
    desc: '超大载货空间，适合物流最后一公里和批量配送',
    image: 'https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?w=400&h=300&fit=crop'
  }
]

const teamMembers = [
  {
    avatar: '🐷',
    name: '朱百万',
    role: '智能指挥官',
    desc: '总指挥中枢，协调团队高效运转，专注任务分配与质量验收'
  },
  {
    avatar: '💻',
    name: '阿码',
    role: '全栈开发工程师',
    desc: '前后端全能，代码严谨，快速实现各类功能需求'
  },
  {
    avatar: '🔒',
    name: '安审',
    role: '安全审核专家',
    desc: '代码安全审计，漏洞检测与修复，守护系统安全'
  },
  {
    avatar: '✍️',
    name: '妙笔',
    role: '内容创作专家',
    desc: '文案策划、品牌故事、专业内容输出'
  }
]

const capabilities = [
  { icon: '⚡', title: '智能调度', desc: 'AI算法优化订单分配，提升骑手接单效率' },
  { icon: '🔐', title: '安全风控', desc: '实时监控交易风险，保障资金与数据安全' },
  { icon: '📊', title: '数据分析', desc: '运营数据实时分析，辅助决策精准运营' },
  { icon: '🤖', title: '自动化运维', desc: '24小时智能监控，系统故障自动告警处理' },
  { icon: '🎨', title: '智能设计', desc: 'AI辅助界面设计，用户体验持续优化' },
  { icon: '📱', title: '多端协同', desc: '管理端、门店端、骑手端实时数据同步' }
]

const stories = [
  {
    quote: '从每天跑50单到100单，我用51租管车更轻松。以前自己修车、找充电桩的时间都省下来了，现在只管跑单赚钱。',
    author: '张师傅 · 外卖骑手',
    avatar: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=100&h=100&fit=crop&crop=face'
  },
  {
    quote: '加盟51租做副业，租了3辆车给骑手用，每月多赚3000多。平台结算快，账目清晰，比以前轻松多了。',
    author: '李老板 · 小型运营商',
    avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face'
  },
  {
    quote: '多门店统一管理后，调度效率提升了一倍。51租的系统真的很专业，订单、车辆、财务一目了然。',
    author: '王总 · 连锁运营商',
    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face'
  }
]

const form = reactive({
  name: '',
  phone: '',
  message: ''
})

const handleSubmit = () => {
  alert(`感谢您的留言！我们会尽快与您联系。\n\n姓名：${form.name}\n电话：${form.phone}`)
  form.name = ''
  form.phone = ''
  form.message = ''
}
</script>

<style scoped>
/* 无需额外样式，已在 style.css 中定义 */
</style>
