// lvpai-bind.jsx — 绑卡中心（扫码 / 输入卡号 / 已绑卡 / 异常找回）
const { LV_T: B_T, Icon: BIcon, Photo: BPhoto, Btn: BBtn, Card: BCard, Eyebrow: BEye,
  WeChatNav: BNav, Divider: BDiv } = window;

function BindScreen({ store, nav, mode = 'scan' }) {
  const T = B_T;
  const [view, setView] = React.useState(mode);
  const [code, setCode] = React.useState('');
  const [scanning, setScanning] = React.useState(false);
  const [showAuth, setShowAuth] = React.useState(false);
  const [authing, setAuthing] = React.useState(false);

  const finishBind = () => {
    store.set({ bound: true, stage: 'arrived' });
    nav.pop();
    nav.push('bindOk');
  };

  const succeed = () => {
    setScanning(true);
    setTimeout(() => {
      setScanning(false);
      if (store.loggedIn) finishBind();
      else setShowAuth(true);
    }, 1400);
  };

  const authorize = () => {
    setAuthing(true);
    setTimeout(() => {
      store.set({ loggedIn: true });
      setAuthing(false);
      setShowAuth(false);
      finishBind();
    }, 900);
  };

  const cards = store.bound ? [
    { spot: '玉液湖机位', time: '今天 13:42', tail: '8821', n: 6, tone: 'lake' },
  ] : [];

  return (
    <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', background: T.ink }}>
      {view === 'scan' ?
      // 微信样式全屏扫码：点击任意处即模拟扫码成功
      <div onClick={() => !scanning && succeed()} style={{ position: 'relative', height: '100%', overflow: 'hidden', cursor: 'pointer', background: '#0B0C0B' }}>
        {/* \u955c\u5934\u4e2d\u7684\u53d6\u7247\u5361 */}
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ width: 268, transform: 'rotate(-6deg) perspective(700px) rotateY(7deg)', background: 'linear-gradient(150deg,#FDFCF8,#EFEDE5)', borderRadius: 8, padding: '20px 20px 18px',
            boxShadow: '0 26px 60px rgba(0,0,0,0.6)' }}>
            <div style={{ fontFamily: T.sans, fontSize: 10, fontWeight: 700, letterSpacing: 2.4, color: '#9A968A' }}>帧集快拍 · 取片卡</div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 15, marginTop: 13 }}>
              <div style={{ width: 108, height: 108, flexShrink: 0, display: 'grid', gridTemplateColumns: 'repeat(21,1fr)', padding: 6, background: '#fff', borderRadius: 4 }}>
                {Array.from({ length: 441 }).map((_, i) => {
                  const x = i % 21, y = i / 21 | 0;
                  // 三个定位角
                  const finder = (fx, fy) => {
                    const dx = x - fx, dy = y - fy;
                    if (dx < 0 || dy < 0 || dx > 6 || dy > 6) return null;
                    const r = Math.max(Math.abs(dx - 3), Math.abs(dy - 3));
                    return r === 3 || r <= 1;
                  };
                  const f = finder(0, 0) ?? finder(14, 0) ?? finder(0, 14);
                  const near = (fx, fy) => x >= fx - 1 && x <= fx + 7 && y >= fy - 1 && y <= fy + 7;
                  const quiet = near(0, 0) || near(14, 0) || near(0, 14);
                  const timing = (y === 6 || x === 6) && !quiet && (x + y) % 2 === 0;
                  const on = f !== null && f !== undefined ? f :
                    quiet ? false :
                    timing ? true :
                    (x * 7 + y * 13 + (x * y) % 5 + ((x >> 1) ^ (y >> 1))) % 3 !== 0;
                  return <span key={i} style={{ background: on ? '#16180F' : 'transparent' }} />;
                })}
              </div>
              <div style={{ paddingBottom: 3 }}>
                <div style={{ fontFamily: T.sans, fontSize: 16, fontWeight: 700, color: '#22241C', letterSpacing: 0.3 }}>扫码取照</div>
                <div style={{ fontFamily: T.sans, fontSize: 10.5, color: '#8C887C', marginTop: 6, lineHeight: 1.6 }}>2 号机位<br />蓝月谷出口</div>
                <div style={{ fontFamily: T.sans, fontSize: 11, fontWeight: 600, color: '#22241C', letterSpacing: 1.4, marginTop: 8 }}>··· 8821</div>
              </div>
            </div>
          </div>
        </div>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(110% 58% at 50% 46%, rgba(0,0,0,0) 26%, rgba(0,0,0,0.62) 100%)' }} />
        {/* 扫描线 */}
        {!scanning &&
        <div style={{ position: 'absolute', left: 0, right: 0, height: 132, pointerEvents: 'none', animation: 'lvScanFull 2.6s cubic-bezier(.5,0,.5,1) infinite',
          background: 'linear-gradient(to bottom, rgba(7,193,96,0) 0%, rgba(7,193,96,0.34) 78%, rgba(120,255,190,0.95) 100%)' }} />}
        {/* 返回 */}
        <button onClick={(e) => {e.stopPropagation();nav.pop();}} style={{ position: 'absolute', top: 60, left: 16, width: 34, height: 34, borderRadius: 999, border: 'none', cursor: 'pointer',
          background: 'rgba(255,255,255,0.94)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 10px rgba(0,0,0,0.28)' }}>
          <BIcon name="chevL" size={20} color={T.ink} stroke={2.2} />
        </button>
        {/* 相册 */}
        <button onClick={(e) => {e.stopPropagation();setView('manual');}} style={{ position: 'absolute', right: 20, bottom: 'calc(30px + env(safe-area-inset-bottom))', width: 56, height: 56, borderRadius: 999, border: 'none', cursor: 'pointer',
          background: 'rgba(58,58,58,0.72)', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <BIcon name="image" size={25} color="#fff" stroke={1.7} />
        </button>
        {scanning &&
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.6)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14 }}>
          <div style={{ width: 40, height: 40, border: '3px solid rgba(255,255,255,0.25)', borderTopColor: '#fff', borderRadius: 999, animation: 'lvSpin .8s linear infinite' }} />
          <span style={{ fontFamily: T.sans, fontSize: 14, color: '#fff' }}>识别成功 · 正在绑定…</span>
        </div>}
      </div> :
      <>
      <BNav title={view === 'manual' ? '输入卡号' : '我的取片卡'}
        onBack={() => setView('scan')} transparent />
      <div style={{ flex: 1, overflowY: 'auto' }}>
        {view === 'manual' && (
          <div style={{ padding: '20px 24px' }}>
            <div style={{ fontFamily: T.sans, fontSize: 14, color: 'rgba(255,255,255,0.65)', lineHeight: 1.6, marginBottom: 22 }}>输入取片卡上的卡号，绑定后进入对应照片。取片卡 7 天内有效。</div>
            <div style={{ background: 'rgba(255,255,255,0.1)', borderRadius: 8, padding: '18px 18px', marginBottom: 14 }}>
              <div style={{ fontFamily: T.sans, fontSize: 11, color: 'rgba(255,255,255,0.5)', letterSpacing: 1, marginBottom: 10 }}>取片卡号</div>
              <div style={{ fontFamily: T.serif, fontSize: 26, color: '#fff', letterSpacing: 4, minHeight: 32 }}>{code || <span style={{ color: 'rgba(255,255,255,0.3)' }}>LP-0000-0000</span>}</div>
            </div>
            {/* keypad */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
              {['1','2','3','4','5','6','7','8','9','清空','0','⌫'].map(k => (
                <button key={k} onClick={() => { if (k === '⌫') setCode(c => c.slice(0, -1)); else if (k === '清空') setCode(''); else if (code.replace(/\D/g,'').length < 8) setCode(c => c + k); }}
                  style={{ padding: '15px 0', borderRadius: 7, border: 'none', cursor: 'pointer', background: (k==='清空'||k==='⌫') ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.12)', color: '#fff', fontFamily: T.sans, fontSize: (k==='清空') ? 14 : 20, fontWeight: 600 }}>{k}</button>
              ))}
            </div>
            <BBtn kind="primary" full size="lg" style={{ background: '#fff', color: T.ink, marginTop: 18 }} disabled={code.replace(/\D/g,'').length < 4} onClick={succeed}>绑定并查看照片</BBtn>
          </div>
        )}

        {view === 'cards' && (
          <div style={{ padding: '14px 18px' }}>
            {cards.length === 0 ? (
              <div style={{ textAlign: 'center', padding: '60px 20px', color: 'rgba(255,255,255,0.5)', fontFamily: T.sans, fontSize: 14 }}>还没有绑定的取片卡<br />扫码后会出现在这里</div>
            ) : cards.map((c, i) => (
              <div key={i} style={{ background: 'rgba(255,255,255,0.08)', borderRadius: 8, padding: 16, marginBottom: 12, display: 'flex', gap: 12, alignItems: 'center' }}>
                <div style={{ width: 50, height: 50, borderRadius: 7, overflow: 'hidden' }}><BPhoto seed={window.lvSeed(c.spot)} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: T.sans, fontSize: 15, fontWeight: 700, color: '#fff' }}>{c.spot}</div>
                  <div style={{ fontFamily: T.sans, fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 4 }}>{c.time} · {c.n} 张 · 卡号 ···{c.tail}</div>
                </div>
                <BBtn kind="primary" size="sm" style={{ background: '#fff', color: T.ink }} onClick={() => { nav.pop(); nav.push('group', { groupId: store.group.id }); }}>查看</BBtn>
              </div>
            ))}
            <div style={{ fontFamily: T.sans, fontSize: 11.5, color: 'rgba(255,255,255,0.4)', lineHeight: 1.6, marginTop: 6, textAlign: 'center' }}>已关联照片的卡不可自行解绑，错绑请联系客服</div>
          </div>
        )}
      </div>
      </>}
      {showAuth && <AuthModal T={T} onAuthorize={authorize} onDecline={() => { setShowAuth(false); finishBind(); }} authing={authing} />}
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
// 登录/授权弹框 —— 大部分游客打开小程序后的第一个交互
// ════════════════════════════════════════════════════════════════
function AuthModal({ T, onAuthorize, onDecline, authing }) {
  const [agreed, setAgreed] = React.useState(false);
  const [warn, setWarn] = React.useState(false);
  const tryAuth = () => { if (!agreed) { setWarn(true); setTimeout(() => setWarn(false), 1600); return; } onAuthorize(); };
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 40, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', animation: 'lvFade .2s ease' }}>
      <div style={{ width: '100%', background: '#fff', borderRadius: '14px 14px 0 0', overflow: 'hidden', paddingBottom: 'env(safe-area-inset-bottom)' }}>
        <div style={{ padding: '22px 22px 8px', display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 40, height: 40, borderRadius: 9, flexShrink: 0, background: 'linear-gradient(135deg, #2A2A28, #050505)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <BIcon name="camera" size={19} color="#E8C87A" stroke={1.8} />
          </div>
          <div style={{ fontFamily: T.sans, fontSize: 15.5, fontWeight: 600, color: '#000', flex: 1 }}>帧集｜1分钟拍大片</div>
          <BIcon name="info" size={17} color="#C7C7C7" stroke={1.8} />
        </div>
        <div style={{ padding: '10px 22px 0', textAlign: 'left' }}>
          <div style={{ fontFamily: T.sans, fontSize: 16.5, fontWeight: 700, color: '#000' }}>申请获取并验证你的手机号</div>
          <div style={{ fontFamily: T.sans, fontSize: 12.5, color: '#999', marginTop: 6 }}>用于绑定取片卡与接收取片通知</div>
        </div>
        <button onClick={tryAuth} disabled={authing} style={{ display: 'block', width: 'calc(100% - 44px)', margin: '18px 22px 0', border: 'none', borderRadius: 10, background: '#F5F5F5', padding: '17px 0', textAlign: 'center', cursor: 'pointer', fontFamily: T.sans, fontSize: 17, color: '#000' }}>
          {authing ? '授权中…' : '135****0652'}
        </button>
        <div style={{ margin: '12px 22px 0', borderRadius: 10, background: '#F5F5F5' }}>
          <button onClick={onDecline} disabled={authing} style={{ width: '100%', border: 'none', background: 'none', padding: '15px 0', fontFamily: T.sans, fontSize: 17, color: '#000', cursor: 'pointer' }}>不允许</button>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 7, margin: '14px 22px 0' }}>
          <button onClick={() => setAgreed((v) => !v)} style={{ flexShrink: 0, marginTop: 1, width: 15, height: 15, padding: 0, borderRadius: 3, border: 'none', background: agreed ? '#07C160' : '#fff', boxShadow: 'inset 0 0 0 1.4px ' + (agreed ? '#07C160' : (warn ? '#E0463D' : '#CFCFCF')), cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {agreed && <BIcon name="check" size={10} color="#fff" stroke={3} />}
          </button>
          <span style={{ fontFamily: T.sans, fontSize: 11.5, lineHeight: 1.6, color: warn ? '#E0463D' : '#999' }}>
            我已阅读并同意<span style={{ color: '#576B95' }}>《帧集用户服务协议》</span><span style={{ color: '#576B95' }}>《帧集隐私政策》</span>
          </span>
        </div>
        <button style={{ display: 'block', width: '100%', border: 'none', background: 'none', padding: '16px 0 24px', fontFamily: T.sans, fontSize: 15, color: '#07C160', cursor: 'pointer' }}>使用其它号码</button>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
// 绑卡成功页 —— 绑大部分游客接触帧集的第一个界面
// 极简：大幅版面 = 一个 icon + 「已绑定照片」，下方示例 + 单一主 CTA
// ════════════════════════════════════════════════════════════════
function BindSuccessScreen({ store, nav }) {
  const T = B_T;
  const G = window.LV_GOLD || { grad: '#D6AC54', text: '#4A3209', hi: '#E8C87A', deep: '#8A6420', tint: 'rgba(232,200,122,0.11)', line: 'rgba(204,156,64,0.3)' };
  const [auth, setAuth] = React.useState(false);
  const [agree, setAgree] = React.useState({ a: false, b: false });
  const [authWarn, setAuthWarn] = React.useState(false);
  const bothAgreed = agree.a && agree.b;
  // 其他游客样片（瀑布流：显式混合比例，按累计高度分列）
  const gallery = [
    { id: 's1', src: 'assets/p5.jpg',  ratio: '3 / 4', kind: '雪山旅人' },
    { id: 's2', src: 'assets/p8.jpg',  ratio: '1 / 1', kind: '古城入梦' },
    { id: 's3', src: 'assets/p10.jpg', ratio: '4 / 5', kind: '茶马风云' },
    { id: 's4', src: 'assets/p7.jpg',  ratio: '3 / 4', kind: '东巴神话' },
    { id: 's5', src: 'assets/p6.jpg',  ratio: '1 / 1', kind: '蓝月秘境' },
    { id: 's6', src: 'assets/cy-mine.jpg', ratio: '4 / 3', kind: '茶马风云' },
    { id: 's7', src: 'assets/p3.jpg',  ratio: '4 / 5', kind: '东巴神话' },
    { id: 's8', src: 'assets/p9.jpg',  ratio: '3 / 4', kind: '雪山旅人' }];
  const cols = React.useMemo(() => {
    const out = [[], []], hsum = [0, 0];
    gallery.forEach((g) => {
      const [w, hh] = g.ratio.split('/').map(Number);
      const k = hsum[0] <= hsum[1] ? 0 : 1;
      out[k].push(g);
      hsum[k] += hh / w;
    });
    return out;
  }, []);

  const Head = ({ title, sub }) =>
    <div style={{ marginBottom: 13 }}>
      <div style={{ fontFamily: T.sans, fontSize: 17.5, fontWeight: 700, color: T.ink, letterSpacing: 0.2 }}>{title}</div>
      <div style={{ fontFamily: T.sans, fontSize: 12.5, color: T.muted, lineHeight: 1.6, marginTop: 7 }}>{sub}</div>
    </div>;

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: T.paper }}>
      <BNav title="" left={<button onClick={() => nav.reset('home')} style={{ background: 'none', border: 'none', padding: 0, marginLeft: -4, marginRight: 2, cursor: 'pointer', display: 'flex' }}><BIcon name="home" size={22} color={T.ink} stroke={1.7} /></button>} />
      <div className="lv-scroll" style={{ flex: 1, overflowY: 'auto' }}>
        {/* 品牌 + 已绑定确认 */}
        <div style={{ padding: '18px 24px 8px', textAlign: 'center' }}>
          <img src={window.lvAsset('assets/logo-zhenji-v2.png')} alt="帧集" draggable="false"
            style={{ width: 156, display: 'block', margin: '0 auto', animation: 'lvFade .45s ease' }} />
          <div style={{ fontFamily: T.sans, fontSize: 11, fontWeight: 600, letterSpacing: 3.4, color: T.muted, marginTop: 13 }}></div>
        </div>
        <div style={{ padding: '26px 24px 4px', textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
            <span style={{ width: 26, height: 26, borderRadius: 999, background: '#2F6F63', flexShrink: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center', animation: 'lvPop .4s cubic-bezier(.2,1.4,.4,1)' }}>
              <BIcon name="check" size={16} color="#fff" stroke={2.6} />
            </span>
            <span style={{ fontFamily: T.sans, fontSize: 18.5, fontWeight: 700, color: T.ink, letterSpacing: 0.3 }}>已绑定取片卡</span>
          </div>
          <div style={{ fontFamily: T.sans, fontSize: 12.5, color: T.muted, marginTop: 10, lineHeight: 1.65 }}>
            照片正在同步，稍候请到出口取片处<br />领取免费纸质和电子版
          </div>
        </div>

        {/* 卖点 1：旅拍级 AI 写真 */}
        <div style={{ padding: '38px 18px 0' }}>
          <Head title="旅拍级 AI 写真"
            sub="告别 AI 味、告别塑料感，专业摄影师为你量身打造。" />
          {window.BeforeAfter &&
          <window.BeforeAfter beforeSrc="assets/ba-raw.jpg" afterSrc="assets/ba-final.jpg" afterLabel="创意摄影成片" />}
          <button onClick={() => nav.push('previewSample')}
          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, width: '100%', marginTop: 2, border: 'none', cursor: 'pointer',
            background: 'transparent', color: T.muted, padding: '12px 0 2px', fontFamily: T.sans, fontSize: 13, fontWeight: 400, letterSpacing: 0.3 }}>
            <BIcon name="refresh" size={14} color={T.muted} stroke={1.9} />
            <span style={{ color: T.ink, fontWeight: 700 }}>换一组看看</span>
          </button>
        </div>

      </div>

      {/* 固定主 CTA */}
      <div style={{ flexShrink: 0, background: T.paper, borderTop: '1px solid ' + T.line, padding: '14px 18px calc(16px + env(safe-area-inset-bottom))' }}>
        <button onClick={() => setAuth(true)} style={{ width: '100%', fontFamily: T.sans, fontSize: 17, fontWeight: 700, letterSpacing: 0.4,
          color: G.text, background: G.grad, border: 'none', borderRadius: 8, padding: '16px 0', cursor: 'pointer',
          boxShadow: '0 8px 22px rgba(204,156,64,0.4), inset 0 1px 0 rgba(255,255,255,0.5)' }}>
          预览我的创意摄影
        </button>
      </div>

      {/* AI 创作授权 */}
      {auth &&
      <div style={{ position: 'absolute', inset: 0, zIndex: 300, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 28, background: 'rgba(20,22,20,0.5)', animation: 'lvFade .2s ease' }}>
        <div style={{ width: '100%', maxWidth: 310, background: '#fff', borderRadius: 8, overflow: 'hidden', boxShadow: '0 24px 56px rgba(0,0,0,0.32)', animation: 'lvPop .22s cubic-bezier(.2,1.2,.4,1)' }}>
          <div style={{ padding: '24px 22px 20px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
              <BIcon name="shield" size={19} color={T.ink} stroke={1.8} />
              <span style={{ fontFamily: T.sans, fontSize: 16.5, fontWeight: 700, color: T.ink }}>AI 创作授权</span>
            </div>
            <div style={{ fontFamily: T.sans, fontSize: 13, color: T.inkSoft, lineHeight: 1.75, marginTop: 14 }}>
              生成创意摄影需要使用你在本景区拍摄的照片进行 AI 创作。
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 16 }}>
              {[
                { k: 'a', t: <>我已阅读并同意<span style={{ color: '#576B95' }}>《帧集AI图片及视频生成服务协议》</span></> },
                { k: 'b', t: <>我已阅读<span style={{ color: '#576B95' }}>《敏感个人信息处理说明》</span>，并单独同意处理我上传/选择素材中的面部图像、面部特征等敏感个人信息。</> },
              ].map((it) =>
              <button key={it.k} onClick={() => setAgree((prev) => ({ ...prev, [it.k]: !prev[it.k] }))} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, background: 'none', border: 'none', padding: 0, textAlign: 'left', cursor: 'pointer' }}>
                <span style={{ flexShrink: 0, marginTop: 1, width: 15, height: 15, borderRadius: 3, background: agree[it.k] ? T.ink : '#fff', boxShadow: 'inset 0 0 0 1.4px ' + (agree[it.k] ? T.ink : (authWarn ? '#E0463D' : T.faint)), display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {agree[it.k] && <BIcon name="checkSm" size={11} color="#fff" stroke={3} />}
                </span>
                <span style={{ fontFamily: T.sans, fontSize: 12, lineHeight: 1.6, color: authWarn && !agree[it.k] ? '#E0463D' : T.muted }}>{it.t}</span>
              </button>)}
            </div>
          </div>
          <div style={{ display: 'flex', borderTop: '1px solid ' + T.line }}>
            <button onClick={() => setAuth(false)} style={{ flex: 1, padding: '14px 0', fontFamily: T.sans, fontSize: 15, fontWeight: 500, color: T.muted, background: 'none', border: 'none', borderRight: '1px solid ' + T.line, cursor: 'pointer' }}>取消</button>
            <button onClick={() => { if (!bothAgreed) { setAuthWarn(true); setTimeout(() => setAuthWarn(false), 1600); return; } setAuth(false); nav.push('previewSample'); }} style={{ flex: 1, padding: '14px 0', fontFamily: T.sans, fontSize: 15, fontWeight: 700, color: G.deep, background: 'none', border: 'none', cursor: 'pointer' }}>同意并预览</button>
          </div>
        </div>
      </div>}
    </div>);

}

// ════════════════════════════════════════════════════════════════
// 预览页 —— 照片未同步完，展示默认主题的 6 张成片示例
// ════════════════════════════════════════════════════════════════
function PreviewSampleScreen({ store, nav }) {
  const T = B_T;
  const G = window.LV_GOLD || { grad: '#D6AC54', text: '#4A3209', deep: '#8A6420', tint: 'rgba(232,200,122,0.11)', line: 'rgba(204,156,64,0.3)' };
  const D = window.LV_DATA;
  const theme = D.THEMES[0];
  const P = D.PRICING;
  const kinds = D.CHUANGYI.shotKinds;
  const srcs = ['assets/jihewei-sample-1.jpg', 'assets/jihewei-sample-2.jpg', 'assets/jihewei-sample-3.jpg', 'assets/jihewei-sample-4.jpg', 'assets/jihewei-sample-5.jpg', 'assets/jihewei-sample-6.jpg'];
  const [buy, setBuy] = React.useState(false);
  const [viewIdx, setViewIdx] = React.useState(null);
  const [pay, setPay] = React.useState(null);
  const { Screen: PScreen } = window;

  const onPaid = (item) => {
    store.addOrder({ cat: '套餐', name: '创意摄影套餐 · ' + item.sets + ' 套', tone: theme.tone, amount: item.amount,
      state: '待确认', need: true, group: 'going', statusSub: '照片同步完成后将自动开始创作' });
    store.set({ stage: 'bought' });
    setPay({ name: item.name, sub: item.sub, amount: item.amount, tone: theme.tone });
  };

  return (
    <>
    <PScreen
      nav={<BNav title="预览" onBack={() => nav.pop()} />}
      body={<div style={{ paddingBottom: 28 }}>
        {/* 主题 */}
        <div style={{ padding: '26px 18px 0', textAlign: 'center' }}>
          <div style={{ width: 104, height: 104, borderRadius: 999, margin: '0 auto', background: G.tint, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="52" height="52" viewBox="0 0 24 24" fill="none">
              <path d="M9.5 7h1.2l.6-1.3h1.4L13.3 7h1.2" stroke={G.deep} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              <rect x="3" y="7" width="18" height="13" rx="2" stroke={G.deep} strokeWidth="1.6" />
              <circle cx="12" cy="13.5" r="3.4" stroke={G.deep} strokeWidth="1.6" />
              <circle cx="12" cy="13.5" r="0.9" fill={G.deep} />
              <path d="M17.5 9.5h1.6" stroke={G.deep} strokeWidth="1.6" strokeLinecap="round" />
              <path d="M12 2.2v1.6M8.6 3.3l.9 1.3M15.4 3.3l-.9 1.3" stroke={G.deep} strokeWidth="1.4" strokeLinecap="round" />
            </svg>
          </div>
          <div style={{ fontFamily: T.sans, fontSize: 22, fontWeight: 700, color: T.ink, letterSpacing: 0.4, marginTop: 14 }}>精华机位创意摄影</div>
          <div style={{ fontFamily: T.sans, fontSize: 13, color: T.inkSoft, lineHeight: 1.7, marginTop: 10 }}>您的照片正在上传，可以先试试创意摄影哦！除了可定制一套 6 张专属的精华机位打卡照，还可以解锁全部机位所有高清底片</div>
        </div>

        {/* 6 张成片示例 */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 9, padding: '18px 18px 0' }}>
          {srcs.map((src, i) =>
          <div key={i} onClick={() => setViewIdx(i)} style={{ position: 'relative', borderRadius: 6, overflow: 'hidden', cursor: 'pointer' }}>
            <BPhoto src={src} ratio="3 / 4" radius={0} />
          </div>)}
        </div>
        {viewIdx != null && <window.ShowcaseViewer items={srcs.map((src) => ({ src }))} index={viewIdx} onIndex={setViewIdx} onClose={() => setViewIdx(null)} />}
        <div style={{ fontFamily: T.sans, fontSize: 11.5, color: T.muted, lineHeight: 1.6, marginTop: 10, padding: '0 18px', textAlign: 'center' }}>*照片由 AI 结合实景合成，姿势仅供参考非最终效果。</div>
      </div>}
      footer={<div style={{ flexShrink: 0, background: T.paper, borderTop: '1px solid ' + T.line, padding: '12px 18px calc(14px + env(safe-area-inset-bottom))', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14 }}>
        <div>
          <div style={{ fontFamily: T.sans, fontSize: 11.5, color: T.muted }}>1 套 6 张 · 赠全部底片</div>
          <window.Price value={P.sets[0].price} size={25} style={{ marginTop: 1 }} />
        </div>
        <button onClick={() => setBuy(true)} style={{ minWidth: 158, fontFamily: T.sans, fontSize: 16.5, fontWeight: 700, color: G.text, background: G.grad, border: 'none', borderRadius: 8, padding: '15px 22px', cursor: 'pointer', boxShadow: '0 6px 18px rgba(204,156,64,0.4), inset 0 1px 0 rgba(255,255,255,0.5)' }}>
          购买创意摄影
        </button>
      </div>} />
    {window.ChuangyiBuySheet && <window.ChuangyiBuySheet open={buy} onClose={() => setBuy(false)} store={store} onPaid={onPaid} />}
    {window.PaymentSheet && <window.PaymentSheet open={!!pay} item={pay} onClose={() => setPay(null)} onPaid={() => {setPay(null);nav.reset('orders');}} />}
    </>);

}

// 丢卡找回
function RecoverScreen({ store, nav }) {
  const T = B_T;
  const { Screen: RScreen, Card: RCard } = window;
  return (
    <RScreen nav={<BNav title="照片找回" onBack={() => nav.pop()} />}
      body={<div style={{ padding: '12px 18px 24px' }}>
        <div style={{ fontFamily: T.sans, fontSize: 13, color: T.muted, lineHeight: 1.7, margin: '4px 2px 18px' }}>按优先顺序找回你的照片。人脸识别仅作为丢卡 / 错绑兜底，需你主动授权。</div>
        {[
          { n: '1', t: '输入卡号', d: '如果还记得取片卡号，最快找回', ic: 'cardico', go: () => { nav.pop(); nav.push('bind', { mode: 'manual' }); } },
          { n: '2', t: '选择拍摄机位与时间', d: '玉龙雪山·蓝月谷 · 今天 13:00–15:00', ic: 'pin' },
          { n: '3', t: '人脸辅助找回（需授权）', d: '限定景区、日期与时间范围，可随时撤回与删除', ic: 'shield' },
        ].map(s => (
          <RCard key={s.n} pad={16} style={{ marginBottom: 12 }} onClick={s.go}>
            <div style={{ display: 'flex', gap: 13, alignItems: 'center' }}>
              <div style={{ width: 36, height: 36, borderRadius: 999, background: T.ink, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: T.serif, fontSize: 16, color: '#fff', flexShrink: 0 }}>{s.n}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: T.sans, fontSize: 14.5, fontWeight: 700, color: T.ink }}>{s.t}</div>
                <div style={{ fontFamily: T.sans, fontSize: 12, color: T.muted, marginTop: 4, lineHeight: 1.5 }}>{s.d}</div>
              </div>
              <BIcon name="chevR" size={16} color={T.faint} stroke={1.8} />
            </div>
          </RCard>
        ))}
      </div>} />
  );
}

Object.assign(window, { BindScreen, RecoverScreen, BindSuccessScreen, PreviewSampleScreen });