/* 灵次元空间 · 会员与价格 完整页 */
const { useState } = React;
const Icon = window.LCYIcon;
const { PLANS } = window.LCY;

function PricingApp() {
  const [msg, flash] = window.useToast();
  const buy = () => flash("已进入开通流程（演示）");

  return (
    <div className="shell">
      <window.AppBar icon="gem" name="会员与价格" sub="MEMBERSHIP" />
      <div className="page"><div className="col">
        <div className="intro">
          <div className="eyebrow">会员与价格</div>
          <h1>一张会员，解锁全部关键功能</h1>
          <p>免费版可长期使用多款免费应用与各应用的基础功能；开通会员即解锁全部应用的<b style={{ color: "var(--text)" }}>关键功能</b>——去广告、无水印高清导出、批量出题组卷不限量。月卡 ¥19.9、年卡 ¥99（约 ¥8.3 / 月），权益完全一样，年卡更划算。</p>
        </div>

        {/* 会员说明 */}
        <div className="pp-banner">
          <span className="pp-bic"><Icon name="crown" /></span>
          <div>
            <b>会员能解锁什么？</b>
            <p>常用工具（口算、拼音、字帖、计划表、测一测等）始终免费；会员解锁的是各应用的进阶能力：去广告、去水印的高清 / 批量导出、专属模板与皮肤、更高的使用上限，以及新应用的抢先体验。一次开通，全部应用通用。</p>
          </div>
        </div>

        {/* 订阅 */}
        <h3 className="pp-h"><Icon name="crown" />会员方案</h3>
        <div className="pp-plans pp-plans-3">
          {PLANS.map((p) => (
            <div key={p.id} className={"pp-plan" + (p.popular ? " on" : "")}>
              {p.multiple && <span className="pp-mult">{p.multiple}</span>}
              <div className="pp-name">{p.name}</div>
              <div className="pp-price"><span>{p.price}</span> <small>{p.per}</small></div>
              <ul style={{ marginTop: 18 }}>{p.perks.map((k) => <li key={k}><Icon name="check" />{k}</li>)}</ul>
              <button className={"btn " + (p.popular ? "btn-primary" : "btn-ghost")} onClick={buy}>{p.cta}</button>
            </div>
          ))}
        </div>

        <div className="pp-faq">
          <div className="pp-q"><b>免费用户能用哪些？</b>口算、拼音、字帖、计划表、起名、测一测等多款应用完全免费；其余应用的基础功能也可免费体验，只有关键功能需要会员。</div>
          <div className="pp-q"><b>月卡和年卡有什么区别？</b>权益完全一样，区别只在购买周期与价格：年卡相当于每月约 ¥8.3，比按月开通立省约 58%，还能抢先体验新应用。</div>
          <div className="pp-q"><b>可以随时取消吗？</b>会员可随时取消，到期后自动转为免费版，已解锁的免费应用与本地数据不受影响。</div>
        </div>

        <div style={{ textAlign: "center", marginTop: 8 }}>
          <button className="btn btn-primary" onClick={buy} style={{ padding: "13px 30px" }}><Icon name="crown" />立即开通会员</button>
        </div>
      </div></div>
      <window.Toast msg={msg} />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<PricingApp />);