// lvpai-home.jsx — 首页
const { LV_T: H_T, Icon: HIcon, Photo: HPhoto, Btn: HBtn, Card: HCard, Eyebrow: HEye,
  SectionHead: HSection, Price: HPrice, FreeTag: HFree, Pill: HPill, Divider: HDiv,
  WeChatNav: HNav, Screen: HScreen, StatusChip: HChip } = window;

function HomeStatusCard({ store, nav, onBind }) {
  const T = H_T;
  const g = store.group;
  const stage = store.stage;

  const Wrap = ({ children, onClick }) =>
  <div onClick={onClick} style={{ position: 'relative', borderRadius: 8, overflow: 'hidden', cursor: onClick ? 'pointer' : 'default',
    background: T.ink, boxShadow: '0 10px 30px rgba(26,25,22,0.18)' }}>{children}</div>;


  // unbound
  if (stage === 'unbound') {
    return (
      <Wrap>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.5 }}><HPhoto seed={0.05} ratio="auto" style={{ height: '100%' }} /></div>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(120deg, rgba(20,22,20,0.82), rgba(20,22,20,0.5))' }} />
        <div style={{ position: 'relative', padding: 20 }}>
          <HEye color="rgba(255,255,255,0.6)">JUST PHOTOGRAPHED?</HEye>
          <div style={{ fontFamily: T.sans, fontSize: 21, fontWeight: 700, color: '#fff', lineHeight: 1.35, margin: '12px 0 6px', letterSpacing: 0.3 }}>
            刚拍完照片？<br />扫描取片卡，免费领取本机位 1 张
          </div>
          <div style={{ fontFamily: T.sans, fontSize: 13, color: 'rgba(255,255,255,0.65)', marginBottom: 18 }}>取片卡 7 天内有效 · 可绑定多张</div>
          <div style={{ display: 'flex', gap: 10 }}>
            <HBtn kind="primary" icon="scan" onClick={onBind} style={{ background: '#fff', color: T.ink, flex: 1 }}>扫码绑卡</HBtn>
            <HBtn kind="ghost" onClick={() => onBind('manual')} style={{ color: '#fff', boxShadow: 'inset 0 0 0 1.4px rgba(255,255,255,0.4)' }}>输入卡号</HBtn>
          </div>
        </div>
      </Wrap>);

  }

  // uploading
  if (stage === 'uploading') {
    return (
      <HCard pad={18} style={{ borderRadius: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
          <HChip label="照片上传中" tone="going" />
          <span style={{ fontFamily: T.sans, fontSize: 12, color: T.muted }}>{g.spot} · {g.time}</span>
        </div>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <div style={{ width: 56, height: 56, borderRadius: 8, overflow: 'hidden', flexShrink: 0 }}><HPhoto seed={window.lvSeed(g.id)} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: T.sans, fontSize: 15, fontWeight: 700, color: T.ink }}>照片正在传输到云端</div>
            <div style={{ fontFamily: T.sans, fontSize: 12.5, color: T.muted, marginTop: 3 }}>稍等片刻，到达后通知你</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
          <HBtn kind="dark" size="sm" full onClick={() => store.set({ stage: 'arrived' })}>订阅到达提醒</HBtn>
          <HBtn kind="soft" size="sm" onClick={() => nav.push('bindHelp')}>异常帮助</HBtn>
        </div>
      </HCard>);

  }

  // arrived — slim reminder, taps into group detail
  if (stage === 'arrived') {
    const accent = window.lvAccent();
    return (
      <button onClick={() => nav.push('product', { cat: 'chuangyi', focusPos: 2 })}
      style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', textAlign: 'left', border: 'none', cursor: 'pointer',
        background: T.card, borderRadius: 8, padding: '11px 13px', boxShadow: '0 2px 14px rgba(26,25,22,0.06), inset 0 0 0 1px ' + T.line }}>
        {/* thumb + live dot */}
        <div style={{ position: 'relative', width: 44, height: 44, flexShrink: 0 }}>
          <div style={{ width: 44, height: 44, borderRadius: 6, overflow: 'hidden' }}><HPhoto src={g.photos[0].src} seed={window.lvSeed(g.photos[0].id)} /></div>
          <span style={{ position: 'absolute', top: -6, right: -6, padding: '1px 5px', borderRadius: 4, background: '#2FA84F', color: '#fff', fontFamily: T.sans, fontSize: 9, fontWeight: 700, letterSpacing: 0.3, boxShadow: '0 0 0 2px ' + T.card }}>新</span>
        </div>
        {/* text */}
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
            <span style={{ fontFamily: T.sans, fontSize: 15, fontWeight: 700, color: T.ink, letterSpacing: 0.2 }}>你的照片到了</span>
          </div>
          <div style={{ fontFamily: T.sans, fontSize: 12, color: T.muted, marginTop: 3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>2号机位(蓝月谷出口) · 6 张已到达，去看看</div>
        </div>
        <HIcon name="chevR" size={19} color={T.faint} stroke={1.8} style={{ flexShrink: 0 }} />
      </button>);

  }

  // claimed — free taken, not bought all
  if (stage === 'claimed') {
    return (
      <HCard pad={16} style={{ borderRadius: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
          <HChip label="已领取免费照片" tone="done" />
          <span style={{ fontFamily: T.sans, fontSize: 12, color: T.muted }}>{g.spot}</span>
        </div>
        <div style={{ display: 'flex', gap: 7, marginBottom: 16 }}>
          {g.photos.map((p, i) =>
          <div key={p.id} style={{ flex: 1, borderRadius: 6, overflow: 'hidden', position: 'relative' }}>
              <HPhoto src={p.src} seed={window.lvSeed(p.id)} locked={i !== 0} />
              {i === 0 && <div style={{ position: 'absolute', inset: 0, boxShadow: 'inset 0 0 0 2px ' + window.lvAccent() }} />}
            </div>
          )}
        </div>
        <div style={{ fontFamily: T.sans, fontSize: 13, color: T.inkSoft, marginBottom: 14, lineHeight: 1.5 }}>
          还有 <b style={{ color: T.ink }}>5 张</b> 未解锁。整组买更划算——
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <HBtn kind="primary" full onClick={() => nav.push('group', { groupId: g.id })}>
            <span>本组全部</span><HPrice value="29.9" size={17} color="#fff" style={{ marginLeft: 4 }} />
          </HBtn>
          <HBtn kind="soft" onClick={() => nav.push('group', { groupId: g.id })}>继续选片</HBtn>
        </div>
      </HCard>);

  }

  // bought — owns originals; recommend upgrades
  return (
    <HCard pad={16} style={{ borderRadius: 8 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <HChip label="已拥有本组原片" tone="done" />
        <span style={{ fontFamily: T.sans, fontSize: 12, color: T.muted }}>{g.spot} · 6 张</span>
      </div>
      <div style={{ fontFamily: T.sans, fontSize: 15, fontWeight: 700, color: T.ink, marginBottom: 4 }}>把这趟旅行变成作品</div>
      <div style={{ fontFamily: T.sans, fontSize: 13, color: T.muted, marginBottom: 14 }}>创意摄影 · 1 套 6 张，并赠送本次全部底片</div>
      <div style={{ display: 'flex', gap: 10 }}>
        <HBtn kind="dark" size="sm" full onClick={() => nav.push('product', { cat: 'chuangyi' })}>创意摄影 ¥79</HBtn>
        <HBtn kind="soft" size="sm" full onClick={() => nav.push('product', { cat: 'wenchuang' })}>做文创纪念</HBtn>
      </div>
    </HCard>);

}

function HeroBanner({ nav }) {
  return (
    <div onClick={() => nav.push('product', { cat: 'chuangyi' })}
      style={{ position: 'relative', width: '100%', aspectRatio: '1371 / 1147', overflow: 'hidden', cursor: 'pointer', background: H_T.paper }}>
      <img src={window.lvAsset('assets/hero-banner-v4.png')} alt="帧集 · 让旅行的每一帧都有温度" draggable="false"
        style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
    </div>);

}

// 前后对比滑杆：左=原图，右=创意/我的预览
function BeforeAfter({ beforeSrc, afterSrc, afterLabel }) {
  const T = H_T;
  const [pos, setPos] = React.useState(52);
  const ref = React.useRef(null);
  const drag = React.useRef(false);

  const moveTo = (clientX) => {
    const el = ref.current;if (!el) return;
    const r = el.getBoundingClientRect();
    const p = (clientX - r.left) / r.width * 100;
    setPos(Math.max(0, Math.min(100, p)));
  };
  const onDown = (e) => {drag.current = true;moveTo(e.clientX ?? (e.touches && e.touches[0].clientX));};
  const onMove = (e) => {if (!drag.current) return;e.preventDefault();moveTo(e.clientX ?? (e.touches && e.touches[0].clientX));};
  const onUp = () => {drag.current = false;};
  React.useEffect(() => {
    window.addEventListener('pointermove', onMove);
    window.addEventListener('pointerup', onUp);
    return () => {window.removeEventListener('pointermove', onMove);window.removeEventListener('pointerup', onUp);};
  }, []);

  const lbl = { position: 'absolute', top: 9, fontFamily: T.sans, fontSize: 10.5, fontWeight: 700, color: '#fff', padding: '3px 8px', borderRadius: 4, background: 'rgba(20,22,20,0.5)', backdropFilter: 'blur(4px)', letterSpacing: 0.5 };
  return (
    <div ref={ref} onPointerDown={onDown}
    style={{ position: 'relative', width: '100%', aspectRatio: '4 / 3', overflow: 'hidden', borderRadius: 7, cursor: 'ew-resize', touchAction: 'none', userSelect: 'none', background: '#0d0f0e' }}>
      {/* after (right) full */}
      <img src={window.lvAsset(afterSrc)} alt="" draggable="false" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      {/* before (left) clipped */}
      <img src={window.lvAsset(beforeSrc)} alt="" draggable="false" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block', clipPath: `inset(0 ${100 - pos}% 0 0)` }} />
      <span style={{ ...lbl, left: 9 }}>实拍</span>
      <span style={{ ...lbl, right: 9 }}>{afterLabel}</span>
      {/* handle */}
      <div style={{ position: 'absolute', top: 0, bottom: 0, left: `${pos}%`, width: 2, background: '#fff', transform: 'translateX(-1px)', boxShadow: '0 0 6px rgba(0,0,0,0.35)' }} />
      <div style={{ position: 'absolute', top: '50%', left: `${pos}%`, transform: 'translate(-50%,-50%)', width: 32, height: 32, borderRadius: 999, background: '#fff', boxShadow: '0 2px 8px rgba(0,0,0,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <HIcon name="chevL" size={13} color={T.ink} stroke={2.4} style={{ marginRight: -3 }} />
        <HIcon name="chevR" size={13} color={T.ink} stroke={2.4} style={{ marginLeft: -3 }} />
      </div>
    </div>);

}

// 创意摄影样片对比卡 —— 真实游客实拍 / 成片（非本人生成结果）
function HomePreviewCard({ nav }) {
  const T = H_T;
  return (
    <div style={{ margin: '0 18px' }}>
      <BeforeAfter beforeSrc="assets/ba-raw.jpg" afterSrc="assets/ba-final.jpg" afterLabel="创意摄影成片" />
      <button onClick={() => nav && 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 }}>
        <HIcon name="refresh" size={14} color={T.muted} stroke={1.9} />
        <span style={{ color: T.ink, fontWeight: 700 }}>换一组看看</span>
      </button>
    </div>);

}

// 拍摄机位（5 个）—— 每机位免费下载 1 张高清底片
function HomePositions({ nav }) {
  const T = H_T;
  const GOLD = window.LV_GOLD;
  const POS = [
  { no: 1, name: '蓝月谷入口', src: 'assets/p1.jpg' },
  { no: 2, name: '蓝月谷出口', src: 'assets/p6.jpg' },
  { no: 3, name: '云杉坪观景台', src: 'assets/p3.jpg' },
  { no: 4, name: '玉液湖栈道', src: 'assets/p4.jpg' },
  { no: 5, name: '听涛台', src: 'assets/p9.jpg' }];

  return (
    <div>
      <div style={{ padding: '0 18px', marginBottom: 14 }}>
        <div style={{ fontFamily: T.sans, fontSize: 19, fontWeight: 700, color: T.ink, letterSpacing: 0.2 }}>拍摄机位
</div>
        <div style={{ fontFamily: T.sans, fontSize: 12.5, color: T.muted, marginTop: 6, lineHeight: 1.5 }}>每个机位可免费下载 1 张高清底片，解锁套餐后可免费下载全部</div>
      </div>
      <div className="lv-hscroll" style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '0 18px 2px' }}>
        {POS.map((p) => <div key={p.no} onClick={() => nav.push('gallery', { title: '机位样片分享', kicker: 'MORE SPOTS', initSpot: p.no })} style={{ width: 150, flexShrink: 0, borderRadius: 8, overflow: 'hidden', background: T.card, boxShadow: '0 2px 12px rgba(26,25,22,0.05)', cursor: 'pointer' }}>
            <div style={{ position: 'relative', aspectRatio: '1 / 1', background: T.field, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ fontFamily: T.sans, fontSize: 46, fontWeight: 800, color: T.faint }}>{p.no}</span>
              <div style={{ position: 'absolute', left: 10, bottom: 9, color: T.inkSoft, fontFamily: T.sans, fontSize: 11, letterSpacing: 0.3, fontWeight: 500 }}>{p.no + ' 号机位 · ' + p.name}</div>
            </div>
          </div>
        )}
      </div>
    </div>);

}

// 我专属的定制文创 —— 解锁套餐后限时赠送（复用作品页文创卡）
function HomeGifts({ onBuy, nav }) {
  const T = H_T;
  const GIFTS = window.LV_GIFTS || [];
  return (
    <div>
      <div style={{ padding: '0 18px', marginBottom: 14 }}>
        <div style={{ fontFamily: T.sans, fontSize: 19, fontWeight: 700, color: T.ink, letterSpacing: 0.2 }}>个性文创</div>
        <div style={{ fontFamily: T.sans, fontSize: 12.5, color: T.muted, marginTop: 6 }}>现在定制，在景区出口即可领取哦</div>
      </div>
      <div className="lv-hscroll" style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '0 18px 4px' }}>
        {GIFTS.map((g) => window.GiftCard ? <window.GiftCard key={g.id} g={g} nav={nav} showcase onBuy={onBuy} /> : null)}
      </div>
    </div>);

}

