// V4 · ProSuite
// 苹果的克制排版 + 淘宝/米绘的信息密集
// 深色顶栏 · 冷灰底 · 钢青 accent · 密集卡片网格 · 多层信息

const V4_C = {
  bg: '#eef1f5',           // 冷灰底
  card: '#ffffff',
  navTop: '#0a0e15',       // 顶部极深色 (苹果式)
  navInk: '#f5f7fa',
  subNav: '#1a2030',       // 次级导航
  ink: '#0d1220',          // 主文字
  ink2: '#3a4253',
  sub: '#6b7380',
  mute: '#9aa3b0',
  line: '#dde2ea',
  lineSoft: '#e9ecf2',
  primary: '#0b6ef5',      // 电光蓝 accent
  primarySoft: '#e6f0ff',
  accent: '#0e7490',       // 钢青
  warn: '#ea580c',
  gold: '#b58334',
  success: '#0d9668',
  vip: '#7c3aed',
};

const v4Font = '"SF Pro Text","PingFang SC","Noto Sans SC",-apple-system,system-ui,sans-serif';
const v4Mono = '"SF Mono","JetBrains Mono",ui-monospace,monospace';
const v4Disp = '"SF Pro Display","Noto Sans SC",system-ui,sans-serif';

if (typeof document !== 'undefined' && !document.getElementById('v4-styles')) {
  const s = document.createElement('style');
  s.id = 'v4-styles';
  s.textContent = `
    .v4-card{background:#fff;border:1px solid ${V4_C.line};border-radius:10px;transition:all .18s;}
    .v4-card:hover{border-color:${V4_C.primary};box-shadow:0 8px 24px rgba(11,110,245,.10);transform:translateY(-1px);}
    .v4-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:500;letter-spacing:.3px;}
    .v4-tag{display:inline-flex;align-items:center;padding:3px 8px;border-radius:4px;background:${V4_C.lineSoft};color:${V4_C.ink2};font-size:11px;}
    .v4-tag:hover{background:${V4_C.primarySoft};color:${V4_C.primary};cursor:pointer;}
    .v4-btn{background:${V4_C.primary};color:#fff;border:0;border-radius:7px;padding:9px 18px;font-size:13px;font-weight:500;cursor:pointer;font-family:${v4Font};}
    .v4-btn:hover{background:#0855c4;}
    .v4-btn-ghost{background:#fff;color:${V4_C.ink};border:1px solid ${V4_C.line};border-radius:7px;padding:9px 18px;font-size:13px;font-weight:500;cursor:pointer;font-family:${v4Font};}
    .v4-btn-ghost:hover{border-color:${V4_C.primary};color:${V4_C.primary};}
    .v4-navlink{color:#c3c9d4;font-size:13px;cursor:pointer;padding:4px 2px;position:relative;}
    .v4-navlink:hover{color:#fff;}
    .v4-navlink.active{color:#fff;}
    .v4-navlink.active::after{content:"";position:absolute;left:0;right:0;bottom:-16px;height:2px;background:${V4_C.primary};}
    .v4-subnav{color:${V4_C.ink2};font-size:13px;cursor:pointer;padding:10px 0;border-bottom:2px solid transparent;transition:color .15s;}
    .v4-subnav:hover{color:${V4_C.primary};}
    .v4-subnav.active{color:${V4_C.primary};border-bottom-color:${V4_C.primary};font-weight:600;}
    .v4-catitem{padding:7px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:${V4_C.ink2};display:flex;justify-content:space-between;align-items:center;}
    .v4-catitem:hover{background:${V4_C.lineSoft};}
    .v4-catitem.active{background:${V4_C.primarySoft};color:${V4_C.primary};font-weight:600;}
    .v4-filter-tag{padding:5px 11px;border-radius:14px;border:1px solid ${V4_C.line};background:#fff;font-size:12px;color:${V4_C.ink2};cursor:pointer;}
    .v4-filter-tag:hover{border-color:${V4_C.primary};color:${V4_C.primary};}
    .v4-filter-tag.active{background:${V4_C.primary};border-color:${V4_C.primary};color:#fff;}
    .v4-stat{display:flex;align-items:center;gap:3px;font-size:11px;color:${V4_C.sub};font-family:${v4Mono};}
  `;
  document.head.appendChild(s);
}

