// V3 · 素白东方 (Silk Paper)
// 中式极简, 米白底/墨色字, 衬线中文, 大留白, 细线描边, 印章红点缀
// 竖排标记 · 留白克制

const V3_C = {
  bg: '#eef0ed',       // 冷白·青灰(去黄)
  paper: '#f8faf7',    // 更浅的冷纸色
  navBg: '#131a1f',    // 墨青深色页眉
  navInk: '#eaede9',
  ink: '#141a1d',      // 冷墨黑
  ink2: '#3a4550',
  muted: '#7c8891',
  line: '#cfd6d4',
  stamp: '#7a3a3a',    // 暗胭脂(更冷一点的章红)
  gold: '#607e80',     // 青白金(冷金替代暖金)
};

const v3Fonts = {
  serif: '"Noto Serif SC", "Source Han Serif CN", "Songti SC", "STSong", serif',
  sans: '"Noto Sans SC", "PingFang SC", system-ui, sans-serif',
  hand: '"Ma Shan Zheng", "STKaiti", "KaiTi", cursive',
};

if (typeof document !== 'undefined' && !document.getElementById('v3-styles')) {
  const s = document.createElement('style');
  s.id = 'v3-styles';
  s.textContent = `
    .v3-card{transition:opacity .3s,transform .3s;}
    .v3-card:hover{opacity:.85;}
    .v3-stamp{display:inline-flex;align-items:center;justify-content:center;background:${V3_C.stamp};color:#eef0ed;font-family:${v3Fonts.serif};font-weight:700;writing-mode:vertical-rl;letter-spacing:2px;padding:6px 4px;}
    .v3-vert{writing-mode:vertical-rl;letter-spacing:4px;}
    .v3-divider{display:flex;align-items:center;gap:12px;color:${V3_C.muted};font-size:11px;letter-spacing:6px;}
    .v3-divider::before,.v3-divider::after{content:"";flex:1;height:1px;background:${V3_C.line};}
  `;
  document.head.appendChild(s);
}

function V3Nav({ page, goto, cartCount }) {
  const link = (k, active) => ({
    fontFamily: v3Fonts.serif, fontSize: 15, cursor: 'pointer', letterSpacing: 4,
    color: active ? V3_C.ink : V3_C.ink2, fontWeight: active ? 600 : 400,
    paddingBottom: 4, borderBottom: active ? `1px solid ${V3_C.ink}` : '1px solid transparent',
  });
  return (
    <div style={{
      padding: '24px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: V3_C.navBg, position: 'sticky', top: 0, zIndex: 10,
      boxShadow: '0 1px 0 rgba(255,255,255,.04), 0 14px 28px -18px rgba(0,0,0,.4)',
    }}>
      <div onClick={() => goto('home')} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 14 }}>
        <span className="v3-stamp" style={{ height: 46, fontSize: 13, padding: '6px 5px' }}>素·样</span>
        <div style={{ lineHeight: 1 }}>
          <div style={{ fontFamily: v3Fonts.serif, fontSize: 22, color: V3_C.navInk, letterSpacing: 8, fontWeight: 600, marginBottom: 8 }}>素&nbsp;&nbsp;样</div>
          <div style={{ fontFamily: v3Fonts.sans, fontSize: 9, color: '#8b949c', letterSpacing: 4 }}>S&nbsp;U&nbsp;&nbsp;·&nbsp;&nbsp;Y&nbsp;A&nbsp;N&nbsp;G</div>
        </div>
      </div>
      <nav style={{ display: 'flex', gap: 44 }}>
        <span style={{ ...link('home', page==='home'), color: page==='home' ? V3_C.navInk : '#8b949c', borderBottomColor: page==='home' ? V3_C.navInk : 'transparent' }} onClick={() => goto('home')}>首 页</span>
        <span style={{ ...link('list', page==='list'), color: page==='list' ? V3_C.navInk : '#8b949c', borderBottomColor: page==='list' ? V3_C.navInk : 'transparent' }} onClick={() => goto('list')}>花 目</span>
        <span style={{ ...link('a', false), color: '#8b949c' }}>匠 人</span>
        <span style={{ ...link('a', false), color: '#8b949c' }}>契 约</span>
        <span style={{ ...link('a', false), color: '#8b949c' }}>墨 谈</span>
      </nav>
      <div style={{ display: 'flex', alignItems: 'center', gap: 24, fontFamily: v3Fonts.serif, fontSize: 13, color: '#8b949c', letterSpacing: 2 }}>
        <span style={{ cursor: 'pointer' }}>寻 花</span>
        <span style={{ cursor: 'pointer' }}>入 账</span>
        <span style={{ cursor: 'pointer', position: 'relative', color: V3_C.navInk }}>
          箱 箧
          {cartCount > 0 && <sup style={{ color: '#c88080', marginLeft: 4 }}>·{cartCount}</sup>}
        </span>
      </div>
    </div>
  );
}