function HomeMasonry({ featured, nav }) {
  const T = H_T;
  const col = (items) =>
  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
      {items.map((f) =>
    <div key={f.id} onClick={() => nav.push('workPhoto', { item: f, items: featured })} style={{ borderRadius: 8, overflow: 'hidden', background: T.card, boxShadow: '0 2px 12px rgba(26,25,22,0.05)', cursor: 'pointer' }}>
          <HPhoto src={f.src} seed={window.lvSeed(f.id)} ratio={f.ratio} tag={{ text: f.theme, bg: 'rgba(20,22,20,0.55)', color: '#fff', style: { backdropFilter: 'blur(4px)' } }} />
          <div style={{ padding: '11px 12px 13px' }}>
            <div style={{ fontFamily: T.sans, fontSize: 12.5, color: T.ink, lineHeight: 1.5 }}>“{f.review}”</div>
            <div style={{ marginTop: 9 }}>
              <span style={{ fontFamily: T.sans, fontSize: 11, color: T.muted }}>{f.by}</span>
            </div>
          </div>
        </div>
    )}
    </div>;

  const left = featured.filter((_, i) => i % 2 === 0);
  const right = featured.filter((_, i) => i % 2 === 1);
  return <div style={{ display: 'flex', gap: 12, padding: '0 18px' }}>{col(left)}{col(right)}</div>;
}