// ═════ 顶部两层 Nav ═════
function V4Nav({ page, goto, cartCount }) {
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 10, fontFamily: v4Font }}>
      {/* 超细 utility bar */}
      <div style={{ background: '#05080d', color: '#8a93a3', fontSize: 11, padding: '5px 24px', display: 'flex', justifyContent: 'space-between' }}>
        <span>Pattern · 专业花型版权交易平台  ·  服务 2,100+ 品牌方</span>
        <div style={{ display: 'flex', gap: 18 }}>
          <span style={{ cursor: 'pointer' }}>APP 下载</span>
          <span style={{ cursor: 'pointer' }}>企业版</span>
          <span style={{ cursor: 'pointer' }}>帮助中心</span>
          <span style={{ cursor: 'pointer' }}>简体中文 ▾</span>
        </div>
      </div>

      {/* 主 nav */}
      <div style={{ background: V4_C.navTop, padding: '0 24px', height: 56, display: 'flex', alignItems: 'center', gap: 36 }}>
        <div onClick={() => goto('home')} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
          <div style={{ width: 28, height: 28, borderRadius: 7, background: `linear-gradient(135deg, ${V4_C.primary}, #3aa2ff)`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 14, fontFamily: v4Disp }}>P</div>
          <div style={{ fontFamily: v4Disp, fontWeight: 600, fontSize: 17, color: '#fff', letterSpacing: -0.3 }}>Pattern</div>
          <span style={{ fontSize: 10, color: '#6b7380', marginLeft: 2, letterSpacing: 1 }}>PRO</span>
        </div>
        <div style={{ display: 'flex', gap: 26 }}>
          <span className={`v4-navlink ${page==='home'?'active':''}`} onClick={() => goto('home')}>发现</span>
          <span className={`v4-navlink ${page==='list'?'active':''}`} onClick={() => goto('list')}>素材库</span>
          <span className="v4-navlink">设计师</span>
          <span className="v4-navlink">榜单</span>
          <span className="v4-navlink">企业方案</span>
          <span className="v4-navlink">学院</span>
        </div>
        <div style={{ flex: 1, maxWidth: 520, position: 'relative', marginLeft: 'auto' }}>
          <input placeholder="花卉 / 几何 / 民族… 搜作品、设计师、色系" style={{
            width: '100%', height: 34, background: '#121826', border: '1px solid #1f2738', color: '#e2e7f0',
            borderRadius: 7, padding: '0 90px 0 34px', fontSize: 12, outline: 'none', fontFamily: v4Font,
          }} />
          <span style={{ position: 'absolute', left: 11, top: 9, fontSize: 13, color: '#6b7380' }}>⌕</span>
          <span style={{ position: 'absolute', right: 40, top: 8, fontSize: 10, color: '#6b7380', fontFamily: v4Mono, border: '1px solid #1f2738', padding: '1px 4px', borderRadius: 3 }}>⌘K</span>
          <span style={{ position: 'absolute', right: 8, top: 7, background: V4_C.primary, color: '#fff', borderRadius: 4, padding: '2px 7px', fontSize: 11, cursor: 'pointer', fontWeight: 500 }}>以图搜图</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, color: '#c3c9d4', fontSize: 12 }}>
          <span style={{ cursor: 'pointer' }}>⇪ 上传</span>
          <span style={{ cursor: 'pointer' }}>♡ 收藏</span>
          <span style={{ cursor: 'pointer', position: 'relative' }}>
            车 {cartCount > 0 && <sup style={{ color: V4_C.primary, marginLeft: 2 }}>{cartCount}</sup>}
          </span>
          <div style={{ width: 26, height: 26, borderRadius: '50%', background: 'linear-gradient(135deg,#b58334,#e8c48f)', border: '1px solid #2a3144', cursor: 'pointer' }} />
        </div>
      </div>

      {/* 类目次级导航 */}
      <div style={{ background: V4_C.subNav, padding: '0 24px', height: 40, display: 'flex', alignItems: 'center', gap: 22, color: '#c3c9d4', fontSize: 12, overflowX: 'auto' }}>
        <span style={{ color: '#fff', fontWeight: 600 }}>全部类目</span>
        {CATS.map(c => (
          <span key={c.id} style={{ cursor: 'pointer', whiteSpace: 'nowrap' }}>
            {c.cn} <span style={{ color: '#6b7380', fontSize: 10, marginLeft: 2, fontFamily: v4Mono }}>{(c.count/1000).toFixed(1)}k</span>
          </span>
        ))}
        <span style={{ color: '#6b7380', margin: '0 4px' }}>|</span>
        <span style={{ cursor: 'pointer' }}>🔥 热门</span>
        <span style={{ cursor: 'pointer' }}>⚡ 新品</span>
        <span style={{ cursor: 'pointer' }}>👑 VIP 专享</span>
        <span style={{ cursor: 'pointer' }}>🏷 独家授权</span>
        <span style={{ cursor: 'pointer', color: '#f59e0b' }}>限时特惠 · 满2减500</span>
      </div>
    </div>
  );
}

