// Marketing landing page for Ta说.

// Placeholder app screenshots that auto-scroll. Swap these for real
// screenshots from the server later — they're stand-ins for now.
const TA_SHOTS = [
  { time: "晚 21:24", msgs: [{ me: false, t: "在忙吗？没事的，你先忙。" }, { me: true, t: "好，等下聊。" }], insight: "Ta 嘴上说「先忙」，其实希望被你留住一会儿。", reply: "我手头有点事，但你说，我在听。" },
  { time: "午 12:10", msgs: [{ me: true, t: "周末一起吃个饭？" }, { me: false, t: "最近有点忙，再说吧" }], insight: "「再说」多半是软拒绝，但也留了余地。", reply: "那等你忙完，我请你吃那家新店～" },
  { time: "晚 22:48", msgs: [{ me: false, t: "你是不是生气了" }, { me: true, t: "没有啊" }], insight: "Ta 在反复确认你的情绪，渴望被安抚。", reply: "真没有，就是有点累，谢谢你记挂我。" },
  { time: "早 08:02", msgs: [{ me: false, t: "早安☀️" }, { me: true, t: "早～昨晚睡得好吗" }], insight: "主动报备加关心，好感正在升温。", reply: "梦到你了，醒来还在笑。" },
];

function ShotCard({ s }) {
  return (
    <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-md)", overflow: "hidden" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 14px", borderBottom: "1px solid var(--border-subtle)" }}>
        <Icon name="sparkles" size={14} color="var(--primary)" />
        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--text-secondary)", whiteSpace: "nowrap" }}>Ta说 · 场景分析</span>
        <span style={{ flex: 1 }} />
        <span style={{ fontSize: 11, color: "var(--text-tertiary)" }}>{s.time}</span>
      </div>
      <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 8 }}>
        {s.msgs.map((m, i) => (
          <div key={i} style={{ alignSelf: m.me ? "flex-end" : "flex-start", maxWidth: "80%", fontSize: 13.5, lineHeight: 1.45, padding: "8px 12px",
            background: m.me ? "var(--primary)" : "var(--bg-muted)", color: m.me ? "var(--on-primary)" : "var(--text-primary)",
            borderRadius: m.me ? "14px 4px 14px 14px" : "4px 14px 14px 14px" }}>{m.t}</div>
        ))}
        <div style={{ marginTop: 4, paddingTop: 12, borderTop: "1px dashed var(--border-default)" }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: ".04em", color: "var(--text-tertiary)", textTransform: "uppercase", marginBottom: 6 }}>核心洞察</div>
          <p style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--text-primary)", margin: 0 }}>{s.insight}</p>
          <div style={{ marginTop: 10, display: "flex", alignItems: "center", gap: 10, padding: "9px 12px", background: "var(--primary-subtle)", borderRadius: "var(--radius-md)" }}>
            <span style={{ flex: 1, fontSize: 13.5, color: "var(--text-primary)" }}>{s.reply}</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11, fontWeight: 600, color: "var(--primary-active)" }}><Icon name="clipboard" size={12} color="var(--primary-active)" />粘贴</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function HeroShots() {
  const [i, setI] = React.useState(0);
  const n = TA_SHOTS.length;
  React.useEffect(() => { const t = setInterval(() => setI((p) => (p + 1) % n), 3200); return () => clearInterval(t); }, [n]);
  return (
    <div style={{ position: "relative", minWidth: 0, maxWidth: "100%" }}>
      <div style={{ overflow: "hidden", borderRadius: "var(--radius-2xl)" }}>
        <div style={{ display: "flex", transform: `translateX(-${i * 100}%)`, transition: "transform 600ms var(--ease-out)" }}>
          {TA_SHOTS.map((s, k) => (
            <div key={k} style={{ flex: "0 0 100%", minWidth: 0, boxSizing: "border-box", padding: "4px 4px 8px" }}><ShotCard s={s} /></div>
          ))}
        </div>
      </div>
      <div style={{ display: "flex", justifyContent: "center", gap: 7, marginTop: 16 }}>
        {TA_SHOTS.map((_, k) => (
          <button key={k} onClick={() => setI(k)} aria-label={"第 " + (k + 1) + " 张"} style={{
            width: k === i ? 22 : 8, height: 8, borderRadius: 999, border: "none", cursor: "pointer", padding: 0,
            background: k === i ? "var(--primary)" : "var(--border-strong)", transition: "all .3s var(--ease-out)",
          }} />
        ))}
      </div>
    </div>
  );
}

