// lvpai-create.jsx — 创意摄影 / 精修 / 文创 下单流程
const { LV_T: C_T, Icon: CIcon, Photo: CPhoto, Btn: CBtn, Card: CCard, Eyebrow: CEye,
  Price: CPrice, WeChatNav: CNav, Screen: CScreen, Divider: CDiv } = window;

// step progress dots
function Steps({ labels, cur }) {
  const T = C_T;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 0, padding: '4px 18px 16px' }}>
      {labels.map((l, i) =>
      <React.Fragment key={l}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 24, height: 24, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: i <= cur ? T.ink : T.card, boxShadow: i <= cur ? 'none' : 'inset 0 0 0 1.5px ' + T.line,
            fontFamily: T.sans, fontSize: 12, fontWeight: 700, color: i <= cur ? '#fff' : T.faint }}>
              {i < cur ? <CIcon name="checkSm" size={13} color="#fff" stroke={2.6} /> : i + 1}
            </div>
            <span style={{ fontFamily: T.sans, fontSize: 10, color: i <= cur ? T.ink : T.faint, fontWeight: i === cur ? 700 : 500, whiteSpace: 'nowrap' }}>{l}</span>
          </div>
          {i < labels.length - 1 && <div style={{ flex: 1, height: 1.5, background: i < cur ? T.ink : T.line, margin: '-16px 4px 0' }} />}
        </React.Fragment>
      )}
    </div>);

}

function OptionRow({ label, options, value, onChange }) {
  const T = C_T;
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{ fontFamily: T.sans, fontSize: 13.5, fontWeight: 700, color: T.ink, marginBottom: 10 }}>{label}</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 9 }}>
        {options.map((o) =>
        <button key={o} onClick={() => onChange(o)} style={{ fontFamily: T.sans, fontSize: 13, fontWeight: value === o ? 700 : 500,
          color: value === o ? '#fff' : T.inkSoft, background: value === o ? T.ink : T.card, border: 'none',
          boxShadow: value === o ? 'none' : 'inset 0 0 0 1px ' + T.line, padding: '9px 15px', borderRadius: 6, cursor: 'pointer', transition: 'all .15s' }}>{o}</button>
        )}
      </div>
    </div>);

}

function FlowFooter({ price, label, onClick, disabled, note, gold, hidePrice }) {
  const T = C_T;
  const G = window.LV_GOLD || { grad: 'linear-gradient(135deg, #F4DC9A 0%, #E6BE68 46%, #CC9C40 100%)', text: '#4A3209' };
  return (
    <div style={{ flexShrink: 0, background: T.card, padding: '12px 16px calc(22px + env(safe-area-inset-bottom))', boxShadow: '0 -0.5px 0 ' + T.line + ', 0 -6px 20px rgba(26,25,22,0.05)' }}>
      {note && <div style={{ fontFamily: T.sans, fontSize: 11, color: T.muted, textAlign: 'center', marginBottom: 9, lineHeight: 1.5 }}>{note}</div>}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        {price != null && !hidePrice && <div style={{ flexShrink: 0 }}><span style={{ fontFamily: T.sans, fontSize: 11, color: T.muted }}>合计</span><div><CPrice value={price} size={22} /></div></div>}
        {gold ?
        <button onClick={disabled ? undefined : onClick} disabled={disabled}
          style={{ flex: 1, fontFamily: T.sans, fontSize: 16.5, fontWeight: 700, color: G.text, background: G.grad, border: 'none', borderRadius: 7, padding: '15px 0', cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.4 : 1, boxShadow: '0 8px 22px rgba(204,156,64,0.42), inset 0 1px 0 rgba(255,255,255,0.5)' }}>{label}</button> :
        <CBtn kind="primary" full size="lg" onClick={onClick} disabled={disabled} style={{ flex: 1 }}>{label}</CBtn>}
      </div>
    </div>);

}

