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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>反馈与支持 - 知习</title>
  <link href="https://fonts.googleapis.com" rel="preconnect"/>
  <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
  <link rel="icon" type="image/png" href="/logo.png" />
</head>
<body style="background-color: #faf9ff; color: #131b2c; min-height: 100vh; display: flex; flex-direction: column; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Text', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; position: relative;">

  <Header />

  <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at center, #d2daf1 1px, transparent 1px); background-size: 24px 24px; opacity: 0.25; pointer-events: none; z-index: -1;"></div>

  <main class="animate-page-enter" style="flex: 1; padding-top: 140px; padding-bottom: 0; padding-left: 24px; padding-right: 24px;">

    <!-- Hero Section -->
    <section style="max-width: 1200px; margin: 0 auto 80px; text-align: center;">
      <h1 style="font-family: 'Manrope', sans-serif; font-size: 56px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; color: #131b2c; margin-bottom: 20px;">反馈与支持</h1>
      <p style="font-family: 'Manrope', sans-serif; font-size: 18px; line-height: 1.7; font-weight: 400; color: #434654; max-width: 36rem; margin: 0 auto;">
        如果你在使用知习 的过程中遇到问题，或者对产品有任何想法，欢迎告诉我们。每一条真实反馈，都会帮助产品变得更好。
      </p>
    </section>

    <!-- Form & Contact Sidebar -->
    <section style="max-width: 1000px; margin: 0 auto 120px; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start;" class="contact-grid">

      <!-- Feedback Form -->
      <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);" class="glass-card">

        <!-- Section: Basic Info -->
        <div style="margin-bottom: 36px;">
          <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
            <div style="width: 32px; height: 32px; border-radius: 10px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center;">
              <span class="material-symbols-outlined" style="font-size: 18px;">person</span>
            </div>
            <span style="font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; color: #131b2c;">基本信息</span>
          </div>
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;" class="form-row">
            <div>
              <label class="form-label" for="name">你的称呼 <span style="color: #737686; font-weight: 400;">(可选)</span></label>
              <input class="form-input" id="name" placeholder="例如: 张三" type="text"/>
            </div>
            <div>
              <label class="form-label" for="email">电子邮箱 <span style="color: #ba1a1a;">*</span></label>
              <input class="form-input" id="email" placeholder="your@email.com" required type="email"/>
            </div>
          </div>
        </div>

        <!-- Section: Feedback Content -->
        <div style="margin-bottom: 36px;">
          <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
            <div style="width: 32px; height: 32px; border-radius: 10px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center;">
              <span class="material-symbols-outlined" style="font-size: 18px;">edit</span>
            </div>
            <span style="font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; color: #131b2c;">反馈内容</span>
          </div>

          <div style="margin-bottom: 20px;">
            <label class="form-label" for="type">反馈类型 <span style="color: #ba1a1a;">*</span></label>
            <div class="select-wrapper">
              <select class="form-select" id="type" required>
                <option disabled selected value="">请选择反馈类型</option>
                <option value="功能建议">功能建议</option>
                <option value="问题反馈">问题反馈</option>
                <option value="使用体验">使用体验</option>
                <option value="隐私与账号">隐私与账号</option>
                <option value="其他">其他</option>
              </select>
              <span class="select-arrow material-symbols-outlined">keyboard_arrow_down</span>
            </div>
          </div>

          <div>
            <label class="form-label" for="message">详细描述 <span style="color: #ba1a1a;">*</span></label>
            <textarea class="form-input" id="message" placeholder="详细描述你遇到的问题或建议..." required rows="6" style="resize: vertical; min-height: 140px;"></textarea>
          </div>
        </div>

        <!-- Section: Device -->
        <div style="margin-bottom: 36px;">
          <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
            <div style="width: 32px; height: 32px; border-radius: 10px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center;">
              <span class="material-symbols-outlined" style="font-size: 18px;">devices</span>
            </div>
            <span style="font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; color: #131b2c;">使用设备</span>
          </div>
          <div style="display: flex; flex-wrap: wrap; gap: 10px;">
            <label class="device-pill">
              <input type="radio" name="device" value="iPhone" class="sr-only"/>
              <span>iPhone</span>
            </label>
            <label class="device-pill">
              <input type="radio" name="device" value="iPad" class="sr-only"/>
              <span>iPad</span>
            </label>
            <label class="device-pill">
              <input type="radio" name="device" value="Mac" class="sr-only"/>
              <span>Mac</span>
            </label>
            <label class="device-pill">
              <input type="radio" name="device" value="Web" class="sr-only"/>
              <span>Web</span>
            </label>
            <label class="device-pill">
              <input type="radio" name="device" value="其他" class="sr-only"/>
              <span>其他</span>
            </label>
          </div>
        </div>

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

      <!-- Contact Info Sidebar -->
      <div style="display: flex; flex-direction: column; gap: 20px;">
        <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: 32px; box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04);">
          <h3 style="font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700; color: #131b2c; margin-bottom: 28px;">其他联系方式</h3>
          <div style="display: flex; flex-direction: column; gap: 24px;">
            <a href="mailto:longdecloud@163.com" class="contact-item" style="display: flex; align-items: flex-start; gap: 14px; text-decoration: none; padding: 12px; border-radius: 12px; transition: background 0.2s;">
              <div style="width: 40px; height: 40px; border-radius: 12px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                <span class="material-symbols-outlined" style="font-size: 20px;">mail</span>
              </div>
              <div>
                <p style="font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #737686; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;">邮箱</p>
                <p style="font-family: 'Manrope', sans-serif; font-size: 15px; color: #131b2c; font-weight: 500;">longdecloud@163.com</p>
              </div>
            </a>
            <a href="https://longde.cloud" target="_blank" class="contact-item" style="display: flex; align-items: flex-start; gap: 14px; text-decoration: none; padding: 12px; border-radius: 12px; transition: background 0.2s;">
              <div style="width: 40px; height: 40px; border-radius: 12px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                <span class="material-symbols-outlined" style="font-size: 20px;">language</span>
              </div>
              <div>
                <p style="font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #737686; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;">官网</p>
                <p style="font-family: 'Manrope', sans-serif; font-size: 15px; color: #131b2c; font-weight: 500;">longde.cloud</p>
              </div>
            </a>
            <a href="/changelog" class="contact-item" style="display: flex; align-items: flex-start; gap: 14px; text-decoration: none; padding: 12px; border-radius: 12px; transition: background 0.2s;">
              <div style="width: 40px; height: 40px; border-radius: 12px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                <span class="material-symbols-outlined" style="font-size: 20px;">update</span>
              </div>
              <div>
                <p style="font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #737686; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;">更新记录</p>
                <p style="font-family: 'Manrope', sans-serif; font-size: 15px; color: #131b2c; font-weight: 500;">查看日志 →</p>
              </div>
            </a>
          </div>
        </div>

        <!-- Quick Note -->
        <div style="background: linear-gradient(135deg, #f1f3ff, #e9edff); border-radius: 1rem; padding: 20px 24px;">
          <div style="display: flex; gap: 10px; align-items: center;">
            <span class="material-symbols-outlined" style="color: #1550d3; font-size: 20px; flex-shrink: 0;">schedule</span>
            <p style="font-family: 'Manrope', sans-serif; font-size: 13px; line-height: 1.6; color: #434654;">
              我们通常会在 <strong style="color: #131b2c;">24 小时内</strong>回复你的反馈。请确保邮箱填写正确。
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- FAQ Section -->
    <section style="max-width: 1000px; margin: 0 auto 120px;">
      <div style="text-align: center; margin-bottom: 48px;">
        <h2 style="font-family: 'Manrope', sans-serif; font-size: 36px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; color: #131b2c; margin-bottom: 12px;">常见问题</h2>
        <p style="font-family: 'Manrope', sans-serif; font-size: 16px; color: #737686;">也许你想要的答案就在这里</p>
      </div>
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;" class="faq-grid">

        <div class="faq-card">
          <div class="faq-icon">
            <span class="material-symbols-outlined">help</span>
          </div>
          <h3>知习 现在可以使用了吗?</h3>
          <p>产品还在早期版本开发中，官网会持续更新进展。</p>
        </div>

        <div class="faq-card">
          <div class="faq-icon">
            <span class="material-symbols-outlined">devices</span>
          </div>
          <h3>知习 支持哪些平台?</h3>
          <p>第一阶段优先支持 iPhone，后续再考虑 iPad、Mac 和其他平台。</p>
        </div>

        <div class="faq-card">
          <div class="faq-icon">
            <span class="material-symbols-outlined">security</span>
          </div>
          <h3>知习 会保存我的学习内容吗?</h3>
          <p>为了提供学习记录和 AI 分析，产品可能会保存必要的学习数据，具体请查看隐私政策。</p>
        </div>

        <div class="faq-card">
          <div class="faq-icon">
            <span class="material-symbols-outlined">delete</span>
          </div>
          <h3>如何删除我的数据?</h3>
          <p>你可以通过本页面联系我们，我们会根据请求处理相关数据。</p>
        </div>

      </div>
    </section>
  </main>

  <Footer />

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

    .form-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;
    }

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

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

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

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

    .form-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;
    }

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

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

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

    .form-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;
    }

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

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }

    .device-pill {
      cursor: pointer;
    }

    .device-pill span {
      display: block;
      padding: 10px 22px;
      border-radius: 9999px;
      border: 1.5px solid #e2e8f0;
      color: #434654;
      font-family: 'Manrope', sans-serif;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.2s;
      background: #ffffff;
    }

    .device-pill:hover span {
      border-color: #b5c4ff;
      background: #f8f9ff;
    }

    .device-pill input:checked + span {
      background: #1550d3;
      border-color: #1550d3;
      color: #ffffff;
    }

    .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;
    }

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

    .contact-item:hover {
      background: #f8f9ff;
    }

    .faq-card {
      background-color: #ffffff;
      border-radius: 14px;
      border: 1px solid rgba(195, 197, 215, 0.5);
      padding: 28px 28px 24px;
      transition: box-shadow 0.2s, border-color 0.2s;
    }

    .faq-card:hover {
      box-shadow: 0 6px 20px rgba(18, 26, 43, 0.06);
      border-color: #b5c4ff;
    }

    .faq-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: #f1f3ff;
      color: #1550d3;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }

    .faq-icon .material-symbols-outlined {
      font-size: 20px;
    }

    .faq-card h3 {
      font-family: 'Manrope', sans-serif;
      font-size: 16px;
      font-weight: 700;
      color: #131b2c;
      margin: 0 0 10px;
      line-height: 1.4;
    }

    .faq-card p {
      font-family: 'Manrope', sans-serif;
      font-size: 14px;
      line-height: 1.7;
      color: #434654;
      margin: 0;
    }

    @media (min-width: 1024px) {
      .contact-grid {
        grid-template-columns: 2fr 1fr !important;
      }
    }

    @media (max-width: 768px) {
      .form-row {
        grid-template-columns: 1fr !important;
      }
      .faq-grid {
        grid-template-columns: 1fr !important;
      }
    }

    @media (min-width: 769px) {
      .faq-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
  </style>
</body>
</html>