function V3Card({ a, onClick }) {
  const p = PATTERNS[a.pattern];
  return (
    <div className="v3-card" onClick={onClick} style={{ cursor: 'pointer', fontFamily: v3Fonts.serif }}>
      <div style={{
        aspectRatio: '3/4', background: p.bg, backgroundSize: p.bgSize || 'auto',
        border: `1px solid ${V3_C.line}`, position: 'relative',
      }}>
        <div style={{ position: 'absolute', top: 12, right: 12 }}>
          <span className="v3-stamp" style={{ fontSize: 10, padding: '4px 3px' }}>素样</span>
        </div>
        <div style={{ position: 'absolute', bottom: 12, left: 14, fontFamily: v3Fonts.sans, fontSize: 9, color: 'rgba(255,255,255,.5)', letterSpacing: 2 }}>
          № {a.id}
        </div>
      </div>
      <div style={{ padding: '16px 2px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div style={{ fontSize: 17, color: V3_C.ink, fontWeight: 500, letterSpacing: 2, marginBottom: 4 }}>{a.title}</div>
          <div style={{ fontSize: 11, color: V3_C.muted, letterSpacing: 2, fontFamily: v3Fonts.sans }}>
            {a.designer} · {a.cat_cn}
          </div>
        </div>
        <div style={{ fontSize: 15, color: V3_C.ink, letterSpacing: 1 }}>
          ¥<span style={{ fontSize: 18 }}>{a.price}</span>
        </div>
      </div>
    </div>
  );
}

function V3Home({ goto, openArt }) {
  const feat = ARTWORKS[0];
  return (
    <div style={{ background: V3_C.bg, fontFamily: v3Fonts.serif, color: V3_C.ink, minHeight: '100%' }}>
      {/* Hero */}
      <section style={{ padding: '96px 56px 80px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: v3Fonts.sans, fontSize: 11, color: V3_C.stamp, letterSpacing: 6, marginBottom: 40 }}>
              — 乙巳年 · 春 第柒号 —
            </div>
            <h1 style={{ fontSize: 96, lineHeight: 1.1, fontWeight: 400, margin: '0 0 36px', letterSpacing: 8, color: V3_C.ink }}>
              一花<br />一物<br />一世界。
            </h1>
            <p style={{ fontSize: 15, lineHeight: 2, color: V3_C.ink2, maxWidth: 420, margin: '0 0 44px', letterSpacing: 2, fontWeight: 300 }}>
              素样,是花型匠人与制造者的契约之所。
              每一纹样出自独立匠人,持证授权,
              守其版权,传其心意。
            </p>
            <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
              <button onClick={() => goto('list')} style={{
                background: 'transparent', color: V3_C.ink, border: `1px solid ${V3_C.ink}`,
                padding: '14px 36px', fontFamily: v3Fonts.serif, fontSize: 14, letterSpacing: 6, cursor: 'pointer',
              }}>入 花 目</button>
              <span style={{ color: V3_C.muted, fontSize: 13, letterSpacing: 3 }}>—— 共 12,847 件纹样</span>
            </div>
          </div>
          <div onClick={() => openArt(feat)} style={{ cursor: 'pointer', position: 'relative' }}>
            <div style={{
              aspectRatio: '3/4', background: PATTERNS[feat.pattern].bg,
              backgroundSize: PATTERNS[feat.pattern].bgSize || 'auto',
              border: `1px solid ${V3_C.line}`, position: 'relative',
            }}>
              <div style={{ position: 'absolute', top: 20, right: 20 }}>
                <span className="v3-stamp" style={{ fontSize: 12, padding: '8px 5px' }}>本期之选</span>
              </div>
            </div>
            <div style={{ position: 'absolute', bottom: -30, left: -30, background: V3_C.paper, padding: '20px 28px', border: `1px solid ${V3_C.line}`, maxWidth: 280 }}>
              <div style={{ fontFamily: v3Fonts.sans, fontSize: 10, color: V3_C.stamp, letterSpacing: 3, marginBottom: 8 }}>№ {feat.id}</div>
              <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: 3, marginBottom: 4 }}>{feat.title}</div>
              <div style={{ fontSize: 12, color: V3_C.muted, letterSpacing: 2 }}>{feat.designer} · 作</div>
            </div>
          </div>
        </div>
      </section>

      {/* 分隔符 */}
      <div style={{ padding: '0 56px' }}>
        <div className="v3-divider">花 之 目 录</div>
      </div>

      {/* 分类 —— 极简竖排风 */}
      <section style={{ padding: '48px 56px 72px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0 }}>
          {CATS.map((c, i) => (
            <div key={c.id} onClick={() => goto('list')} style={{
              padding: '32px 20px', textAlign: 'center', cursor: 'pointer',
              borderRight: i < 5 ? `1px solid ${V3_C.line}` : 'none',
            }}>
              <div style={{ fontSize: 36, fontWeight: 400, letterSpacing: 2, marginBottom: 10 }}>{c.cn[0]}</div>
              <div style={{ fontSize: 13, color: V3_C.ink, letterSpacing: 4, marginBottom: 6 }}>{c.cn}</div>
              <div style={{ fontSize: 10, color: V3_C.muted, fontFamily: v3Fonts.sans, letterSpacing: 2 }}>— {c.count.toLocaleString()} 纹 —</div>
            </div>
          ))}
        </div>
      </section>

      {/* 本期 */}
      <section style={{ padding: '0 56px 80px', background: V3_C.paper, borderTop: `1px solid ${V3_C.line}`, borderBottom: `1px solid ${V3_C.line}` }}>
        <div style={{ padding: '64px 0 48px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div>
              <div style={{ fontFamily: v3Fonts.sans, fontSize: 10, color: V3_C.stamp, letterSpacing: 4, marginBottom: 12 }}>PART 01</div>
              <h2 style={{ fontSize: 44, margin: 0, fontWeight: 500, letterSpacing: 8 }}>本 期 精 选</h2>
            </div>
            <span style={{ fontSize: 12, color: V3_C.muted, letterSpacing: 3, cursor: 'pointer' }}>—— 查看全部</span>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 40, paddingBottom: 32 }}>
          {ARTWORKS.slice(1, 5).map(a => <V3Card key={a.id} a={a} onClick={() => openArt(a)} />)}
        </div>
      </section>

      {/* 匠人 */}
      <section style={{ padding: '80px 56px' }}>
        <div style={{ fontFamily: v3Fonts.sans, fontSize: 10, color: V3_C.stamp, letterSpacing: 4, marginBottom: 12, textAlign: 'center' }}>PART 02 · 匠 人</div>
        <h2 style={{ fontSize: 44, textAlign: 'center', margin: '0 0 64px', fontWeight: 500, letterSpacing: 8 }}>驻 站 匠 人</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
          {Object.entries(DESIGNERS).slice(0,3).map(([id, d]) => (
            <div key={id} style={{ textAlign: 'center' }}>
              <div style={{
                width: 96, height: 96, borderRadius: '50%', margin: '0 auto 20px',
                background: `linear-gradient(135deg, ${V3_C.line}, ${V3_C.paper})`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 32, color: V3_C.ink, fontWeight: 500, border: `1px solid ${V3_C.line}`,
              }}>{d.name[0]}</div>
              <div style={{ fontSize: 20, fontWeight: 600, letterSpacing: 4, marginBottom: 4 }}>{d.name}</div>
              <div style={{ fontSize: 11, color: V3_C.muted, letterSpacing: 2, marginBottom: 16, fontFamily: v3Fonts.sans }}>{d.loc} · {d.works} 件作品</div>
              <p style={{ fontSize: 13, color: V3_C.ink2, lineHeight: 1.9, margin: 0, letterSpacing: 1 }}>{d.bio}</p>
              <div style={{ marginTop: 20, fontSize: 12, color: V3_C.stamp, letterSpacing: 3, cursor: 'pointer' }}>观 其 作 →</div>
            </div>
          ))}
        </div>
      </section>

      {/* 新上架 */}
      <section style={{ padding: '0 56px 80px' }}>
        <div style={{ padding: '32px 0 48px' }}>
          <div style={{ fontFamily: v3Fonts.sans, fontSize: 10, color: V3_C.stamp, letterSpacing: 4, marginBottom: 12 }}>PART 03</div>
          <h2 style={{ fontSize: 44, margin: 0, fontWeight: 500, letterSpacing: 8 }}>新 入 纹 目</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 40 }}>
          {ARTWORKS.slice(5, 9).map(a => <V3Card key={a.id} a={a} onClick={() => openArt(a)} />)}
        </div>
      </section>

      <footer style={{ borderTop: `1px solid ${V3_C.line}`, padding: '40px 56px', background: V3_C.paper }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: V3_C.muted, letterSpacing: 2, fontFamily: v3Fonts.sans }}>
          <span>素样 · SU YANG © 2025</span>
          <span>用 户 契 约 · 匠 人 契 约 · 隐 私 条 款</span>
          <span>沪 ICP 备 2024XXXXXX 号</span>
        </div>
      </footer>
    </div>
  );
}

function V3List({ goto, openArt }) {
  const [cat, setCat] = React.useState('all');
  const filtered = cat === 'all' ? ARTWORKS : ARTWORKS.filter(a => a.cat === cat);
  return (
    <div style={{ background: V3_C.bg, fontFamily: v3Fonts.serif, minHeight: '100%' }}>
      <div style={{ padding: '72px 56px 32px' }}>
        <div style={{ fontFamily: v3Fonts.sans, fontSize: 10, color: V3_C.stamp, letterSpacing: 6, marginBottom: 16 }}>— 花 目 —</div>
        <h1 style={{ fontSize: 72, margin: 0, fontWeight: 400, letterSpacing: 12 }}>纹 目 之 册</h1>
        <div style={{ fontSize: 13, color: V3_C.muted, letterSpacing: 3, marginTop: 16 }}>
          共 12,847 件纹样 · 由 326 位匠人细细描绘
        </div>
      </div>

      <div style={{ padding: '32px 56px', borderTop: `1px solid ${V3_C.line}`, borderBottom: `1px solid ${V3_C.line}`, display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
        <span style={{ fontSize: 12, color: V3_C.muted, letterSpacing: 3, marginRight: 16 }}>— 类 —</span>
        {[{id:'all', cn:'全部'}, ...CATS].map(c => (
          <span key={c.id} onClick={() => setCat(c.id)} style={{
            padding: '6px 18px', cursor: 'pointer', fontSize: 13, letterSpacing: 3,
            color: cat === c.id ? V3_C.paper : V3_C.ink,
            background: cat === c.id ? V3_C.ink : 'transparent',
            border: `1px solid ${cat === c.id ? V3_C.ink : V3_C.line}`,
          }}>{c.cn}</span>
        ))}
      </div>

      <div style={{ padding: '48px 56px 80px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
          {filtered.map(a => <V3Card key={a.id} a={a} onClick={() => openArt(a)} />)}
        </div>
      </div>
    </div>
  );
}

function V3Detail({ 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, 3);

  return (
    <div style={{ background: V3_C.bg, fontFamily: v3Fonts.serif, minHeight: '100%' }}>
      <div style={{ padding: '24px 56px', fontSize: 12, color: V3_C.muted, letterSpacing: 3 }}>
        <span style={{ cursor: 'pointer' }} onClick={() => goto('home')}>首页</span>
        <span style={{ margin: '0 12px' }}>·</span>
        <span style={{ cursor: 'pointer' }} onClick={() => goto('list')}>花目</span>
        <span style={{ margin: '0 12px' }}>·</span>
        <span style={{ color: V3_C.ink }}>{a.id}</span>
      </div>

      <div style={{ padding: '16px 56px 72px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72 }}>
        <div>
          <div style={{ aspectRatio: '1', background: p.bg, backgroundSize: p.bgSize || 'auto', border: `1px solid ${V3_C.line}`, position: 'relative', marginBottom: 24 }}>
            <div style={{ position: 'absolute', top: 24, right: 24 }}>
              <span className="v3-stamp" style={{ fontSize: 13, padding: '10px 6px' }}>素·样</span>
            </div>
            <div style={{ position: 'absolute', bottom: 20, left: 20, fontFamily: v3Fonts.sans, fontSize: 10, color: 'rgba(255,255,255,.4)', letterSpacing: 3 }}>
              SU·YANG / № {a.id}
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
            {[0,1,2,3,4].map(i => (
              <div key={i} style={{ aspectRatio: '1', background: p.bg, backgroundSize: p.bgSize || 'auto', border: i === 0 ? `1px solid ${V3_C.ink}` : `1px solid ${V3_C.line}`, cursor: 'pointer' }} />
            ))}
          </div>

          {/* 模特 */}
          <div style={{ marginTop: 40, paddingTop: 32, borderTop: `1px solid ${V3_C.line}` }}>
            <div className="v3-divider" style={{ marginBottom: 24 }}>实 物 陈 设</div>
            <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginBottom: 20 }}>
              {[['tshirt','衣'],['pillow','枕'],['wall','墙'],['dress','裳']].map(([k, l]) => (
                <span key={k} onClick={() => setMockup(k)} style={{
                  padding: '8px 20px', fontSize: 14, cursor: 'pointer', letterSpacing: 3,
                  border: `1px solid ${mockup === k ? V3_C.ink : V3_C.line}`,
                  color: mockup === k ? V3_C.paper : V3_C.ink, background: mockup === k ? V3_C.ink : 'transparent',
                }}>{l}</span>
              ))}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
              {[0,1].map(i => (
                <div key={i} style={{ aspectRatio: '1', background: V3_C.paper, border: `1px solid ${V3_C.line}`, position: 'relative' }}>
                  <V3Mockup type={mockup} pattern={a.pattern} />
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* 右侧 */}
        <div>
          <div style={{ fontFamily: v3Fonts.sans, fontSize: 10, color: V3_C.stamp, letterSpacing: 4, marginBottom: 16 }}>№ {a.id} · {a.cat_cn}</div>
          <h1 style={{ fontSize: 56, margin: '0 0 16px', fontWeight: 500, letterSpacing: 8, lineHeight: 1.15 }}>{a.title}</h1>

          <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 0', borderTop: `1px solid ${V3_C.line}`, borderBottom: `1px solid ${V3_C.line}`, marginBottom: 28 }}>
            <div style={{ width: 40, height: 40, borderRadius: '50%', border: `1px solid ${V3_C.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 500 }}>
              {a.designer[0]}
            </div>
            <div>
              <div style={{ fontSize: 15, letterSpacing: 3, fontWeight: 600 }}>{a.designer}</div>
              <div style={{ fontSize: 11, color: V3_C.muted, letterSpacing: 2, fontFamily: v3Fonts.sans }}>{d?.title}</div>
            </div>
            <span style={{ marginLeft: 'auto', fontSize: 12, color: V3_C.stamp, letterSpacing: 2, cursor: 'pointer' }}>+ 关 注</span>
          </div>

          <p style={{ fontSize: 14, color: V3_C.ink2, lineHeight: 2, letterSpacing: 2, margin: '0 0 32px' }}>
            {`作于${a.year}年,尺幅${a.size},${a.dpi}DPI高清。含 ${a.fmt.join('、')} 分层文件,便于再创作。`}
          </p>

          {/* 规格 */}
          <div style={{ borderTop: `1px solid ${V3_C.line}`, padding: '20px 0' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, fontSize: 13 }}>
              <V3Spec k="尺 寸" v={a.size} />
              <V3Spec k="分 辨 率" v={`${a.dpi} DPI`} />
              <V3Spec k="格 式" v={a.fmt.join(' · ')} />
              <V3Spec k="年 份" v={a.year} />
              <V3Spec k="下 载" v={`${a.dl} 次`} />
              <V3Spec k="收 藏" v={`${a.fav} 人`} />
            </div>
          </div>

          {/* 授权 */}
          <div style={{ borderTop: `1px solid ${V3_C.line}`, padding: '28px 0 12px', marginTop: 8 }}>
            <div className="v3-divider" style={{ marginBottom: 24, justifyContent: 'flex-start' }}>授 权 之 约</div>
            <V3License label="非独家授权" sub="可商用 · 不限次 · 设计师保留著作权" price={a.price} />
            {a.exclusive && <V3License label="独家授权" sub="一年之内 · 唯君可用" price={a.exclusive} stamp />}
            {a.buyout && <V3License label="买断" sub="著作权尽归君所有" price={a.buyout} />}
          </div>

          <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
            <button onClick={() => onBuy(a)} style={{
              flex: 1, padding: '18px', background: V3_C.ink, color: V3_C.paper, border: 'none',
              fontFamily: v3Fonts.serif, fontSize: 15, letterSpacing: 8, cursor: 'pointer',
            }}>即 刻 购 入</button>
            <button onClick={() => addCart(a)} style={{
              flex: 1, padding: '17px', background: 'transparent', color: V3_C.ink,
              border: `1px solid ${V3_C.ink}`, fontFamily: v3Fonts.serif, fontSize: 15, letterSpacing: 6, cursor: 'pointer',
            }}>{cart.find(c => c.id === a.id) ? '✓ 已 入 箧' : '纳 入 箱 箧'}</button>
          </div>
        </div>
      </div>

      {/* 相关 */}
      <div style={{ padding: '32px 56px 80px', borderTop: `1px solid ${V3_C.line}`, background: V3_C.paper }}>
        <div className="v3-divider" style={{ margin: '24px 0 40px' }}>同 类 之 纹</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40 }}>
          {related.map(x => <V3Card key={x.id} a={x} onClick={() => window.__v3SetArt(x)} />)}
        </div>
      </div>
    </div>
  );
}

function V3Spec({ k, v }) {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'baseline' }}>
      <span style={{ color: V3_C.muted, fontSize: 12, letterSpacing: 3, minWidth: 68 }}>{k}</span>
      <span style={{ fontWeight: 500, letterSpacing: 1 }}>{v}</span>
    </div>
  );
}

function V3License({ label, sub, price, stamp }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '20px 0', borderBottom: `1px solid ${V3_C.line}`,
    }}>
      <div>
        <div style={{ fontSize: 16, letterSpacing: 3, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 10 }}>
          {label}
          {stamp && <span style={{ background: V3_C.stamp, color: V3_C.paper, fontSize: 10, padding: '2px 6px', fontFamily: v3Fonts.serif, letterSpacing: 2 }}>独</span>}
        </div>
        <div style={{ fontSize: 11, color: V3_C.muted, marginTop: 4, letterSpacing: 2 }}>{sub}</div>
      </div>
      <div style={{ fontSize: 24, fontWeight: 500, letterSpacing: 1 }}>¥{price.toLocaleString()}</div>
    </div>
  );
}

function V3Mockup({ 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: 4 },
    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, { V3Nav, V3Card, V3Home, V3List, V3Detail, V3_C, v3Fonts });