// ── 晒图大图查看（黑底全屏 · 左右滑动看前/后一张） ──────────────────
function ShowcaseViewer({ items, index, onIndex, onClose, onCustomize }) {
  if (index == null || !items[index]) return null;
  const it = items[index];
  const img = it.src || window.pickPhoto(window.lvSeed(it.name));
  return (
    <div onClick={onClose} style={{ position: 'absolute', inset: 0, zIndex: 220, background: '#0c0d0b', display: 'flex', alignItems: 'center', justifyContent: 'center', animation: 'lvFade .2s ease', cursor: 'zoom-out' }}>
      <img src={window.lvAsset(img)} alt="" draggable="false" style={{ display: 'block', width: '100%', height: '100%', objectFit: 'contain' }} />
    </div>);
}

// ── 创意摄影主题详情 + 定制 ────────────────────────────────────────
// 游客晒图示例（瓀流展示 · 好评文案为示意）
const GUEST_SHOWCASE = [
  { src: 'assets/p2.jpg',  ratio: '2 / 3',  name: '小鹿',    review: '比想象中还仙，朋友都问我在哪拍的' },
  { src: 'assets/p5.jpg',  ratio: '1 / 1',  name: 'Vivian',  review: '人物精修很自然，一点都不像套模板' },
  { src: 'assets/p8.jpg',  ratio: '4 / 5',  name: '阿哲',    review: '6张张张能当壁纸' },
  { src: 'assets/p3.jpg',  ratio: '3 / 4',  name: 'momo',    review: '选片师真人审过的，质感和随手拍不一样' },
  { src: 'assets/p10.jpg', ratio: '5 / 6',  name: '樱桃',    review: '蓝月谷的颜色出片绝了，超出预期' },
  { src: 'assets/p6.jpg',  ratio: '3 / 4',  name: 'Luna',    review: '原片+大片都给' },
  { src: 'assets/p7.jpg',  ratio: '4 / 5',  name: '大山',    review: '改了一版细节，客服很耐心，成品很满意' },
  { src: 'assets/p9.jpg',  ratio: '2 / 3',  name: '嘉嘉',    review: '比影楼便宜还好看，闺蜜看了都说要拍' },
];

const THEME_SAMPLES = ['assets/theme-sample-1.jpg', 'assets/theme-sample-2.jpg', 'assets/theme-sample-3.jpg', 'assets/theme-sample-4.jpg', 'assets/theme-sample-5.jpg', 'assets/theme-sample-6.jpg'];

