/* global React, window */
// Design rationale drawer — left side, narrow.

function RationaleDrawer({ open, onClose }) {
  const { Icon } = window;
  const t = window.useT();
  if (open === undefined) return null;
  return (
    <>
      <div className={"drawer-scrim " + (open ? "open" : "")} onClick={onClose} />
      <aside className={"drawer rationale " + (open ? "open" : "")} style={{ left: 0, right: "auto", transform: open ? "translateX(0)" : "translateX(-100%)", boxShadow: "1px 0 0 var(--rule-strong), 20px 0 60px rgba(26,20,16,0.12)" }}>
        <div style={{ padding: "14px 22px", borderBottom: "1px solid var(--rule)", display: "flex", alignItems: "center", gap: 10 }}>
          <button className="btn ghost icon" onClick={onClose}><Icon name="close" /></button>
          <div>
            <div className="label">{t("Reading guide", "阅读指南")}</div>
            <div className="t-h2">{t("Design rationale", "设计思路")}</div>
          </div>
        </div>
        <div style={{ overflow: "auto", padding: "22px 28px 60px" }}>
          <div className="eyebrow">{t("Take-home brief · v2", "命题作业 · 第二版")}</div>
          <h2 className="t-h1" style={{ margin: "4px 0 0" }}>
            {t("Atria's", "Atria 的")} <em>{t("Radar → Image Gen", "Radar → 出图")}</em> {t("flow.", "流程。")}
          </h2>
          <p style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.6, marginTop: 12 }}>
            {t(
              "A redesign of the path a performance marketer walks from a graded ad on the Radar screen to four image variants ready to push back to the ad platform. Five screens, six critical interactions — plus seven optimization moves the second draft makes on top of the first.",
              "重新设计了一条路径:广告投放人员从 Radar 页面看到一条评级广告,一路走到「4 张可以推回投放平台的图片变体」。5 个屏幕,6 个关键交互 —— 加上第二版在第一版基础上做的 7 个优化动作。"
            )}
          </p>

          <Block n="01" title={t("Five critical problems we picked", "我们挑出来的 5 个关键问题")} body={[
            t(
              "Iterations leave the surface · users open a new tab and lose the diagnosis context.",
              "迭代会让用户离开当前界面 · 在新标签页打开,失去诊断上下文。"
            ),
            t(
              "Single-shot iteration only · no way to act on 5 recommendations at once.",
              "只能逐条迭代 · 没办法一次对 5 条建议都动手。"
            ),
            t(
              "Generation is blocking · the marketer has to babysit a 30-60s wait, or lose progress.",
              "生成过程会卡住用户 · 营销人要么干等 30-60 秒,要么离开就丢进度。"
            ),
            t(
              'Video ads are a dead end · no path beyond "recommendation only".',
              "视频广告是个死胡同 · 除了「仅文字建议」之外没别的路。"
            ),
            t(
              "Variants page is a gallery, not a decision tool · no scoring, no comparison, no push.",
              "变体页只是个画廊,不是决策工具 · 没有评分、没有对比、没有推回投放。"
            ),
          ]} />

          <Block n="02" title={t("The five moves", "对应的 5 个动作")} body={[
            t(
              "Detail becomes a drawer · keep Radar visible, never lose the row you came from.",
              "详情改成抽屉 · Radar 一直在背景里,绝不会丢失「你是从哪一行点进来的」。"
            ),
            t(
              "Checkboxes + sticky batch bar · 1 → N iterations via the same context review.",
              "勾选框 + 底部常驻批量横条 · 走同一个上下文审核流程,从 1 条扩展到 N 条迭代。"
            ),
            t(
              "Global Tasks inbox · running work follows you anywhere; click a completed task to land on the right variant page.",
              "全局任务收件箱 · 进行中的工作跟着你到任何屏幕;点已完成的任务直接跳到对应的变体页。"
            ),
            t(
              'Video ads get two explicit paths · "Apply to copy / overlay" or "Export brief for editor". No dead end.',
              "视频广告给两条明确的路 · 「应用到文案 / 字幕叠加」或「导出 brief 给剪辑师」。不再是死胡同。"
            ),
            t(
              "Variants page gets a metric-delta chip, side-by-side compare, and a push-to-platform bar — selection is the unit, not browsing.",
              "变体页加了指标涨幅小标签、并排对比、以及一条推回投放横条 —— 操作单元是「选中」,不是「浏览」。"
            ),
          ]} />

          <Block n="03" title={t("Seven moves the second draft adds", "第二版增加的 7 个动作")} body={[
            t(
              "Radar row gets verb-as-button · Pause / Scale / Iterate / Refresh each has its own row-end action. Pause/Scale confirm inline; no drawer required.",
              "Radar 每一行最右侧多一个动词按钮 · Pause / Scale / Iterate / Refresh 各自对应不同的动作。Pause/Scale 直接在行内确认,不开抽屉。"
            ),
            t(
              'AI Rec drawer leads with one hero recommendation · the other four collapse under "more moves". Default path is fast; batch path is still one click away.',
              "AI 建议抽屉默认只显示一条主推建议 · 其余 4 条折叠在「更多动作」下面。默认路径快;批量路径也只多一次点击。"
            ),
            t(
              "Each recommendation declares its action_kind · image_gen, copy_overlay, targeting_change, video_edit — and routes to a kind-specific flow instead of pretending they're all image generation.",
              "每条建议都标记自己的 action_kind(动作类型) · 出图、换文案、调受众、剪视频 —— 走各自的流程,不再假装所有建议都是图片生成。"
            ),
            t(
              'AI score → metric delta · we show "+38% CTR" with a confidence-aware popover (baseline, projected, basis, dot scale). No black-box number.',
              "黑盒 AI 分数 → 指标涨幅 · 显示「+38% CTR」+ 悬停弹出置信度小卡(基线、预测值、样本量、置信点)。没有黑盒数字。"
            ),
            t(
              "Variants compare is derived, not modal · selection precedes mode; pick 2-3 cards and the Compare button lights up in the sticky bar.",
              "「对比」是「选中」的副作用,不是独立模式 · 先选中,模式自然发生;选 2-3 张卡,底部横条的「对比」按钮就会亮起来。"
            ),
            t(
              "Iteration badge becomes a real entry point · hover shows thumbnails + status, click jumps to that ad's iteration history.",
              "迭代徽标变成真正的入口 · 悬停显示缩略图 + 状态,点击跳到这条广告的完整迭代历史。"
            ),
            t(
              "Type ladder enforced · 5 sizes across 5 screens (Display 56 / H1 36 / H2 22 / H3 17 / Body 13) — editorial discipline replaces ad-hoc serif sizes.",
              "字号阶梯严格执行 · 5 个屏幕统一 5 档字号(Display 56 / H1 36 / H2 22 / H3 17 / Body 13)—— 用刊体设计的纪律性,取代之前各处随手用的衬线字号。"
            ),
          ]} />

          <Block n="04" title={t("Three trade-offs we made", "我们接受的 3 个取舍")} body={[
            t(
              "Drawer at 60% leaves the table peripherally readable but hides the rightmost ROAS column on narrow screens. Acceptable — the drawer is where the decision happens.",
              "抽屉占 60% 宽,表格还能边缘可读,但窄屏上会盖住最右的 ROAS 列。可以接受 —— 决策发生在抽屉里。"
            ),
            t(
              "The metric-delta chip is a single number with confidence dots, not a full forecast. It's a prior, not a guarantee — labelled as such.",
              "指标涨幅小标签是一个带置信点的数字,不是完整预测。它是先验,不是保证 —— 文案上也是这么写的。"
            ),
            t(
              'We don\'t separately surface "Iterate ads" as a top-level Creation route. Iteration is the act, not a destination — Tasks is the destination, Variants is the artifact.',
              "我们没在创意菜单里专门做「迭代广告」的顶级入口。迭代是「动作」,不是「目的地」 —— 任务面板是目的地,变体页是产物。"
            ),
          ]} />

          <Block n="05" title={t("What the prototype demonstrates", "原型演示了什么")} body={[
            t(
              "TC-01 · Open ad → Hero rec shows the top move → one click runs that move's kind-specific flow.",
              "TC-01 · 打开广告 → 主推建议显示头条动作 → 一点就跑对应类型的流程。"
            ),
            t(
              'TC-02 · Toggle "Run multiple moves" → check 3 (mixed kinds) → one context review → mixed sync + async execution.',
              "TC-02 · 切到「同时跑多条」→ 勾选 3 条(类型混合)→ 一次上下文审核 → 同步 + 异步混合执行。"
            ),
            t(
              "TC-03 · Leave to any screen → Tasks badge updates → click a completed task → jump straight to its Variants.",
              "TC-03 · 切到任意屏幕 → 任务徽标实时更新 → 点已完成任务 → 直接跳到对应的变体页。"
            ),
            t(
              "TC-04 · Open a video ad → two explicit paths surface, not a greyed-out CTA.",
              "TC-04 · 点开视频广告 → 出现两条明确的路径,而不是灰掉的按钮。"
            ),
            t(
              "TC-07 · Pick 2-3 variant cards → Compare button activates → side-by-side renders with original.",
              "TC-07 · 勾选 2-3 张变体卡 → 对比按钮激活 → 与原图并排展示。"
            ),
            t(
              'TC-11 · After variants come back, the Radar row badges "N iterations" — hover preview, click history.',
              "TC-11 · 变体生成完之后,Radar 行上挂出「N 次迭代」徽标 —— 悬停看预览,点击看历史。"
            ),
          ]} />

          <div className="hr" style={{ margin: "28px 0 18px" }} />
          <div className="label">{t("Off-screen", "幕后说明")}</div>
          <p style={{ fontSize: 12, color: "var(--ink-3)", lineHeight: 1.55, marginTop: 6 }}>
            {t(
              "Images are striped placeholders by design — we don't have real product photography for the mock brand and faking it would be worse than naming what's missing. Brand is renamed",
              "图片故意用条纹占位 —— 假品牌没有真实产品摄影,用素材库假装会比明说「这里少东西」更糟。品牌名改成了"
            )}
            <em> Lipsum</em>{t(" to avoid recreating Atria's actual customer surface.", ",以避免复刻 Atria 真实客户的界面。")}
          </p>
        </div>
      </aside>
    </>
  );
}

function Block({ n, title, body }) {
  return (
    <section style={{ marginTop: 28 }}>
      <div style={{ display: "flex", gap: 14, alignItems: "baseline" }}>
        <div className="t-h2" style={{ color: "var(--ink-3)", fontSize: 28 }}>{n}</div>
        <h3 className="t-h2" style={{ margin: 0 }}>{title}</h3>
      </div>
      <ul style={{ paddingLeft: 0, listStyle: "none", margin: "10px 0 0" }}>
        {body.map((b, i) => (
          <li key={i} style={{ display: "flex", gap: 10, padding: "8px 0", borderTop: i === 0 ? "1px solid var(--rule)" : "none", borderBottom: "1px solid var(--rule)" }}>
            <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)", paddingTop: 3, minWidth: 18 }}>{String(i + 1).padStart(2, "0")}</span>
            <span style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5 }}>{b}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

Object.assign(window, { RationaleDrawer });