function HomeThemes({ themes, nav }) {
  const T = H_T;
  return (
    <div style={{ display: 'flex', gap: 14, overflowX: 'auto', padding: '0 18px 2px', scrollbarWidth: 'none' }} className="lv-hscroll">
      {themes.map((th) =>
      <div key={th.id} onClick={() => nav.push('themeDetail', { themeId: th.id })}
      style={{ minWidth: 220, flexShrink: 0, borderRadius: 8, overflow: 'hidden', background: T.card, boxShadow: '0 2px 14px rgba(26,25,22,0.06)', cursor: 'pointer' }}>
          <div style={{ position: 'relative' }}>
            <HPhoto src={th.src} seed={window.lvSeed(th.id)} ratio="4 / 3" tag={{ text: '6 张一套', bg: 'rgba(20,22,20,0.55)', color: '#fff', style: { backdropFilter: 'blur(4px)' } }} />
            {/* 6-grid hint */}
            <div style={{ position: 'absolute', right: 8, bottom: 8, display: 'grid', gridTemplateColumns: 'repeat(3,7px)', gap: 2, padding: 5, borderRadius: 5, background: 'rgba(20,22,20,0.4)', backdropFilter: 'blur(4px)' }}>
              {Array.from({ length: 6 }).map((_, i) => <span key={i} style={{ width: 7, height: 7, borderRadius: 1.5, background: 'rgba(255,255,255,0.85)' }} />)}
            </div>
          </div>
          <div style={{ padding: '13px 14px 15px' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontFamily: T.sans, fontSize: 16, fontWeight: 700, color: T.ink }}>{th.name}</div>
              <HPrice value={th.price} size={17} />
            </div>
            <div style={{ fontFamily: T.sans, fontSize: 12, color: T.muted, margin: '6px 0 0', lineHeight: 1.5 }}>{th.who} · 24–48h 交付</div>
          </div>
        </div>
      )}
    </div>);

}