function ThemeDetailScreen({ store, nav, themeId, tier, mode: initMode }) {
  const T = C_T;
  const C = window.LV_DATA.CHUANGYI;
  const THEMES = window.LV_DATA.THEMES;
  const P = window.LV_DATA.PRICING;
  const tierObj = C.tiers.find((t) => t.sets === tier) || C.tiers[0];
  const sets = tierObj.sets;
  const accent = window.lvAccent();
  const price = (P.sets.find((t) => t.sets === sets) || P.sets[0]).price;
  const [picks, setPicks] = React.useState(() => new Set(themeId ? [themeId] : []));
  const [step, setStep] = React.useState(0);
  const [refs, setRefs] = React.useState(new Set());
  const [style, setStyle] = React.useState('自然真实');
  const [pay, setPay] = React.useState(false);
  const [showIdx, setShowIdx] = React.useState(null);
  const [sampleIdx, setSampleIdx] = React.useState(null);
  const g = store.group;
  const labels = ['套餐', '选主题', '参考照片', '确认'];
  const pickList = THEMES.filter((t) => picks.has(t.id));
  const curTheme = pickList[0] || THEMES[0];
  const setsLabel = `${sets} 套 · ${sets * C.shotsPerSet} 张`;
  const orderName = pickList.length === 1 ? `${pickList[0].name} · ${sets * 6} 张套装` : `创意摄影 ${setsLabel}`;

  const togglePick = (id) => {
    setPicks((prev) => {const n = new Set(prev);if (n.has(id)) n.delete(id);else if (n.size < sets) n.add(id);else if (sets === 1) {n.clear();n.add(id);}return n;});
  };

  const back = () => step === 0 ? nav.pop() : setStep(step - 1);
  const onPaid = () => {
    const oid = store.addOrder({ cat: '创意摄影', name: orderName, tone: pickList[0]?.tone || 'lake', amount: price,
      state: '正在制作', group: 'going', eta: '供应商正在为你制作，订单不可再修改内容',
      timeline: [{ t: '已确认内容', done: true, time: '刚刚' }, { t: '正在制作', done: true, time: '刚刚', cur: true }, { t: '已定制', done: false }, { t: '已完成', done: false }] });
    setPay(false);nav.push('orderDetail', { orderId: oid });
  };

  return (
    <>
    <CScreen
        nav={<CNav title={step === 0 ? curTheme.name : '定制 · ' + tierObj.label} onBack={back} />}
        body={<div style={{ paddingBottom: 24 }}>
        {step === 0 &&
          <div>
            <div style={{ padding: '18px 18px 0' }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 7, marginBottom: 18 }}>
                {THEME_SAMPLES.map((src, i) => <CPhoto key={i} src={src} ratio="3 / 4" radius={6} onClick={() => setSampleIdx(i)} />)}
              </div>
              <div style={{ fontFamily: T.sans, fontSize: 13.5, color: T.inkSoft, lineHeight: 1.7, marginBottom: 20 }}>{curTheme.pitch}</div>
              <CEye style={{ marginBottom: 12 }}>看看大家的晒图</CEye>
              <div style={{ columnCount: 2, columnGap: 8 }}>
                {GUEST_SHOWCASE.map((it, i) =>
                <div key={i} style={{ breakInside: 'avoid', marginBottom: 8 }}>
                  <CPhoto src={it.src} ratio={it.ratio} radius={6} onClick={() => setShowIdx(i)} />
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, marginTop: 6 }}>
                    <span style={{ fontFamily: T.sans, fontSize: 11, fontWeight: 700, color: T.inkSoft, flexShrink: 0 }}>{it.name}</span>
                    <span style={{ fontFamily: T.sans, fontSize: 11, color: T.muted, lineHeight: 1.45 }}>{it.review}</span>
                  </div>
                </div>
                )}
              </div>
            </div>
          </div>
          }
        {step === 1 &&
          <div style={{ padding: '0 18px' }}>
            <Steps labels={labels} cur={1} />
            <div style={{ fontFamily: T.sans, fontSize: 13, color: T.inkSoft, lineHeight: 1.6, marginBottom: 14 }}>
              选择 <b>{sets}</b> 个主题（已选 {picks.size}/{sets}）
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {THEMES.map((th) => {
                const on = picks.has(th.id);
                return (
                  <button key={th.id} onClick={() => togglePick(th.id)}
                  style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', textAlign: 'left', border: 'none', cursor: 'pointer',
                    background: T.card, borderRadius: 8, padding: 10, boxShadow: on ? 'inset 0 0 0 2px ' + accent : 'inset 0 0 0 1px ' + T.line }}>
                    <div style={{ width: 60, height: 60, borderRadius: 6, overflow: 'hidden', flexShrink: 0 }}><CPhoto src={th.src} /></div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontFamily: T.sans, fontSize: 14.5, fontWeight: 700, color: T.ink }}>{th.name}</div>
                      <div style={{ fontFamily: T.sans, fontSize: 11.5, color: T.muted, marginTop: 3, lineHeight: 1.5 }}>{th.who} · {th.desc.slice(0, 14)}…</div>
                    </div>
                    <div style={{ width: 22, height: 22, borderRadius: 999, flexShrink: 0, background: on ? accent : 'transparent', boxShadow: on ? 'none' : 'inset 0 0 0 1.5px ' + T.line, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      {on && <CIcon name="check" size={13} color="#fff" stroke={2.6} />}
                    </div>
                  </button>);

              })}
            </div>
          </div>
          }
        {step === 2 &&
          <div style={{ padding: '0 18px' }}>
            <Steps labels={labels} cur={2} />
            <div style={{ fontFamily: T.sans, fontSize: 13, color: T.inkSoft, lineHeight: 1.6, marginBottom: 14 }}>从 <b>{g.spot}</b> 选择 1–3 张清晰正脸 / 半身参考（已选 {refs.size}）</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
              {g.photos.map((p) => {
                const on = refs.has(p.id);
                return <CPhoto key={p.id} src={p.src} seed={window.lvSeed(p.id)} ratio="3 / 4" radius={6} selected={on}
                onClick={() => setRefs((prev) => {const n = new Set(prev);if (n.has(p.id)) n.delete(p.id);else if (n.size < 3) n.add(p.id);return n;})} />;
              })}
            </div>
          </div>
          }
        {step === 3 &&
          <div style={{ padding: '0 18px' }}>
            <Steps labels={labels} cur={3} />
            <OptionRow label="风格偏好" options={['自然真实', '清透明亮', '明显精致']} value={style} onChange={setStyle} />
            <CCard pad={16} style={{ marginTop: 4 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                <div style={{ width: 56, height: 56, borderRadius: 7, overflow: 'hidden' }}><CPhoto src={(pickList[0] || THEMES[0]).src} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: T.sans, fontSize: 15, fontWeight: 700, color: T.ink }}>{orderName}</div>
                  <div style={{ fontFamily: T.sans, fontSize: 12, color: T.muted, marginTop: 4 }}>{style} · {refs.size} 张参考</div>
                </div>
                <CPrice value={price} size={22} />
              </div>
              <CDiv style={{ background: T.line, margin: '0 -16px 12px' }} />
              <div style={{ fontFamily: T.sans, fontSize: 12, color: T.muted, marginBottom: 8 }}>已选主题</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
                {pickList.map((th) => <span key={th.id} style={{ fontFamily: T.sans, fontSize: 11.5, color: T.inkSoft, background: T.field, padding: '5px 10px', borderRadius: 4, boxShadow: 'inset 0 0 0 1px ' + T.line }}>{th.name}</span>)}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 14, padding: '9px 12px', borderRadius: 6, background: T.field }}>
                <CIcon name="gift" size={15} color={accent} stroke={1.8} />
                <span style={{ fontFamily: T.sans, fontSize: 12, color: T.inkSoft }}>赠 {tierObj.gift.replace(/^＋ /, '')}（实物里程碑）</span>
              </div>
            </CCard>
            <div style={{ fontFamily: T.sans, fontSize: 11.5, color: T.muted, lineHeight: 1.7, marginTop: 14, padding: '0 2px' }}>素材确认后开始计算交付时间。明显人物不像、五官/肢体异常可免费重做问题照片，不支持因审美变化无限重做。</div>
          </div>
          }
      </div>}
        footer={
        step === 0 ? <FlowFooter price={price} hidePrice label="定制我的同款" gold onClick={() => nav.push('customize', { sel: [...picks] })} /> :
        step === 1 ? <FlowFooter price={price} label={picks.size === sets ? '选择参考照片' : `请选 ${sets} 个主题`} disabled={picks.size !== sets} onClick={() => setStep(2)} /> :
        step === 2 ? <FlowFooter price={price} label={refs.size ? '确认偏好' : '请至少选 1 张'} disabled={!refs.size} onClick={() => setStep(3)} /> :
        <FlowFooter price={price} label="确认并支付" onClick={() => setPay(true)} note="素材确认完成后开始创作 · 24–48h 交付" />
        } />
      
    {window.PaymentSheet && <window.PaymentSheet open={pay} item={{ name: orderName, sub: '创意摄影', amount: price, tone: pickList[0]?.tone || 'lake' }} onClose={() => setPay(false)} onPaid={onPaid} />}
    {sampleIdx != null && <ShowcaseViewer items={THEME_SAMPLES.map((src) => ({ src }))} index={sampleIdx} onIndex={setSampleIdx} onClose={() => setSampleIdx(null)} />}
    {showIdx != null && <ShowcaseViewer items={GUEST_SHOWCASE} index={showIdx} onIndex={setShowIdx} onClose={() => setShowIdx(null)} onCustomize={() => { setShowIdx(null); nav.push('customize', { sel: [...picks] }); }} />}
    </>);

}