function Landing({ onNav }) {
  const { Button, Badge, Card } = window.TaDesignSystem_e6b037;

  const steps = [
    { icon: "image-up", title: "上传聊天截图", desc: "把那段让你拿不准的对话截图上传，支持微信、短信等任意聊天界面。" },
    { icon: "scan-search", title: "读懂当下场景", desc: "我们分析对方的语气、情绪与潜台词 —— Ta 说的，和没说出口的。" },
    { icon: "messages-square", title: "给出回复策略", desc: "提供几种贴合你风格的回复方向，由你决定怎么说。" },
  ];

  return (
    <main>
      {/* Hero */}
      <section style={{ padding: "84px 32px 64px", maxWidth: 1120, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }} className="ta-hero">
        <div style={{ minWidth: 0 }}>
          <Badge variant="primary" dot>娱乐向 · 仅供参考</Badge>
          <h1 style={{ fontSize: "clamp(40px, 5vw, 60px)", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.08, margin: "20px 0 0" }}>
            Ta说<br />Ta不说的<br /><span style={{ color: "var(--primary)" }}>它帮你说</span>
          </h1>
          <p style={{ fontSize: 19, color: "var(--text-secondary)", lineHeight: 1.6, margin: "22px 0 0", maxWidth: 440 }}>
            读懂一段对话背后的情绪与潜台词。上传一张聊天截图，我们帮你看清当下的场景，并给出贴心的回复方向。
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 32 }}>
            <Button variant="primary" size="lg" onClick={() => onNav("app")} leadingIcon={<Icon name="image-up" size={20} />}>上传第一张截图</Button>
            <Button variant="secondary" size="lg" onClick={() => onNav("pricing")}>联系客服</Button>
          </div>
          <p style={{ fontSize: 13, color: "var(--text-tertiary)", marginTop: 16, display: "flex", alignItems: "center", gap: 6 }}>
            <Icon name="gift" size={15} /> 注册即送 20 次免费分析，先免费试
          </p>
        </div>

        {/* App screenshots — auto-scrolling (placeholders; real shots load from server) */}
        <HeroShots />
      </section>

      {/* How it works */}
      <section id="how" style={{ padding: "56px 32px", background: "var(--bg-subtle)" }}>
        <div style={{ maxWidth: 1120, margin: "0 auto" }}>
          <h2 style={{ fontSize: 30, fontWeight: 600, textAlign: "center", margin: "0 0 8px" }}>三步，读懂没说出口的话</h2>
          <p style={{ textAlign: "center", color: "var(--text-secondary)", margin: "0 0 40px" }}>目前只需上传截图，我们返回分析与回复方向 —— 暂无聊天功能。</p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 }} className="ta-steps">
            {steps.map((s, i) => (
              <Card key={i} elevation="flat" padding="lg">
                <div style={{ width: 48, height: 48, borderRadius: "var(--radius-md)", background: "var(--primary-subtle)", color: "var(--primary-active)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
                  <Icon name={s.icon} size={24} />
                </div>
                <h3 style={{ fontSize: 18, fontWeight: 600, margin: "0 0 6px" }}>{i + 1}. {s.title}</h3>
                <p style={{ fontSize: 14, color: "var(--text-secondary)", lineHeight: 1.6, margin: 0 }}>{s.desc}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Privacy band */}
      <section id="privacy" style={{ padding: "64px 32px" }}>
        <div style={{ maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
          <div style={{ width: 56, height: 56, borderRadius: "var(--radius-lg)", background: "var(--info-subtle)", color: "var(--info-text)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 20 }}>
            <Icon name="info" size={28} />
          </div>
          <h2 style={{ fontSize: 28, fontWeight: 600, margin: "0 0 12px" }}>我们如何处理你的内容</h2>
          <p style={{ fontSize: 17, color: "var(--text-secondary)", lineHeight: 1.7, margin: 0 }}>
            Ta说 采用<strong style={{ color: "var(--text-primary)" }}>合规的 AI 技术</strong>为你生成分析，你的截图与文字<strong style={{ color: "var(--text-primary)" }}>仅用于本次分析、不作留存</strong>。本服务仅供娱乐参考，结果不构成任何建议，由此产生的后果概不负责。
          </p>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: "0 32px 80px" }}>
        <div style={{ maxWidth: 1120, margin: "0 auto", background: "var(--ink-900)", borderRadius: "var(--radius-2xl)", padding: "56px 40px", textAlign: "center" }}>
          <h2 style={{ fontSize: 32, fontWeight: 700, color: "var(--ink-50)", letterSpacing: "-0.02em", margin: "0 0 12px" }}>下一次拿不准怎么回，先问问它</h2>
          <p style={{ fontSize: 17, color: "var(--ink-300)", margin: "0 0 28px" }}>注册即送 20 次，读懂 Ta 没说出口的那句话。</p>
          <Button variant="primary" size="lg" onClick={() => onNav("app")}>免费开始</Button>
        </div>
      </section>

      <Footer onNav={onNav} />
    </main>
  );
}

function Footer({ onNav }) {
  return (
    <footer style={{ borderTop: "1px solid var(--border-subtle)", padding: "32px", }}>
      <div style={{ maxWidth: 1120, margin: "0 auto", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
        <Logo size={24} />
        <div style={{ display: "flex", gap: 24, fontSize: 13, color: "var(--text-tertiary)" }}>
          <a href="./legal/terms.html" target="_blank" rel="noopener" style={{ cursor: "pointer", color: "inherit" }}>用户协议</a>
          <a href="./legal/privacy.html" target="_blank" rel="noopener" style={{ cursor: "pointer", color: "inherit" }}>隐私政策</a>
          <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" style={{ cursor: "pointer", color: "inherit" }}>豫ICP备2026030579号</a>
          <span>© 2026 Ta说</span>
        </div>
      </div>
    </footer>
  );
}
Object.assign(window, { Landing, Footer });