<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TJ · Wardrobe & Atmosphere</title>
<meta name="description" content="TJ · 精选衣橱与香氛">

<!-- primer-css CDN (GitHub 官方 CSS) -->
<link rel="stylesheet" href="https://unpkg.com/@primer/css@21/dist/primer.css">

<!-- Classic Elegant 字体对 (ui-ux-pro-max typography.csv:2) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
/* === E-commerce Luxury 配色 (ui-ux-pro-max colors.csv:5) === */
:root {
  --tj-primary: #1C1917;
  --tj-primary-fg: #FFFFFF;
  --tj-secondary: #44403C;
  --tj-accent: #A16207;
  --tj-bg: #FAFAF9;
  --tj-fg: #0C0A09;
  --tj-card: #FFFFFF;
  --tj-card-fg: #0C0A09;
  --tj-muted: #E8ECF0;
  --tj-muted-fg: #64748B;
  --tj-border: #D6D3D1;
  --tj-destructive: #DC2626;
  --tj-ring: #1C1917;

  /* penpot 15 态按钮命名 */
  --btn-primary-bg-rest: var(--tj-primary);
  --btn-primary-bg-hover: var(--tj-secondary);
  --btn-primary-bg-active: #0C0A09;
  --btn-primary-fg-rest: #FFFFFF;

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* === 覆盖 primer 默认色到奢品主题 === */
body.light {
  --bgColor-default: var(--tj-bg);
  --fgColor-default: var(--tj-fg);
  --borderColor-default: var(--tj-border);
  --button-primary-bgColor-rest: var(--tj-primary);
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background: var(--tj-bg);
  color: var(--tj-fg);
  margin: 0;
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* === Nav === */
.tj-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--tj-bg);
  border-bottom: 1px solid var(--tj-border);
  padding: 1.2rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tj-nav__logo {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tj-fg);
  text-decoration: none;
}
.tj-nav__links { display: flex; gap: 2.2rem; }
.tj-nav__links a {
  color: var(--tj-fg);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 80ms cubic-bezier(0.33, 1, 0.68, 1);
}
.tj-nav__links a:hover { color: var(--tj-accent); }

/* === Hero === */
.tj-hero {
  position: relative;
  min-height: 68vh;
  padding: 7rem 2rem 5rem;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tj-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.tj-hero__bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.tj-hero__bg video.is-active { opacity: 1; }
.tj-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250,250,249,0.35) 0%, rgba(250,250,249,0.80) 100%);
  pointer-events: none;
  z-index: 1;
}
.tj-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
}
.tj-hero h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin: 0 0 1.2rem; }
.tj-hero p { font-size: 1.1rem; color: var(--tj-muted-fg); margin: 0 auto 2.4rem; max-width: 640px; }

@media (max-width: 640px) {
  .tj-hero { min-height: 58vh; padding: 5rem 1.4rem 3.5rem; }
  /* 手机人物居中 - 保持 object-position center center, 视频再往下偏 0% 就是中央 */
  .tj-hero__bg video { object-position: 50% 40%; }
}

/* === Button (shadcn CVA + penpot 5 态) === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.8rem;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--btn-primary-bg-rest);
  border-radius: 2px;
  background: var(--btn-primary-bg-rest);
  color: var(--btn-primary-fg-rest);
  cursor: pointer;
  transition: all 120ms cubic-bezier(0.33, 1, 0.68, 1);
  text-decoration: none;
}
.btn:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); }
.btn:active { background: var(--btn-primary-bg-active); transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline {
  background: transparent;
  color: var(--tj-fg);
  border-color: var(--tj-border);
}
.btn-outline:hover { background: var(--tj-primary); color: var(--tj-primary-fg); border-color: var(--tj-primary); }
.btn-ghost {
  background: transparent;
  color: var(--tj-fg);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--tj-muted); }

/* === Product Grid === */
.tj-section {
  padding: 5rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
}
.tj-section__head { text-align: center; margin-bottom: 3.5rem; }
.tj-section__head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 0.8rem; }
.tj-section__head p { color: var(--tj-muted-fg); font-size: 1rem; margin: 0; letter-spacing: 0.04em; }