// ── 精修下单 ──────────────────────────────────────────────────────
function JingxiuFlowScreen({ store, nav, all }) {
  const T = C_T;
  const P = window.LV_DATA.PRODUCTS.jingxiu;
  const g = store.group;
  const max = all ? P.allMax : 1;
  const price = all ? P.all : P.single;
  const [step, setStep] = React.useState(0);
  const [sel, setSel] = React.useState(new Set());
  const [style, setStyle] = React.useState('自然真实');
  const [shape, setShape] = React.useState('不调整');
  const [bg, setBg] = React.useState('保持原样');
  const [pay, setPay] = React.useState(false);
  const labels = ['选片', '偏好', '确认'];
  const back = () => step === 0 ? nav.pop() : setStep(step - 1);

  const onPaid = () => {
    const oid = store.addOrder({ cat: '精修', name: all ? '本组全部人工精修' : '单张人工精修', tone: g.tone, amount: price,
      state: '制作中', group: 'going', eta: '预计 24h 内交付',
      timeline: [{ t: '待提交', done: true, time: '刚刚' }, { t: '制作中', done: true, time: '刚刚', cur: true }, { t: '待确认', done: false }, { t: '已完成', done: false }] });
    setPay(false);nav.push('orderDetail', { orderId: oid });
  };

  return (
    <>
    <CScreen
        nav={<CNav title={all ? '本组全部人工精修' : '单张人工精修'} onBack={back} />}
        body={<div style={{ paddingBottom: 24 }}>
        <div style={{ padding: '0 18px' }}>
          <Steps labels={labels} cur={step} />
          {step === 0 &&
            <div>
              <div style={{ fontFamily: T.sans, fontSize: 13, color: T.inkSoft, lineHeight: 1.6, marginBottom: 6 }}>
                来自 <b>{g.spot}</b> · 选择需要精修的照片{all ? `（最多 ${max} 张，已选 ${sel.size}）` : `（1 张，已选 ${sel.size}）`}
              </div>
              <div style={{ fontFamily: T.serif, fontSize: 16, color: T.muted, margin: '0 0 14px' }}>人更好看，景仍然真实。</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
                {g.photos.map((p) => {
                  const on = sel.has(p.id);
                  return <CPhoto key={p.id} src={p.src} seed={window.lvSeed(p.id)} ratio="3 / 4" radius={6} selected={on}
                  onClick={() => setSel((prev) => {const n = new Set(prev);if (n.has(p.id)) n.delete(p.id);else if (n.size < max) n.add(p.id);else if (max === 1) {n.clear();n.add(p.id);}return n;})} />;
                })}
              </div>
            </div>
            }
          {step === 1 &&
            <div>
              <OptionRow label="风格" options={['自然真实', '清透明亮', '明显精致']} value={style} onChange={setStyle} />
              <OptionRow label="身形" options={['不调整', '轻度优化']} value={shape} onChange={setShape} />
              <OptionRow label="背景" options={['保持原样', '清理明显路人与杂物']} value={bg} onChange={setBg} />
              <div style={{ fontFamily: T.sans, fontSize: 13.5, fontWeight: 700, color: T.ink, marginBottom: 9 }}>补充说明（选填，最多 100 字）</div>
              <div style={{ padding: '12px 14px', borderRadius: 7, background: T.field, boxShadow: 'inset 0 0 0 1px ' + T.line, fontFamily: T.sans, fontSize: 13, color: T.faint, minHeight: 52 }}>例如：希望肤色自然、保留发丝细节…</div>
            </div>
            }
          {step === 2 &&
            <div>
              <CCard pad={16}>
                <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 14 }}>
                  <div style={{ width: 56, height: 56, borderRadius: 7, overflow: 'hidden' }}><CPhoto seed={window.lvSeed(g.id)} /></div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: T.sans, fontSize: 15, fontWeight: 700, color: T.ink }}>{all ? '本组全部人工精修' : '单张人工精修'}</div>
                    <div style={{ fontFamily: T.sans, fontSize: 12, color: T.muted, marginTop: 4 }}>{sel.size} 张 · 含对应高清原片</div>
                  </div>
                  <CPrice value={price} size={22} />
                </div>
                <CDiv style={{ background: T.line, margin: '0 -16px 14px' }} />
                {[['风格', style], ['身形', shape], ['背景', bg]].map(([a, b]) =>
                <div key={a} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontFamily: T.sans, fontSize: 13 }}>
                    <span style={{ color: T.muted }}>{a}</span><span style={{ color: T.ink, fontWeight: 500 }}>{b}</span>
                  </div>
                )}
              </CCard>
              <div style={{ fontFamily: T.sans, fontSize: 11.5, color: T.muted, lineHeight: 1.7, marginTop: 14, padding: '0 2px' }}>预计 24 小时内交付，旺季不超 48 小时。交付后 48h 内可申请 1 次轻微修改，修改仅限原服务范围。</div>
            </div>
            }
        </div>
      </div>}
        footer={
        step === 0 ? <FlowFooter price={price} label={sel.size ? '填写精修偏好' : '请选择照片'} disabled={!sel.size} onClick={() => setStep(1)} /> :
        step === 1 ? <FlowFooter price={price} label="确认订单" onClick={() => setStep(2)} /> :
        <FlowFooter price={price} label="确认并支付" onClick={() => setPay(true)} />
        } />
      
    {window.PaymentSheet && <window.PaymentSheet open={pay} item={{ name: all ? '本组全部人工精修' : '单张人工精修', sub: '精修', amount: price, tone: g.tone }} onClose={() => setPay(false)} onPaid={onPaid} />}
    </>);

}

