// pricing.jsx — 定价
const { useState: useStatePr } = React;

function PricingPage({ tweaks }) {
  const [yearly, setYearly] = useStatePr(false);
  const price = (m, y) => yearly ? "¥" + Math.round(m * 12 * 0.8) : "¥" + m;
  const unit = yearly ? "/ 年" : "/ 月";

  return (
    <div className="subpage pricing-page page-fade">
      <div className="mesh-bg" />

      <section className="container">
        <div className="subpage-hero">
          <span className="eyebrow">定价</span>
          <h1 className="h2" style={{ marginTop: 14 }}>选一个适合你节奏的方案。</h1>
          <p className="lead">匿名 5 次每天免费,登录后 50 次每月。需要更多就升级——可随时取消。</p>
          <div className="billing-toggle">
            <button className={!yearly ? "active" : ""} onClick={() => setYearly(false)}>月付</button>
            <button className={yearly ? "active" : ""} onClick={() => setYearly(true)}>年付 <span className="save">省 20%</span></button>
          </div>
        </div>

        <div className="tier-grid">
          <Tier
            name="Free"
            price="¥0"
            unit=""
            sub="匿名 5 次 / 天 · 登录 50 次 / 月"
            cta={<button className="btn btn-ghost">继续匿名使用</button>}
            features={[
              { h: "对话与提问" },
              "匿名 5 次 / 天(按 IP 限流)",
              "登录后 50 次 / 月",
              "私有节点 ≤ 50",
              "上传 ≤ 100 MB",
              { h: "模型" },
              "Gemini Flash-Lite(锁定)",
            ]}
          />
          <Tier
            featured
            name="Pro"
            price={price(39, 0)}
            unit={unit}
            sub={yearly ? "约 ¥31 / 月 · 年付" : "随时取消"}
            cta={<button className="btn btn-accent">升级到 Pro</button>}
            features={[
              { h: "核心" },
              "无限对话",
              "私有节点 不限",
              "上传 ≤ 10 GB",
              { h: "生成" },
              "⚡ 闪卡 / 📝 笔记 自动生成",
              "学习路径自动规划",
              "跨域类比",
              { h: "输入" },
              "多模态(图片 / 截图 / 音频)",
              { h: "模型" },
              "Claude Sonnet · GPT-5 · Gemini Pro 可选",
            ]}
          />
          <Tier
            name="Studio"
            price={price(99, 0)}
            unit={unit + " · 每席位"}
            sub="团队 / 教研机构"
            cta={<button className="btn btn-quiet">联系我们</button>}
            features={[
              { h: "团队" },
              "共享私有图谱",
              "老师 dashboard 看学生 weekly digest",
              "Bulk seat · 5 席起",
              { h: "管理" },
              "SSO / SCIM",
              "数据驻留 SG 区域",
              "优先支持(< 24 小时)",
              { h: "计费" },
              "统一发票",
            ]}
          />
        </div>

        {/* One-time + Contributor */}
        <div className="extras-grid">
          <div className="extra-card">
            <div className="icn"><Ic.Sparkle /></div>
            <div className="copy">
              <div className="ttl">Token Pack</div>
              <div className="d">重度用户一次性补充。不影响订阅,用完为止。</div>
              <div className="price">¥29 / 5M tokens · ¥99 / 20M tokens</div>
            </div>
            <button className="btn btn-quiet">购买</button>
          </div>
          <div className="extra-card">
            <div className="icn"><Ic.Globe /></div>
            <div className="copy">
              <div className="ttl">图谱贡献者计划</div>
              <div className="d">贡献 verified 节点,每 10 个自动延 Pro 30 天。</div>
              <div className="price">已审核 4 / 10 · 还差 6 个</div>
            </div>
            <button className="btn btn-quiet">查看进度</button>
          </div>
        </div>

        {/* Compare table */}
        <h2 className="h3" style={{ marginTop: 100, marginBottom: 20 }}>详细对比</h2>
        <div className="compare">
          <div className="compare-row head">
            <span>能力</span>
            <span className="v">Free</span>
            <span className="v">Pro</span>
            <span className="v">Studio</span>
          </div>

          <div className="compare-section">使用配额</div>
          <CompareRow label="每月对话数" vals={["50", "无限", "无限"]} />
          <CompareRow label="私有节点上限" vals={["50", "无限", "无限"]} />
          <CompareRow label="上传存储" vals={["100 MB", "10 GB", "100 GB / 席"]} />
          <CompareRow label="单文件大小" vals={["20 MB", "100 MB", "200 MB"]} />

          <div className="compare-section">智能能力</div>
          <CompareRow label="基础问答" vals={[true, true, true]} />
          <CompareRow label="可执行模拟" vals={[true, true, true]} />
          <CompareRow label="⚡ 闪卡 / 📝 笔记生成" vals={[false, true, true]} />
          <CompareRow label="跨域类比" vals={[false, true, true]} />
          <CompareRow label="学习路径规划" vals={[false, true, true]} />
          <CompareRow label="Socratic 模式" vals={[false, true, true]} />
          <CompareRow label="多模态输入" vals={[false, true, true]} />

          <div className="compare-section">模型</div>
          <CompareRow label="Gemini Flash-Lite" vals={[true, true, true]} />
          <CompareRow label="Claude Sonnet" vals={[false, true, true]} />
          <CompareRow label="GPT-5" vals={[false, true, true]} />
          <CompareRow label="本地 / 自托管模型" vals={[false, false, true]} />

          <div className="compare-section">团队与管理</div>
          <CompareRow label="共享图谱" vals={[false, false, true]} />
          <CompareRow label="老师 dashboard" vals={[false, false, true]} />
          <CompareRow label="SSO / SCIM" vals={[false, false, true]} />
          <CompareRow label="数据驻留 SG" vals={[true, true, true]} />
        </div>

        {/* FAQ quick excerpts */}
        <div style={{ marginTop: 100 }}>
          <div className="section-head">
            <span className="eyebrow">常见疑问</span>
            <h2 className="h3">关于付费</h2>
          </div>
          <div className="faq-list">
            {[
              ["能随时取消吗?", "可以。取消后当前周期内仍可使用,周期结束自动转为 Free。"],
              ["支持哪些付款方式?", "信用卡 / 借记卡(Stripe)· 支付宝 · 微信支付。年付支持开票。"],
              ["有学生折扣吗?", "有,通过 SheerID 或 .edu 邮箱验证即可享 Pro 50% 折扣。"],
              ["退款政策?", "Pro/Studio 月付不退;首次年付订阅 7 天内可全额退款。"],
              ["切换方案会怎样?", "升级立即生效,差额按比例计算;降级在当前周期末生效。"],
            ].map(([q, a], i) => (
              <details key={i} open={i === 0}>
                <summary>{q}<span className="ctrl"><Ic.Plus /></span></summary>
                <div className="body">{a}</div>
              </details>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function Tier({ name, price, unit, sub, cta, features, featured }) {
  return (
    <div className={"tier" + (featured ? " featured" : "")}>
      <span className="tier-name">{name}</span>
      {featured && <span className="featured-badge">推荐</span>}
      <div className="price-row">
        <span className="price">{price}</span>
        <span className="price-unit">{unit}</span>
      </div>
      <span className="sub">{sub}</span>
      <div className="cta">{cta}</div>
      <ul className="feat-list">
        {features.map((f, i) =>
          typeof f === "object" && f.h
            ? <li key={i} className="head">{f.h}</li>
            : <li key={i}><Ic.Check className="check" /><span>{f}</span></li>
        )}
      </ul>
    </div>
  );
}

function CompareRow({ label, vals }) {
  const cell = v => {
    if (v === true) return <span className="check"><Ic.Check /></span>;
    if (v === false) return <span className="x">—</span>;
    return <span>{v}</span>;
  };
  return (
    <div className="compare-row">
      <span className="label">{label}</span>
      <span className="v">{cell(vals[0])}</span>
      <span className="v">{cell(vals[1])}</span>
      <span className="v">{cell(vals[2])}</span>
    </div>
  );
}

window.PricingPage = PricingPage;