---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
---

<BaseLayout
  title="等待名单 - 知习"
  description="加入知习 等待名单抢先体验，获取最新产品资讯和内测资格。"
>
  <Header />
  <main class="animate-page-enter" style="flex: 1; padding-top: 100px; padding-bottom: 80px; padding-left: 24px; padding-right: 24px;">

    <!-- Hero -->
    <section style="max-width: 720px; margin: 0 auto 48px; text-align: center;">
      <h1 style="font-family: 'Manrope', sans-serif; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; color: #131b2c; margin-bottom: 12px;">加入等待名单</h1>
      <p style="font-family: 'Manrope', sans-serif; font-size: 16px; color: #737686; line-height: 1.6;">留下你的信息，我们会第一时间通知你</p>
    </section>

    <!-- Waitlist Form -->
    <div class="waitlist-form-container" style="max-width: 480px; margin: 0 auto;">
      <div style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 1.5rem; padding: 40px; box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04);">

        <form id="waitlist-form">
          <div style="display: flex; flex-direction: column; gap: 20px;">

            <div>
              <label class="wl-label" for="nickname">昵称 <span style="color: #737686; font-weight: 400;">(可选)</span></label>
              <input class="wl-input" type="text" id="nickname" name="nickname" placeholder="你的昵称" />
            </div>

            <div>
              <label class="wl-label" for="email">电子邮箱 <span style="color: #ba1a1a;">*</span></label>
              <input class="wl-input" type="email" id="email" name="email" placeholder="your@email.com" required />
            </div>

            <div>
              <label class="wl-label" for="device">使用设备</label>
              <div class="select-wrapper">
                <select class="wl-select" id="device" name="device">
                  <option value="">请选择</option>
                  <option value="iphone">iPhone</option>
                  <option value="android">Android</option>
                  <option value="ipad">iPad</option>
                  <option value="mac">Mac</option>
                </select>
                <span class="select-arrow material-symbols-outlined">keyboard_arrow_down</span>
              </div>
            </div>

            <div>
              <label class="wl-label" for="interest">感兴趣的方向</label>
              <div class="select-wrapper">
                <select class="wl-select" id="interest" name="interest">
                  <option value="">请选择</option>
                  <option value="gongkai">公考申论 AI 学习教练</option>
                  <option value="ai-tools">AI 工具学习知识库</option>
                  <option value="frontend-interview">程序员前端面试学习助手</option>
                  <option value="other">其他</option>
                </select>
                <span class="select-arrow material-symbols-outlined">keyboard_arrow_down</span>
              </div>
            </div>

            <div>
              <label class="wl-label" for="pain-point">当前最大痛点</label>
              <textarea class="wl-input wl-textarea" id="pain-point" name="pain-point" rows="3" placeholder="描述你当前学习中遇到的最大困难..."></textarea>
            </div>

            <div style="display: flex; flex-direction: column; gap: 12px;">
              <label class="wl-checkbox">
                <input type="checkbox" name="beta" value="yes" />
                <span>愿意参加内测</span>
              </label>
              <label class="wl-checkbox">
                <input type="checkbox" name="notify" value="yes" checked />
                <span>接受后续邮件通知</span>
              </label>
            </div>

            <button type="submit" class="wl-submit-btn">
              <span>提交</span>
              <span class="material-symbols-outlined" style="font-size: 18px;">send</span>
            </button>
          </div>
        </form>

        <div id="success-message" style="text-align: center; padding: 20px 0;" hidden>
          <div style="width: 48px; height: 48px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #ffffff; background: #34c759; border-radius: 50%;">✓</div>
          <h3 style="font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700; color: #131b2c; margin-bottom: 8px;">提交成功！</h3>
          <p style="font-family: 'Manrope', sans-serif; font-size: 15px; color: #434654; line-height: 1.6;">感谢你的关注，我们会在产品上线后第一时间通知你。</p>
        </div>
      </div>
    </div>

  </main>
  <Footer />
</BaseLayout>

<style is:global>
  .wl-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #434654;
    margin-bottom: 8px;
  }

  .wl-input {
    width: 100%;
    background-color: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 13px 16px;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #131b2c;
    transition: all 0.2s;
    outline: none;
    box-sizing: border-box;
  }

  .wl-input::placeholder {
    color: #b0b8c4;
  }

  .wl-input:hover {
    border-color: #c3c5d7;
  }

  .wl-input:focus {
    border-color: #1550d3;
    box-shadow: 0 0 0 3px rgba(21, 80, 211, 0.1);
  }

  .wl-textarea {
    resize: vertical;
    min-height: 80px;
  }

  .select-wrapper {
    position: relative;
    width: 100%;
  }

  .wl-select {
    width: 100%;
    background-color: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 13px 44px 13px 16px;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #131b2c;
    transition: all 0.2s;
    outline: none;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
  }

  .wl-select:invalid {
    color: #b0b8c4;
  }

  .wl-select option {
    color: #131b2c;
    background-color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    padding: 12px;
  }

  .wl-select:hover {
    border-color: #c3c5d7;
  }

  .wl-select:focus {
    border-color: #1550d3;
    box-shadow: 0 0 0 3px rgba(21, 80, 211, 0.1);
  }

  .select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #737686;
    font-size: 22px;
    pointer-events: none;
    transition: color 0.2s;
  }

  .wl-select:focus + .select-arrow {
    color: #1550d3;
  }

  .wl-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: #434654;
    cursor: pointer;
  }

  .wl-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #1550d3;
  }

  .wl-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #1550d3, #583dde);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    letter-spacing: 0.03em;
    font-weight: 600;
    padding: 16px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 8px 24px rgba(21, 80, 211, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .wl-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(21, 80, 211, 0.3);
  }
</style>

<script>
  const form = document.getElementById('waitlist-form') as HTMLFormElement;
  const successMessage = document.getElementById('success-message');

  form?.addEventListener('submit', (e) => {
    e.preventDefault();
    form.hidden = true;
    if (successMessage) {
      successMessage.hidden = false;
    }
  });
</script>
