/* Reeve — IM direction canvas. Brand zone + one big interactive IM phone
   (chat list ⇄ conversations, hold-to-approve, quick chips, typing replies)
   + a supporting grid of the rest of the system (cold-start, profile, H5). */
const EMB = window.EMBER;

function BrandZoneIM() {
  const kws = ["每条线 = 一个会话", "Reeve 给你发消息", "随时回他", "长按拍板", "移动端原生"];
  return (
    <div className="brandzone">
      <div className="bz-left">
        <div className="bz-mk"><ReeveMark size={54} stroke={1.7} /><span className="bz-word">Reeve</span></div>
        <div className="bz-slogan">每条线都是<em>一个对话。</em></div>
        <div className="bz-en">每条 thread 都像 IM 里的一个会话 —— Reeve 替你跟进，到该你拍板时给你发条消息，你随时能回他、改他、拦他。</div>
        <div className="bz-kw">{kws.map((k, i) => <span key={i}>{k}</span>)}</div>
        <div className="bz-tokens">
          <span className="bz-sw"><i style={{ background: "var(--accent)" }} />Accent</span>
          <span className="bz-sw"><i style={{ background: "var(--accent-b)" }} />Secondary</span>
          <span className="bz-tdiv" />
          <span className="bz-font">Source Serif 4</span>
          <span className="bz-font sub">JetBrains Mono</span>
        </div>
      </div>
      <div className="bz-right">
        <div className="appicon dir-icon-glass"><ReeveMark size={64} stroke={1.7} /></div>
        <div className="appicon-cap">App Icon</div>
      </div>
    </div>);

}

function HeroPhone() {
  return (
    <section className="cs-feature im-hero">
      <div className="cs-caption">
        <div className="cs-tag">完整可点击 · IM 模型</div>
        <h3>点开任意会话，Reeve 把整条线讲给你听 —— 客户的邮件、它的判断、替你拟的草稿，都在对话里。</h3>
        <p>试一下：点 <b>Sherrell</b> → 从她的第一封邮件开始，<b>逐步往下推进</b>（每批准一步，Reeve 才把下一封 + 下一张卡片放出来）。邮件和动作<b>合在一张卡片里</b>，长按批准或在卡片里改。底部四个 Tab：<b>消息 / 邮箱 / 文档库 / 我</b> —— 邮箱是 Gmail 式收件箱，可<b>复核 Reeve 有没有漏处理</b>；文档库收着 Reeve 跟进时引用的资料。</p>
        <div className="cs-flowdots">{["会话列表", "逐步推进", "卡内拍板", "邮箱复核", "文档库"].map((s, i) => <span key={i}>{s}</span>)}</div>
        <p className="cs-src">真实线索 · {EMB.SRC} · 健康险 agent Demarco / 客户 Sherrell</p>
      </div>
      <div className="cs-phonewrap im-hero-phone"><Phone styleId="glass"><ReeveIMApp /></Phone></div>
    </section>);

}

/* cold-start that completes INTO the live IM home */
function ColdStartFlow() {
  const [entered, setEntered] = React.useState(false);
  return entered ? <ReeveIMApp /> : <ColdStart onEnterApp={() => setEntered(true)} />;
}

/* cold-start promoted to its own hero demo machine: 登录 → 连接 → 进首页 */
function ColdStartHero() {
  return (
    <section className="cs-feature im-hero">
      <div className="cs-caption">
        <div className="cs-tag">注册登录 · 冷启动 · 完整状态机</div>
        <h3>第一次打开 Reeve：<b>登录 → 连接邮箱 → 进入首页</b>，一台机器走完整条路。</h3>
        <p>试一下：<b>点</b>「用 Apple 继续」或「用 Google 继续」登录 → <b>授权 Gmail</b> 看 Reeve <b>渐进式读懂你</b>（或退一步，转发一封到专属地址）→ <b>落到你刚看到的 IM 首页</b>。左上角 <b>↻</b> 可重头再走一遍。</p>
        <div className="cs-flowdots">{["Apple / Google 登录", "授权 Gmail（推荐）", "专属转发地址", "进入会话首页"].map((s, i) => <span key={i}>{s}</span>)}</div>
        <p className="cs-src">登录与连接模型对齐真实产品 · {EMB.SRC}</p>
      </div>
      <div className="cs-phonewrap im-hero-phone"><Phone styleId="glass"><ColdStartFlow /></Phone></div>
    </section>);
}