// ═════ 作品卡(密集信息版) ═════
function V4Card({ a, onClick, compact }) {
  const p = PATTERNS[a.pattern];
  const d = DESIGNERS[a.designer_id];
  return (
    <div className="v4-card" onClick={onClick} style={{ cursor: 'pointer', overflow: 'hidden', position: 'relative' }}>
      {/* 图 */}
      <div style={{
        aspectRatio: '1/1', background: p.bg, backgroundSize: p.bgSize || 'auto', position: 'relative',
      }}>
        {a.exclusive && (
          <span className="v4-chip" style={{ position: 'absolute', top: 8, left: 8, background: 'rgba(11,14,21,.85)', color: '#fff' }}>独家</span>
        )}
        {a.buyout && (
          <span className="v4-chip" style={{ position: 'absolute', top: 8, left: a.exclusive ? 48 : 8, background: V4_C.gold, color: '#fff' }}>可买断</span>
        )}
        <span className="v4-chip" style={{ position: 'absolute', top: 8, right: 8, background: 'rgba(255,255,255,.92)', color: V4_C.ink, fontFamily: v4Mono }}>{a.id}</span>
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '18px 8px 6px', background: 'linear-gradient(transparent, rgba(0,0,0,.55))', display: 'flex', justifyContent: 'space-between', color: '#fff', fontSize: 10, fontFamily: v4Mono }}>
          <span>{a.size}</span>
          <span>{a.fmt.join('/')}</span>
        </div>
      </div>
      {/* 信息区 */}
      <div style={{ padding: '10px 12px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 6 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: V4_C.ink, lineHeight: 1.35, flex: 1 }}>{a.title}</div>
          <div style={{ fontSize: 10, color: V4_C.sub }}>{a.cat_cn}</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 5 }}>
          <div style={{ width: 14, height: 14, borderRadius: '50%', background: p.hex, border: `1px solid ${V4_C.line}` }} />
          <span style={{ fontSize: 11, color: V4_C.sub }}>{d.name}</span>
          <span style={{ fontSize: 10, color: V4_C.mute }}>· {d.loc}</span>
        </div>
        {!compact && (
          <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
            <span className="v4-stat">↓ {a.dl}</span>
            <span className="v4-stat">♡ {a.fav}</span>
            <span className="v4-stat" style={{ color: V4_C.success }}>● 在售</span>
          </div>
        )}
        <div style={{ marginTop: 8, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', borderTop: `1px dashed ${V4_C.lineSoft}`, paddingTop: 7 }}>
          <div>
            <span style={{ fontSize: 10, color: V4_C.sub }}>起 </span>
            <span style={{ fontFamily: v4Disp, fontSize: 16, fontWeight: 700, color: V4_C.warn }}>¥{a.price}</span>
            {a.exclusive && <span style={{ fontSize: 10, color: V4_C.mute, marginLeft: 4 }}>独家 ¥{a.exclusive}</span>}
          </div>
          <span style={{ fontSize: 11, color: V4_C.primary, fontWeight: 500 }}>获取 →</span>
        </div>
      </div>
    </div>
  );
}