// ── 文创下单 ──────────────────────────────────────────────────────
function WenchuangFlowScreen({ store, nav, sku }) {
  const T = C_T;
  const c = window.LV_DATA.CULTURAL.find((x) => x.id === sku) || window.LV_DATA.CULTURAL[0];
  const g = store.group;
  const [step, setStep] = React.useState(0);
  const [photo, setPhoto] = React.useState(null);
  const [tpl, setTpl] = React.useState(0);
  const [pay, setPay] = React.useState(false);
  const labels = ['选片', '模板', '预览', '自提'];
  const back = () => step === 0 ? nav.pop() : setStep(step - 1);

  const onPaid = () => {
    const oid = store.addOrder({ cat: '文创', name: c.name, src: c.src, amount: c.price,
      state: '制作中', group: 'going', eta: '今天 21:00 前可自提',
      pickup: { code: 'LP-' + Math.floor(1000 + Math.random() * 9000), place: '蓝月谷游客中心 · 帧集服务点', deadline: '今天 21:00' },
      timeline: [{ t: '待确认效果', done: true, time: '刚刚' }, { t: '制作中', done: true, time: '刚刚', cur: true }, { t: '待自提', done: false }, { t: '已完成', done: false }] });
    setPay(false);nav.push('orderDetail', { orderId: oid });
  };

  return (
    <>
    <CScreen
        nav={<CNav title={c.name} onBack={back} />}
        body={<div style={{ paddingBottom: 24 }}>
        <div style={{ padding: '0 18px' }}>
          <Steps labels={labels} cur={step} />
          {step === 0 &&
            <div>
              <div style={{ fontFamily: T.sans, fontSize: 13, color: T.inkSoft, marginBottom: 14, lineHeight: 1.6 }}>选择 1 张照片制作 <b>{c.name}</b></div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
                {g.photos.map((p) => <CPhoto key={p.id} src={p.src} seed={window.lvSeed(p.id)} ratio="3 / 4" radius={6} selected={photo === p.id} onClick={() => setPhoto(p.id)} />)}
              </div>
            </div>
            }
          {step === 1 &&
            <div>
              <div style={{ fontFamily: T.sans, fontSize: 13.5, fontWeight: 700, color: T.ink, marginBottom: 12 }}>选择版式模板（{c.spec}）</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 12 }}>
                {[0, 1, 2].map((i) =>
                <div key={i} onClick={() => setTpl(i)} style={{ borderRadius: 8, overflow: 'hidden', position: 'relative', boxShadow: tpl === i ? '0 0 0 2.5px ' + T.ink : 'inset 0 0 0 1px ' + T.line, cursor: 'pointer' }}>
                    <CPhoto seed={window.lvSeed((photo || 'x') + i)} ratio="4 / 5" />
                    <div style={{ position: 'absolute', left: 8, bottom: 8, right: 8, background: 'rgba(255,255,255,0.92)', borderRadius: 5, padding: '6px 8px' }}>
                      <div style={{ fontFamily: T.serif, fontSize: 11, color: T.ink }}>玉龙雪山·蓝月谷</div>
                      <div style={{ fontFamily: T.sans, fontSize: 9, color: T.muted, marginTop: 2 }}>2026.06.14 · 玉液湖机位</div>
                    </div>
                    {tpl === i && <div style={{ position: 'absolute', right: 8, top: 8, width: 22, height: 22, borderRadius: 999, background: T.ink, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CIcon name="checkSm" size={13} color="#fff" stroke={2.6} /></div>}
                  </div>
                )}
              </div>
              <div style={{ marginTop: 18 }}>
                <div style={{ fontFamily: T.sans, fontSize: 13.5, fontWeight: 700, color: T.ink, marginBottom: 9 }}>日期与短文案（最多 12 字）</div>
                <div style={{ padding: '11px 14px', borderRadius: 7, background: T.field, boxShadow: 'inset 0 0 0 1px ' + T.line, fontFamily: T.sans, fontSize: 13, color: T.inkSoft }}>蓝月谷的风很温柔</div>
              </div>
            </div>
            }
          {step === 2 &&
            <div>
              <div style={{ fontFamily: T.sans, fontSize: 13.5, fontWeight: 700, color: T.ink, marginBottom: 12 }}>成品预览</div>
              <div style={{ maxWidth: 240, margin: '0 auto', borderRadius: 8, overflow: 'hidden', boxShadow: '0 12px 30px rgba(26,25,22,0.16)', position: 'relative' }}>
                <CPhoto seed={window.lvSeed(photo || 'x')} ratio="4 / 5" />
                <div style={{ position: 'absolute', left: 14, right: 14, bottom: 14, background: 'rgba(255,255,255,0.94)', borderRadius: 6, padding: '10px 12px' }}>
                  <div style={{ fontFamily: T.serif, fontSize: 13, color: T.ink }}>玉龙雪山·蓝月谷</div>
                  <div style={{ fontFamily: T.sans, fontSize: 11, color: T.inkSoft, marginTop: 3 }}>蓝月谷的风很温柔</div>
                  <div style={{ fontFamily: T.sans, fontSize: 9, color: T.muted, marginTop: 4 }}>2026.06.14 · 玉液湖机位</div>
                </div>
              </div>
              <div style={{ fontFamily: T.sans, fontSize: 11.5, color: T.muted, textAlign: 'center', marginTop: 14, lineHeight: 1.6 }}>预览仅供参考，实际成品以现场制作为准</div>
            </div>
            }
          {step === 3 &&
            <div>
              <CCard pad={16} style={{ marginBottom: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                  <CIcon name="pin" size={18} color={T.ink} stroke={1.7} />
                  <span style={{ fontFamily: T.sans, fontSize: 14.5, fontWeight: 700, color: T.ink }}>现场自提</span>
                </div>
                {[['自提地点', '蓝月谷游客中心 · 帧集服务点'], ['制作时间', '约 30–60 分钟'], ['最晚领取', '今天 21:00']].map(([a, b]) =>
                <div key={a} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontFamily: T.sans, fontSize: 13 }}>
                    <span style={{ color: T.muted }}>{a}</span><span style={{ color: T.ink, fontWeight: 500, textAlign: 'right', maxWidth: 200 }}>{b}</span>
                  </div>
                )}
              </CCard>
              <CCard pad={16}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 50, height: 50, borderRadius: 7, overflow: 'hidden' }}><CPhoto src={c.src} pos="center" /></div>
                  <div style={{ flex: 1 }}><div style={{ fontFamily: T.sans, fontSize: 14.5, fontWeight: 700, color: T.ink }}>{c.name}</div><div style={{ fontFamily: T.sans, fontSize: 12, color: T.muted, marginTop: 3 }}>{c.spec}</div></div>
                  <CPrice value={c.price} size={20} />
                </div>
              </CCard>
              <div style={{ fontFamily: T.sans, fontSize: 11.5, color: T.muted, lineHeight: 1.7, marginTop: 14, padding: '0 2px' }}>个性化商品开始制作后不支持无理由退款；图文错误或制作质量问题按售后规则重做或退款。</div>
            </div>
            }
        </div>
      </div>}
        footer={
        step === 0 ? <FlowFooter price={c.price} label={photo ? '选择模板' : '请选择照片'} disabled={!photo} onClick={() => setStep(1)} /> :
        step === 1 ? <FlowFooter price={c.price} label="预览成品" onClick={() => setStep(2)} /> :
        step === 2 ? <FlowFooter price={c.price} label="确认自提信息" onClick={() => setStep(3)} /> :
        <FlowFooter price={c.price} label="确认并支付" onClick={() => setPay(true)} note="支付后开始制作 · 现场自提" />
        } />
      
    {window.PaymentSheet && <window.PaymentSheet open={pay} item={{ name: c.name, sub: '文创 · 现场自提', amount: c.price, src: c.src }} onClose={() => setPay(false)} onPaid={onPaid} />}
    </>);

}

