;(function() {
  'use strict';

  // ─── Data ─────────────────────────────────
  const AGENTS = [
    { mark: 'TR', name_en: 'Triage', name_zh: '前台分流', role_en: 'Routes inquiries to the right agent or human.', role_zh: '把咨询路由到正确的 agent 或真人。' },
    { mark: 'TL', name_en: 'Trial', name_zh: '试听管家', role_en: 'Books trials and sends reminders.', role_zh: '预约试听并发送提醒。' },
    { mark: 'CR', name_en: 'CRM', name_zh: 'CRM 助手', role_en: 'Updates pipeline and writes follow-up notes.', role_zh: '更新销售管道并写跟进备注。' },
    { mark: 'BL', name_en: 'Billing', name_zh: '账单', role_en: 'Handles invoices, refunds, and payment retries.', role_zh: '处理发票、退款与失败重试。' },
    { mark: 'MK', name_en: 'Makeup', name_zh: '补课', role_en: 'Tracks makeup credits and offers slots.', role_zh: '跟踪补课额度并推荐时段。' },
    { mark: 'RN', name_en: 'Renewal', name_zh: '续约', role_en: 'Detects at-risk families and runs win-back.', role_zh: '识别流失风险并触发挽回。' },
    { mark: 'RC', name_en: 'Recital', name_zh: '汇报演出', role_en: 'Coordinates programs, photos, and parent comms.', role_zh: '协调节目单、照片与家长沟通。' }
  ];

  const FEED = [
    { t: '0.2s', a: 'TR', body_en: 'New WeChat inquiry from Wang — routed to Trial agent.', body_zh: '新微信咨询（Wang 家长）→ 已转给试听管家。', tag: 'lead' },
    { t: '4s', a: 'TL', body_en: 'Trial booked: Sat 11:00 with Sophie Chan, piano.', body_zh: '试听已预约：周六 11:00，Sophie Chan，钢琴。', tag: 'lead' },
    { t: '9s', a: 'CR', body_en: 'CRM: created lead "Wang Family" — source WeChat, score 78.', body_zh: 'CRM：创建线索"Wang 家"——来源微信，评分 78。', tag: 'crm' },
    { t: '22s', a: 'BL', body_en: 'Stripe retry succeeded for Liu — $360 captured.', body_zh: 'Stripe 重试成功（Liu 家）——已扣款 $360。', tag: 'crm' },
    { t: '38s', a: 'MK', body_en: 'Makeup credit issued to Park (24h notice cancellation).', body_zh: '补课额度已发放（Park 家，24 小时前取消）。', tag: 'recept' },
    { t: '1m', a: 'TR', body_en: 'After-hours call → AI receptionist answered in Mandarin.', body_zh: '非工作时间来电 → AI 前台用中文接听。', tag: 'recept' },
    { t: '2m', a: 'CR', body_en: 'Trial-to-enrollment moved: Chen → "Pending contract".', body_zh: '阶段流转：Chen → "待签约"。', tag: 'crm' },
    { t: '3m', a: 'RN', body_en: 'Renewal risk: Kim (-2 attendance) — outreach drafted for owner review.', body_zh: '续约风险：Kim（连续缺 2 次）——已起草外呼，待 Owner 审核。', tag: 'crm' },
    { t: '4m', a: 'TL', body_en: 'Reminder sent: trial tomorrow 10:30 — confirm reply Y/N.', body_zh: '提醒已发送：明天 10:30 试听——回复 Y/N 确认。', tag: 'lead' },
    { t: '6m', a: 'BL', body_en: 'Invoice generated for May term, 12 families, $14,820 total.', body_zh: '5 月学期账单已生成，共 12 户，合计 $14,820。', tag: 'crm' },
    { t: '8m', a: 'TR', body_en: 'Question: "Is theory required for Grade 7 RCM?" → answered + linked policy.', body_zh: '问题："7 级 RCM 必须考乐理吗？" → 已回答并附政策链接。', tag: 'recept' },
    { t: '11m', a: 'RC', body_en: 'Recital draft: 14 students, 28 minutes — Owner please confirm order.', body_zh: '汇报演出草稿：14 位学生，28 分钟——请 Owner 确认顺序。', tag: 'recept' },
    { t: '14m', a: 'CR', body_en: 'Note added: parent prefers Saturday morning, sibling discount mentioned.', body_zh: '备注：家长偏好周六上午，提到兄弟姐妹折扣。', tag: 'crm' },
    { t: '18m', a: 'MK', body_en: 'Makeup booked: Tanaka, Wed 17:00, with Hiro.', body_zh: '补课已预约：Tanaka，周三 17:00，Hiro 老师。', tag: 'recept' },
    { t: '23m', a: 'TL', body_en: 'No-show flagged: Rodriguez missed 10:00 trial — re-engage drafted.', body_zh: '未到标记：Rodriguez 错过 10:00 试听——已起草再邀约。', tag: 'lead' },
    { t: '29m', a: 'BL', body_en: 'Refund issued: 14-day window, less 15% admin fee.', body_zh: '已退款：14 天窗口期，扣 15% 管理费。', tag: 'crm' },
    { t: '34m', a: 'TR', body_en: 'Spam filtered: 7 bot inquiries auto-archived overnight.', body_zh: '垃圾过滤：夜间自动归档 7 条机器人咨询。', tag: 'lead' },
    { t: '41m', a: 'RN', body_en: 'Win-back email queued for Singh family (lapsed Mar).', body_zh: '挽回邮件已排队（Singh 家，3 月流失）。', tag: 'crm' },
    { t: '47m', a: 'RC', body_en: 'Photo selection done — 38 keepers from recital, parents notified.', body_zh: '照片精选完成——汇报演出 38 张优选，家长已通知。', tag: 'recept' },
    { t: '52m', a: 'CR', body_en: 'Daily digest sent: 6 leads, 3 trials, 2 enrollments, $4,920 collected.', body_zh: '每日简报已发送：6 线索、3 试听、2 入学、回款 $4,920。', tag: 'crm' }
  ];

  const FILTERS = [
    { id: 'all', en: 'All', zh: '全部' },
    { id: 'lead', en: 'Lead', zh: '线索' },
    { id: 'crm', en: 'CRM', zh: 'CRM' },
    { id: 'recept', en: 'Receptionist', zh: '前台' },
    { id: 'seo', en: 'SEO', zh: 'SEO' },
    { id: 'aiseo', en: 'AI SEO', zh: 'AI SEO' }
  ];

  const WORKFLOWS = [
    { c: 'lead', name_en: 'WeChat → CRM lead', name_zh: '微信 → CRM 线索', desc_en: 'New WeChat / WhatsApp inquiry creates a lead with parent intent + program tag.', desc_zh: '新微信 / WhatsApp 咨询创建线索，附带家长意图与课程标签。', trig: 'webhook' },
    { c: 'lead', name_en: 'PDF inquiry parser', name_zh: 'PDF 咨询解析', desc_en: 'Reads StudentRegistrationForm PDFs and pre-fills CRM record.', desc_zh: '读取学生登记表 PDF，预填 CRM 记录。', trig: 'email' },
    { c: 'lead', name_en: 'Trial reminder + reschedule', name_zh: '试听提醒与改期', desc_en: 'T-24h SMS + email; Y/N reply auto-confirms or offers new slot.', desc_zh: '试听前 24h 发短信 + 邮件；Y/N 回复自动确认或改期。', trig: 'cron' },
    { c: 'crm', name_en: 'Trial → enrollment hand-off', name_zh: '试听 → 入学交接', desc_en: 'After trial, drafts contract + Stripe link; Owner clicks to send.', desc_zh: '试听后起草合同与 Stripe 链接；Owner 一键发送。', trig: 'event' },
    { c: 'crm', name_en: 'Stage timer & nudges', name_zh: '阶段计时与提醒', desc_en: 'Lead stuck > 72h → owner gets a one-click nudge draft.', desc_zh: '阶段停滞 > 72h → Owner 收到一键催进草稿。', trig: 'cron' },
    { c: 'crm', name_en: 'At-risk renewal', name_zh: '续约风险', desc_en: 'Detects 2 missed lessons or late payment, drafts win-back.', desc_zh: '识别连续缺课或延迟付款，起草挽回。', trig: 'event' },
    { c: 'crm', name_en: 'Daily owner digest', name_zh: '每日 Owner 简报', desc_en: 'Pipeline movement + revenue + top 3 actions, sent 7am.', desc_zh: '管道流转 + 收入 + 三件事，每天 7:00 发送。', trig: 'cron' },
    { c: 'recept', name_en: 'After-hours AI receptionist', name_zh: '非工作时间 AI 前台', desc_en: 'Answers in EN/中文, books trials, escalates to owner if needed.', desc_zh: '中英文应答，预约试听，必要时升级给 Owner。', trig: 'voice' },
    { c: 'recept', name_en: 'Makeup credit policy', name_zh: '补课额度政策', desc_en: '24h notice → 1 credit; auto-emails alternative slots.', desc_zh: '提前 24h → 1 次额度；自动推荐替代时段。', trig: 'event' },
    { c: 'recept', name_en: 'Refund policy bot', name_zh: '退款政策助手', desc_en: 'Applies 14-day refund less 15% admin fee, books call if disputed.', desc_zh: '执行 14 天 -15% 管理费规则，争议时安排沟通。', trig: 'event' },
    { c: 'recept', name_en: 'Stripe retry & dunning', name_zh: 'Stripe 重试与催收', desc_en: 'Smart retries + parent-friendly reminders before late fee.', desc_zh: '智能重试 + 友好提醒，避免直接收滞纳金。', trig: 'cron' },
    { c: 'seo', name_en: 'Local landing page generator', name_zh: '本地落地页生成', desc_en: 'Writes neighborhood + instrument pages from a single brief.', desc_zh: '一份 brief 生成"片区 + 乐器"组合落地页。', trig: 'manual' },
    { c: 'seo', name_en: 'Review → content pipeline', name_zh: '评论 → 内容流水线', desc_en: 'Turns 5★ reviews into testimonials, FAQs, and IG posts.', desc_zh: '5★ 评论自动转为见证、FAQ 与 IG 贴文。', trig: 'event' },
    { c: 'seo', name_en: 'GBP post + photo refresh', name_zh: 'Google 商家档案更新', desc_en: 'Weekly Google Business posts with recital photos and seasonal hooks.', desc_zh: '每周更新 Google 商家档案，附演出照片与季节话题。', trig: 'cron' },
    { c: 'aiseo', name_en: 'AI Overview answer prep', name_zh: 'AI Overview 答案预设', desc_en: 'Writes the canonical answer for "best music school in Vancouver".', desc_zh: '为"温哥华最好的音乐学校"等查询写好标准答案。', trig: 'manual' },
    { c: 'aiseo', name_en: 'Schema + entity graph', name_zh: '结构化数据与实体图', desc_en: 'Maintains Course / FAQ / LocalBusiness schema across pages.', desc_zh: '维护 Course / FAQ / LocalBusiness 结构化数据。', trig: 'cron' },
    { c: 'aiseo', name_en: 'ChatGPT / Perplexity sourcing', name_zh: 'ChatGPT / Perplexity 引用', desc_en: 'Optimizes pages so AI assistants cite Mastery School.', desc_zh: '优化页面让 AI 助手引用 Mastery School。', trig: 'manual' },
    { c: 'aiseo', name_en: 'Competitor delta watch', name_zh: '竞品差异监控', desc_en: 'Tracks competitor pricing/program changes weekly.', desc_zh: '每周监控竞品价格 / 课程变化。', trig: 'cron' }
  ];

  const STACK = [
    { mark: 'OC', name: 'OpenClaw', role_en: 'Our agent runtime — powers Triage / Trial / CRM agents.', role_zh: '我们的 agent 运行时——驱动 Triage / Trial / CRM 等 agent。', native: true, badge: 'NATIVE' },
    { mark: 'HM', name: 'Hermes', role_en: 'Our MCP layer — agents get tools without bespoke glue code.', role_zh: '我们的 MCP 层——agent 拿到工具能力，不写胶水代码。', native: true, badge: 'NATIVE MCP' },
    { mark: 'DG', name: 'deploygrow', role_en: 'Our orchestration — schedules, queues, observability.', role_zh: '我们的编排平台——调度、队列、可观测性。', native: true, badge: 'NATIVE' },
    { mark: 'N8', name: 'n8n', role_en: 'Event-driven workflows we author for the school.', role_zh: '我们为学校编写的事件驱动工作流。', native: false, badge: 'WORKFLOW' },
    { mark: 'FA', name: 'FastAPI', role_en: 'Custom Python endpoints when an agent needs domain logic.', role_zh: '需要业务逻辑时的自建 Python 接口。', native: false, badge: 'CUSTOM API' },
    { mark: 'MC', name: 'MCP', role_en: 'Open protocol so any tool plugs in cleanly.', role_zh: '开放协议——任何工具都能干净接入。', native: false, badge: 'PROTOCOL' },
    { mark: 'OA', name: 'OpenAI', role_en: 'Reasoning + structured output for sales conversations.', role_zh: '销售对话的推理与结构化输出。', native: false, badge: 'LLM' },
    { mark: 'CL', name: 'Claude', role_en: 'Long-context reading and policy reasoning.', role_zh: '长上下文阅读与政策推理。', native: false, badge: 'LLM' },
    { mark: 'ST', name: 'Stripe', role_en: 'Subscriptions, invoices, refunds, retries.', role_zh: '订阅、发票、退款、重试。', native: false, badge: 'PAYMENTS' },
    { mark: 'CC', name: 'Cal.com', role_en: 'Calendar booking for trials and makeups.', role_zh: '试听与补课的日程预约。', native: false, badge: 'CALENDAR' },
    { mark: 'RS', name: 'Resend', role_en: 'Transactional email for parents and teachers.', role_zh: '面向家长与教师的事务邮件。', native: false, badge: 'EMAIL' },
    { mark: 'TW', name: 'Twilio', role_en: 'SMS + voice for AI receptionist.', role_zh: 'AI 前台的短信与语音。', native: false, badge: 'SMS / VOICE' },
    { mark: 'WX', name: 'WeChat', role_en: 'Inbound parent inquiries from China-side audience.', role_zh: '中文家长来源的咨询入口。', native: false, badge: 'CHANNEL' },
    { mark: 'DS', name: 'DocuSeal', role_en: 'E-signatures for contracts and waivers.', role_zh: '合同与授权书的电子签名。', native: false, badge: 'E-SIGN' },
    { mark: 'CF', name: 'Cloudflare', role_en: 'Edge hosting + Pages deploys for the school site.', role_zh: '学校官网的边缘托管与 Pages 部署。', native: false, badge: 'HOSTING' }
  ];

  function PageAIAgentsLive(props) {
    const { dark, lang = 'en', headingFont = 'sans' } = props;
    const p = palette(dark);
    const T = (en, zh) => lang === 'en' ? en : zh;
    const [filter, setFilter] = React.useState('all');
    const visible = filter === 'all' ? FEED : FEED.filter(r => r.tag === filter);
    const cap = Math.min(visible.length, 14);

    return (
      <Page dark={dark}>
        <Header dark={dark} lang={lang} active="" headingFont={headingFont} />
        <div style={{ padding: '64px 80px 80px', flex: 1 }}>
          <Mono dark={dark} style={{ marginBottom: 16, display: 'inline-block' }}>{T('AI AGENTS · LIVE', 'AI AGENT · 实时')}</Mono>
          <H as="h1" dark={dark} font={headingFont} size={46} style={{ marginBottom: 16, maxWidth: 800 }}>
            {T('Seven agents running your school right now.', '7 个 agent，正在运营你的学校。')}
          </H>
          <p style={{ fontFamily: TOKENS.font.sans, fontSize: 15, color: p.inkSoft, lineHeight: 1.6, maxWidth: 720, margin: '0 0 56px' }}>
            {T(
              'These are the same agents we use on our own business every day — answering parents in WeChat, booking trials, retrying failed Stripe payments, drafting renewal outreach. The list on the right is real activity from the last hour.',
              '我们自己每天就在用这套 agent——在微信回家长、预约试听、重试失败扣款、起草续约外呼。右侧是过去 1 小时的真实活动。'
            )}
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 48 }}>
            {[
              { val: '142', lbl: T('Auto-replies / week', '每周自动回复') },
              { val: '70%', lbl: T('Trial → enrollment conversion', '试听 → 入学转化') },
              { val: '11h', lbl: T('Owner time saved / week', 'Owner 每周节省时长') }
            ].map((k, i) => (
              <Card key={i} dark={dark} padding={28}>
                <H as="div" dark={dark} font={headingFont} size={38} style={{ marginBottom: 8 }}>{k.val}</H>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.inkSoft }}>{k.lbl}</div>
              </Card>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginBottom: 28 }}>
            <Card dark={dark} padding={36}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
                <H as="h3" dark={dark} font={headingFont} size={24}>{T('The seven agents', '7 个 agent')}</H>
                <Mono dark={dark}>RUNTIME · OPENCLAW</Mono>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, marginBottom: 24 }}>
                {AGENTS.map(a => (
                  <div key={a.mark} style={{ background: p.paperSoft, border: `0.5px solid ${p.line}`, borderRadius: TOKENS.radius.sm, padding: '16px 18px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
                      <div style={{ width: 28, height: 28, borderRadius: '50%', background: p.gold, color: '#fff', fontFamily: TOKENS.font.mono, fontSize: 11, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        {a.mark}
                      </div>
                      <H as="div" dark={dark} font={headingFont} size={18}>{T(a.name_en, a.name_zh)}</H>
                    </div>
                    <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.inkSoft, lineHeight: 1.4 }}>{T(a.role_en, a.role_zh)}</div>
                  </div>
                ))}
              </div>
              <div style={{ fontFamily: TOKENS.font.mono, fontSize: 11, color: p.inkMuted, marginTop: 24, padding: '16px 20px', background: p.paperSoft, borderRadius: TOKENS.radius.sm }}>
                {T('Note: We swap models per agent — Claude for policy, GPT for sales tone.', '注：我们按 agent 选模型——政策类用 Claude，销售口吻用 GPT。')}
              </div>
            </Card>

            <Card dark={dark} padding={36}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
                <H as="h3" dark={dark} font={headingFont} size={24}>{T('Live activity', '实时活动')}</H>
                <Mono dark={dark}>LAST 60 MIN</Mono>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 24 }}>
                {FILTERS.map(f => (
                  <button key={f.id} onClick={() => setFilter(f.id)} style={{
                    background: filter === f.id ? p.ink : p.paperSoft,
                    color: filter === f.id ? p.paper : p.ink,
                    border: `0.5px solid ${filter === f.id ? p.ink : p.line}`,
                    borderRadius: 999, padding: '6px 14px',
                    fontFamily: TOKENS.font.sans, fontSize: 12, fontWeight: 500,
                    cursor: 'pointer', transition: 'all 0.15s ease'
                  }}>
                    {T(f.en, f.zh)}
                  </button>
                ))}
              </div>
              <div>
                {visible.slice(0, cap).map((r, i) => {
                  const ag = AGENTS.find(x => x.mark === r.a);
                  return (
                    <div key={i} style={{ display: 'grid', gridTemplateColumns: '50px 32px 1fr auto', gap: 12, padding: '12px 0', borderBottom: i === cap - 1 ? 'none' : `0.5px solid ${p.line}` }}>
                      <div style={{ fontFamily: TOKENS.font.mono, fontSize: 10, color: p.inkSoft, paddingTop: 4 }}>{r.t}</div>
                      <div style={{ width: 26, height: 26, borderRadius: '50%', background: p.gold, color: '#fff', fontFamily: TOKENS.font.mono, fontSize: 10, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{r.a}</div>
                      <div>
                        <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, lineHeight: 1.5, color: p.ink }}>{T(r.body_en, r.body_zh)}</div>
                        <div style={{ fontFamily: TOKENS.font.mono, fontSize: 10, color: p.inkSoft, letterSpacing: '0.04em', marginTop: 4 }}>{ag ? T(ag.name_en, ag.name_zh) : r.a}</div>
                      </div>
                      <div style={{ fontFamily: TOKENS.font.mono, fontSize: 10, color: p.inkMuted, paddingTop: 4 }}>#{r.tag}</div>
                    </div>
                  );
                })}
              </div>
            </Card>
          </div>
        </div>
        <Footer dark={dark} lang={lang} headingFont={headingFont} />
      </Page>
    );
  }

  function PageWorkflowsLibrary(props) {
    const { dark, lang = 'en', headingFont = 'sans' } = props;
    const p = palette(dark);
    const T = (en, zh) => lang === 'en' ? en : zh;
    const [filter, setFilter] = React.useState('all');
    const list = filter === 'all' ? WORKFLOWS : WORKFLOWS.filter(w => w.c === filter);

    return (
      <Page dark={dark}>
        <Header dark={dark} lang={lang} active="" headingFont={headingFont} />
        <div style={{ padding: '64px 80px 80px', flex: 1 }}>
          <Mono dark={dark} style={{ marginBottom: 16, display: 'inline-block' }}>{T('WORKFLOWS · LIBRARY', '工作流 · 模板库')}</Mono>
          <H as="h1" dark={dark} font={headingFont} size={46} style={{ marginBottom: 16, maxWidth: 800 }}>
            {T('18 workflows, ready to ship for your school.', '18 个工作流，开箱即用。')}
          </H>
          <p style={{ fontFamily: TOKENS.font.sans, fontSize: 15, color: p.inkSoft, lineHeight: 1.6, maxWidth: 720, margin: '0 0 48px' }}>
            {T(
              'Each workflow is something we already run on our own business. We adapt them to your policies (24h makeup, 14-day refund, monthly +3% service fee) and turn them on in week 1–2.',
              '每个工作流我们自己业务里就在跑。我们按你的政策（24 小时补课、14 天退款、月加 3% 服务费）调整，第 1–2 周就能上线。'
            )}
          </p>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 32 }}>
            {FILTERS.map(f => (
              <button key={f.id} onClick={() => setFilter(f.id)} style={{
                background: filter === f.id ? p.ink : p.paperSoft,
                color: filter === f.id ? p.paper : p.ink,
                border: `0.5px solid ${filter === f.id ? p.ink : p.line}`,
                borderRadius: 999, padding: '6px 14px',
                fontFamily: TOKENS.font.sans, fontSize: 12, fontWeight: 500,
                cursor: 'pointer', transition: 'all 0.15s ease'
              }}>
                {T(f.en, f.zh)}
              </button>
            ))}
          </div>

          <Card dark={dark} padding={0}>
            {list.map((w, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '100px 1fr 120px', gap: 16, padding: '16px 20px', borderTop: i === 0 ? 'none' : `0.5px solid ${p.lineSoft}`, alignItems: 'center' }}>
                <div style={{ fontFamily: TOKENS.font.mono, fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: p.gold }}>{w.c}</div>
                <div>
                  <div style={{ fontFamily: TOKENS.font.sans, fontSize: 14, fontWeight: 600, color: p.ink, marginBottom: 4 }}>{T(w.name_en, w.name_zh)}</div>
                  <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.inkSoft, lineHeight: 1.4 }}>{T(w.desc_en, w.desc_zh)}</div>
                </div>
                <div style={{ fontFamily: TOKENS.font.mono, fontSize: 11, color: p.inkSoft, textAlign: 'right' }}>{w.trig}</div>
              </div>
            ))}
          </Card>

          <div style={{ fontFamily: TOKENS.font.mono, fontSize: 11, color: p.inkMuted, marginTop: 40, padding: '16px 20px', background: p.paperSoft, borderRadius: TOKENS.radius.sm }}>
            {T(
              "Note: We don't hand you a Zapier login. We run these for you, monthly.",
              '注：我们不是丢给你一个 Zapier 账号——这些工作流我们按月帮你跑。'
            )}
          </div>
        </div>
        <Footer dark={dark} lang={lang} headingFont={headingFont} />
      </Page>
    );
  }

  function PageAIStack(props) {
    const { dark, lang = 'en', headingFont = 'sans' } = props;
    const p = palette(dark);
    const T = (en, zh) => lang === 'en' ? en : zh;
    const [trials, setTrials] = React.useState(70);
    const [show, setShow] = React.useState(70);
    const [conv, setConv] = React.useState(60);
    const [ltv, setLtv] = React.useState(3500);
    
    const annual = trials * (show/100) * (conv/100) * ltv * 12;
    const gain = s => annual * 0.10 * s;
    const fmt = n => Math.round(n).toLocaleString();

    return (
      <Page dark={dark}>
        <Header dark={dark} lang={lang} active="" headingFont={headingFont} />
        <div style={{ padding: '64px 80px 80px', flex: 1 }}>
          <Mono dark={dark} style={{ marginBottom: 16, display: 'inline-block' }}>{T('AI STACK · BUILT vs WIRED', 'AI 技术栈 · 自研 vs 接入')}</Mono>
          <H as="h1" dark={dark} font={headingFont} size={46} style={{ marginBottom: 16, maxWidth: 800 }}>
            {T('We own the runtime. We wire everything else.', '运行时我们自研，其他能接的都接。')}
          </H>
          <p style={{ fontFamily: TOKENS.font.sans, fontSize: 15, color: p.inkSoft, lineHeight: 1.6, maxWidth: 720, margin: '0 0 56px' }}>
            {T(
              'OpenClaw, Hermes (MCP), and deploygrow are ours. n8n, FastAPI, OpenAI, Claude, Stripe, Cal.com, Resend, Twilio, WeChat, DocuSeal, Cloudflare — all wired in. The result: agents that act, not just chat.',
              'OpenClaw、Hermes（MCP）、deploygrow 是我们自研的。n8n、FastAPI、OpenAI、Claude、Stripe、Cal.com、Resend、Twilio、微信、DocuSeal、Cloudflare 全部对接。结果：agent 会动手，不只会聊天。'
            )}
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 64 }}>
            {STACK.map(s => (
              <Card key={s.mark} dark={dark} padding={24} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                <div style={{ width: 36, height: 36, borderRadius: TOKENS.radius.xs, background: s.native ? p.gold : 'transparent', color: s.native ? '#fff' : p.ink, border: `1px solid ${s.native ? p.gold : p.line}`, fontFamily: TOKENS.font.mono, fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  {s.mark}
                </div>
                <div>
                  <H as="div" dark={dark} font={headingFont} size={18} style={{ marginBottom: 4 }}>{s.name}</H>
                  <div style={{ fontFamily: TOKENS.font.sans, fontSize: 13, color: p.inkSoft, lineHeight: 1.45, marginBottom: 8 }}>{T(s.role_en, s.role_zh)}</div>
                  <div style={{ display: 'inline-block', fontFamily: TOKENS.font.mono, fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: s.native ? p.gold : p.inkMuted }}>
                    {s.badge}
                  </div>
                </div>
              </Card>
            ))}
          </div>

          <div style={{ borderTop: `0.5px solid ${p.line}`, margin: '0 0 56px' }} />

          <Mono dark={dark} style={{ marginBottom: 16, display: 'inline-block' }}>{T('ROI CALCULATOR', 'ROI 测算')}</Mono>
          <H as="h2" dark={dark} font={headingFont} size={36} style={{ marginBottom: 32 }}>
            {T('What 10% more conversion is worth at your school.', '在你的学校多 10% 转化值多少钱。')}
          </H>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 16 }}>
            {[
              { lbl: T('Trials / month', '每月试听'), val: trials, min: 5, max: 150, step: 1, set: setTrials, fmt: v => v },
              { lbl: T('Show rate', '到课率'), val: show, min: 30, max: 95, step: 5, set: setShow, fmt: v => `${v}%` },
              { lbl: T('Trial → enroll', '试听 → 入学'), val: conv, min: 20, max: 95, step: 5, set: setConv, fmt: v => `${v}%` },
              { lbl: T('LTV (CAD)', '生命周期价值（加元）'), val: ltv, min: 500, max: 12000, step: 50, set: setLtv, fmt: v => `$${v.toLocaleString()}` }
            ].map((roi, i) => (
              <Card key={i} dark={dark} padding={28}>
                <div style={{ fontFamily: TOKENS.font.mono, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: p.gold, marginBottom: 12 }}>{roi.lbl}</div>
                <H as="div" dark={dark} font={headingFont} size={32} style={{ marginBottom: 16 }}>{roi.fmt(roi.val)}</H>
                <input type="range" min={roi.min} max={roi.max} step={roi.step} value={roi.val} onChange={e => roi.set(+e.target.value)} style={{ width: '100%', accentColor: p.gold }} />
              </Card>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {[
              { lbl: T('Annual baseline', '年化基线'), val: `$${fmt(annual)}`, hint: T('From sliders above', '由上方滑块计算') },
              { lbl: T('Conservative (50%)', '保守 (50%)'), val: `+$${fmt(gain(0.5))}`, hint: T('Annual gain', '年化增量') },
              { lbl: T('Neutral (70%)', '中性 (70%)'), val: `+$${fmt(gain(0.7))}`, hint: T('Annual gain', '年化增量') },
              { lbl: T('Optimistic (90%)', '乐观 (90%)'), val: `+$${fmt(gain(0.9))}`, hint: T('Annual gain', '年化增量') }
            ].map((res, i) => (
              <Card key={i} dark={dark} padding={28}>
                <div style={{ fontFamily: TOKENS.font.mono, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: p.gold, marginBottom: 12 }}>{res.lbl}</div>
                <H as="div" dark={dark} font={headingFont} size={28} style={{ marginBottom: 6 }}>{res.val}</H>
                <div style={{ fontFamily: TOKENS.font.sans, fontSize: 12, color: p.inkSoft }}>{res.hint}</div>
              </Card>
            ))}
          </div>

          <div style={{ fontFamily: TOKENS.font.mono, fontSize: 11, color: p.inkMuted, marginTop: 40, padding: '16px 20px', background: p.paperSoft, borderRadius: TOKENS.radius.sm }}>
            {T("Note: Numbers don't prove the system. Watching us run yours for 60 days does.", '注：数字证明不了系统好不好——让我们替你跑 60 天，你就知道了。')}
          </div>
        </div>
        <Footer dark={dark} lang={lang} headingFont={headingFont} />
      </Page>
    );
  }

  window.PageAIAgentsLive = PageAIAgentsLive;
  window.PageWorkflowsLibrary = PageWorkflowsLibrary;
  window.PageAIStack = PageAIStack;
})();