const SUPPORT = [
{ n: "02", t: "个人主页 · 授权 + 记忆 + 数据洞见", el: () => <ProfileScreen /> },
{ n: "03", t: "记忆 · Reeve 记住的偏好（可改）", el: () => <MemoryScreen /> },
{ n: "04", t: "对外 H5 · 客户侧 Reeve 助手", el: () => <ShareH5 /> }];


function SupportGrid() {
  return (
    <section className="canvas">
      <div className="cgroup-title"><b>其余系统 · 保留原样</b><span>个人主页 → 记忆 → 对外 H5</span></div>
      {SUPPORT.map((s) =>
      <div className="scell" key={s.n}>
          <div className="plabel"><b>{s.n}</b><span>{s.t}</span></div>
          <Phone styleId="glass">{s.el()}</Phone>
        </div>
      )}
    </section>);

}

const SCHEMES_IM = [
{ key: "daybreak", palette: ["#0b66d8", "#15a6c4", "#eef2f8"] },
{ key: "tide", palette: ["#0e8f9e", "#2f9e6f", "#eef4f3"] },
{ key: "dusk", palette: ["#5852db", "#8f70f2", "#f0eef7"] },
{ key: "iris", palette: ["#6a4fd6", "#3a9fd8", "#f0edf8"] },
{ key: "grove", palette: ["#2e7556", "#5f9f7a", "#e9efe9"] },
{ key: "amber", palette: ["#b5652a", "#d98a3f", "#f3ece1"] }];

const TW_IM = { palette: ["#0b66d8", "#15a6c4", "#eef2f8"], dark: false, grid: true };

function AppIM() {
  const [t, setTweak] = useTweaks(TW_IM);
  React.useEffect(() => {
    const p = t.palette || [];
    const s = SCHEMES_IM.find((x) => x.palette[0] === p[0]) || SCHEMES_IM[0];
    document.body.dataset.scheme = s.key;
  }, [t.palette]);
  React.useEffect(() => {document.body.classList.toggle("dark-im", t.dark !== false);}, [t.dark]);
  React.useEffect(() => {document.body.classList.toggle("no-grid", !t.grid);}, [t.grid]);
  return (
    <div className="wrap">
      <div className="zoomable">
        <header className="pagehead">
          <div className="ph-eyebrow">Reeve · IM 方向 · 高保真移动端原型</div>
          <h1 className="ph-title">把每条 thread 做成<em>一个对话</em> —— Reeve 替你跟进，到该你拍板时给你发条消息。</h1>
          <p className="ph-sub">像 WhatsApp：首页是会话列表，<b>等你拍板</b> 的置顶高亮。点进任一会话，Reeve 把客户邮件、判断、草稿都讲给你；你 <b>长按批准</b> 发出，或随时打字回他、改他、拦他。全部来自真实线索 <b>{EMB.SRC}</b>。右上角 Tweaks 换场景配色。</p>
        </header>
        <section className="direction dir-glass" data-screen-label="Reeve IM">
          <BrandZoneIM />
          <HeroPhone />
          <ColdStartHero />
          <SupportGrid />
        </section>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="主题" />
        <TweakToggle label="深色模式·交互机" value={t.dark !== false} onChange={(v) => setTweak("dark", v)} />
        <TweakSection label="场景配色 · 主色 + 次色 + 冷中性（同时决定「新建会话」暗色 composer 的主题色）" />
        <TweakColor label="配色方案" value={t.palette} options={SCHEMES_IM.map((s) => s.palette)} onChange={(v) => setTweak("palette", v)} />
        <TweakSection label="画布" />
        <TweakToggle label="网格背景" value={t.grid} onChange={(v) => setTweak("grid", v)} />
      </TweaksPanel>
    </div>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<AppIM />);