// ── 个性文创·商品详情页（V1 不单独售卖，只随套餐赠送） ──────────
function WenchuangDetailScreen({ store, nav, gift }) {
  const T = C_T;
  const G = window.LV_GOLD || { grad: 'linear-gradient(135deg, #F4DC9A 0%, #E6BE68 46%, #CC9C40 100%)', text: '#4A3209', deep: '#9A7322', tint: 'rgba(214,172,84,0.12)', line: 'rgba(214,172,84,0.42)' };
  const GREEN = '#1F8A5B';
  const g = gift || (window.LV_GIFTS && window.LV_GIFTS[0]) || { id: 'moon', name: '个性文创', src: 'assets/g-moon.jpg', spec: '', was: 99 };
  const feats = [
    ['camera', '采用你的雪山旅拍原片定制，独一无二'],
    ['gift', '购买创意摄影套餐限时赠送，无需加购'],
    ['pin', '定制完成后到景区出口服务点即可领取实物']];
  return (
    <CScreen
      nav={<CNav title="商品详情" onBack={() => nav.pop()} />}
      body={<div style={{ paddingBottom: 24 }}>
        <CPhoto src={g.src} ratio="1 / 1" pos="center" />
        <div style={{ padding: '18px 18px 0' }}>
          <div style={{ fontFamily: T.sans, fontSize: 21, fontWeight: 700, color: T.ink, letterSpacing: 0.2 }}>{g.name}</div>
          {g.spec && <div style={{ fontFamily: T.sans, fontSize: 13, color: T.muted, marginTop: 7 }}>{g.spec}</div>}
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 13, padding: '5px 11px', borderRadius: 4, background: G.tint, boxShadow: 'inset 0 0 0 1px ' + G.line }}>
            <CIcon name="gift" size={13} color={G.deep} stroke={1.9} />
            <span style={{ fontFamily: T.sans, fontSize: 11.5, fontWeight: 700, color: G.deep }}>购买创意摄影套餐 限时赠送</span>
          </div>
          <div style={{ fontFamily: T.sans, fontSize: 13.5, color: T.inkSoft, lineHeight: 1.75, margin: '16px 0 4px' }}>将你在玉龙雪山·蓝月谷的旅拍定格成「{g.name}」。下单创意摄影套餐即随单赠送，选照·排版·制作后到现场自提，把雪山的故事带回家。</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, margin: '20px 0 6px' }}>
            {feats.map(([ic, t]) =>
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
              <div style={{ width: 34, height: 34, borderRadius: 6, flexShrink: 0, background: T.field, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'inset 0 0 0 1px ' + T.line }}>
                <CIcon name={ic} size={17} color={T.ink} stroke={1.7} />
              </div>
              <span style={{ fontFamily: T.sans, fontSize: 13.5, color: T.inkSoft, lineHeight: 1.5 }}>{t}</span>
            </div>)}
          </div>
          <div style={{ fontFamily: T.sans, fontSize: 11.5, color: T.muted, lineHeight: 1.7, marginTop: 16, padding: '0 2px' }}>V1 阶段个性文创仅随创意摄影套餐赠送，暂不支持单独购买。</div>
        </div>
      </div>} />);
}

Object.assign(window, { ThemeDetailScreen, JingxiuFlowScreen, WenchuangFlowScreen, WenchuangDetailScreen });