// Support / contact page. No prices or packages are listed on the site — to keep
// the ICP filing non-commercial, purchases happen off-site: users add 客服 on
// WeChat and redeem a card-key in the 账户 page. This page just points to 客服.
function Pricing({ onNav }) {
  const { Button, Card } = window.TaDesignSystem_e6b037;
  const [contact, setContact] = React.useState(false);

  const reviews = [
    { name: "小鹿", rel: "语音厅主播", text: "客户一句话甩过来我经常卡壳。Ta说三组走法摆出来，挑一句改改就发，留人率肉眼可见地高了。" },
    { name: "阿哲", rel: "陪聊新手", text: "以前总忍不住催下单，把人聊跑。它把「急着要钱」全列进不能说，火候到了再带，续单反而多了。" },
    { name: "Coco", rel: "老陪聊", text: "客户倒苦水我只会「多喝热水」。它教我接住再损一句，氛围一下就活了，客户还夸我会聊。" },
    { name: "老周", rel: "公会带新人", text: "新人最缺临场反应。让他们照着温度和走法来，上手快一大截，不用我一句句教。" },
  ];

  return (
    <main style={{ maxWidth: 1080, margin: "0 auto", padding: "64px 32px 80px" }}>
      <div style={{ textAlign: "center", marginBottom: 14 }}>
        <h1 style={{ fontSize: 38, fontWeight: 700, letterSpacing: "-0.02em", margin: "0 0 10px" }}>每段对话，都值得被读懂</h1>
        <p style={{ fontSize: 17, color: "var(--text-secondary)", margin: 0 }}>注册即送 20 次，先免费试。如遇问题，请及时联系客服。</p>
      </div>

      {/* Free signup callout */}
      <div style={{ display: "flex", justifyContent: "center", marginBottom: 36 }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "10px 18px", borderRadius: "var(--radius-pill)", background: "var(--primary-subtle)", color: "var(--primary-active)", fontSize: 14, fontWeight: 600 }}>
          <Icon name="gift" size={16} color="var(--primary-active)" /> 注册即送 20 次，先免费试，合不合适你说了算
        </div>
      </div>

      {/* Contact card */}
      <div style={{ display: "flex", justifyContent: "center", marginBottom: 64 }}>
        <Card elevation="floating" padding="lg" style={{ maxWidth: 460, width: "100%", textAlign: "center" }}>
          <div style={{ width: 56, height: 56, borderRadius: "var(--radius-lg)", background: "var(--primary-subtle)", color: "var(--primary-active)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
            <Icon name="message-circle" size={28} />
          </div>
          <h3 style={{ fontSize: 20, fontWeight: 600, margin: "0 0 8px" }}>遇到问题，随时联系客服</h3>
          <p style={{ fontSize: 14, color: "var(--text-secondary)", lineHeight: 1.6, margin: "0 0 20px" }}>
            使用中有任何疑问，添加客服微信即可。客服会协助你解决问题，也能帮你处理账户相关事宜。
          </p>
          <Button variant="primary" size="lg" block onClick={() => setContact(true)} leadingIcon={<Icon name="message-circle" size={18} />}>联系客服</Button>
        </Card>
      </div>

      {/* Testimonials */}
      <div style={{ textAlign: "center", marginBottom: 28 }}>
        <h2 style={{ fontSize: 28, fontWeight: 700, letterSpacing: "-0.02em", margin: "0 0 8px" }}>用户怎么说</h2>
        <p style={{ fontSize: 15, color: "var(--text-secondary)", margin: 0 }}>读懂没说出口的话，是什么体验。</p>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, maxWidth: 860, margin: "0 auto" }} className="ta-reviews">
        {reviews.map((r) => (
          <Card key={r.name} elevation="flat" padding="lg">
            <div style={{ display: "flex", gap: 3, marginBottom: 10, color: "var(--primary)" }}>
              {[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="star" size={15} color="var(--primary)" style={{ fill: "var(--primary)" }} />)}
            </div>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--text-primary)", margin: "0 0 14px" }}>「{r.text}」</p>
            <div style={{ fontSize: 13, color: "var(--text-tertiary)" }}>—— {r.name} · {r.rel}</div>
          </Card>
        ))}
      </div>

      <p style={{ textAlign: "center", marginTop: 40, display: "flex", gap: 12, justifyContent: "center" }}>
        <Button variant="ghost" onClick={() => setContact(true)} leadingIcon={<Icon name="message-circle" size={16} />}>联系客服</Button>
        <Button variant="ghost" onClick={() => onNav("landing")} leadingIcon={<Icon name="arrow-left" size={16} />}>返回首页</Button>
      </p>

      <window.ContactDialog open={contact} onClose={() => setContact(false)} />

      {/* Privacy promise */}
      <p style={{ textAlign: "center", marginTop: 28, fontSize: 12, color: "var(--text-tertiary)" }}>
        我们不保存你的任何聊天记录 · 截图只在分析的那几秒存在于内存，分析完即焚
      </p>
    </main>
  );
}
Object.assign(window, { Pricing });