// V2 · 城市橙 (Market Grid)
// 花瓣/涂鸦王国式卡片瀑布流, 高饱和橙+蓝, 圆润卡片, 电商转化导向
// 无衬线 PingFang, 信息密集, 微动效

const V2_C = {
  bg: '#f3f5f8',
  card: '#ffffff',
  navBg: '#0b1220',       // 深色页眉
  navInk: '#f2f4f8',
  ink: '#0f172a',
  sub: '#64748b',
  line: '#e5e8ef',
  primary: '#2563eb',       // 冷蓝作主 CTA
  primarySoft: '#eff4ff',
  secondary: '#0891b2',
  success: '#12b981',
  vip: '#4f46e5',
  warn: '#f59e0b',
};

const v2Font = '"PingFang SC", "HarmonyOS Sans", system-ui, -apple-system, sans-serif';

if (typeof document !== 'undefined' && !document.getElementById('v2-styles')) {
  const s = document.createElement('style');
  s.id = 'v2-styles';
  s.textContent = `
    .v2-card{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s;}
    .v2-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px -8px rgba(255,90,31,.15),0 4px 12px rgba(0,0,0,.06);}
    .v2-card:hover .v2-cover{transform:scale(1.04);}
    .v2-cover{transition:transform .5s ease;}
    .v2-btn-primary{background:${V2_C.primary};color:#fff;border:none;border-radius:10px;padding:12px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .18s;}
    .v2-btn-primary:hover{background:#e94c14;transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,90,31,.35);}
    .v2-btn-ghost{background:#fff;color:${V2_C.ink};border:1px solid ${V2_C.line};border-radius:10px;padding:11px 22px;font-size:14px;font-weight:500;cursor:pointer;transition:all .18s;}
    .v2-btn-ghost:hover{border-color:${V2_C.primary};color:${V2_C.primary};}
    .v2-chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:500;background:${V2_C.primarySoft};color:${V2_C.primary};}
    .v2-heart:hover{color:${V2_C.primary}!important;}
  `;
  document.head.appendChild(s);
}

// 顶栏
function V2Nav({ page, goto, cartCount }) {
  const [q, setQ] = React.useState('');
  return (
    <div style={{ background: V2_C.navBg, padding: '14px 32px', position: 'sticky', top: 0, zIndex: 10, fontFamily: v2Font, boxShadow: '0 1px 0 rgba(255,255,255,.04)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
        <div onClick={() => goto('home')} style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
          <div style={{ width: 32, height: 32, borderRadius: 9, background: `linear-gradient(135deg, ${V2_C.primary}, #60a5fa)`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 16 }}>花</div>
          <div style={{ fontWeight: 700, fontSize: 18, color: V2_C.navInk, letterSpacing: -0.3 }}>花集 Huaji</div>
        </div>
        <nav style={{ display: 'flex', gap: 24, fontSize: 14 }}>
          {[['home','首页'],['list','花型市场'],['d','设计师'],['v','VIP专区'],['f','免费'] ].map(([k,l]) => {
            const active = (k==='home'&&page==='home')||(k==='list'&&page==='list');
            return (
              <span key={k} onClick={() => (k==='home'||k==='list') && goto(k==='home'?'home':'list')} style={{
                color: active ? '#60a5fa' : '#cbd5e1',
                fontWeight: active ? 600 : 400,
                cursor: 'pointer',
              }}>{l}</span>
            );
          })}
        </nav>
        <div style={{ flex: 1, maxWidth: 420, position: 'relative' }}>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="搜索花型、设计师、标签..." style={{
            width: '100%', background: '#1a2236', border: `1px solid #283046`, color: V2_C.navInk,
            borderRadius: 10, padding: '10px 14px 10px 38px', fontSize: 13, outline: 'none', fontFamily: v2Font,
          }} />
          <span style={{ position: 'absolute', left: 14, top: 10, fontSize: 14, color: '#94a3b8' }}>🔍</span>
          <span style={{ position: 'absolute', right: 10, top: 8, background: V2_C.primary, color: '#fff', borderRadius: 6, padding: '3px 8px', fontSize: 10, cursor: 'pointer' }}>以图搜图</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, fontSize: 13, color: '#cbd5e1' }}>
          <span style={{ cursor: 'pointer' }}>上传作品</span>
          <span style={{ cursor: 'pointer', position: 'relative' }}>
            🛒 <span style={{ fontSize: 13, marginLeft: 4 }}>购物车</span>
            {cartCount > 0 && <span style={{ position: 'absolute', top: -6, left: 10, background: V2_C.primary, color: '#fff', borderRadius: 10, padding: '1px 6px', fontSize: 10, fontWeight: 700 }}>{cartCount}</span>}
          </span>
          <div style={{ width: 32, height: 32, borderRadius: '50%', background: `linear-gradient(135deg, #fbbf24, ${V2_C.primary})`, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 600 }}>李</div>
        </div>
      </div>
    </div>
  );
}