function HomeSpots({ spots, nav }) {
  const T = H_T;
  const withNo = spots.map((s, i) => ({ ...s, no: i + 1 }));
  const works = withNo.map((s) => ({ id: s.id, theme: s.name, by: s.by, review: s.review, src: s.src, no: s.no, feat: s.feat }));
  const col = (items) =>
  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
      {items.map((s) =>
    <div key={s.id} onClick={() => nav.push('workPhoto', { item: works.find((w) => w.id === s.id), items: works, variant: 'spot' })}
    style={{ borderRadius: 8, overflow: 'hidden', background: T.card, boxShadow: '0 2px 12px rgba(26,25,22,0.05)', cursor: 'pointer' }}>
          <HPhoto src={s.src} seed={window.lvSeed(s.id)} ratio={s.ratio} tag={{ text: s.no + ' 号机位', bg: 'rgba(20,22,20,0.55)', color: '#fff', style: { backdropFilter: 'blur(4px)' } }} />
          <div style={{ padding: '11px 12px 13px' }}>
            <div style={{ fontFamily: T.sans, fontSize: 12.5, color: T.ink, lineHeight: 1.5 }}>“{s.review}”</div>
            <div style={{ marginTop: 9 }}>
              <span style={{ fontFamily: T.sans, fontSize: 11, color: T.muted }}>{s.by}</span>
            </div>
          </div>
        </div>
    )}
    </div>;

  const left = withNo.filter((_, i) => i % 2 === 0);
  const right = withNo.filter((_, i) => i % 2 === 1);
  return <div style={{ display: 'flex', gap: 12, padding: '0 18px' }}>{col(left)}{col(right)}</div>;
}