// ═════ V4 首页 ═════
function V4Home({ goto, openArt }) {
  const hot = ARTWORKS.slice(0, 10);
  const newest = ARTWORKS.slice(2, 8);
  return (
    <div style={{ background: V4_C.bg, fontFamily: v4Font, minHeight: '100%', paddingBottom: 60 }}>
      {/* Hero - 信息密集版 */}
      <div style={{ padding: '18px 24px 0', maxWidth: 1920, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr 300px', gap: 16 }}>
          {/* 左: 快捷入口 */}
          <div className="v4-card" style={{ padding: 14 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: V4_C.ink, marginBottom: 10 }}>快捷入口</div>
            {[
              ['⌕','以图搜图',V4_C.primary],
              ['◈','企业批量授权',V4_C.accent],
              ['✎','约稿定制',V4_C.warn],
              ['◎','设计师入驻',V4_C.success],
              ['◆','VIP 年卡',V4_C.vip],
            ].map(([i,t,c]) => (
              <div key={t} className="v4-catitem">
                <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 22, height: 22, borderRadius: 6, background: `${c}15`, color: c, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12 }}>{i}</span>
                  {t}
                </span>
                <span style={{ color: V4_C.mute, fontSize: 11 }}>›</span>
              </div>
            ))}
          </div>

          {/* 中: 主 banner */}
          <div style={{
            position: 'relative', borderRadius: 10, overflow: 'hidden',
            background: 'linear-gradient(120deg, #0a0e15 0%, #1a2845 55%, #0b6ef5 100%)',
            padding: '32px 36px', color: '#fff', minHeight: 260,
          }}>
            <div style={{ fontSize: 11, color: '#60a5fa', letterSpacing: 3, fontWeight: 500, marginBottom: 10 }}>PATTERN × 中国丝绸博物馆</div>
            <div style={{ fontFamily: v4Disp, fontSize: 36, fontWeight: 700, lineHeight: 1.15, maxWidth: 500, letterSpacing: -1 }}>
              宋锦纹样数字化<br/>4,000+ 传统花型可商用
            </div>
            <div style={{ fontSize: 13, color: '#c3c9d4', marginTop: 12, lineHeight: 1.7, maxWidth: 500 }}>
              非遗 IP 正版授权 · 可定制色系 · 含商用许可证。首次下载额外赠送 3 张基础授权券。
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 22 }}>
              <button className="v4-btn" style={{ background: '#fff', color: V4_C.ink }}>立即浏览</button>
              <button className="v4-btn" style={{ background: 'transparent', border: '1px solid rgba(255,255,255,.35)', color: '#fff' }}>查看 IP 合作</button>
            </div>
            <div style={{ position: 'absolute', right: 24, top: 24, display: 'flex', gap: 6 }}>
              <span style={{ width: 18, height: 3, background: '#fff', borderRadius: 2 }} />
              <span style={{ width: 6, height: 3, background: 'rgba(255,255,255,.4)', borderRadius: 2 }} />
              <span style={{ width: 6, height: 3, background: 'rgba(255,255,255,.4)', borderRadius: 2 }} />
            </div>
            {/* 小装饰 */}
            <div style={{ position: 'absolute', right: -40, bottom: -40, width: 220, height: 220, borderRadius: '50%', background: `radial-gradient(circle, rgba(96,165,250,.4), transparent 60%)` }} />
          </div>

          {/* 右: 今日数据 */}
          <div className="v4-card" style={{ padding: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
              <span style={{ fontSize: 13, fontWeight: 600, color: V4_C.ink }}>平台数据</span>
              <span style={{ fontSize: 10, color: V4_C.mute, fontFamily: v4Mono }}>LIVE · 04-24</span>
            </div>
            {[
              ['在售花型', '38,427', '+124'],
              ['认证设计师', '1,892', '+7'],
              ['服务品牌', '2,106', '+3'],
              ['今日成交', '¥648,920', '+18%'],
            ].map(([k,v,d]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '7px 0', borderBottom: `1px dashed ${V4_C.lineSoft}` }}>
                <span style={{ fontSize: 12, color: V4_C.sub }}>{k}</span>
                <span>
                  <span style={{ fontFamily: v4Disp, fontSize: 15, fontWeight: 700, color: V4_C.ink }}>{v}</span>
                  <span style={{ fontSize: 10, color: V4_C.success, marginLeft: 5 }}>{d}</span>
                </span>
              </div>
            ))}
            <div style={{ marginTop: 10, padding: '8px 10px', background: V4_C.primarySoft, borderRadius: 6, fontSize: 11, color: V4_C.primary, lineHeight: 1.6 }}>
              💡 本周热搜:<b>宋锦</b> · <b>冷色几何</b> · <b>渐变水波</b>
            </div>
          </div>
        </div>
      </div>

      {/* 分类导航胶囊 */}
      <div style={{ padding: '18px 24px 6px', maxWidth: 1920, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 12, color: V4_C.sub }}>筛选:</span>
          {['全部','花卉','几何','动物','抽象','民族','条纹'].map((t, i) => (
            <span key={t} className={`v4-filter-tag ${i===0?'active':''}`}>{t}</span>
          ))}
          <span style={{ width: 1, height: 16, background: V4_C.line, margin: '0 6px' }} />
          {['高清','矢量','独家','VIP专享','可买断','可定制色系'].map(t => (
            <span key={t} className="v4-filter-tag">{t}</span>
          ))}
          <span style={{ marginLeft: 'auto', display: 'flex', gap: 6, alignItems: 'center' }}>
            <span style={{ fontSize: 12, color: V4_C.sub }}>排序:</span>
            <span className="v4-filter-tag active">综合</span>
            <span className="v4-filter-tag">热度 ↓</span>
            <span className="v4-filter-tag">价格 ↕</span>
            <span className="v4-filter-tag">最新</span>
          </span>
        </div>
      </div>

      {/* 主网格 */}
      <div style={{ padding: '14px 24px', maxWidth: 1920, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
            <span style={{ fontFamily: v4Disp, fontSize: 20, fontWeight: 700, color: V4_C.ink, letterSpacing: -0.3 }}>热门推荐</span>
            <span style={{ fontSize: 12, color: V4_C.sub }}>按本周下载量排序 · 共 1,284 件</span>
          </div>
          <span style={{ fontSize: 12, color: V4_C.primary, cursor: 'pointer' }} onClick={() => goto('list')}>查看全部 →</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
          {hot.map(a => <V4Card key={a.id} a={a} onClick={() => openArt(a)} />)}
        </div>
      </div>

      {/* 设计师条 */}
      <div style={{ padding: '14px 24px', maxWidth: 1920, margin: '0 auto' }}>
        <div style={{ fontFamily: v4Disp, fontSize: 20, fontWeight: 700, color: V4_C.ink, marginBottom: 10 }}>头部设计师</div>
        <div className="v4-card" style={{ padding: 16, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {Object.entries(DESIGNERS).slice(0, 4).map(([id, d]) => (
            <div key={id} style={{ display: 'flex', gap: 12, padding: 4 }}>
              <div style={{ width: 50, height: 50, borderRadius: 10, background: `linear-gradient(135deg, ${['#0b6ef5','#0e7490','#b58334','#7c3aed'][Math.floor(Math.random()*4)]}, #60a5fa)`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 18, fontFamily: v4Disp }}>{d.name[0]}</div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                  <span style={{ fontSize: 13, fontWeight: 600, color: V4_C.ink }}>{d.name}</span>
                  <span style={{ fontSize: 10, color: V4_C.vip, border: `1px solid ${V4_C.vip}`, padding: '0 3px', borderRadius: 3 }}>V{Math.floor(Math.random()*5)+3}</span>
                </div>
                <div style={{ fontSize: 11, color: V4_C.sub, marginTop: 1 }}>{d.title}</div>
                <div style={{ display: 'flex', gap: 10, marginTop: 4, fontSize: 10, color: V4_C.mute, fontFamily: v4Mono }}>
                  <span>作品 {d.works}</span>
                  <span>粉丝 {d.followers}</span>
                  <span style={{ color: V4_C.success }}>● 接单中</span>
                </div>
              </div>
              <button className="v4-btn-ghost" style={{ padding: '4px 12px', fontSize: 11, height: 26, alignSelf: 'flex-start' }}>+ 关注</button>
            </div>
          ))}
        </div>
      </div>

      {/* 新品上架 */}
      <div style={{ padding: '14px 24px', maxWidth: 1920, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
          <span style={{ fontFamily: v4Disp, fontSize: 20, fontWeight: 700, color: V4_C.ink }}>新品上架 <span style={{ fontSize: 11, color: V4_C.warn, marginLeft: 6, fontWeight: 400 }}>● 7天内</span></span>
          <span style={{ fontSize: 12, color: V4_C.primary, cursor: 'pointer' }}>更多 →</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
          {newest.map(a => <V4Card key={a.id} a={a} onClick={() => openArt(a)} compact />)}
        </div>
      </div>
    </div>
  );
}

// ═════ V4 列表页 ═════
function V4List({ goto, openArt }) {
  const [activeCat, setActiveCat] = React.useState('all');
  const [activeFilters, setActiveFilters] = React.useState(new Set(['全部']));
  const list = activeCat === 'all' ? ARTWORKS : ARTWORKS.filter(a => a.cat === activeCat);
  return (
    <div style={{ background: V4_C.bg, fontFamily: v4Font, minHeight: '100%' }}>
      {/* 面包屑 + 顶部概要 */}
      <div style={{ padding: '12px 24px', background: '#fff', borderBottom: `1px solid ${V4_C.line}`, display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: V4_C.sub }}>
        <span style={{ cursor: 'pointer' }} onClick={() => goto('home')}>首页</span>
        <span>›</span>
        <span style={{ cursor: 'pointer' }}>素材库</span>
        <span>›</span>
        <span style={{ color: V4_C.ink }}>全部花型</span>
        <span style={{ marginLeft: 'auto', fontFamily: v4Mono, color: V4_C.mute }}>找到 3,882 个结果 · 用时 0.021s</span>
      </div>

      <div style={{ maxWidth: 1920, margin: '0 auto', padding: '12px 24px', display: 'grid', gridTemplateColumns: '200px 1fr', gap: 16 }}>
        {/* 左侧筛选 */}
        <div>
          <div className="v4-card" style={{ padding: 12, marginBottom: 12 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: V4_C.ink, marginBottom: 8, display: 'flex', justifyContent: 'space-between' }}>
              <span>类目</span>
              <span style={{ color: V4_C.primary, fontSize: 11, fontWeight: 400, cursor: 'pointer' }}>重置</span>
            </div>
            <div className={`v4-catitem ${activeCat==='all'?'active':''}`} onClick={() => setActiveCat('all')}>
              <span>全部</span>
              <span style={{ fontFamily: v4Mono, fontSize: 10 }}>{ARTWORKS.length}</span>
            </div>
            {CATS.map(c => (
              <div key={c.id} className={`v4-catitem ${activeCat===c.id?'active':''}`} onClick={() => setActiveCat(c.id)}>
                <span>{c.cn}</span>
                <span style={{ fontFamily: v4Mono, fontSize: 10 }}>{c.count}</span>
              </div>
            ))}
          </div>

          <div className="v4-card" style={{ padding: 12, marginBottom: 12 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: V4_C.ink, marginBottom: 8 }}>价格区间</div>
            {['< ¥200', '¥200 - 500', '¥500 - 1000', '> ¥1000', '可买断'].map(p => (
              <label key={p} style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '4px 0', fontSize: 12, color: V4_C.ink2, cursor: 'pointer' }}>
                <input type="checkbox" style={{ accentColor: V4_C.primary }} /> {p}
              </label>
            ))}
          </div>

          <div className="v4-card" style={{ padding: 12, marginBottom: 12 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: V4_C.ink, marginBottom: 8 }}>色系</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 5 }}>
              {['#d4374a','#f59e0b','#fbbf24','#10b981','#0b6ef5','#7c3aed','#000','#6b7380','#fff','#f2ece0','#a63a2a','#1e3a5f'].map((c,i) => (
                <div key={i} style={{ aspectRatio: '1', borderRadius: 4, background: c, border: `1px solid ${V4_C.line}`, cursor: 'pointer' }} />
              ))}
            </div>
          </div>

          <div className="v4-card" style={{ padding: 12 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: V4_C.ink, marginBottom: 8 }}>授权方式</div>
            {['基础商用', '独家授权', '永久买断', '二次创作'].map(p => (
              <label key={p} style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '4px 0', fontSize: 12, color: V4_C.ink2, cursor: 'pointer' }}>
                <input type="checkbox" style={{ accentColor: V4_C.primary }} /> {p}
              </label>
            ))}
          </div>
        </div>

        {/* 右侧主内容 */}
        <div>
          {/* 筛选 chip */}
          <div className="v4-card" style={{ padding: '10px 14px', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            {['全部','工笔','小碎花','几何','民族','极简','复古','手绘','数字生成'].map(t => (
              <span key={t} className={`v4-filter-tag ${activeFilters.has(t)?'active':''}`} onClick={() => {
                const s = new Set(activeFilters);
                if (t === '全部') { setActiveFilters(new Set(['全部'])); return; }
                s.delete('全部');
                s.has(t) ? s.delete(t) : s.add(t);
                if (s.size === 0) s.add('全部');
                setActiveFilters(s);
              }}>{t}</span>
            ))}
            <span style={{ marginLeft: 'auto', display: 'flex', gap: 6, alignItems: 'center' }}>
              <span style={{ fontSize: 11, color: V4_C.sub }}>视图:</span>
              <span style={{ width: 22, height: 22, border: `1px solid ${V4_C.primary}`, color: V4_C.primary, borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, cursor: 'pointer' }}>▦</span>
              <span style={{ width: 22, height: 22, border: `1px solid ${V4_C.line}`, color: V4_C.mute, borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, cursor: 'pointer' }}>☰</span>
            </span>
          </div>

          {/* 列表 */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            {list.map(a => <V4Card key={a.id} a={a} onClick={() => openArt(a)} />)}
          </div>

          {/* 分页 */}
          <div style={{ marginTop: 20, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 6, fontFamily: v4Mono, fontSize: 12 }}>
            {['‹',1,2,3,4,5,'...',97,'›'].map((p,i) => (
              <span key={i} style={{
                minWidth: 28, height: 28, padding: '0 8px', display: 'flex', alignItems: 'center', justifyContent: 'center',
                border: `1px solid ${p===1?V4_C.primary:V4_C.line}`, background: p===1?V4_C.primary:'#fff',
                color: p===1?'#fff':V4_C.ink2, borderRadius: 5, cursor: 'pointer',
              }}>{p}</span>
            ))}
            <span style={{ marginLeft: 10, color: V4_C.sub, fontFamily: v4Font, fontSize: 11 }}>共 97 页 · 每页 40 件</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═════ V4 详情 ═════
function V4Detail({ a, goto, onBuy, cart, addCart }) {
  const [license, setLicense] = React.useState('basic');
  const p = PATTERNS[a.pattern];
  const d = DESIGNERS[a.designer_id];
  const priceMap = { basic: a.price, exclusive: a.exclusive || a.price * 10, buyout: a.buyout || a.price * 50 };
  const inCart = cart.find(x => x.id === a.id);

  return (
    <div style={{ background: V4_C.bg, fontFamily: v4Font, minHeight: '100%', paddingBottom: 40 }}>
      {/* 面包屑 */}
      <div style={{ padding: '12px 24px', background: '#fff', borderBottom: `1px solid ${V4_C.line}`, display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: V4_C.sub }}>
        <span style={{ cursor: 'pointer' }} onClick={() => goto('home')}>首页</span>
        <span>›</span>
        <span style={{ cursor: 'pointer' }} onClick={() => goto('list')}>素材库</span>
        <span>›</span>
        <span style={{ cursor: 'pointer' }}>{a.cat_cn}</span>
        <span>›</span>
        <span style={{ color: V4_C.ink }}>{a.title}</span>
        <span style={{ marginLeft: 'auto', fontFamily: v4Mono, color: V4_C.mute }}>作品编号 {a.id}</span>
      </div>

      <div style={{ maxWidth: 1920, margin: '0 auto', padding: '16px 24px', display: 'grid', gridTemplateColumns: '1fr 380px', gap: 16 }}>
        {/* 左:图 + 详情 */}
        <div>
          <div className="v4-card" style={{ padding: 14 }}>
            <div style={{
              aspectRatio: '1/1', background: p.bg, backgroundSize: p.bgSize || 'auto', borderRadius: 7,
              maxHeight: 520,
            }} />
            {/* 缩略图条 */}
            <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
              {[0,1,2,3,4].map(i => (
                <div key={i} style={{
                  width: 60, height: 60, borderRadius: 5, border: `2px solid ${i===0?V4_C.primary:V4_C.line}`,
                  background: p.bg, backgroundSize: p.bgSize || 'auto', cursor: 'pointer',
                }} />
              ))}
              <div style={{ marginLeft: 'auto', display: 'flex', gap: 8, alignItems: 'center', fontSize: 11, color: V4_C.sub }}>
                <span>🖼 5 张</span>
                <span>·</span>
                <span style={{ color: V4_C.primary, cursor: 'pointer' }}>⛶ 全屏</span>
                <span style={{ color: V4_C.primary, cursor: 'pointer' }}>⬇ 预览下载</span>
                <span style={{ color: V4_C.primary, cursor: 'pointer' }}>◈ AR 预览</span>
              </div>
            </div>
          </div>

          {/* Tabs */}
          <div className="v4-card" style={{ marginTop: 14, padding: '0 18px' }}>
            <div style={{ display: 'flex', gap: 28, borderBottom: `1px solid ${V4_C.line}` }}>
              {['作品详情','授权说明','商用案例 (24)','相似推荐','买家评价 (132)'].map((t,i) => (
                <span key={t} className={`v4-subnav ${i===0?'active':''}`}>{t}</span>
              ))}
            </div>
            <div style={{ padding: '18px 0' }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: V4_C.ink, marginBottom: 10 }}>参数信息</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 20 }}>
                {[
                  ['尺寸', a.size],
                  ['分辨率', `${a.dpi} DPI`],
                  ['文件格式', a.fmt.join(' / ')],
                  ['创作年份', a.year],
                  ['主色调', p.hex],
                  ['色系数量', '6 色'],
                  ['可循环', '四方连续'],
                  ['AI 生成', '否 · 原创手绘'],
                ].map(([k,v]) => (
                  <div key={k} style={{ padding: '8px 10px', background: V4_C.lineSoft, borderRadius: 6 }}>
                    <div style={{ fontSize: 10, color: V4_C.sub, marginBottom: 3 }}>{k}</div>
                    <div style={{ fontSize: 12, color: V4_C.ink, fontWeight: 500, fontFamily: k==='主色调'?v4Mono:v4Font }}>{v}</div>
                  </div>
                ))}
              </div>
              <div style={{ fontSize: 13, fontWeight: 600, color: V4_C.ink, marginBottom: 8 }}>作品描述</div>
              <div style={{ fontSize: 13, color: V4_C.ink2, lineHeight: 1.8, marginBottom: 16 }}>
                「{a.title}」取材自{d.loc}当地的{a.cat_cn}元素,以{a.tags.join('、')}为主要视觉语言,采用四方连续排布,适用于服装面料、家居装饰、包装印刷等多种商用场景。本作品为{d.name}原创,已完成版权登记,购买后可开具正规发票。
              </div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {a.tags.map(t => <span key={t} className="v4-tag">#{t}</span>)}
                <span className="v4-tag">#{a.cat_cn}</span>
                <span className="v4-tag">#300DPI</span>
                <span className="v4-tag">#可商用</span>
                <span className="v4-tag">#四方连续</span>
              </div>
            </div>
          </div>

          {/* 设计师 */}
          <div className="v4-card" style={{ marginTop: 14, padding: 16 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: V4_C.ink, marginBottom: 12 }}>关于设计师</div>
            <div style={{ display: 'flex', gap: 14 }}>
              <div style={{ width: 60, height: 60, borderRadius: 12, background: `linear-gradient(135deg, ${V4_C.primary}, #60a5fa)`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 22, fontFamily: v4Disp }}>{d.name[0]}</div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ fontSize: 15, fontWeight: 600, color: V4_C.ink }}>{d.name}</span>
                  <span style={{ fontSize: 10, color: V4_C.vip, border: `1px solid ${V4_C.vip}`, padding: '0 4px', borderRadius: 3 }}>认证 V5</span>
                  <span style={{ fontSize: 10, color: V4_C.success }}>● 接单中</span>
                </div>
                <div style={{ fontSize: 12, color: V4_C.sub, marginTop: 3 }}>{d.title} · {d.loc}</div>
                <div style={{ fontSize: 12, color: V4_C.ink2, marginTop: 6, lineHeight: 1.7 }}>{d.bio}</div>
                <div style={{ display: 'flex', gap: 16, marginTop: 8, fontSize: 11, color: V4_C.sub, fontFamily: v4Mono }}>
                  <span>作品 <b style={{ color: V4_C.ink }}>{d.works}</b></span>
                  <span>粉丝 <b style={{ color: V4_C.ink }}>{d.followers}</b></span>
                  <span>下载 <b style={{ color: V4_C.ink }}>28.4k</b></span>
                  <span>好评率 <b style={{ color: V4_C.success }}>99.2%</b></span>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <button className="v4-btn-ghost" style={{ padding: '6px 14px', fontSize: 12 }}>+ 关注</button>
                <button className="v4-btn-ghost" style={{ padding: '6px 14px', fontSize: 12 }}>约稿</button>
              </div>
            </div>
          </div>
        </div>

        {/* 右侧侧栏(sticky 购买区)*/}
        <div style={{ position: 'sticky', top: 120, alignSelf: 'start' }}>
          <div className="v4-card" style={{ padding: 18 }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontSize: 11, color: V4_C.sub, letterSpacing: 1, fontFamily: v4Mono }}>{a.id} · {a.cat_cn}</div>
                <div style={{ fontFamily: v4Disp, fontSize: 22, fontWeight: 700, color: V4_C.ink, marginTop: 4, letterSpacing: -0.5 }}>{a.title}</div>
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <span style={{ width: 28, height: 28, border: `1px solid ${V4_C.line}`, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: V4_C.sub, cursor: 'pointer' }}>♡</span>
                <span style={{ width: 28, height: 28, border: `1px solid ${V4_C.line}`, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, color: V4_C.sub, cursor: 'pointer' }}>↗</span>
              </div>
            </div>

            <div style={{ display: 'flex', gap: 10, marginTop: 8, fontSize: 11, color: V4_C.sub, fontFamily: v4Mono }}>
              <span>↓ {a.dl} 次下载</span>
              <span>♡ {a.fav}</span>
              <span style={{ color: V4_C.success }}>● 已售 {Math.floor(a.dl/3)} 份</span>
            </div>

            {/* 价格区 */}
            <div style={{ marginTop: 14, padding: 14, background: `linear-gradient(180deg, ${V4_C.primarySoft}, #fff)`, borderRadius: 8, border: `1px solid ${V4_C.primarySoft}` }}>
              <div style={{ fontSize: 11, color: V4_C.sub }}>当前授权</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 2 }}>
                <span style={{ fontSize: 13, color: V4_C.warn }}>¥</span>
                <span style={{ fontFamily: v4Disp, fontSize: 34, fontWeight: 700, color: V4_C.warn, letterSpacing: -1 }}>{priceMap[license]}</span>
                <span style={{ fontSize: 11, color: V4_C.mute, textDecoration: 'line-through', marginLeft: 4 }}>¥{Math.floor(priceMap[license] * 1.3)}</span>
                <span style={{ fontSize: 10, background: V4_C.warn, color: '#fff', padding: '1px 5px', borderRadius: 3, marginLeft: 4 }}>限时 7 折</span>
              </div>
              <div style={{ fontSize: 10, color: V4_C.sub, marginTop: 3, fontFamily: v4Mono }}>VIP 会员再享 9 折 · 可开具发票</div>
            </div>

            {/* 授权选择 */}
            <div style={{ marginTop: 14 }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: V4_C.ink, marginBottom: 8, display: 'flex', justifyContent: 'space-between' }}>
                <span>授权类型</span>
                <span style={{ fontSize: 11, color: V4_C.primary, fontWeight: 400, cursor: 'pointer' }}>授权对比 ?</span>
              </div>
              {[
                ['basic','基础商用', a.price, '5 个产品 SKU · 2 年期 · 不限地区'],
                ['exclusive','独家授权', a.exclusive || a.price*10, '同品类独家 · 5 年期 · 不限数量', !a.exclusive],
                ['buyout','永久买断', a.buyout || a.price*50, '版权完整转让 · 永久 · 可转授', !a.buyout],
              ].map(([k,l,pp,d,disabled]) => (
                <div key={k} onClick={() => !disabled && setLicense(k)} style={{
                  padding: '10px 12px', borderRadius: 7,
                  border: `1px solid ${license===k?V4_C.primary:V4_C.line}`,
                  background: license===k?V4_C.primarySoft:(disabled?'#f7f8fa':'#fff'),
                  marginBottom: 6, cursor: disabled?'not-allowed':'pointer',
                  opacity: disabled?.5:1,
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  <span style={{
                    width: 14, height: 14, borderRadius: '50%',
                    border: `2px solid ${license===k?V4_C.primary:V4_C.mute}`,
                    background: license===k?V4_C.primary:'transparent',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    {license===k && <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#fff' }} />}
                  </span>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <span style={{ fontSize: 13, fontWeight: 500, color: V4_C.ink }}>{l}{disabled && <span style={{ fontSize: 10, color: V4_C.mute, marginLeft: 4 }}>· 暂不支持</span>}</span>
                      <span style={{ fontSize: 13, fontWeight: 600, color: license===k?V4_C.warn:V4_C.ink2 }}>¥{pp.toLocaleString()}</span>
                    </div>
                    <div style={{ fontSize: 10, color: V4_C.sub, marginTop: 2 }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* CTA */}
            <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
              <button className="v4-btn" style={{ flex: 1, height: 42, fontSize: 14, fontWeight: 600 }} onClick={() => onBuy({ ...a, license, _price: priceMap[license] })}>立即购买</button>
              <button className="v4-btn-ghost" style={{ flex: 1, height: 42, fontSize: 14, fontWeight: 600 }} onClick={() => addCart({ ...a, license, _price: priceMap[license] })} disabled={!!inCart}>{inCart?'已加入':'加入购物车'}</button>
            </div>
            <button style={{ marginTop: 8, width: '100%', padding: '10px', background: '#fff', color: V4_C.ink, border: `1px dashed ${V4_C.line}`, borderRadius: 7, fontSize: 12, cursor: 'pointer', fontFamily: v4Font }}>
              联系设计师定制 · 约稿
            </button>

            {/* 保障 */}
            <div style={{ marginTop: 14, padding: 10, background: V4_C.lineSoft, borderRadius: 7, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6 }}>
              {[
                ['✓ 正版授权','✓ 开具发票'],
                ['✓ 7 天无理由','✓ 版权兜底'],
              ].flat().map(t => (
                <div key={t} style={{ fontSize: 11, color: V4_C.ink2, display: 'flex', gap: 3, alignItems: 'center' }}>{t}</div>
              ))}
            </div>
          </div>

          {/* 相似推荐 */}
          <div className="v4-card" style={{ padding: 14, marginTop: 12 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: V4_C.ink, marginBottom: 10 }}>看了又看</div>
            {ARTWORKS.filter(x => x.cat === a.cat && x.id !== a.id).slice(0, 3).map(x => {
              const xp = PATTERNS[x.pattern];
              return (
                <div key={x.id} onClick={() => goto('list')} style={{ display: 'flex', gap: 10, padding: '8px 0', borderBottom: `1px dashed ${V4_C.lineSoft}`, cursor: 'pointer' }}>
                  <div style={{ width: 48, height: 48, borderRadius: 5, background: xp.bg, backgroundSize: xp.bgSize || 'auto', flexShrink: 0 }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 500, color: V4_C.ink, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{x.title}</div>
                    <div style={{ fontSize: 10, color: V4_C.sub, marginTop: 2 }}>{DESIGNERS[x.designer_id].name}</div>
                    <div style={{ fontSize: 12, fontWeight: 700, color: V4_C.warn, marginTop: 2, fontFamily: v4Disp }}>¥{x.price}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { V4_C, v4Font, V4Nav, V4Home, V4List, V4Detail });