// 卡片 —— 花瓣式,圆润悬浮
function V2Card({ a, onClick }) {
  const p = PATTERNS[a.pattern];
  return (
    <div className="v2-card" onClick={onClick} style={{
      background: V2_C.card, borderRadius: 14, overflow: 'hidden', cursor: 'pointer',
      boxShadow: '0 1px 3px rgba(0,0,0,.05)', fontFamily: v2Font,
    }}>
      <div style={{ height: 240, overflow: 'hidden', position: 'relative' }}>
        <div className="v2-cover" style={{
          height: '100%', background: p.bg, backgroundSize: p.bgSize || 'auto',
        }} />
        {/* 水印 */}
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,.3)', fontSize: 11, letterSpacing: 4, fontWeight: 600, transform: 'rotate(-25deg)' }}>
          HUAJI · {a.id}
        </div>
        {/* 角标 */}
        <div style={{ position: 'absolute', top: 10, left: 10, display: 'flex', gap: 6 }}>
          {a.exclusive && <span className="v2-chip" style={{ background: 'rgba(0,0,0,.7)', color: '#fff' }}>可独家</span>}
          {a.year === 2025 && <span className="v2-chip" style={{ background: V2_C.primary, color: '#fff' }}>NEW</span>}
        </div>
        <div style={{ position: 'absolute', top: 10, right: 10, background: 'rgba(255,255,255,.9)', borderRadius: 20, padding: '5px 10px', fontSize: 11, fontWeight: 600 }}>
          ♡ {a.fav.toLocaleString()}
        </div>
      </div>
      <div style={{ padding: '14px 14px 16px' }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: V2_C.ink, marginBottom: 6, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.title}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
          <div style={{ width: 20, height: 20, borderRadius: '50%', background: V2_C.line, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 600, color: V2_C.sub }}>{a.designer[0]}</div>
          <span style={{ fontSize: 12, color: V2_C.sub }}>{a.designer}</span>
          <span style={{ fontSize: 11, color: V2_C.sub }}>· ⬇ {a.dl}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <span style={{ fontSize: 11, color: V2_C.sub }}>授权价</span>
            <span style={{ fontSize: 18, color: V2_C.primary, fontWeight: 700, marginLeft: 4 }}>¥{a.price}</span>
            <span style={{ fontSize: 10, color: V2_C.sub, marginLeft: 2 }}>起</span>
          </div>
          <button style={{ background: V2_C.primarySoft, color: V2_C.primary, border: 'none', borderRadius: 8, padding: '6px 12px', fontSize: 12, fontWeight: 600, cursor: 'pointer' }} onClick={e => { e.stopPropagation(); onClick(); }}>加购</button>
        </div>
      </div>
    </div>
  );
}

