// landing.jsx — Landing page (hero + 3 steps + social proof + feature rows + CTA)
const { useEffect: useEffectL, useRef: useRefL } = React;

function Landing({ onPage, tweaks }) {
  const canvasRef = useRefL(null);

  useEffectL(() => {
    if (tweaks.hero === "static-screenshot" || tweaks.hero === "minimal-text") return;
    if (!canvasRef.current) return;
    const css = getComputedStyle(document.documentElement);
    const accent = css.getPropertyValue("--accent").trim() || "#5E6AD2";
    const accent2 = css.getPropertyValue("--accent-2").trim() || "#7C8CFF";
    const variant = tweaks.hero === "static" ? "static" : "dynamic";
    const inst = window.Hero3D.init(canvasRef.current, {
      nodeCount: 220,
      accent, accent2, variant,
    });
    return () => inst.destroy();
  }, [tweaks.hero, tweaks.palette, tweaks.font]);

  const minimal = tweaks.hero === "minimal-text";

  return (
    <div className="landing page-fade">
      <div className="mesh-bg" />
      <div className="grain" />

      {/* HERO */}
      <section className="hero">
        <div className="announce">
          <span className="pill">NEW</span>
          <span>Nodeidea v0.9 · 可执行模拟与跨域类比</span>
          <Ic.ArrowR />
        </div>

        <h1 className="h1">
          以图谱组织,<br />
          <span className="grad">而非以文件夹。</span>
        </h1>

        <p className="lead">
          Nodeidea 把你学过的每一个概念存为图谱中的一个节点,自动连接前置与相邻知识。
          一个为学习而生的第二大脑——不是写更多笔记,而是看清它们之间的关系。
        </p>

        <div className="cta-row">
          <button className="btn btn-lg btn-primary" onClick={() => onPage("graph")}>
            开始探索 <Ic.ArrowR />
          </button>
          <button className="btn btn-lg btn-ghost">观看 60 秒演示</button>
        </div>

        <div className="canvas-shell" style={{ display: minimal ? "none" : "block" }}>
            <div className="canvas-overlay">
              <div className="traffic"><span/><span/><span/></div>
              <span className="badge">PUBLIC GRAPH · MATHEMATICS</span>
            </div>
            {tweaks.hero === "static-screenshot" ? (
              <div style={{ position: "absolute", inset: 0, background: "radial-gradient(60% 50% at 50% 50%, rgba(124,140,255,0.3), transparent 70%)", display: "grid", placeItems: "center", color: "var(--text-dim)" }}>
                <span>插入你的 graph.png 截图位</span>
              </div>
            ) : (
              <canvas ref={canvasRef} />
            )}
            {/* floating labels for vibe */}
            <div style={{ position: "absolute", left: "12%", top: "32%", fontSize: 12, color: "rgba(255,255,255,0.55)" }}>对偶间隙</div>
            <div style={{ position: "absolute", right: "14%", top: "22%", fontSize: 12, color: "rgba(255,255,255,0.4)" }}>梯度下降</div>
            <div style={{ position: "absolute", left: "60%", bottom: "20%", fontSize: 11, color: "rgba(255,255,255,0.35)" }}>布朗运动</div>
            <div style={{ position: "absolute", left: "26%", bottom: "26%", fontSize: 11, color: "rgba(255,255,255,0.35)" }}>线性代数</div>
          </div>
      </section>

      {/* SOCIAL PROOF / STATS */}
      <section className="container" style={{ marginTop: 0 }}>
        <div className="stats">
          <div className="stat"><span className="n">42,318</span><div className="lbl">公共节点</div></div>
          <div className="stat"><span className="n">9.2k</span><div className="lbl">活跃学习者</div></div>
          <div className="stat"><span className="n">186k</span><div className="lbl">建立的连接</div></div>
          <div className="stat"><span className="n">12</span><div className="lbl">覆盖学科</div></div>
        </div>
        <div className="sources">
          <span className="source-mark">Wikipedia</span>
          <span className="source-mark">MIT OpenCourseWare</span>
          <span className="source-mark">arXiv</span>
          <span className="source-mark">Khan Academy</span>
          <span className="source-mark">3Blue1Brown</span>
          <span className="source-mark">SEP</span>
        </div>
      </section>

      {/* 3-STEP */}
      <section className="container section">
        <div className="section-head">
          <span className="eyebrow">三步上手</span>
          <h2 className="h2">学一个概念,不止于读它的定义。</h2>
          <p className="lead">把它定位到图谱中,看清它从哪来、连向何处。</p>
        </div>
        <div className="steps">
          <Step
            num="01"
            title="浏览公共图谱"
            body="42 万节点覆盖数学、物理、生物、机器学习。点任意节点查看摘要、思维链、相邻概念与原始来源。"
            visual={<StepVisualGraph />}
          />
          <Step
            num="02"
            title="拖进 Playground"
            body="把感兴趣的节点拖到对话中。问问题、生成闪卡、做苏格拉底式追问。答案永远会引用具体节点。"
            visual={<StepVisualChat />}
          />
          <Step
            num="03"
            title="上传你的笔记"
            body="PDF、Markdown、教科书章节——Nodeidea 自动抽取概念并与公共节点对齐。建立你自己的图谱。"
            visual={<StepVisualUpload />}
          />
        </div>
      </section>

      {/* FEATURE ROWS */}
      <section className="container section" style={{ paddingTop: 0 }}>
        <FeatureRow
          eyebrow="语义搜索"
          title="不是关键词。是含义。"
          lead="Nodeidea 用向量嵌入定位概念——即使你说错了名字,只要意思在,它就找得到。"
          bullets={[
            "支持中英双语跨语言检索",
            "查询同义、近义、上位概念",
            "按子图聚类,而非线性结果",
          ]}
          visual={<FeatVisualSearch />}
        />
        <div style={{ height: 80 }} />
        <FeatureRow
          reverse
          eyebrow="可执行模拟"
          title="布朗运动 · 梯度下降 · 衰减——直接跑给你看。"
          lead="选中的节点上,Nodeidea 会嵌入一个交互式小画布。改参数,看结果——不再只是公式。"
          bullets={[
            "5 个 hero 节点已上线模拟",
            "支持暂停、回放、参数滑块",
            "Pro 用户可自定义参数空间",
          ]}
          visual={<FeatVisualSim />}
        />
        <div style={{ height: 80 }} />
        <FeatureRow
          eyebrow="跨域类比"
          title="把范畴论解释给社会学家。"
          lead="同一种结构以不同语言出现在不同学科里。Nodeidea 自动识别同构,用你熟悉的领域类比你不熟悉的。"
          bullets={[
            "群论 ↔ 对称性 ↔ 弦理论",
            "贝叶斯 ↔ 法律证据 ↔ 医学诊断",
            "可关闭——只在你愿意时出现",
          ]}
          visual={<FeatVisualAnalogy />}
        />
      </section>

      {/* PRICING TEASER */}
      <section className="container section">
        <div className="section-head">
          <span className="eyebrow">定价</span>
          <h2 className="h2">从匿名试用开始,按你的节奏升级。</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          <PriceCard
            name="Free"
            price="¥0"
            sub="无需信用卡"
            features={["匿名 5 次 / 天", "登录后 50 次 / 月", "私有节点 ≤ 50", "上传 ≤ 100MB", "Gemini Flash-Lite"]}
          />
          <PriceCard
            highlighted
            name="Pro"
            price="¥39"
            sub="月付 · 年付立省 20%"
            features={["无限对话", "多模态输入", "闪卡 / 笔记自动生成", "学习路径生成", "高级模型可选"]}
          />
          <PriceCard
            name="Studio"
            price="¥99"
            sub="每席位 · 团队"
            features={["共享私有图谱", "老师 dashboard", "Bulk seat", "周报聚合", "优先支持"]}
          />
        </div>
      </section>

      {/* BIG BOTTOM CTA */}
      <section className="container" style={{ padding: "0 28px" }}>
        <div className="bottom-cta">
          <h2 className="h2" style={{ maxWidth: 720, margin: "0 auto" }}>
            一份笔记,只属于一个文件夹。<br />
            <span style={{ color: "var(--text-dim)" }}>一个概念,属于一张图。</span>
          </h2>
          <p className="lead" style={{ margin: "20px auto 0" }}>
            匿名 5 次免费试用,看看一个真正的知识图谱长什么样。
          </p>
          <div className="cta-row">
            <button className="btn btn-lg btn-accent" onClick={() => onPage("graph")}>
              <Ic.Sparkle /> 立刻试用
            </button>
            <button className="btn btn-lg btn-ghost">查看完整定价</button>
          </div>
        </div>
      </section>

      <Footer onPage={onPage} />
    </div>
  );
}