// 游客示例照片 · 独立页（瀑布流大图浏览）
function GalleryScreen({ nav, title, kicker, items, initSpot }) {
  const T = H_T;
  const fullList = items || window.LV_DATA.GUEST_GALLERY;
  const SPOTS = window.LV_DATA.GALLERY_SPOTS;
  const hasSpots = !items && fullList.some((f) => f.spot);
  const [spot, setSpot] = React.useState(initSpot || 0); // 0 = 全部
  const list = spot ? fullList.filter((f) => f.spot === spot) : fullList;
  const col = (arr) =>
  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
      {arr.map((f) =>
    <div key={f.id} onClick={() => nav.push('caseDetail', { item: f, items: list })} style={{ borderRadius: 8, overflow: 'hidden', background: T.card, boxShadow: '0 2px 12px rgba(26,25,22,0.05)', cursor: 'pointer' }}>
          <HPhoto src={f.src} seed={window.lvSeed(f.id)} ratio={f.ratio} />
          <div style={{ padding: '10px 12px 12px' }}>
            <HEye style={{ fontSize: 9.5, letterSpacing: 1.4 }}>{f.kind}</HEye>
            <div style={{ fontFamily: T.sans, fontSize: 13.5, fontWeight: 600, color: T.ink, marginTop: 5 }}>{f.title}</div>
          </div>
        </div>
    )}
    </div>;
  const left = list.filter((_, i) => i % 2 === 0);
  const right = list.filter((_, i) => i % 2 === 1);
  const chip = (active) => ({
    flexShrink: 0, cursor: 'pointer', whiteSpace: 'nowrap', border: 'none',
    fontFamily: T.sans, fontSize: 13, fontWeight: active ? 700 : 500,
    color: active ? '#fff' : T.muted, background: active ? T.ink : 'transparent',
    borderRadius: 4, padding: '7px 15px', letterSpacing: 0.3
  });
  const filterBar = hasSpots ?
  <div style={{ display: 'flex', gap: 6, overflowX: 'auto', padding: '2px 18px 14px', WebkitOverflowScrolling: 'touch', scrollbarWidth: 'none' }}>
      <button style={chip(spot === 0)} onClick={() => setSpot(0)}>全部</button>
      {SPOTS.map((s) =>
    <button key={s.no} style={chip(spot === s.no)} onClick={() => setSpot(s.no)}>{s.no}号机位</button>
    )}
    </div> :
  null;
  return (
    <HScreen
      nav={<HNav title={title || '机位样片分享'} onBack={() => nav.pop()} />}
      body={<div style={{ paddingBottom: 28 }}>
        <div style={{ padding: '14px 18px 16px' }}>
          <HEye>{kicker || 'GUEST GALLERY'}</HEye>
          <div style={{ fontFamily: T.sans, fontSize: 13, color: T.muted, lineHeight: 1.6, marginTop: 8 }}>真实游客在各机位拍下的现场照片与创意摄影示例，均经本人单独授权展示。</div>
        </div>
        {filterBar}
        <div style={{ display: 'flex', gap: 12, padding: '0 18px' }}>{col(left)}{col(right)}</div>
      </div>} />);

}

