/* ============================================================
   ROOY · 06c · ROOY Pro 会员（paywall）
   ───────────────────────────────────────────────────────────
   订阅落地页。Pro 入口（15 设置 / 04 ROOY 对话 / 05n 复盘底部）
   经 onNav('rooy-pro') 跳到这里；NavBar back 经 onNav('back')
   回源屏（由 canvas 的 PhoneRouter 接管）。

   结构：NavBar → 黑色 ROOY hero（角落光晕 + 晕影 / rooy 绿
   wordmark 品牌印 + 短规）→ 3 条权益 → 价格档（月/季/年，默认
   年付）→ 订阅 CTA → 恢复购买 + 条款。

   黑卡装饰参考 05o：右上 rooy 径向光晕（logo 浴光，仿宝石照亮
   卡内）+ 边缘晕影压暗给深度。accent budget：hero 绿 = wordmark
   + 短规 + 光晕；其余绿在价格选中态描边 + 权益勾。

   token：横向屏边统一 16；段间距 s7=32；价格档 label = T.headline
   （17/24/semi 正名），价格数字 N.base@19。
   ============================================================ */

function RooyProScreen({ onNav }) {
  const [plan, setPlan] = React.useState('year');

  const benefits = [
    { t: '无限 ROOY 陪练', d: '不限次对话、实时上课模式、更主动的教练反馈' },
    { t: '深度复盘与数据', d: '完整能力雷达、历史趋势与对比、更细的滑行分析' },
    { t: '进阶课程与地形', d: '解锁雪沟、粉雪等进阶路径与全部高阶节点' },
  ];

  const plans = [
    { id: 'month',  l: '月付', price: '¥38',  per: '/ 月', note: null },
    { id: 'quarter',l: '季付', price: '¥98',  per: '/ 季', note: '省 14%' },
    { id: 'year',   l: '年付', price: '¥298', per: '/ 年', note: '最划算 · 省 35%' },
  ];

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      background: R.bg, color: R.ink, ...T.subhead,
    }}>
      <StatusBar/>
      <NavBar onBack={() => onNav && onNav('back')} title="ROOY Pro"/>

      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 32 }}>

        {/* ── 黑色 ROOY hero（角落光晕 + 晕影）── */}
        <div style={{ padding: '8px 16px 0' }}>
          <div style={{
            position: 'relative', overflow: 'hidden',
            background: R.ink, borderRadius: B.hero,
            padding: '32px 20px 26px', boxShadow: Shadow.hero,
          }}>
            {/* 右上 rooy 径向光晕 —— logo 浴光（仿 05o 宝石照亮卡内） */}
            <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
              background: 'radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--r-rooy) 32%, transparent) 0%, color-mix(in srgb, var(--r-rooy) 9%, transparent) 40%, transparent 66%)',
            }}/>
            {/* 边缘晕影 —— 压暗四角，给深度 */}
            <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
              background: 'radial-gradient(125% 92% at 50% 30%, transparent 54%, rgba(0,0,0,0.40) 100%)',
            }}/>
            <div style={{ position: 'relative' }}>
              {/* ROOY wordmark — rooy 绿，右上角品牌印（alpha mask 填 rooy） */}
              <span aria-label="ROOY" style={{
                position: 'absolute', top: 4, right: 0,
                width: 134, height: 36,
                backgroundColor: R.rooy,
                WebkitMaskImage: 'url(' + (window.__ROOY_ASSET_BASE || '') + 'assets/logo-wordmark.png)',
                WebkitMaskSize: 'contain',
                WebkitMaskRepeat: 'no-repeat',
                WebkitMaskPosition: 'center',
                maskImage: 'url(' + (window.__ROOY_ASSET_BASE || '') + 'assets/logo-wordmark.png)',
                maskSize: 'contain',
                maskRepeat: 'no-repeat',
                maskPosition: 'center',
              }}/>
              <p style={{ ...T.title, color: '#fff', letterSpacing: '-0.02em' }}>
                做你的<br/>专属教练
              </p>
              {/* rooy 绿编辑式短规 —— 标题下的品牌色装饰锚 */}
              <span style={{
                display: 'block', width: 32, height: 2, borderRadius: 2,
                background: R.rooy, marginTop: 16,
              }}/>
              <p style={{ ...T.para, color: R.inkD2, marginTop: 12 }}>
                升级后我能不限次陪你练、看到更细的数据、为你打开全部进阶地形。
              </p>
            </div>
          </div>
        </div>

        {/* ── 3 条权益 ── */}
        <div style={{ padding: '32px 16px 0', display: 'flex', flexDirection: 'column', gap: 22 }}>
          {benefits.map((b, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <span style={{
                width: 22, height: 22, borderRadius: '50%', flexShrink: 0, marginTop: 1,
                background: R.rooyTint12,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="12" height="9" viewBox="0 0 13 10">
                  <path d="M1 5l4 4 7-8" stroke="var(--r-rooy)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </span>
              <div style={{ flex: 1 }}>
                <p style={{ ...T.headline, color: R.ink }}>{b.t}</p>
                <p style={{ ...T.footnote, color: R.ink3, marginTop: 4 }}>{b.d}</p>
              </div>
            </div>
          ))}
        </div>

        {/* ── 价格档 ── */}
        <div style={{ padding: '32px 16px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {plans.map(p => {
            const on = plan === p.id;
            return (
              <button key={p.id} onClick={() => setPlan(p.id)} style={{
                width: '100%', textAlign: 'left', cursor: 'pointer',
                background: R.card,
                border: `1.5px solid ${on ? R.rooy : R.hair2}`,
                borderRadius: B.card, padding: '16px 16px',
                display: 'flex', alignItems: 'center', gap: 12,
                transition: 'border-color .15s',
              }}>
                <span style={{
                  width: 20, height: 20, borderRadius: '50%', flexShrink: 0,
                  border: `1.5px solid ${on ? R.rooy : R.hair2}`,
                  background: on ? R.rooy : 'transparent',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {on && <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#fff' }}/>}
                </span>
                <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ ...T.headline, color: R.ink }}>{p.l}</span>
                  {p.note && <StatusBadge tone="rooy">{p.note}</StatusBadge>}
                </div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 3 }}>
                  <span style={{ ...N.base, fontSize: 19, color: R.ink }}>{p.price}</span>
                  <span style={{ ...T.caption1, color: R.ink3 }}>{p.per}</span>
                </div>
              </button>
            );
          })}
        </div>

        {/* ── CTA ── */}
        <div style={{ padding: '32px 16px 0' }}>
          <PrimaryCTA onClick={() => {}}>开始订阅</PrimaryCTA>
          <p style={{ ...T.caption1, color: R.ink3, textAlign: 'center', marginTop: 12 }}>
            自动续费 · 可随时取消
          </p>
        </div>

        {/* ── 恢复购买 + 条款 ── */}
        <div style={{
          padding: '24px 16px 0',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24,
        }}>
          <button style={{ background: 'transparent', border: 'none', cursor: 'pointer', ...T.footnote, color: R.ink2 }}>恢复购买</button>
          <button style={{ background: 'transparent', border: 'none', cursor: 'pointer', ...T.footnote, color: R.ink3 }}>服务条款</button>
          <button style={{ background: 'transparent', border: 'none', cursor: 'pointer', ...T.footnote, color: R.ink3 }}>隐私</button>
        </div>

      </div>
    </div>
  );
}

Object.assign(window, { RooyProScreen });