function Step({ num, title, body, visual }) {
  return (
    <div className="step">
      <div className="step-num">{num} · STEP</div>
      <h3>{title}</h3>
      <p>{body}</p>
      <div className="step-visual">{visual}</div>
    </div>
  );
}

function FeatureRow({ eyebrow, title, lead, bullets, visual, reverse }) {
  return (
    <div className={"feat-row" + (reverse ? " reverse" : "")}>
      {!reverse && <div className="feat-visual">{visual}</div>}
      <div className="copy">
        <span className="eyebrow">{eyebrow}</span>
        <h2 className="h2" style={{ marginTop: 14 }}>{title}</h2>
        <p className="lead">{lead}</p>
        <ul className="bullet-list">
          {bullets.map(b => <li key={b}>{b}</li>)}
        </ul>
      </div>
      {reverse && <div className="feat-visual">{visual}</div>}
    </div>
  );
}

function PriceCard({ name, price, sub, features, highlighted }) {
  return (
    <div className="card" style={{
      padding: 28,
      ...(highlighted ? {
        background: "linear-gradient(180deg, rgba(94,106,210,0.10), rgba(94,106,210,0.02))",
        borderColor: "rgba(124,140,255,0.32)",
        boxShadow: "0 0 0 1px rgba(124,140,255,0.18), 0 24px 60px rgba(94,106,210,0.18)",
      } : {})
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontWeight: 600, fontSize: 15 }}>{name}</span>
        {highlighted && <span className="badge-new">推荐</span>}
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 18 }}>
        <span style={{ fontSize: 38, fontWeight: 600, letterSpacing: "-0.04em" }}>{price}</span>
        <span style={{ color: "var(--text-dim)", fontSize: 13 }}>/月</span>
      </div>
      <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>{sub}</div>
      <button className={highlighted ? "btn btn-accent" : "btn btn-quiet"} style={{ width: "100%", justifyContent: "center", marginTop: 20 }}>
        {highlighted ? "升级到 Pro" : "选择此方案"}
      </button>
      <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "grid", gap: 12 }}>
        {features.map(f => (
          <li key={f} style={{ display: "flex", gap: 10, fontSize: 13, color: "var(--text-soft)" }}>
            <Ic.Check style={{ color: "var(--accent-fresh)", flex: "none", marginTop: 2 }} />
            <span>{f}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

/* Mini visuals for the 3-step + feature cards */
function StepVisualGraph() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 280 180" style={{ display: "block" }}>
      <defs>
        <radialGradient id="g1"><stop offset="0" stopColor="#7C8CFF" stopOpacity="0.4"/><stop offset="1" stopColor="#7C8CFF" stopOpacity="0"/></radialGradient>
      </defs>
      <rect width="280" height="180" fill="url(#g1)"/>
      {[
        [140, 90, 7], [80, 60, 4], [200, 50, 5], [60, 120, 4], [220, 130, 5], [100, 100, 3], [180, 100, 3], [120, 40, 3], [160, 140, 3], [40, 80, 3], [240, 80, 3]
      ].map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r={p[2]} fill={i === 0 ? "#7C8CFF" : "#4EA7FC"} opacity={i === 0 ? 1 : 0.6}/>)}
      {[[140,90,80,60],[140,90,200,50],[140,90,60,120],[140,90,220,130],[140,90,100,100],[140,90,180,100],[140,90,120,40],[140,90,160,140]].map((e,i)=>(
        <line key={i} x1={e[0]} y1={e[1]} x2={e[2]} y2={e[3]} stroke="#7C8CFF" strokeOpacity="0.25" strokeWidth="0.8"/>
      ))}
    </svg>
  );
}
function StepVisualChat() {
  return (
    <div style={{ padding: 14, height: "100%", display: "grid", gap: 10, fontSize: 11.5 }}>
      <div style={{ background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 8, padding: "8px 10px" }}>
        <div style={{ color: "var(--text-dim)", marginBottom: 4 }}>你</div>
        <div>解释 <span className="node-chip" style={{ height: 18, fontSize: 11 }}>对偶间隙</span></div>
      </div>
      <div style={{ background: "rgba(94,106,210,0.10)", border: "1px solid rgba(124,140,255,0.2)", borderRadius: 8, padding: "8px 10px" }}>
        <div style={{ color: "var(--accent-2)", marginBottom: 4 }}>Nodeidea</div>
        <div style={{ color: "var(--text-soft)" }}>原问题最优值与对偶最优值的差。它衡量了 <span className="node-chip" style={{ height: 18, fontSize: 11 }}>强对偶</span> 何时成立。</div>
      </div>
    </div>
  );
}
function StepVisualUpload() {
  return (
    <div style={{ padding: 14, height: "100%", display: "grid", gap: 8, fontSize: 11.5 }}>
      {[["measure_theory.pdf", "12.4 MB"], ["lecture_notes_w3.md", "84 KB"], ["topology_handbook.pdf", "44 MB"]].map(f => (
        <div key={f[0]} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 8 }}>
          <div style={{ width: 22, height: 22, borderRadius: 4, background: "var(--surface-3)", display: "grid", placeItems: "center", fontSize: 9, color: "var(--text-dim)" }}>PDF</div>
          <span style={{ flex: 1, color: "var(--text-soft)" }}>{f[0]}</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-faint)" }}>{f[1]}</span>
        </div>
      ))}
      <div style={{ marginTop: 4, fontSize: 10, color: "var(--accent-fresh)", display: "flex", alignItems: "center", gap: 6 }}>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent-fresh)" }}/>
        已抽取 38 个概念,对齐 24 个公共节点
      </div>
    </div>
  );
}
function FeatVisualSearch() {
  return (
    <div style={{ padding: 24, height: "100%", display: "grid", gap: 12, alignContent: "start" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: "var(--surface-2)", border: "1px solid var(--border-strong)", borderRadius: 10, fontSize: 13 }}>
        <Ic.Search />
        <span style={{ color: "var(--text)" }}>convex 优化里那个差距...</span>
        <span style={{ marginLeft: "auto", width: 8, height: 8, borderRadius: "50%", background: "var(--accent-2)" }}/>
      </div>
      {[
        ["对偶间隙", "physical sciences › mathematics › optimization", true],
        ["强对偶", "physical sciences › mathematics › optimization"],
        ["Slater 条件", "physical sciences › mathematics › optimization"],
        ["原对偶算法", "physical sciences › mathematics › optimization"],
      ].map((r, i) => (
        <div key={i} style={{ padding: "10px 14px", background: i === 0 ? "rgba(94,106,210,0.10)" : "var(--surface-2)", border: "1px solid " + (i === 0 ? "rgba(124,140,255,0.32)" : "var(--border)"), borderRadius: 10 }}>
          <div style={{ fontWeight: 500, fontSize: 13 }}>{r[0]} {i === 0 && <span style={{ marginLeft: 6, fontSize: 10, color: "var(--accent-fresh)", fontFamily: "var(--font-mono)" }}>0.94</span>}</div>
          <div style={{ fontSize: 11, color: "var(--text-faint)", marginTop: 4 }}>{r[1]}</div>
        </div>
      ))}
    </div>
  );
}
function FeatVisualSim() {
  return (
    <div style={{ position: "absolute", inset: 0, padding: 20 }}>
      <svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
        <defs>
          <linearGradient id="ax" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="rgba(255,255,255,0.1)"/><stop offset="1" stopColor="rgba(255,255,255,0)"/></linearGradient>
        </defs>
        <rect x="40" y="40" width="320" height="200" fill="none" stroke="rgba(255,255,255,0.08)"/>
        {[60, 100, 140, 180, 220].map(y => <line key={y} x1="40" y1={y} x2="360" y2={y} stroke="rgba(255,255,255,0.04)"/>)}
        {/* gradient descent path */}
        <path d="M60 80 Q 130 60, 160 120 T 230 180 T 320 210" fill="none" stroke="#7C8CFF" strokeWidth="2"/>
        {[[60,80],[100,72],[140,88],[180,140],[220,170],[260,190],[300,202],[330,210]].map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="3.5" fill="#7C8CFF"/>)}
        <text x="50" y="30" fill="rgba(255,255,255,0.5)" fontSize="10" fontFamily="JetBrains Mono">loss = 0.082 · step 7/40</text>
      </svg>
      <div style={{ position: "absolute", left: 24, bottom: 20, right: 24, display: "flex", alignItems: "center", gap: 14, fontSize: 11, color: "var(--text-dim)" }}>
        <div style={{ flex: 1 }}>
          <div style={{ marginBottom: 4 }}>学习率 <span style={{ color: "var(--text)", fontFamily: "var(--font-mono)" }}>0.03</span></div>
          <div style={{ height: 4, background: "var(--surface-3)", borderRadius: 2, position: "relative" }}>
            <div style={{ position: "absolute", left: 0, top: 0, height: "100%", width: "40%", background: "var(--accent-2)", borderRadius: 2 }}/>
            <div style={{ position: "absolute", left: "40%", top: -3, width: 10, height: 10, borderRadius: "50%", background: "var(--text)", border: "2px solid var(--accent-2)" }}/>
          </div>
        </div>
        <button className="btn btn-sm btn-quiet">▶</button>
      </div>
    </div>
  );
}
function FeatVisualAnalogy() {
  return (
    <div style={{ position: "absolute", inset: 0, padding: 28 }}>
      <svg width="100%" height="100%" viewBox="0 0 400 300">
        <g>
          <circle cx="100" cy="80" r="32" fill="rgba(94,106,210,0.18)" stroke="var(--accent-2)" strokeWidth="1.2"/>
          <text x="100" y="84" textAnchor="middle" fill="white" fontSize="11">群论</text>
          <circle cx="300" cy="80" r="32" fill="rgba(78,167,252,0.18)" stroke="var(--accent-data)" strokeWidth="1.2"/>
          <text x="300" y="84" textAnchor="middle" fill="white" fontSize="11">对称性</text>
          <circle cx="200" cy="220" r="38" fill="rgba(55,200,171,0.18)" stroke="var(--accent-fresh)" strokeWidth="1.2"/>
          <text x="200" y="224" textAnchor="middle" fill="white" fontSize="11">弦理论</text>
          <line x1="100" y1="80" x2="300" y2="80" stroke="rgba(255,255,255,0.2)" strokeDasharray="3 3"/>
          <line x1="100" y1="80" x2="200" y2="220" stroke="rgba(255,255,255,0.2)" strokeDasharray="3 3"/>
          <line x1="300" y1="80" x2="200" y2="220" stroke="rgba(255,255,255,0.2)" strokeDasharray="3 3"/>
          <text x="200" y="70" textAnchor="middle" fill="var(--text-dim)" fontSize="9" fontFamily="JetBrains Mono">isomorphic</text>
        </g>
      </svg>
    </div>
  );
}

window.Landing = Landing;