<?php
declare(strict_types=1);
require_once __DIR__ . '/app.php';

$user = current_user();
$redirectTarget = safe_redirect_target((string) ($_GET['redirect'] ?? 'index.php'));
$steps = [
    ['step' => '01', 'title' => '先看启动页', 'desc' => '了解首页、任务、VIP、钱包、我的 5 个主入口怎么运作。'],
    ['step' => '02', 'title' => '邮箱注册', 'desc' => '填写邮箱和密码，系统准备发送 6 位数字验证码。'],
    ['step' => '03', 'title' => '输入验证码', 'desc' => '邮件验证通过后，系统才会正式创建账户、钱包和 VIP0。'],
    ['step' => '04', 'title' => '登录系统', 'desc' => '使用已验证邮箱登录，再进入任务、VIP、钱包和我的。'],
];
$highlights = [
    ['label' => '账户创建', 'value' => '真实数据库写入'],
    ['label' => '验证方式', 'value' => '邮箱 6 位验证码'],
    ['label' => '开户结果', 'value' => '6 位 ID + 钱包 + VIP0'],
];

render_layout_start('启动页', '启动页，展示真实邮箱开户注册流程入口与 4 步说明。', 'auth');
?>
<section class="app-page-section auth-page-shell">
  <article class="app-card gradient-card hero-card">
    <div class="tiny-eyebrow">Step 1 / 4</div>
    <h1 class="app-hero-title">邮箱开户从这里开始</h1>
    <p class="app-hero-copy mb-0">这一步相当于“欢迎页”。你先看清流程，再进入注册、验证码和登录页面，整个入口会比直接把表单塞进首页更清楚。</p>

    <div class="detail-meta-grid mt-3">
      <?php foreach ($highlights as $item): ?>
        <div>
          <div class="mini-label"><?= h((string) $item['label']) ?></div>
          <div class="detail-mini-value"><?= h((string) $item['value']) ?></div>
        </div>
      <?php endforeach; ?>
    </div>

    <div class="auth-link-grid mt-4">
      <?php if ($user): ?>
        <a class="btn btn-gradient" href="<?= h($redirectTarget) ?>">继续进入系统</a>
        <a class="btn btn-outline-light" href="index.php">回到首页</a>
      <?php else: ?>
        <a class="btn btn-gradient" href="<?= h(register_page_url($redirectTarget)) ?>">开始注册</a>
        <a class="btn btn-outline-light" href="<?= h(login_page_url($redirectTarget)) ?>">已有账号登录</a>
      <?php endif; ?>
    </div>
  </article>
</section>

<section class="app-page-section auth-page-shell">
  <article class="app-card auth-card-panel">
    <div class="section-heading-app mb-3">
      <div class="tiny-eyebrow">开户流程</div>
      <h2 class="app-section-title">4 个页面都是真实页面</h2>
    </div>
    <div class="onboarding-flow-grid">
      <?php foreach ($steps as $step): ?>
        <div class="onboarding-step-card">
          <div class="step-kicker">STEP <?= h((string) $step['step']) ?></div>
          <div class="list-title-strong mt-2"><?= h((string) $step['title']) ?></div>
          <div class="list-meta-line mt-1"><?= h((string) $step['desc']) ?></div>
        </div>
      <?php endforeach; ?>
    </div>
  </article>
</section>

<section class="app-page-section auth-page-shell">
  <article class="app-card">
    <div class="section-heading-app mb-3">
      <div class="tiny-eyebrow">说明</div>
      <h2 class="app-section-title">对你来说，这一步做了什么</h2>
    </div>
    <div class="app-list-stack">
      <div class="app-list-item static-row">
        <span>
          <span class="list-title-strong">不再从首页直接建号</span>
          <span class="list-meta-line">避免用户跳过验证码，减少“看起来是真的，但其实没验证邮箱”的问题。</span>
        </span>
      </div>
      <div class="app-list-item static-row">
        <span>
          <span class="list-title-strong">注册和登录拆成独立页面</span>
          <span class="list-meta-line">这样更接近你给的参考图结构，也更像真实 App 的开户流程。</span>
        </span>
      </div>
      <div class="app-list-item static-row">
        <span>
          <span class="list-title-strong">验证码真的会发邮件</span>
          <span class="list-meta-line">如果当前 SMTP 未配置，页面会真实提示失败，你就知道不是 UI 假动作。</span>
        </span>
      </div>
    </div>
  </article>
</section>
<?php render_layout_end(); ?>