function HomeCultural({ cultural, nav }) {
  const T = H_T;
  return (
    <div style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '0 18px 2px', scrollbarWidth: 'none' }} className="lv-hscroll">
      {cultural.map((c) =>
      <div key={c.id} onClick={() => nav.push('product', { cat: 'wenchuang', sku: c.id })} style={{ minWidth: 150, flexShrink: 0, borderRadius: 8, overflow: 'hidden', background: T.card, boxShadow: '0 2px 12px rgba(26,25,22,0.05)', cursor: 'pointer' }}>
          <HPhoto src={c.src} pos="center" ratio="1 / 1" tag={{ text: '成品效果', bg: 'rgba(255,255,255,0.9)' }} />
          <div style={{ padding: '11px 12px 13px' }}>
            <div style={{ fontFamily: T.sans, fontSize: 13.5, fontWeight: 600, color: T.ink, lineHeight: 1.3 }}>{c.name}</div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
              <HPrice value={c.price} size={16} />
              <span style={{ fontFamily: T.sans, fontSize: 11, color: T.muted }}>{c.deliver}</span>
            </div>
          </div>
        </div>
      )}
    </div>);

}

function HomeScreen({ store, nav, onBind, scene }) {
  const T = H_T;
  const D = window.LV_DATA;
  const gap = (h = 28) => <div style={{ height: h }} />;
  const [buyOpen, setBuyOpen] = React.useState(false);
  const [pay, setPay] = React.useState(null);

  const onPaid = (item) => {
    store.addOrder({ cat: '创意摄影', name: item.name, tone: item.tone || 'lake', amount: item.amount,
      state: '正在制作', group: 'going', eta: '供应商正在为你制作，订单不可再修改内容',
      timeline: [{ t: '已确认内容', done: true, time: '刚刚' }, { t: '正在制作', done: true, time: '刚刚', cur: true }, { t: '已定制', done: false }, { t: '已完成', done: false }] });
    setPay({ name: item.name, sub: item.sub, amount: item.amount, tone: item.tone });
  };
  return (
    <>
    <HScreen
        nav={<HNav
          left={<div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
          <HIcon name="pin" size={17} color={T.ink} stroke={1.7} />
          <span style={{ fontFamily: T.sans, fontSize: 16, fontWeight: 700, color: T.ink, letterSpacing: 0.2 }}>玉龙雪山·蓝月谷</span>
        </div>}
          />
        }
        body={<div style={{ paddingBottom: 28 }}>
        <HeroBanner nav={nav} />
        <div style={{ position: 'relative', zIndex: 2, marginTop: -20, padding: '0 18px 0' }}>
          {scene && scene.key !== 's1' && window.SceneHomeCard ?
            <window.SceneHomeCard scene={scene} nav={nav} onBuy={() => setBuyOpen(true)} /> :
            <HomeStatusCard store={store} nav={nav} onBind={onBind} />}
        </div>
        {gap(14)}
        <window.ChuangyiHero nav={nav} mode="family" store={store} onBuy={() => setBuyOpen(true)} />
        {gap(20)}
        <HomePreviewCard nav={nav} />
        {gap(34)}
        <HSection kicker="GUEST WORKS" title="最新分享的创意摄影" action="更多" onAction={() => nav.push('gallery', { title: '机位样片分享', kicker: 'GUEST WORKS' })} style={{ margin: '0 18px 16px' }} />
        <HomeMasonry featured={D.FEATURED} nav={nav} />
        {gap(34)}
        <HSection kicker="MORE SPOTS" title="免费机位 · 一起晒美照" action="更多" onAction={() => nav.push('gallery', { title: '机位示例', kicker: 'MORE SPOTS' })} style={{ margin: '0 18px 14px' }} />
        <HomeSpots spots={D.SPOTS} nav={nav} />
        {gap(30)}
      </div>} />

    {window.ChuangyiBuySheet && <window.ChuangyiBuySheet open={buyOpen} onClose={() => setBuyOpen(false)} store={store} onPaid={onPaid} />}
    {window.PaymentSheet && <window.PaymentSheet open={!!pay} item={pay} onClose={() => setPay(null)} onPaid={() => {setPay(null);nav.reset('orders');}} />}
    </>);


}

Object.assign(window, { HomeScreen, GalleryScreen, BeforeAfter });