.tj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
}

/* === Card (shadcn 6 槽位 CSS 化) === */
.tj-card {
  background: var(--tj-card);
  color: var(--tj-card-fg);
  border: 1px solid var(--tj-border);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 200ms cubic-bezier(0.33, 1, 0.68, 1);
  opacity: 0;
  transform: translateY(24px);
  text-decoration: none;
}
.tj-card:hover { border-color: var(--tj-primary); transform: translateY(-4px); }
.tj-card__media {
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, var(--tj-muted), #FAFAF9);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.tj-card__media svg { width: 55%; height: 55%; color: var(--tj-secondary); opacity: 0.4; }
.tj-card__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 0.28rem 0.7rem;
  text-transform: uppercase;
  border-radius: 2px;
  color: #fff;
  background: var(--tj-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.tj-card__badge[data-tag="NEW"] { background: linear-gradient(135deg,#1d4ed8,#0ea5e9); }
.tj-card__badge[data-tag="Bestseller"] { background: linear-gradient(135deg,#a16207,#d97706); color:#fff; }
.tj-card__badge[data-tag="Spring"] { background: linear-gradient(135deg,#166534,#4ade80); }
.tj-card__badge[data-tag="Atmosphere"] { background: linear-gradient(135deg,#6d28d9,#a855f7); }
.tj-card__badge[data-tag="Limited"] { background: linear-gradient(135deg,#be123c,#fb7185); }
.tj-card__badge[data-tag="Sale"] { background: linear-gradient(135deg,#b45309,#f59e0b); }
.tj-card__badge[data-tag="Classic"] { background: linear-gradient(135deg,#374151,#6b7280); }
.tj-card__badge[data-tag="Forest"] { background: linear-gradient(135deg,#065f46,#10b981); }
.tj-card__badge[data-tag="Summer"] { background: linear-gradient(135deg,#0c4a6e,#38bdf8); }
.tj-card__body { padding: 1.4rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.tj-card__title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500; color: var(--tj-fg); margin: 0; }
.tj-card__desc { color: var(--tj-muted-fg); font-size: 0.88rem; margin: 0; }
.tj-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.8rem; }
.tj-card__price { font-family: var(--font-serif); font-size: 1.1rem; color: var(--tj-accent); font-weight: 600; }

/* === Footer === */
.tj-footer {
  border-top: 1px solid var(--tj-border);
  padding: 3rem 2rem 2rem;
  color: var(--tj-muted-fg);
  font-size: 0.85rem;
  text-align: center;
  letter-spacing: 0.04em;
}
.tj-footer p { margin: 0.3rem 0; }
</style>

<!-- TJ SiteOS live install: head start -->
<link rel="stylesheet" href="/tj-siteos-install.css">
<link rel="stylesheet" href="/robot-widget.css">
<link rel="icon" href="/assets/brand/favicon.svg" type="image/svg+xml">
<!-- TJ SiteOS live install: head end -->
</head>

<body class="light">

<nav class="tj-nav">
  <a href="index.html" class="tj-nav__logo">TJ</a>
  <div class="tj-nav__links">
    <a href="index.html">Wardrobe</a>
    <a href="product.html">Shop</a>
    <a href="cart.html">Cart (<span id="cart-count">0</span>)</a>
  </div>
</nav>

<header class="tj-hero">
  <div class="tj-hero__bg" id="heroBg">
    <video src="assets/videos/hero_v1.mp4" autoplay muted playsinline preload="auto" class="is-active"></video>
    <video src="assets/videos/hero_v2.mp4" muted playsinline preload="auto"></video>
    <video src="assets/videos/hero_v3.mp4" muted playsinline preload="auto"></video>
    <video src="assets/videos/hero_v4.mp4" muted playsinline preload="auto"></video>
  </div>
  <div class="tj-hero__inner">
    <h1>Quiet Luxury, Daily Ritual</h1>
    <p>精选莫兰迪色衣橱与天然香氛. 每一件都可以静静待在你的生活里很久.</p>
    <a href="product.html" class="btn">进入衣橱</a>
    <a href="#featured" class="btn btn-outline" style="margin-left: 0.8rem;">查看精选</a>
  </div>
</header>

<section class="tj-section" id="featured">
  <div class="tj-section__head">
    <h2>Spring / Summer 2026 精选</h2>
    <p>6 款 T 恤 · 6 款香氛 · 4 顶帽 · 全系限量发售</p>
  </div>

  <div class="tj-grid" id="product-grid">
    <!-- 产品卡由 JS 注入 -->
  </div>
</section>

<footer class="tj-footer">
  <p>TJ · Wardrobe & Atmosphere</p>
  <p>2026 · Designed by Xiaoxiao with Longge</p>
</footer>

<!-- === 产品数据 + 动画 (motion CDN) === -->
<script type="module">
// 优先尝试 motion CDN, 若网络失败则 fallback 到 Web Animations API
let motionReady = false;
let animate, inView;
try {
  const mod = await import("https://cdn.jsdelivr.net/npm/motion@11/+esm");
  animate = mod.animate;
  inView = mod.inView;
  motionReady = true;
} catch (e) {
  console.warn("motion CDN 不可用, fallback Web Animations API");
}

// === 产品数据 (与 product.html / cart.html 共享 via localStorage) ===
const PRODUCTS = [
  // T 恤系列
  { id: 't01', name: '温白棉 T', desc: '100% 长绒棉 · 雾感白', price: 368, tag: 'Spring', icon: 'tee' },
  { id: 't02', name: '沙褐 T 恤', desc: '秋日沙漠色 · 直筒版型', price: 388, tag: 'NEW', icon: 'tee' },
  { id: 't03', name: '灰绿 T 恤', desc: '松茸灰绿 · oversized 宽松', price: 398, tag: 'Classic', icon: 'tee' },
  { id: 't04', name: '烟蓝长袖 T', desc: '重磅棉 · 极简圆领', price: 428, tag: 'Bestseller', icon: 'tee' },
  { id: 't05', name: '燕麦色卫衣', desc: '330g 法棉 · 落肩', price: 680, tag: 'NEW', icon: 'tee' },
  { id: 't06', name: '炭黑 polo', desc: '双丝光棉 · 极简翻领', price: 498, tag: 'Summer', icon: 'tee' },
  // 帽子系列
  { id: 'h01', name: '麦秆帽', desc: '手工编织 · 宽檐可塑形', price: 580, tag: 'Bestseller', icon: 'hat' },
  { id: 'h02', name: '羊毛贝雷', desc: '意大利羊毛 · 碳黑', price: 420, tag: 'Classic', icon: 'hat' },
  { id: 'h03', name: '渔夫帽', desc: '石蜡棉 · 防水防皱', price: 360, tag: 'Limited', icon: 'hat' },
  { id: 'h04', name: '鸭舌帽', desc: '亚麻混纺 · 可调节', price: 320, tag: 'Summer', icon: 'hat' },
  // 香氛系列
  { id: 'a01', name: '檀香香氛', desc: '檀木 + 岩兰 · 200ml', price: 680, tag: 'Atmosphere', icon: 'bottle' },
  { id: 'a02', name: '苔藓森林', desc: '橡苔 + 雪松 · 200ml', price: 680, tag: 'Forest', icon: 'bottle' },
  { id: 'a03', name: '晨雾玫瑰', desc: '大马士革玫瑰 · 100ml', price: 880, tag: 'NEW', icon: 'bottle' },
  { id: 'a04', name: '海盐柑橘', desc: '西西里柑橘 + 海盐矿物 · 150ml', price: 720, tag: 'Summer', icon: 'bottle' },
  { id: 'a05', name: '黑茶木质', desc: '正山小种 + 广藿香 · 200ml', price: 780, tag: 'Limited', icon: 'bottle' },
  { id: 'a06', name: '无花果白麝', desc: '地中海无花果 + 白麝香 · 200ml', price: 850, tag: 'Bestseller', icon: 'bottle' },
];
localStorage.setItem('tj_products', JSON.stringify(PRODUCTS));

// === SVG 图标 (占位, 不依赖图片) ===
const ICONS = {
  tee: '<path d="M8 4l-5 3 1 5h3v10h10V12h3l1-5-5-3h-3a2 2 0 0 1-4 0H8z" fill="currentColor"/>',
  hat: '<path d="M12 3c-4 0-7 4-7 9h14c0-5-3-9-7-9zM3 13h18v3H3z" fill="currentColor"/>',
  bottle: '<path d="M9 2h6v3l2 3v13a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8l2-3V2z" fill="currentColor"/>',
};

// === 渲染产品卡 ===
const grid = document.getElementById('product-grid');
PRODUCTS.forEach(p => {
  const card = document.createElement('a');
  card.href = `product.html?id=${p.id}`;
  card.className = 'tj-card';
  card.innerHTML = `
    <div class="tj-card__media">
      ${p.tag ? `<span class="tj-card__badge" data-tag="${p.tag}">${p.tag}</span>` : ''}
      <svg viewBox="0 0 24 24" fill="none">${ICONS[p.icon] || ICONS.tee}</svg>
    </div>
    <div class="tj-card__body">
      <h3 class="tj-card__title">${p.name}</h3>
      <p class="tj-card__desc">${p.desc}</p>
      <div class="tj-card__foot">
        <span class="tj-card__price">¥ ${p.price}</span>
        <span class="btn btn-ghost" style="padding: 0.3rem 0.8rem;">查看</span>
      </div>
    </div>
  `;
  grid.appendChild(card);
});

// === Hero 淡入 ===
const hero = document.querySelector('.tj-hero');
if (motionReady) {
  animate(hero, { opacity: [0, 1], y: [20, 0] }, { duration: 0.6, easing: 'ease-out' });
} else {
  hero.animate([{ opacity: 0, transform: 'translateY(20px)' }, { opacity: 1, transform: 'translateY(0)' }],
    { duration: 600, easing: 'ease-out', fill: 'forwards' });
}

// === Hero 4 视频淡入淡出无限循环 ===
(function heroVideoLoop() {
  const vids = document.querySelectorAll('#heroBg video');
  if (!vids.length) return;
  let active = 0;
  vids[0].play().catch(() => {});
  const PER_CLIP_MS = 6000;   // 每段 6 秒
  setInterval(() => {
    const cur = vids[active];
    const next = (active + 1) % vids.length;
    vids[next].currentTime = 0;
    vids[next].play().catch(() => {});
    vids[next].classList.add('is-active');
    setTimeout(() => {
      cur.classList.remove('is-active');
      cur.pause();
    }, 1400);
    active = next;
  }, PER_CLIP_MS);
})();

// === 产品卡 staggered 浮现 (inView 滚动触发) ===
const cards = document.querySelectorAll('.tj-card');
if (motionReady) {
  inView('.tj-card', (info) => {
    const idx = Array.from(cards).indexOf(info.target);
    animate(info.target, { opacity: [0, 1], y: [24, 0] }, { duration: 0.5, delay: idx * 0.06, easing: 'ease-out' });
  });
} else {
  // fallback: IntersectionObserver + WAAPI
  const io = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const idx = Array.from(cards).indexOf(entry.target);
        entry.target.animate(
          [{ opacity: 0, transform: 'translateY(24px)' }, { opacity: 1, transform: 'translateY(0)' }],
          { duration: 500, delay: idx * 60, easing: 'ease-out', fill: 'forwards' }
        );
        io.unobserve(entry.target);
      }
    });
  });
  cards.forEach(c => io.observe(c));
}

// === 购物车计数 (共享 localStorage) ===
function updateCartCount() {
  const cart = JSON.parse(localStorage.getItem('tj_cart') || '[]');
  document.getElementById('cart-count').textContent = cart.reduce((s, i) => s + i.qty, 0);
}
updateCartCount();
window.addEventListener('storage', updateCartCount);
</script>


<!-- TJ SiteOS live install: body start -->
<script src="/tj-siteos-install.js" defer></script>
<script src="/robot-widget.js" defer></script>
<!-- TJ SiteOS live install: body end -->
</body>
</html>
