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

<BaseLayout
  title="知习 - 更懂你，更会学"
  description="一个围绕你成长的 AI 学习空间。把知识库、主动回忆、AI 分析和复习计划连接起来，让每一次学习都留下痕迹。"
>
  <Header />
  
  <main>
    <!-- Cinematic Hero -->
    <section class="min-h-screen flex flex-col items-center justify-start relative px-6 md:px-12 pt-32 pb-24 max-w-7xl mx-auto text-center overflow-visible">
      <div class="ethereal-glow bg-blue-400/20 w-[600px] h-[600px] top-[-100px] left-1/2 -translate-x-1/2 animate-breathe absolute"></div>
      
      <h1 class="font-bold text-6xl md:text-8xl text-navy mb-6 max-w-5xl relative z-10 tracking-tight animate-fade-in-up" style="font-family: var(--font-manrope); letter-spacing: -0.04em;">
        更懂你，更会学
      </h1>
      
      <p class="text-lg md:text-xl text-slate-600 max-w-2xl mb-12 relative z-10 animate-fade-in-up" style="animation-delay: 0.2s;">
        一个围绕你成长的 AI 学习空间。把知识库、主动回忆、AI 分析和复习计划连接起来，让每一次学习都留下痕迹。
      </p>
      
      <div class="flex flex-col sm:flex-row gap-6 mb-24 relative z-10 animate-fade-in-up" style="animation-delay: 0.3s;">
        <a href="/product" class="text-white font-medium px-10 py-5 rounded-full shadow-2xl shadow-blue-500/30 hover:shadow-blue-500/50 transition-all hover:-translate-y-1 text-sm btn-primary-gradient">
          进入产品
        </a>
        <a href="/waitlist" class="bg-white/80 backdrop-blur-sm text-navy font-medium px-10 py-5 rounded-full hover:bg-white transition-all border border-slate-200 shadow-lg hover:shadow-xl hover:-translate-y-1 text-sm">
          加入等待名单
        </a>
      </div>
      
      <!-- Cinematic Mockup Area -->
      <div class="relative w-full max-w-6xl mt-12 z-0 flex items-center justify-center animate-fade-in-up" style="animation-delay: 0.5s;">
        <div class="relative z-20 w-[700px] h-[450px] transition-transform duration-700 hover:scale-[1.02]">
          <div class="relative w-full h-[430px] bg-slate-900 rounded-2xl p-3 shadow-2xl overflow-hidden border border-slate-700/50">
            <div class="absolute top-0 inset-x-0 h-6 flex justify-center items-center">
              <div class="w-1.5 h-1.5 rounded-full bg-slate-700"></div>
            </div>
            <div class="w-full h-full bg-white rounded-lg overflow-hidden flex flex-col">
              <div class="h-10 border-b border-slate-100 flex items-center px-4 gap-2 bg-slate-50/50">
                <div class="flex gap-1.5">
                  <div class="w-2.5 h-2.5 rounded-full bg-red-400"></div>
                  <div class="w-2.5 h-2.5 rounded-full bg-amber-400"></div>
                  <div class="w-2.5 h-2.5 rounded-full bg-emerald-400"></div>
                </div>
              </div>
              <div class="flex-1 p-6 flex flex-col gap-6">
                <div class="flex items-center gap-4">
                  <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-tech-blue">
                    <span class="material-symbols-outlined">account_circle</span>
                  </div>
                  <div class="h-2 w-32 bg-slate-100 rounded"></div>
                </div>
                <div class="grid grid-cols-3 gap-6 flex-1">
                  <div class="col-span-2 space-y-4">
                    <div class="h-40 bg-slate-50 rounded-xl border-2 border-dashed border-slate-200"></div>
                    <div class="h-20 bg-slate-50 rounded-xl"></div>
                  </div>
                  <div class="space-y-4">
                    <div class="h-full bg-blue-50/30 rounded-xl border border-blue-100/20"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="absolute bottom-[-20px] left-[-40px] right-[-40px] h-[40px] bg-slate-800 rounded-b-3xl shadow-2xl flex justify-center" style="transform: perspective(1000px) rotateX(30deg);">
            <div class="w-1/3 h-1 bg-slate-700 rounded-full mt-2"></div>
          </div>
        </div>

        <!-- iPad Pro (Left Layer) -->
        <div class="absolute left-[-5%] bottom-[-10%] z-30 w-[340px] h-[240px] glass-card-premium rounded-3xl border-[8px] border-slate-800 shadow-2xl overflow-hidden transform -rotate-12 hover:rotate-0 transition-transform duration-700 hidden md:block">
          <div class="w-full h-full bg-white p-4">
            <div class="w-full h-full bg-slate-50 rounded-xl p-4">
              <div class="h-4 w-24 bg-slate-200 rounded mb-4"></div>
              <div class="space-y-3">
                <div class="h-2 bg-slate-200 rounded w-full"></div>
                <div class="h-2 bg-slate-200 rounded w-5/6"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- iPhone (Right Layer) -->
        <div class="absolute right-[-5%] top-[5%] z-40 w-[180px] h-[360px] glass-card-premium rounded-[3rem] border-[8px] border-slate-900 shadow-2xl overflow-hidden transform rotate-12 hover:rotate-0 transition-transform duration-700 hidden lg:block">
          <div class="w-full h-full bg-white p-4 flex flex-col gap-4">
            <div class="w-12 h-1 bg-slate-100 rounded-full mx-auto mb-4"></div>
            <div class="h-full bg-blue-50/20 rounded-2xl border border-blue-100/30"></div>
          </div>
        </div>

        <!-- Floating Learning Cards -->
        <div class="absolute left-[15%] top-[-20px] z-50 glass-card-premium p-4 rounded-2xl shadow-2xl animate-float-slow flex items-center gap-3 border-white/40 hidden md:flex">
          <div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center text-amber-500">
            <span class="material-symbols-outlined text-xl">event_note</span>
          </div>
          <div class="text-left">
            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">今日任务</div>
            <div class="text-sm font-bold text-navy">复习 12 个知识点</div>
          </div>
        </div>

        <div class="absolute right-[15%] bottom-[20%] z-50 glass-card-premium p-4 rounded-2xl shadow-2xl animate-float-medium flex items-center gap-3 border-white/40 hidden md:flex">
          <div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center text-emerald-500">
            <span class="material-symbols-outlined text-xl">psychology</span>
          </div>
          <div class="text-left">
            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">主动回忆</div>
            <div class="text-sm font-bold text-navy">准确率提升 15%</div>
          </div>
        </div>

        <div class="absolute left-[5%] bottom-[15%] z-50 glass-card-premium p-4 rounded-2xl shadow-2xl animate-float-fast flex items-center gap-3 border-white/40 hidden md:flex">
          <div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center text-tech-blue">
            <span class="material-symbols-outlined text-xl">auto_awesome</span>
          </div>
          <div class="text-left">
            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">AI 分析</div>
            <div class="text-sm font-bold text-navy">发现 2 个薄弱环节</div>
          </div>
        </div>

        <div class="absolute right-[10%] top-[40px] z-50 glass-card-premium p-4 rounded-2xl shadow-2xl animate-float-slow flex items-center gap-3 border-white/40 hidden md:flex">
          <div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-500">
            <span class="material-symbols-outlined text-xl">rebase_edit</span>
          </div>
          <div class="text-left">
            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">复习计划</div>
            <div class="text-sm font-bold text-navy">动态调整已生效</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Portal Section -->
    <section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10 animate-reveal-up">
      <div class="text-center mb-16">
        <h2 class="text-4xl md:text-5xl font-bold text-navy mb-4" style="font-family: var(--font-manrope); letter-spacing: -0.02em;">今天想从哪里开始？</h2>
        <p class="text-base text-slate-500">选择一个入口，进入你的专属学习流</p>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <a class="glass-card-premium p-10 rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer" href="#">
          <div class="w-16 h-16 rounded-2xl bg-slate-50 flex items-center justify-center text-tech-blue border border-slate-100 group-hover:bg-blue-50 group-hover:border-blue-100 transition-colors">
            <span class="material-symbols-outlined text-3xl">upload_file</span>
          </div>
          <div>
            <h3 class="text-xl font-semibold text-navy mb-2">导入知识库</h3>
            <p class="text-sm text-slate-500">上传文档、笔记，让 AI 为你梳理结构。</p>
          </div>
          <div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0">
            开始导入 <span class="material-symbols-outlined text-sm">arrow_forward</span>
          </div>
        </a>

        <a class="glass-card-premium p-10 rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer" href="#" style="background: rgba(235, 240, 255, 0.65);">
          <div class="w-16 h-16 rounded-2xl bg-blue-50 flex items-center justify-center text-tech-blue border border-blue-100 group-hover:scale-110 transition-transform">
            <span class="material-symbols-outlined text-3xl">psychology</span>
          </div>
          <div>
            <h3 class="text-xl font-semibold text-navy mb-2">开启主动回忆</h3>
            <p class="text-sm text-slate-500">基于艾宾浩斯曲线，检验你的真实掌握度。</p>
          </div>
          <div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0">
            开始测试 <span class="material-symbols-outlined text-sm">arrow_forward</span>
          </div>
        </a>

        <a class="glass-card-premium p-10 rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer" href="#">
          <div class="w-16 h-16 rounded-2xl bg-slate-50 flex items-center justify-center text-tech-blue border border-slate-100 group-hover:bg-blue-50 group-hover:border-blue-100 transition-colors">
            <span class="material-symbols-outlined text-3xl">fact_check</span>
          </div>
          <div>
            <h3 class="text-xl font-semibold text-navy mb-2">查看今日复习</h3>
            <p class="text-sm text-slate-500">AI 为你安排的最优复习路径，高效不遗漏。</p>
          </div>
          <div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0">
            查看计划 <span class="material-symbols-outlined text-sm">arrow_forward</span>
          </div>
        </a>
      </div>
    </section>

    <!-- Learning Loop Section -->
    <section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10 animate-reveal-up">
      <div class="text-center mb-20">
        <h2 class="text-4xl md:text-5xl font-bold text-navy mb-4" style="font-family: var(--font-manrope); letter-spacing: -0.02em;">不是帮你多看一点，而是帮你真正学会</h2>
        <p class="text-base text-slate-500">构建可持续的闭环学习流</p>
      </div>

      <!-- Desktop Flow -->
      <div class="hidden md:flex items-center justify-center gap-0 max-w-4xl mx-auto relative">
        <!-- Connecting track -->
        <div class="absolute top-1/2 left-[8%] right-[8%] h-[6px] bg-slate-100 rounded-full -translate-y-1/2 z-0"></div>
        <div class="absolute top-1/2 left-[8%] right-[8%] h-[6px] rounded-full -translate-y-1/2 z-0" style="background: linear-gradient(90deg, #e2e8f0 0%, #b5c4ff 50%, #e2e8f0 100%);"></div>

        <!-- Step 1 -->
        <div class="relative z-10 flex flex-col items-center text-center gap-3 group flex-1">
          <div class="w-[88px] h-[88px] rounded-2xl bg-white shadow-lg shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 group-hover:text-tech-blue group-hover:border-tech-blue/30 group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
            <span class="material-symbols-outlined text-[32px]">input</span>
          </div>
          <div>
            <h4 class="font-bold text-navy text-sm mb-1">摄入</h4>
            <p class="text-[11px] text-slate-400">知识结构化</p>
          </div>
        </div>

        <!-- Arrow -->
        <div class="relative z-10 flex items-center justify-center w-10 shrink-0">
          <span class="material-symbols-outlined text-slate-300 text-xl">arrow_forward</span>
        </div>

        <!-- Step 2 -->
        <div class="relative z-10 flex flex-col items-center text-center gap-3 group flex-1">
          <div class="w-[88px] h-[88px] rounded-2xl bg-white shadow-lg shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 group-hover:text-tech-blue group-hover:border-tech-blue/30 group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
            <span class="material-symbols-outlined text-[32px]">memory</span>
          </div>
          <div>
            <h4 class="font-bold text-navy text-sm mb-1">回忆</h4>
            <p class="text-[11px] text-slate-400">主动提取</p>
          </div>
        </div>

        <!-- Arrow -->
        <div class="relative z-10 flex items-center justify-center w-10 shrink-0">
          <span class="material-symbols-outlined text-slate-300 text-xl">arrow_forward</span>
        </div>

        <!-- Step 3 - Elevated center -->
        <div class="relative z-20 flex flex-col items-center text-center gap-3 group flex-1 -mt-8">
          <div class="w-[104px] h-[104px] rounded-2xl bg-tech-blue shadow-2xl shadow-blue-500/30 flex items-center justify-center text-white group-hover:scale-105 transition-all duration-300">
            <span class="material-symbols-outlined text-[40px]">auto_awesome</span>
          </div>
          <div>
            <h4 class="font-bold text-tech-blue text-base mb-1">AI 分析</h4>
            <p class="text-[11px] text-slate-500 font-medium">精准定位薄弱点</p>
          </div>
        </div>

        <!-- Arrow -->
        <div class="relative z-10 flex items-center justify-center w-10 shrink-0">
          <span class="material-symbols-outlined text-slate-300 text-xl">arrow_forward</span>
        </div>

        <!-- Step 4 -->
        <div class="relative z-10 flex flex-col items-center text-center gap-3 group flex-1">
          <div class="w-[88px] h-[88px] rounded-2xl bg-white shadow-lg shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 group-hover:text-tech-blue group-hover:border-tech-blue/30 group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
            <span class="material-symbols-outlined text-[32px]">update</span>
          </div>
          <div>
            <h4 class="font-bold text-navy text-sm mb-1">巩固</h4>
            <p class="text-[11px] text-slate-400">动态复习计划</p>
          </div>
        </div>

        <!-- Loop back arrow -->
        <div class="absolute -bottom-4 left-[6%] right-[6%] flex items-center justify-center z-0">
          <div class="flex items-center gap-1 text-[10px] text-slate-300 font-medium tracking-widest uppercase">
            <span class="material-symbols-outlined text-xs">replay</span>
            循环迭代
          </div>
        </div>
      </div>

      <!-- Mobile Flow -->
      <div class="flex md:hidden flex-col items-center gap-0 max-w-sm mx-auto relative">
        <div class="absolute left-1/2 top-[60px] bottom-[60px] w-[4px] rounded-full -translate-x-1/2 z-0" style="background: linear-gradient(180deg, #e2e8f0 0%, #b5c4ff 50%, #e2e8f0 100%);"></div>

        <div class="relative z-10 flex items-center gap-5 w-full py-5 group">
          <div class="w-14 h-14 rounded-xl bg-white shadow-md shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 shrink-0 group-hover:text-tech-blue transition-colors">
            <span class="material-symbols-outlined text-2xl">input</span>
          </div>
          <div>
            <h4 class="font-bold text-navy text-sm">摄入</h4>
            <p class="text-xs text-slate-400">知识结构化</p>
          </div>
        </div>

        <div class="relative z-10 flex items-center gap-5 w-full py-5 group">
          <div class="w-14 h-14 rounded-xl bg-white shadow-md shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 shrink-0 group-hover:text-tech-blue transition-colors">
            <span class="material-symbols-outlined text-2xl">memory</span>
          </div>
          <div>
            <h4 class="font-bold text-navy text-sm">回忆</h4>
            <p class="text-xs text-slate-400">主动提取</p>
          </div>
        </div>

        <div class="relative z-20 flex items-center gap-5 w-full py-5 group">
          <div class="w-16 h-16 rounded-xl bg-tech-blue shadow-lg shadow-blue-500/30 flex items-center justify-center text-white shrink-0">
            <span class="material-symbols-outlined text-[28px]">auto_awesome</span>
          </div>
          <div>
            <h4 class="font-bold text-tech-blue text-sm">AI 分析</h4>
            <p class="text-xs text-slate-500 font-medium">精准定位薄弱点</p>
          </div>
        </div>

        <div class="relative z-10 flex items-center gap-5 w-full py-5 group">
          <div class="w-14 h-14 rounded-xl bg-white shadow-md shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 shrink-0 group-hover:text-tech-blue transition-colors">
            <span class="material-symbols-outlined text-2xl">update</span>
          </div>
          <div>
            <h4 class="font-bold text-navy text-sm">巩固</h4>
            <p class="text-xs text-slate-400">动态复习计划</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Preview Section -->
    <section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10 animate-reveal-up">
      <div class="bg-gradient-to-br from-slate-50 to-blue-50 rounded-[3rem] p-8 md:p-16 border border-blue-100/50 overflow-hidden relative shadow-xl shadow-blue-500/5">
        <div class="absolute top-0 right-0 w-96 h-96 bg-blue-300/10 rounded-full blur-[80px]"></div>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center relative z-10">
          <div class="relative z-10">
            <h2 class="text-4xl text-navy mb-6 font-bold">看得见的进步轨迹</h2>
            <p class="text-slate-600 mb-8 leading-relaxed">
              告别盲目刷题。知习 在你每次主动回忆后，实时生成多维度的掌握度分析，动态调整你的下一步学习路径。
            </p>
            <ul class="space-y-4 mb-8">
              <li class="flex items-center gap-3 text-sm text-slate-700">
                <span class="material-symbols-outlined text-tech-blue text-lg">check_circle</span> 知识点图谱实时更新
              </li>
              <li class="flex items-center gap-3 text-sm text-slate-700">
                <span class="material-symbols-outlined text-tech-blue text-lg">check_circle</span> 遗忘曲线精准预测
              </li>
              <li class="flex items-center gap-3 text-sm text-slate-700">
                <span class="material-symbols-outlined text-tech-blue text-lg">check_circle</span> 个性化干预建议
              </li>
            </ul>
          </div>

          <div class="relative h-[400px] w-full flex items-center justify-center">
            <div class="absolute inset-0 bg-white/40 backdrop-blur-sm rounded-2xl border border-white/60 shadow-lg transform scale-95 opacity-50 z-0"></div>
            <div class="absolute inset-4 bg-white/60 backdrop-blur-md rounded-2xl border border-white/80 shadow-xl transform scale-100 opacity-80 z-10 flex flex-col p-6 gap-4">
              <div class="h-6 w-1/3 bg-slate-200 rounded"></div>
              <div class="h-32 w-full bg-slate-100 rounded-xl"></div>
              <div class="h-24 w-full bg-slate-100 rounded-xl"></div>
            </div>
            <div class="absolute z-20 right-[-20px] top-[10%] w-[320px] glass-card-premium rounded-2xl p-6 shadow-2xl animate-float-slow">
              <div class="flex items-center gap-3 mb-4">
                <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-tech-blue">
                  <span class="material-symbols-outlined text-sm">auto_awesome</span>
                </div>
                <span class="text-sm font-bold text-navy">AI 深度分析</span>
              </div>
              <p class="text-xs text-slate-600 mb-4 leading-relaxed">
                你在「宏观经济学」章节的「通货膨胀」概念上表现出轻微遗忘，已自动加入明日优先复习队列。
              </p>
              <div class="w-full bg-slate-100 rounded-full h-1.5 mb-2">
                <div class="bg-tech-blue h-1.5 rounded-full w-[75%]"></div>
              </div>
              <div class="flex justify-between text-[10px] text-slate-400">
                <span>整体掌握度</span>
                <span>75%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <Footer />
</BaseLayout>

<style>
  .ethereal-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    pointer-events: none;
  }
</style>
