// ============================================================
// LandingPage — 官网首页（含登录弹窗）
// 职责：未登录用户的落地页，展示产品介绍并提供登录/注册入口
// ============================================================

import { useCallback, useEffect, useRef, useState } from "react";
import { LoginModal } from "./LoginModal";
import "./LandingPage.css";

type ModalMode = "login" | "register";

export function LandingPage() {
  const [modal, setModal] = useState<{ open: boolean; mode: ModalMode }>({
    open: false,
    mode: "login",
  });

  const openModal = useCallback((mode: ModalMode) => {
    setModal({ open: true, mode });
  }, []);

  const closeModal = useCallback(() => {
    setModal((prev) => ({ ...prev, open: false }));
  }, []);

  // ---- Scroll Reveal ----
  const observerRef = useRef<IntersectionObserver | null>(null);

  useEffect(() => {
    observerRef.current = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("lp-visible");
          }
        });
      },
      { threshold: 0.1, rootMargin: "0px 0px -40px 0px" }
    );

    document.querySelectorAll(".lp-fade-in").forEach((el) => {
      observerRef.current?.observe(el);
    });

    return () => observerRef.current?.disconnect();
  }, []);

  return (
    <div className="landing-page">
      <div className="lp-bg-grid" />

      {/* ========== Top Navigation ========== */}
      <nav className="lp-nav">
        <div className="lp-nav__logo">CamTalk</div>
        <div className="lp-nav__links">
          <a href="#problem">痛点</a>
          <a href="#features">特性</a>
          <a href="#scenes">场景</a>
          <a href="#tech">技术</a>
        </div>
        <div className="lp-nav__actions">
          <button type="button" className="lp-nav__btn lp-nav__btn--ghost" onClick={() => openModal("login")}>
            登录
          </button>
          <button type="button" className="lp-nav__btn lp-nav__btn--primary" onClick={() => openModal("register")}>
            免费注册
          </button>
        </div>
      </nav>

      {/* ========== HERO ========== */}
      <section className="lp-hero">
        <div className="lp-container lp-hero-content">
          <div className="lp-hero-badge">
            <span className="lp-hero-badge__dot" />
            <span>XEngineers</span>
          </div>
          <h1>
            <span className="lp-gradient">CamTalk</span>
            <br />
            给 AI 装上眼睛和耳朵
          </h1>
          <p className="lp-hero__sub">
            多模态实时 AI 视觉对话助手。打开浏览器，对着摄像头说话，AI 实时理解画面和语音，以文字和语音同步回答你。
          </p>

          <div className="lp-hero-actions">
            <button type="button" className="lp-cta-btn" onClick={() => openModal("register")}>
              立即体验 CamTalk
            </button>
            <div className="lp-hero-actions__links">
              <a href="https://www.bilibili.com/video/BV1dDJK6cE5S/" target="_blank" rel="noreferrer">
                路演视频
              </a>
              <a href="https://github.com/XEngineers/CamTalk" target="_blank" rel="noreferrer">
                GitHub
              </a>
            </div>
          </div>

          {/* Device Mockup - Double Bezel */}
          <div className="lp-hero-visual">
            <div className="lp-hero-visual__inner">
              <div className="lp-hero-visual__screen">
                <div className="lp-screen-left">
                  <div className="lp-scan-line" />
                  <div className="lp-camera-ring">
                    <svg viewBox="0 0 24 24">
                      <path d="M23 7l-7 5 7 5V7z" />
                      <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
                    </svg>
                  </div>
                </div>
                <div className="lp-screen-right">
                  <div className="lp-chat-bubble lp-chat-bubble--user">这道数学题怎么做？</div>
                  <div className="lp-chat-bubble lp-chat-bubble--ai">
                    这是一道二次方程求解题。观察方程 x² - 5x + 6 = 0，可以使用因式分解法……
                    <div className="lp-typing">
                      <span /><span /><span />
                    </div>
                  </div>
                  <div className="lp-chat-bubble lp-chat-bubble--user">能用求根公式再算一遍吗？</div>
                  <div className="lp-audio-wave">
                    <span /><span /><span /><span /><span /><span /><span />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ========== PROBLEM ========== */}
      <section id="problem">
        <div className="lp-container">
          <div className="lp-section-header lp-fade-in">
            <div className="lp-section-header__tag">痛点分析</div>
            <h2>AI 能说会道，却看不到你眼前的世界</h2>
            <p>传统 AI 助手存在三大断层，割裂了自然交流的直觉</p>
          </div>
          <div className="lp-problem-grid">
            <div className="lp-problem-card lp-fade-in">
              <div className="lp-problem-card__icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M23 7l-7 5 7 5V7z"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                </svg>
              </div>
              <h3>视觉断层</h3>
              <p>用户必须先拍照、保存、上传、再打字描述上下文，AI 才能「看到」画面。四步操作，割裂了自然交流的直觉。</p>
            </div>
            <div className="lp-problem-card lp-fade-in">
              <div className="lp-problem-card__icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/>
                </svg>
              </div>
              <h3>交互断层</h3>
              <p>面对外语菜单、数学公式、电路图等复杂内容，打字描述极其低效。用户脑中的问题转不成文字，AI 也就无法作答。</p>
            </div>
            <div className="lp-problem-card lp-fade-in">
              <div className="lp-problem-card__icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                </svg>
              </div>
              <h3>成本断层</h3>
              <p>实时视频流 + 大模型推理的组合让 API 成本居高不下。传统方案月成本高达 $5,000，无法面向普通用户商业化。</p>
            </div>
          </div>
        </div>
      </section>

      {/* ========== SOLUTION ========== */}
      <section id="solution">
        <div className="lp-container">
          <div className="lp-section-header lp-fade-in">
            <h2>看 + 听 + 说 = 真正理解你的 AI</h2>
            <p>CamTalk 用一个对话界面闭合所有断层</p>
          </div>
          <div className="lp-flow-wrapper lp-fade-in">
            <div className="lp-flow-steps">
              {[
                { icon: "📷", label: "摄像头采集" },
                { icon: "🧠", label: "边缘预处理" },
                { icon: "🔌", label: "WebSocket" },
                { icon: "⚡", label: "Eino 编排" },
                { icon: "👁️", label: "视觉理解" },
                { icon: "💬", label: "流式回复" },
                { icon: "🔊", label: "语音输出" },
              ].map((step, i, arr) => (
                <div key={i} style={{ display: "contents" }}>
                  <div className="lp-flow-step">
                    <div className="lp-flow-step__node">{step.icon}</div>
                    <div className="lp-flow-step__label">{step.label}</div>
                  </div>
                  {i < arr.length - 1 && <div className="lp-flow-arrow">→</div>}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ========== FEATURES ========== */}
      <section id="features">
        <div className="lp-container">
          <div className="lp-section-header lp-fade-in">
            <div className="lp-section-header__tag">核心亮点</div>
            <h2>五大技术创新</h2>
            <p>从端到端架构到成本控制，每一层都经过精心设计</p>
          </div>
          <div className="lp-features-grid">
            {[
              {
                num: "01", icon: "⚡",
                title: "流式并行推送",
                desc: "LLM 文本流与 TTS 音频流并行输出。用户先看到文字，紧接着听到语音，感知延迟低于 0.5 秒，接近真人对话节奏。",
              },
              {
                num: "02", icon: "🧠",
                title: "声明式 AI 编排",
                desc: "基于 CloudWeGo Eino Graph 的 7 节点 DAG 流水线（STT → History → ChatModel → Splitter → TTS），类型安全、可扩展、易测试。",
              },
              {
                num: "03", icon: "💰",
                title: "端云协同降本",
                desc: "浏览器端 VAD 语音检测 + 关键帧像素比较 + 混合采样策略，节省 70% 带宽，月成本从 $5,000 降至 $300，降幅 90%。",
              },
              {
                num: "04", icon: "🎯",
                title: "多场景智能模式",
                desc: "5 种 AI 角色（自由对话 / 模拟面试 / 英语老师 / 辩论对手 / 同声翻译）× 3 种视觉模式 × 观察模式，灵活覆盖学习与工作。",
              },
              {
                num: "05", icon: "🏗️",
                title: "生产级工程架构",
                desc: "三级存储自动降级（Memory → Redis → PostgreSQL）、JWT 双 token 认证、Docker Compose 一键部署、完善的错误处理与降级策略。",
              },
            ].map((f) => (
              <div className="lp-feature-card lp-fade-in" key={f.num}>
                <div className="lp-feature-card__number">{f.num}</div>
                <div className="lp-feature-card__icon">
                  {f.icon}
                </div>
                <h3>{f.title}</h3>
                <p>{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ========== USERS ========== */}
      <section id="users">
        <div className="lp-container">
          <div className="lp-section-header lp-fade-in">
            <h2>为每一类学习者而设计</h2>
            <p>无论你是在学英语、准备面试，还是想让 AI 帮你看看眼前的世界</p>
          </div>
          <div className="lp-users-grid">
            {[
              { avatar: "🧑‍🎓", title: "语言学习者", desc: "对着课本或实物，与 AI 英语外教用英语自由对话，实时纠正语法和发音" },
              { avatar: "💼", title: "面试准备者", desc: "开启模拟面试模式，AI 面试官通过摄像头观察你的表情与状态，给出针对性反馈" },
              { avatar: "🌍", title: "跨境交流者", desc: "出国旅行时对着外文菜单、路牌实时翻译，AI 语音播报翻译结果" },
              { avatar: "👁️", title: "视障人士", desc: "AI 实时描述摄像头画面中的环境、障碍物和文字，提供无障碍信息辅助" },
              { avatar: "🔬", title: "学生 / 教师", desc: "对着题目问「怎么做？」，AI 看到画面后逐步讲解，就像身边有一位私教" },
            ].map((u) => (
              <div className="lp-user-card lp-fade-in" key={u.title}>
                <div className="lp-user-card__avatar">{u.avatar}</div>
                <h4>{u.title}</h4>
                <p>{u.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ========== SCENES ========== */}
      <section id="scenes">
        <div className="lp-container">
          <div className="lp-section-header lp-fade-in">
            <h2>五种模式，覆盖真实需求</h2>
          </div>
          <div className="lp-scenes-list">
            {[
              { icon: "💬", title: "自由对话", desc: "对着摄像头随意聊天，AI 实时理解画面并语音回答", tag: "通用" },
              { icon: "🗣️", title: "英语老师", desc: "AI 外教结合摄像头场景进行英语口语教学，实时纠正语法", tag: "学习" },
              { icon: "🎤", title: "模拟面试", desc: "AI 面试官根据你的回答追问，通过摄像头观察你的表现", tag: "求职" },
              { icon: "⚔️", title: "辩论对手", desc: "AI 反驳你的观点，锻炼你的逻辑思维和表达能力", tag: "思维" },
              { icon: "🌐", title: "同声翻译", desc: "实时识别画面中的外语文字并语音翻译，口语化输出", tag: "工具" },
            ].map((s) => (
              <div className="lp-scene-row lp-fade-in" key={s.title}>
                <div className="lp-scene-row__icon">{s.icon}</div>
                <div>
                  <h4>{s.title}</h4>
                  <div className="lp-scene-row__desc">{s.desc}</div>
                </div>
                <div className="lp-scene-row__tag">
                  {s.tag}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ========== METRICS ========== */}
      <section id="metrics">
        <div className="lp-container">
          <div className="lp-section-header lp-fade-in">
            <h2>用数据说话</h2>
          </div>
          <div className="lp-metrics-grid">
            {[
              { value: "< 2s", label: "端到端响应延迟" },
              { value: "90%", label: "API 成本降幅" },
              { value: "70%", label: "带宽节省率" },
              { value: "5+3", label: "场景 × 视觉模式" },
            ].map((m) => (
              <div className="lp-metric-card lp-fade-in" key={m.label}>
                <div className="lp-metric-card__value">{m.value}</div>
                <div className="lp-metric-card__label">{m.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ========== TECH STACK ========== */}
      <section id="tech">
        <div className="lp-container">
          <div className="lp-section-header lp-fade-in">
            <h2>三层系统，生产级质量</h2>
            <p>前端轻量预处理 → Go 网关智能编排 → 云端 AI 按需调用</p>
          </div>
          <div className="lp-tech-layers">
            {[
              { badge: "前端层", tags: ["React 18", "TypeScript", "Vite", "WebRTC VAD", "Canvas 关键帧检测", "WebSocket", "i18n (中/英/日)"] },
              { badge: "网关层", tags: ["Go + Gin", "gorilla/websocket", "Eino Graph", "JWT 双 Token", "Zap 日志", "Viper 配置"] },
              { badge: "存储层", tags: ["L1 Memory", "L2 Redis", "L3 PostgreSQL", "TieredManager 自动降级"] },
              { badge: "AI 服务", tags: ["qwen3-vl-plus (LLM)", "MiMo ASR (STT)", "MiMo TTS", "Docker Compose"] },
            ].map((layer) => (
              <div className="lp-tech-layer lp-fade-in" key={layer.badge}>
                <div>
                  <div className="lp-tech-layer__badge">
                    {layer.badge}
                  </div>
                </div>
                <div className="lp-tech-layer__tags">
                  {layer.tags.map((tag) => <span key={tag}>{tag}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ========== CTA ========== */}
      <section className="lp-cta-section">
        <div className="lp-container lp-fade-in">
          <h2>让 AI 看见你看见的世界</h2>
          <p>CamTalk，不只是聊天，而是真正的多模态视觉对话。</p>
          <button type="button" className="lp-cta-btn" onClick={() => openModal("register")}>
            立即体验 CamTalk
          </button>
          <div className="lp-cta-links">
            <a href="https://www.bilibili.com/video/BV1dDJK6cE5S/" target="_blank" rel="noreferrer">
              路演视频
            </a>
            <a href="https://github.com/XEngineers/CamTalk" target="_blank" rel="noreferrer">
              GitHub
            </a>
          </div>
        </div>
      </section>

      {/* ========== Footer ========== */}
      <footer className="lp-footer">
        <div className="lp-container">
          CamTalk © 2026 XEngineers
        </div>
      </footer>

      {/* ========== Login Modal ========== */}
      {modal.open && (
        <LoginModal initialMode={modal.mode} onClose={closeModal} />
      )}
    </div>
  );
}