// 首页
function V2Home({ goto, openArt }) {
  const [bannerIdx, setBannerIdx] = React.useState(0);
  const banners = [
    { title: '2025 春夏花型趋势报告', sub: '主编精选 · 168 件可商用花型', color: `linear-gradient(135deg, ${V2_C.primary} 0%, #ff9b5a 100%)`, tag: '本周推荐' },
    { title: '独家花型专场 · 8 折起', sub: '仅此一家 · 购买即锁定分类', color: `linear-gradient(135deg, #1e3a8a 0%, ${V2_C.secondary} 100%)`, tag: '限时活动' },
    { title: '新人礼包 · ¥50 无门槛券', sub: '首次下单即领', color: `linear-gradient(135deg, #059669 0%, #34d399 100%)`, tag: '新人专享' },
  ];
  return (
    <div style={{ background: V2_C.bg, fontFamily: v2Font, minHeight: '100%' }}>
      {/* Banner */}
      <section style={{ padding: '20px 32px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 12 }}>
          <div style={{
            borderRadius: 16, overflow: 'hidden', height: 280, position: 'relative', cursor: 'pointer',
            background: banners[bannerIdx].color, padding: 36, color: '#fff', display: 'flex', flexDirection: 'column', justifyContent: 'center',
          }}>
            <span style={{ fontSize: 12, background: 'rgba(255,255,255,.2)', padding: '4px 10px', borderRadius: 20, alignSelf: 'flex-start', marginBottom: 16 }}>{banners[bannerIdx].tag}</span>
            <h2 style={{ fontSize: 34, margin: '0 0 10px', fontWeight: 700, letterSpacing: -0.5 }}>{banners[bannerIdx].title}</h2>
            <p style={{ fontSize: 15, opacity: .9, margin: 0 }}>{banners[bannerIdx].sub}</p>
            <div style={{ position: 'absolute', bottom: 20, right: 24, display: 'flex', gap: 6 }}>
              {banners.map((_, i) => (
                <div key={i} onClick={e => { e.stopPropagation(); setBannerIdx(i); }} style={{
                  width: i === bannerIdx ? 22 : 8, height: 8, borderRadius: 4,
                  background: i === bannerIdx ? '#fff' : 'rgba(255,255,255,.5)', cursor: 'pointer', transition: 'all .2s',
                }} />
              ))}
            </div>
          </div>
          <div style={{ borderRadius: 16, overflow: 'hidden', height: 280, background: 'linear-gradient(135deg, #fef3c7, #fbbf24)', padding: 24, cursor: 'pointer', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 11, color: V2_C.vip, fontWeight: 700, letterSpacing: 2, marginBottom: 8 }}>VIP 会员</div>
              <h3 style={{ fontSize: 20, margin: '0 0 6px', color: V2_C.ink }}>VIP 专区</h3>
              <p style={{ fontSize: 12, color: V2_C.sub, margin: 0, lineHeight: 1.5 }}>每月 6 张免费券<br/>全站 8 折<br/>独享精品花型</p>
            </div>
            <div style={{ fontSize: 13, color: V2_C.vip, fontWeight: 700 }}>立即开通 →</div>
          </div>
          <div style={{ borderRadius: 16, overflow: 'hidden', height: 280, background: '#fff', border: `1px solid ${V2_C.line}`, padding: 24, cursor: 'pointer', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 11, color: V2_C.secondary, fontWeight: 700, letterSpacing: 2, marginBottom: 8 }}>设计师入驻</div>
              <h3 style={{ fontSize: 20, margin: '0 0 6px', color: V2_C.ink }}>卖花型赚收入</h3>
              <p style={{ fontSize: 12, color: V2_C.sub, margin: 0, lineHeight: 1.5 }}>最高 80% 分成<br/>T+7 自动结算<br/>平台 300 万买家</p>
            </div>
            <div style={{ fontSize: 13, color: V2_C.secondary, fontWeight: 700 }}>申请入驻 →</div>
          </div>
        </div>
      </section>

      {/* 分类快捷 */}
      <section style={{ padding: '32px 32px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
          {CATS.map(c => (
            <div key={c.id} onClick={() => goto('list')} style={{
              background: '#fff', borderRadius: 12, padding: 16, textAlign: 'center', cursor: 'pointer', border: `1px solid ${V2_C.line}`,
            }} className="v2-card">
              <div style={{ fontSize: 26, marginBottom: 4 }}>{['🌸','◇','🦁','✦','卍','≋'][CATS.indexOf(c)]}</div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{c.cn}</div>
              <div style={{ fontSize: 11, color: V2_C.sub }}>{c.count.toLocaleString()}</div>
            </div>
          ))}
        </div>
      </section>

      {/* 本周热门 */}
      <section style={{ padding: '40px 32px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
          <div>
            <h2 style={{ fontSize: 22, margin: 0, fontWeight: 700, color: V2_C.ink }}>🔥 本周热门</h2>
            <span style={{ fontSize: 13, color: V2_C.sub }}>近 7 天下载最多的花型</span>
          </div>
          <div style={{ display: 'flex', gap: 8, fontSize: 13 }}>
            {['全部','花卉','几何','动物','抽象'].map((t,i) => (
              <span key={t} style={{
                padding: '6px 14px', borderRadius: 999, cursor: 'pointer',
                background: i === 0 ? V2_C.ink : '#fff', color: i === 0 ? '#fff' : V2_C.ink,
                border: `1px solid ${i === 0 ? V2_C.ink : V2_C.line}`, fontWeight: i === 0 ? 600 : 400,
              }}>{t}</span>
            ))}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {ARTWORKS.slice(0,8).map(a => <V2Card key={a.id} a={a} onClick={() => openArt(a)} />)}
        </div>
      </section>

      {/* 设计师推荐 */}
      <section style={{ padding: '40px 32px 0' }}>
        <h2 style={{ fontSize: 22, margin: '0 0 20px', fontWeight: 700 }}>✨ 精选设计师</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {Object.entries(DESIGNERS).slice(0,4).map(([id,d]) => (
            <div key={id} style={{ background: '#fff', borderRadius: 14, padding: 16, border: `1px solid ${V2_C.line}`, cursor: 'pointer' }} className="v2-card">
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                <div style={{ width: 44, height: 44, borderRadius: '50%', background: `linear-gradient(135deg, ${V2_C.primary}, #ff8a4f)`, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 16 }}>{d.name[0]}</div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{d.name}</div>
                  <div style={{ fontSize: 11, color: V2_C.sub }}>{d.loc} · {d.works} 作品</div>
                </div>
                <button style={{ marginLeft: 'auto', padding: '4px 12px', background: V2_C.primarySoft, color: V2_C.primary, border: 'none', borderRadius: 16, fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>+ 关注</button>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}>
                {ARTWORKS.filter(a => a.designer_id === id).slice(0,3).map(a => (
                  <div key={a.id} style={{ aspectRatio: '1', background: PATTERNS[a.pattern].bg, backgroundSize: PATTERNS[a.pattern].bgSize || 'auto', borderRadius: 6 }} />
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* 最新上架 */}
      <section style={{ padding: '40px 32px 60px' }}>
        <h2 style={{ fontSize: 22, margin: '0 0 20px', fontWeight: 700 }}>🆕 最新上架</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {ARTWORKS.slice(4,12).map(a => <V2Card key={a.id} a={a} onClick={() => openArt(a)} />)}
        </div>
      </section>

      <footer style={{ background: '#fff', borderTop: `1px solid ${V2_C.line}`, padding: '24px 32px', fontSize: 12, color: V2_C.sub, display: 'flex', justifyContent: 'space-between' }}>
        <span>© 2025 花集 · 沪ICP备 2024XXXXXX 号 · 用户协议 · 隐私政策</span>
        <span>客服微信 huaji-cs · 400-999-8888</span>
      </footer>
    </div>
  );
}

// 列表页 —— 左侧筛选 + 右侧卡片瀑布流
function V2List({ goto, openArt }) {
  const [cat, setCat] = React.useState('all');
  const [price, setPrice] = React.useState('all');
  const filtered = cat === 'all' ? ARTWORKS : ARTWORKS.filter(a => a.cat === cat);
  return (
    <div style={{ background: V2_C.bg, fontFamily: v2Font, minHeight: '100%' }}>
      <div style={{ padding: '20px 32px', background: '#fff', borderBottom: `1px solid ${V2_C.line}` }}>
        <div style={{ fontSize: 12, color: V2_C.sub, marginBottom: 10 }}>首页 / 花型市场</div>
        <h1 style={{ fontSize: 24, margin: 0, fontWeight: 700 }}>花型市场 <span style={{ fontSize: 14, color: V2_C.sub, fontWeight: 400 }}>共 12,847 件可商用花型</span></h1>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 20, padding: '20px 32px' }}>
        {/* 左边 */}
        <aside style={{ background: '#fff', borderRadius: 12, padding: 18, height: 'fit-content', position: 'sticky', top: 80 }}>
          <FilterGroup title="分类">
            <FilterItem active={cat==='all'} onClick={() => setCat('all')}>全部</FilterItem>
            {CATS.map(c => <FilterItem key={c.id} active={cat===c.id} onClick={() => setCat(c.id)}>{c.cn}<span style={{ color: V2_C.sub, fontSize: 11 }}> {c.count}</span></FilterItem>)}
          </FilterGroup>
          <FilterGroup title="价格">
            {[['all','全部'],['f','免费'],['0-200','¥0 - 200'],['200-500','¥200 - 500'],['500+','¥500+']].map(([k,l]) => (
              <FilterItem key={k} active={price===k} onClick={() => setPrice(k)}>{l}</FilterItem>
            ))}
          </FilterGroup>
          <FilterGroup title="授权类型">
            <label style={checkRow}><input type="checkbox" defaultChecked /> 非独家</label>
            <label style={checkRow}><input type="checkbox" /> 独家</label>
            <label style={checkRow}><input type="checkbox" /> 买断</label>
          </FilterGroup>
          <FilterGroup title="文件格式">
            {['PSD','AI','TIFF','SVG','PNG'].map(f => (
              <label key={f} style={checkRow}><input type="checkbox" /> {f}</label>
            ))}
          </FilterGroup>
          <FilterGroup title="颜色">
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {['#e74c3c','#f39c12','#f1c40f','#2ecc71','#3498db','#9b59b6','#1a1a1a','#ffffff'].map(c => (
                <div key={c} style={{ width: 22, height: 22, borderRadius: '50%', background: c, border: `1px solid ${V2_C.line}`, cursor: 'pointer' }} />
              ))}
            </div>
          </FilterGroup>
        </aside>

        {/* 右边 */}
        <div>
          <div style={{ background: '#fff', borderRadius: 12, padding: '12px 16px', marginBottom: 16, display: 'flex', alignItems: 'center', gap: 16, fontSize: 13 }}>
            <span style={{ color: V2_C.sub }}>排序:</span>
            {['综合','最新','最热','价格↑','价格↓'].map((s,i) => (
              <span key={s} style={{ cursor: 'pointer', color: i === 0 ? V2_C.primary : V2_C.ink, fontWeight: i === 0 ? 600 : 400 }}>{s}</span>
            ))}
            <span style={{ marginLeft: 'auto', color: V2_C.sub }}>共 {filtered.length} 件</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {filtered.map(a => <V2Card key={a.id} a={a} onClick={() => openArt(a)} />)}
          </div>
          <div style={{ textAlign: 'center', marginTop: 32, color: V2_C.sub, fontSize: 13 }}>
            — 下拉加载更多 —
          </div>
        </div>
      </div>
    </div>
  );
}

const checkRow = { display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: V2_C.ink, cursor: 'pointer', padding: '4px 0' };

function FilterGroup({ title, children }) {
  return (
    <div style={{ marginBottom: 20 }}>
      <div style={{ fontWeight: 700, fontSize: 13, marginBottom: 10, color: V2_C.ink }}>{title}</div>
      <div>{children}</div>
    </div>
  );
}
function FilterItem({ children, active, onClick }) {
  return (
    <div onClick={onClick} style={{
      padding: '6px 10px', borderRadius: 6, cursor: 'pointer', fontSize: 13, marginBottom: 2,
      background: active ? V2_C.primarySoft : 'transparent',
      color: active ? V2_C.primary : V2_C.ink, fontWeight: active ? 600 : 400,
    }}>{children}</div>
  );
}

// 详情页
function V2Detail({ a, goto, onBuy, cart, addCart }) {
  const [mockup, setMockup] = React.useState('tshirt');
  const p = PATTERNS[a.pattern];
  const d = DESIGNERS[a.designer_id];
  const related = ARTWORKS.filter(x => x.cat === a.cat && x.id !== a.id).slice(0, 4);
  const [license, setLicense] = React.useState('non_exclusive');
  const priceMap = { non_exclusive: a.price, exclusive: a.exclusive, buyout: a.buyout };
  const currentPrice = priceMap[license];

  return (
    <div style={{ background: V2_C.bg, fontFamily: v2Font, minHeight: '100%' }}>
      <div style={{ padding: '16px 32px', fontSize: 12, color: V2_C.sub }}>
        <span style={{ cursor: 'pointer' }} onClick={() => goto('home')}>首页</span>
        <span style={{ margin: '0 6px' }}>/</span>
        <span style={{ cursor: 'pointer' }} onClick={() => goto('list')}>花型市场</span>
        <span style={{ margin: '0 6px' }}>/</span>
        <span style={{ cursor: 'pointer' }} onClick={() => goto('list')}>{a.cat_cn}</span>
        <span style={{ margin: '0 6px' }}>/</span>
        <span style={{ color: V2_C.ink }}>{a.title}</span>
      </div>
      <div style={{ padding: '0 32px 24px', display: 'grid', gridTemplateColumns: '1fr 380px', gap: 24 }}>
        {/* 左 */}
        <div>
          <div style={{ background: '#fff', borderRadius: 14, padding: 20, border: `1px solid ${V2_C.line}` }}>
            <div style={{ aspectRatio: '1', background: p.bg, backgroundSize: p.bgSize || 'auto', borderRadius: 10, position: 'relative', marginBottom: 16 }}>
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,.2)', fontSize: 18, letterSpacing: 8, fontWeight: 700, transform: 'rotate(-25deg)' }}>HUAJI · {a.id}</div>
            </div>
            {/* 缩略图 */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
              {[0,1,2,3,4].map(i => (
                <div key={i} style={{ aspectRatio: '1', background: p.bg, backgroundSize: p.bgSize || 'auto', borderRadius: 6, cursor: 'pointer', border: i === 0 ? `2px solid ${V2_C.primary}` : `1px solid ${V2_C.line}` }} />
              ))}
            </div>
          </div>

          {/* 模特效果图 */}
          <div style={{ background: '#fff', borderRadius: 14, padding: 20, marginTop: 16, border: `1px solid ${V2_C.line}` }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
              <h3 style={{ fontSize: 15, margin: 0, fontWeight: 700 }}>🧥 模特效果实时预览</h3>
              <div style={{ display: 'flex', gap: 6 }}>
                {[['tshirt','T恤'],['pillow','枕套'],['wall','墙纸'],['dress','连衣裙']].map(([k,l]) => (
                  <span key={k} onClick={() => setMockup(k)} style={{
                    padding: '4px 12px', borderRadius: 16, fontSize: 12, cursor: 'pointer',
                    background: mockup === k ? V2_C.primary : V2_C.bg,
                    color: mockup === k ? '#fff' : V2_C.ink, fontWeight: mockup === k ? 600 : 400,
                  }}>{l}</span>
                ))}
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
              {[0,1,2].map(i => (
                <div key={i} style={{ aspectRatio: '1', background: '#f3f1ec', borderRadius: 10, border: `1px solid ${V2_C.line}`, position: 'relative', overflow: 'hidden' }}>
                  <V2Mockup type={mockup} pattern={a.pattern} />
                </div>
              ))}
            </div>
            <div style={{ fontSize: 11, color: V2_C.sub, textAlign: 'center', marginTop: 10 }}>💡 拖动花型可调整在模特上的位置(不产出正稿)</div>
          </div>

          {/* 详细信息 */}
          <div style={{ background: '#fff', borderRadius: 14, padding: 20, marginTop: 16, border: `1px solid ${V2_C.line}` }}>
            <h3 style={{ fontSize: 15, margin: '0 0 14px', fontWeight: 700 }}>📋 作品详情</h3>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, fontSize: 13 }}>
              {[['编号', a.id], ['分类', a.cat_cn], ['尺寸', a.size], ['分辨率', `${a.dpi} DPI`], ['文件格式', a.fmt.join('/')], ['创作年份', a.year]].map(([k,v]) => (
                <div key={k}>
                  <div style={{ color: V2_C.sub, fontSize: 11, marginBottom: 3 }}>{k}</div>
                  <div style={{ fontWeight: 600 }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${V2_C.line}` }}>
              <div style={{ color: V2_C.sub, fontSize: 11, marginBottom: 6 }}>标签</div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {a.tags.map(t => <span key={t} className="v2-chip">#{t}</span>)}
              </div>
            </div>
          </div>
        </div>

        {/* 右:购买栏(sticky) */}
        <div style={{ position: 'sticky', top: 80, height: 'fit-content' }}>
          <div style={{ background: '#fff', borderRadius: 14, padding: 20, border: `1px solid ${V2_C.line}` }}>
            <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
              {a.year === 2025 && <span className="v2-chip" style={{ background: V2_C.primary, color: '#fff' }}>NEW</span>}
              <span className="v2-chip" style={{ background: V2_C.primarySoft, color: V2_C.primary }}>可商用</span>
              <span className="v2-chip" style={{ background: '#e0f2fe', color: V2_C.secondary }}>授权证书</span>
            </div>
            <h1 style={{ fontSize: 22, margin: '0 0 8px', fontWeight: 700, lineHeight: 1.3 }}>{a.title}</h1>
            <div style={{ fontSize: 12, color: V2_C.sub, marginBottom: 16 }}>№ {a.id} · ⬇ {a.dl} 次下载 · ♡ {a.fav.toLocaleString()}</div>

            {/* 授权类型选择 */}
            <div style={{ background: V2_C.bg, borderRadius: 10, padding: 12, marginBottom: 16 }}>
              <div style={{ fontSize: 12, color: V2_C.sub, marginBottom: 10, fontWeight: 600 }}>选择授权类型</div>
              <V2License active={license==='non_exclusive'} onClick={() => setLicense('non_exclusive')} label="非独家授权" sub="可商用·不限次" price={a.price} />
              {a.exclusive && <V2License active={license==='exclusive'} onClick={() => setLicense('exclusive')} label="独家授权" sub="一年内仅你可用" price={a.exclusive} tag="EXCLUSIVE" />}
              {a.buyout && <V2License active={license==='buyout'} onClick={() => setLicense('buyout')} label="买断" sub="著作权转让" price={a.buyout} />}
            </div>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
              <span style={{ fontSize: 13, color: V2_C.sub }}>合计</span>
              <span style={{ fontSize: 32, color: V2_C.primary, fontWeight: 700 }}>¥{currentPrice?.toLocaleString()}</span>
            </div>
            <div style={{ fontSize: 11, color: V2_C.success, marginBottom: 14 }}>✓ VIP 8折后 ¥{Math.round(currentPrice * 0.8).toLocaleString()}</div>

            <button onClick={() => onBuy(a, license)} className="v2-btn-primary" style={{ width: '100%', marginBottom: 8, padding: '14px' }}>立即购买</button>
            <button onClick={() => addCart(a)} className="v2-btn-ghost" style={{ width: '100%', padding: '13px' }}>{cart.find(c => c.id === a.id) ? '✓ 已加入购物车' : '加入购物车'}</button>

            <div style={{ marginTop: 16, paddingTop: 16, borderTop: `1px solid ${V2_C.line}`, fontSize: 12, color: V2_C.sub, lineHeight: 1.8 }}>
              <div>🔒 支付完成后生成授权证书</div>
              <div>📥 15 分钟内可下载原稿</div>
              <div>↩️ 未下载 3 天内可申请退款</div>
              <div>🧾 支持开具增值税专用发票</div>
            </div>
          </div>

          {/* 设计师卡片 */}
          <div style={{ background: '#fff', borderRadius: 14, padding: 18, marginTop: 12, border: `1px solid ${V2_C.line}` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 44, height: 44, borderRadius: '50%', background: `linear-gradient(135deg, ${V2_C.primary}, #ff8a4f)`, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700 }}>{a.designer[0]}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{a.designer}</div>
                <div style={{ fontSize: 11, color: V2_C.sub }}>{d?.title} · {d?.works} 作品</div>
              </div>
              <button className="v2-btn-ghost" style={{ padding: '6px 12px', fontSize: 12 }}>+ 关注</button>
            </div>
            <div style={{ fontSize: 12, color: V2_C.sub, marginTop: 10, lineHeight: 1.6 }}>{d?.bio}</div>
          </div>
        </div>
      </div>

      {/* 相关 */}
      <div style={{ padding: '24px 32px 60px' }}>
        <h2 style={{ fontSize: 18, margin: '0 0 16px', fontWeight: 700 }}>你可能还喜欢</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {related.map(x => <V2Card key={x.id} a={x} onClick={() => window.__v2SetArt(x)} />)}
        </div>
      </div>
    </div>
  );
}

function V2License({ active, onClick, label, sub, price, tag }) {
  return (
    <div onClick={onClick} style={{
      display: 'flex', alignItems: 'center', padding: '12px 10px', borderRadius: 8, marginBottom: 6,
      border: `2px solid ${active ? V2_C.primary : 'transparent'}`,
      background: active ? '#fff' : 'transparent', cursor: 'pointer',
    }}>
      <div style={{
        width: 16, height: 16, borderRadius: '50%', border: `2px solid ${active ? V2_C.primary : '#cfd4db'}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center', marginRight: 10,
      }}>{active && <div style={{ width: 8, height: 8, borderRadius: '50%', background: V2_C.primary }} />}</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6 }}>
          {label}
          {tag && <span style={{ background: '#111', color: '#fff', fontSize: 9, padding: '1px 5px', borderRadius: 3, fontWeight: 600 }}>{tag}</span>}
        </div>
        <div style={{ fontSize: 11, color: V2_C.sub, marginTop: 1 }}>{sub}</div>
      </div>
      <div style={{ fontSize: 16, fontWeight: 700, color: V2_C.ink }}>¥{price?.toLocaleString()}</div>
    </div>
  );
}

function V2Mockup({ type, pattern }) {
  const p = PATTERNS[pattern];
  const shapes = {
    tshirt: { clipPath: 'polygon(20% 15%, 10% 25%, 15% 100%, 85% 100%, 90% 25%, 80% 15%, 70% 8%, 30% 8%)' },
    pillow: { borderRadius: 12 },
    wall: { clipPath: 'polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%)' },
    dress: { clipPath: 'polygon(30% 5%, 20% 15%, 15% 50%, 5% 100%, 95% 100%, 85% 50%, 80% 15%, 70% 5%)' },
  };
  return <div style={{ position: 'absolute', inset: '12%', background: p.bg, backgroundSize: p.bgSize || 'auto', ...shapes[type] }} />;
}

Object.assign(window, { V2Nav, V2Card, V2Home, V2List, V2Detail, V2_C, v2Font });