// Bebechic Mobile UI Kit — Screens
// Depends on globals from components.jsx (Button, Card, ProductCard, etc.)

const PRODUCTS = [
  { id: 'p1', name: 'Váy linen Cloud Day',     price: '490.000 ₫', oldPrice: '590.000 ₫', palette: 'mint',   badge: <Badge color="pink">new</Badge>,  cat: 'Váy' },
  { id: 'p2', name: 'Áo polo Bee Bee',         price: '320.000 ₫',                          palette: 'sun',   badge: <Badge color="mint">best</Badge>, cat: 'Áo'  },
  { id: 'p3', name: 'Set Mây Mây 2 món',       price: '670.000 ₫', oldPrice: '789.000 ₫',  palette: 'cloud', badge: <Badge color="sun">−15%</Badge>,  cat: 'Set bộ' },
  { id: 'p4', name: 'Túi tote Bechic vải mềm', price: '250.000 ₫',                          palette: 'blush',                                           cat: 'Phụ kiện' },
  { id: 'p5', name: 'Váy babydoll Hạt Mận',    price: '520.000 ₫',                          palette: 'rose', badge: <Badge color="pink">new</Badge>,    cat: 'Váy' },
  { id: 'p6', name: 'Áo croptop Trà Sữa',      price: '290.000 ₫',                          palette: 'deep',                                            cat: 'Áo' },
];

// ─────────────────────────────────────────────────────────────
// Home screen
// ─────────────────────────────────────────────────────────────
function HomeScreen({ go, cart, addToCart }) {
  const [cat, setCat] = React.useState('Tất cả');
  const cats = ['Tất cả', 'Váy', 'Áo', 'Set bộ', 'Phụ kiện', 'Sale'];
  const filtered = cat === 'Tất cả' ? PRODUCTS : PRODUCTS.filter(p => p.cat === cat);

  return (
    <div style={{paddingBottom: 100, background: BBC.cream, minHeight: '100%'}}>
      {/* Header */}
      <div style={{padding: '8px 18px 4px', display: 'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div style={{display:'flex', flexDirection:'column'}}>
          <span style={{fontFamily: BBC.fontBody, fontSize: 12, color: BBC.mute}}>Hi, bạn xinh đẹp 🌿</span>
          <span style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 22, color: BBC.mint700, letterSpacing: '-0.01em'}}>BEBECHIC</span>
        </div>
        <div style={{display:'flex', gap: 8}}>
          <IconButton icon="bell" badge={2}/>
          <IconButton icon="bag" badge={cart.length} onClick={() => go('cart')}/>
        </div>
      </div>

      {/* Hero card */}
      <div style={{padding: '8px 18px 0'}}>
        <div style={{
          position:'relative', background: 'linear-gradient(140deg, #B6E2D3, #E7FEF7)',
          borderRadius: 28, padding: '18px 18px 18px', overflow: 'hidden', minHeight: 130,
          boxShadow: BBC.sh1,
        }}>
          <DoodlePattern opacity={0.55}/>
          <div style={{position:'relative', zIndex:1, display:'flex', alignItems:'center'}}>
            <div style={{flex: 1.4}}>
              <Badge color="dark" style={{marginBottom: 8}}>BST mùa hè</Badge>
              <div style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 20, color: BBC.mint700, lineHeight: 1.15, marginBottom: 6}}>
                Mặc nhẹ tênh,<br/>đi đâu cũng xinh.
              </div>
              <Button size="sm" variant="primary" onClick={() => setCat('Váy')}>Xem ngay</Button>
            </div>
            <img src="../../images/mascots/mascot-croc-front.png" style={{width: 110, height: 'auto', marginRight: -8, marginBottom: -10}}/>
          </div>
        </div>
      </div>

      {/* Quick links */}
      <div style={{padding: '14px 18px 4px', display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 10}}>
        {[
          {icon:'spark', label:'New'},
          {icon:'discount', label:'Sale'},
          {icon:'truck', label:'Tracking'},
          {icon:'pin', label:'Stores'},
        ].map(q => (
          <div key={q.label} style={{display:'flex', flexDirection:'column', alignItems:'center', gap:6}}>
            <div style={{
              width: 52, height: 52, borderRadius: 18, background:'#fff',
              boxShadow: BBC.sh1, display:'flex', alignItems:'center', justifyContent:'center',
              color: BBC.mint700,
            }}><Icon name={q.icon} size={22}/></div>
            <span style={{fontFamily: BBC.fontBody, fontSize: 11, color: BBC.inkSoft, fontWeight: 500}}>{q.label}</span>
          </div>
        ))}
      </div>

      {/* Section title + chips */}
      <div style={{padding: '14px 18px 4px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <span style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 17, color: BBC.ink}}>Tủ đồ tuần này</span>
        <span style={{fontFamily: BBC.fontBody, fontSize: 12, color: BBC.mint700, fontWeight: 500}}>Xem tất cả ›</span>
      </div>
      <div style={{padding: '0 18px', display:'flex', gap: 8, overflowX:'auto', paddingBottom: 4}}>
        {cats.map(c => <Chip key={c} on={c === cat} onClick={() => setCat(c)}>{c}</Chip>)}
      </div>

      {/* Product grid */}
      <div style={{padding: '14px 18px 0', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12}}>
        {filtered.map(p => <ProductCard key={p.id} {...p} onClick={() => go('detail', p)}/>)}
      </div>

      {/* Story strip */}
      <div style={{padding: '20px 18px 4px'}}>
        <div style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 17, color: BBC.ink, marginBottom: 10}}>Bechic Stories</div>
        <div style={{display:'flex', gap: 10, overflowX:'auto'}}>
          {[
            {bg:'linear-gradient(160deg,#FFD8DB,#FFE28A)', label:'#OOTD'},
            {bg:'linear-gradient(160deg,#B6E2D3,#E7FEF7)', label:'Café date'},
            {bg:'linear-gradient(160deg,#8FD8C3,#74AF9E)', label:'Mưa mùa'},
            {bg:'linear-gradient(160deg,#FFE28A,#FFD8DB)', label:'Sale picks'},
          ].map(s => (
            <div key={s.label} style={{
              minWidth: 120, height: 160, borderRadius: 22, background: s.bg,
              boxShadow: BBC.sh1, position:'relative', overflow:'hidden',
              display:'flex', alignItems:'flex-end', padding: 10, color: BBC.mint700,
              fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 14,
            }}>
              <DoodlePattern opacity={0.5}/>
              <span style={{position:'relative', zIndex:1, background: 'rgba(255,252,245,0.75)', padding: '4px 10px', borderRadius: 999}}>{s.label}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Product Detail
// ─────────────────────────────────────────────────────────────
function ProductDetailScreen({ product, go, addToCart, back }) {
  const [size, setSize] = React.useState('M');
  const [color, setColor] = React.useState('Mint');
  const p = product || PRODUCTS[0];

  return (
    <div style={{background: BBC.cream, minHeight: '100%', paddingBottom: 100}}>
      {/* Photo with overlay nav */}
      <div style={{position:'relative'}}>
        <div style={{aspectRatio:'1/1', background: `linear-gradient(140deg, #B6E2D3, #FFD8DB)`, position:'relative', overflow:'hidden'}}>
          <DoodlePattern opacity={0.4}/>
          <div style={{position:'absolute', inset: 0, display:'flex', alignItems:'center', justifyContent:'center', fontFamily: BBC.fontDisplay, fontWeight:700, color: BBC.mint700, fontSize: 32, opacity: 0.5}}>{p.name.split(' ')[0]}</div>
          <div style={{position:'absolute', top: 12, left: 12, right: 12, display:'flex', justifyContent:'space-between'}}>
            <IconButton icon="back" onClick={back}/>
            <div style={{display:'flex', gap: 8}}>
              <IconButton icon="heart"/>
              <IconButton icon="bag" onClick={() => go('cart')}/>
            </div>
          </div>
          <div style={{position:'absolute', bottom: 12, left:'50%', transform:'translateX(-50%)', display:'flex', gap: 5}}>
            {[0,1,2,3].map(i => <div key={i} style={{width: i===0?18:6, height:6, borderRadius:3, background: i===0?BBC.mint700:'rgba(255,255,255,0.7)'}}/>)}
          </div>
        </div>
      </div>

      {/* Info card */}
      <div style={{margin: '-22px 14px 0', background:'#fff', borderRadius: 28, padding: 18, boxShadow: BBC.sh2, position:'relative', zIndex:1}}>
        <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap: 12}}>
          <div style={{flex: 1}}>
            <Badge color="mint" style={{marginBottom: 6}}>NEW · Tuần này</Badge>
            <div style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 22, color: BBC.ink, lineHeight: 1.2}}>{p.name}</div>
            <div style={{display:'flex', alignItems:'center', gap: 6, marginTop: 6}}>
              <Icon name="star" size={14} color={BBC.sun}/>
              <span style={{fontFamily: BBC.fontBody, fontSize: 12, color: BBC.inkSoft, fontWeight: 600}}>4.9</span>
              <span style={{fontFamily: BBC.fontBody, fontSize: 12, color: BBC.mute}}>· 128 đánh giá</span>
            </div>
          </div>
          <div style={{textAlign:'right'}}>
            <div style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 20, color: BBC.mint700}}>{p.price}</div>
            {p.oldPrice && <div style={{fontFamily: BBC.fontBody, fontSize: 12, color: BBC.mute, textDecoration:'line-through'}}>{p.oldPrice}</div>}
          </div>
        </div>

        {/* Color */}
        <div style={{marginTop: 16}}>
          <div style={{fontFamily: BBC.fontBody, fontSize: 12, fontWeight: 500, color: BBC.inkSoft, marginBottom: 8}}>Màu · {color}</div>
          <div style={{display:'flex', gap: 10}}>
            {[
              {name:'Mint', bg:BBC.mint300},
              {name:'Cream', bg:BBC.cream, border: true},
              {name:'Blush', bg:BBC.blush200},
              {name:'Sun', bg:BBC.sun},
            ].map(c => (
              <button key={c.name} onClick={() => setColor(c.name)} style={{
                width: 36, height: 36, borderRadius:'50%', background: c.bg,
                border: 'none', cursor:'pointer',
                boxShadow: color === c.name
                  ? `0 0 0 2.5px ${BBC.mint700}, 0 0 0 5px ${BBC.cream}`
                  : c.border ? `inset 0 0 0 1.5px ${BBC.line}` : 'none',
                transition: `box-shadow 180ms ${BBC.ease}`,
              }}/>
            ))}
          </div>
        </div>

        {/* Size */}
        <div style={{marginTop: 16}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 8}}>
            <span style={{fontFamily: BBC.fontBody, fontSize: 12, fontWeight: 500, color: BBC.inkSoft}}>Size · {size}</span>
            <span style={{fontFamily: BBC.fontBody, fontSize: 11, color: BBC.mint700, fontWeight: 500}}>Bảng size ›</span>
          </div>
          <div style={{display:'flex', gap: 8}}>
            {['XS','S','M','L','XL'].map(s => (
              <button key={s} onClick={() => setSize(s)} style={{
                flex: 1, padding: '10px 0', borderRadius: 16, border: 'none', cursor:'pointer',
                background: size === s ? BBC.mint700 : '#fff',
                color: size === s ? BBC.cream : BBC.inkSoft,
                boxShadow: size === s ? 'none' : `inset 0 0 0 1.5px ${BBC.line}`,
                fontFamily: BBC.fontDisplay, fontWeight: 600, fontSize: 13,
                transition: `all 180ms ${BBC.ease}`,
              }}>{s}</button>
            ))}
          </div>
        </div>

        {/* Description */}
        <div style={{marginTop: 18, fontFamily: BBC.fontBody, fontSize: 13, color: BBC.inkSoft, lineHeight: 1.55}}>
          Vải linen mềm rũ, form suông nhẹ, đường may chỉn chu — diện đi cà phê hay đi làm đều xinh. Tone pastel, dễ phối với mọi thứ trong tủ đồ.
        </div>

        {/* Perks */}
        <div style={{marginTop: 14, display:'grid', gridTemplateColumns: '1fr 1fr', gap: 8}}>
          {[
            {icon:'truck', text:'Free ship đơn từ 350k'},
            {icon:'check', text:'Đổi trả 7 ngày, dễ ơi là dễ'},
          ].map(perk => (
            <div key={perk.text} style={{display:'flex', alignItems:'center', gap: 8, padding: '8px 10px', background: BBC.mint100, borderRadius: 12}}>
              <Icon name={perk.icon} size={16} color={BBC.mint700}/>
              <span style={{fontFamily: BBC.fontBody, fontSize: 11, color: BBC.mint700, fontWeight: 500, lineHeight: 1.2}}>{perk.text}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom CTA bar */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, padding: '12px 14px 24px',
        background: 'linear-gradient(to top, rgba(255,252,245,1) 60%, rgba(255,252,245,0))',
        zIndex: 25, display:'flex', gap: 10,
      }}>
        <button style={{
          width: 52, height: 52, borderRadius: 999,
          background:'#fff', color: BBC.mint700, border:'none', cursor:'pointer',
          boxShadow: `inset 0 0 0 1.5px ${BBC.mint200}, ${BBC.sh1}`,
          display:'flex', alignItems:'center', justifyContent:'center',
        }}><Icon name="heart" size={20}/></button>
        <Button variant="primary" full size="lg" icon="bag" onClick={() => { addToCart(p); go('cart'); }}>Thêm vào giỏ — {p.price}</Button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Cart
// ─────────────────────────────────────────────────────────────
function CartScreen({ cart, removeFromCart, go, back }) {
  const total = cart.reduce((s, p) => s + parseInt(p.price.replace(/\D/g, ''), 10), 0);
  const fmt = n => n.toLocaleString('vi-VN') + ' ₫';
  return (
    <div style={{background: BBC.cream, minHeight: '100%', paddingBottom: 140}}>
      <TopBar title="Giỏ của bạn" left={<IconButton icon="back" onClick={back}/>}/>
      {cart.length === 0 ? (
        <div style={{padding: '40px 24px', display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', gap: 14}}>
          <img src="../../images/mascots/mascot-croc-front.png" style={{width: 140}}/>
          <div style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 20, color: BBC.mint700}}>Giỏ còn trống 🌿</div>
          <div style={{fontFamily: BBC.fontBody, fontSize: 14, color: BBC.inkSoft, maxWidth: 240}}>Đi dạo quanh shop với mình một xíu nhé, có nhiều món mới lắm!</div>
          <Button variant="primary" onClick={() => go('home')}>Khám phá ngay</Button>
        </div>
      ) : (
        <>
          <div style={{padding: '0 14px', display:'flex', flexDirection:'column', gap: 10}}>
            {cart.map((p, i) => (
              <Card key={p.id + i} padded={false} style={{padding: 10, display:'flex', alignItems:'center', gap: 12}}>
                <div style={{width: 72, height: 72, borderRadius: 16, overflow:'hidden', flexShrink: 0}}>
                  <ProductPhoto palette={p.palette} size="1/1"/>
                </div>
                <div style={{flex: 1, minWidth: 0}}>
                  <div style={{fontFamily: BBC.fontBody, fontWeight: 500, fontSize: 13, color: BBC.ink, lineHeight: 1.3}}>{p.name}</div>
                  <div style={{fontFamily: BBC.fontBody, fontSize: 11, color: BBC.mute, marginTop: 2}}>M · Mint</div>
                  <div style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 14, color: BBC.mint700, marginTop: 4}}>{p.price}</div>
                </div>
                <div style={{display:'flex', alignItems:'center', gap: 6}}>
                  <button style={{width: 26, height: 26, borderRadius: 999, border: `1.5px solid ${BBC.line}`, background:'#fff', color: BBC.mint700, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center'}}><Icon name="minus" size={12}/></button>
                  <span style={{fontFamily: BBC.fontDisplay, fontWeight: 600, fontSize: 13, color: BBC.ink, minWidth: 16, textAlign:'center'}}>1</span>
                  <button style={{width: 26, height: 26, borderRadius: 999, border: 'none', background: BBC.mint300, color: BBC.mint700, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center'}}><Icon name="plus" size={12}/></button>
                </div>
              </Card>
            ))}
          </div>

          {/* Promo code */}
          <div style={{padding: '16px 14px 0'}}>
            <Card padded={true}>
              <div style={{display:'flex', alignItems:'center', gap: 10}}>
                <div style={{width: 36, height: 36, borderRadius: 12, background: BBC.mint100, color: BBC.mint700, display:'flex', alignItems:'center', justifyContent:'center'}}><Icon name="discount" size={18}/></div>
                <div style={{flex: 1}}>
                  <div style={{fontFamily: BBC.fontBody, fontSize: 13, fontWeight: 600, color: BBC.ink}}>Áp mã giảm</div>
                  <div style={{fontFamily: BBC.fontBody, fontSize: 11, color: BBC.mute}}>Có 3 mã đang khả dụng</div>
                </div>
                <Icon name="chev" size={18} color={BBC.mute}/>
              </div>
            </Card>
          </div>

          {/* Totals */}
          <div style={{padding: '16px 18px 0', display:'flex', flexDirection:'column', gap: 6}}>
            {[['Tạm tính', fmt(total)],['Phí ship', '15.000 ₫'],['Khuyến mãi', '−50.000 ₫']].map(([k,v]) => (
              <div key={k} style={{display:'flex', justifyContent:'space-between', fontFamily: BBC.fontBody, fontSize: 13, color: BBC.inkSoft}}>
                <span>{k}</span><span>{v}</span>
              </div>
            ))}
            <div style={{display:'flex', justifyContent:'space-between', marginTop: 8, paddingTop: 10, borderTop: `1.5px dashed ${BBC.line}`}}>
              <span style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 15, color: BBC.ink}}>Tổng</span>
              <span style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 20, color: BBC.mint700}}>{fmt(total - 35000)}</span>
            </div>
          </div>

          {/* CTA */}
          <div style={{position:'absolute', bottom: 0, left:0, right:0, padding: '12px 14px 24px', background:'linear-gradient(to top, rgba(255,252,245,1) 60%, rgba(255,252,245,0))', zIndex: 25}}>
            <Button variant="primary" full size="lg" icon="chev">Đặt hàng ngay</Button>
          </div>
        </>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Search
// ─────────────────────────────────────────────────────────────
function SearchScreen({ go, back }) {
  const [q, setQ] = React.useState('');
  const trending = ['váy linen', 'set cotton mỏng', 'áo polo', 'túi tote', 'phụ kiện tóc'];
  const recent = ['váy babydoll', 'set mây mây', 'crop top'];
  const filtered = q ? PRODUCTS.filter(p => p.name.toLowerCase().includes(q.toLowerCase())) : [];

  return (
    <div style={{background: BBC.cream, minHeight: '100%', paddingBottom: 100}}>
      <div style={{padding: '8px 14px 12px', display:'flex', gap: 8, alignItems:'center'}}>
        <IconButton icon="back" onClick={back}/>
        <SearchField value={q} onChange={setQ} autoFocus/>
        <IconButton icon="filter"/>
      </div>

      {q === '' && (
        <>
          <div style={{padding: '4px 18px 8px', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <span style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 15, color: BBC.ink}}>Gần đây</span>
            <span style={{fontFamily: BBC.fontBody, fontSize: 12, color: BBC.mute}}>Xoá hết</span>
          </div>
          <div style={{padding: '0 18px', display:'flex', flexWrap:'wrap', gap: 8}}>
            {recent.map(r => <Chip key={r} onClick={() => setQ(r)}>{r}</Chip>)}
          </div>

          <div style={{padding: '20px 18px 8px'}}>
            <span style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 15, color: BBC.ink}}>Tủ Bechic đang tìm 🌸</span>
          </div>
          <div style={{padding: '0 18px', display:'flex', flexWrap:'wrap', gap: 8}}>
            {trending.map(t => <Chip key={t} on onClick={() => setQ(t)}>{t}</Chip>)}
          </div>

          <div style={{padding: '24px 18px 8px'}}>
            <span style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 15, color: BBC.ink}}>Gợi ý cho bạn</span>
          </div>
          <div style={{padding: '0 18px', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12}}>
            {PRODUCTS.slice(0, 4).map(p => <ProductCard key={p.id} {...p} onClick={() => go('detail', p)}/>)}
          </div>
        </>
      )}

      {q && filtered.length > 0 && (
        <div style={{padding: '0 18px', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12}}>
          {filtered.map(p => <ProductCard key={p.id} {...p} onClick={() => go('detail', p)}/>)}
        </div>
      )}

      {q && filtered.length === 0 && (
        <div style={{padding: '40px 24px', display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', gap: 12}}>
          <img src="../../images/mascots/mascot-girl-side.png" style={{width: 110}}/>
          <div style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 17, color: BBC.mint700}}>Hmm, chưa tìm thấy</div>
          <div style={{fontFamily: BBC.fontBody, fontSize: 13, color: BBC.inkSoft}}>Thử từ khác xem, hoặc xem mấy gợi ý trên nhé bạn ơi.</div>
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Profile / Me
// ─────────────────────────────────────────────────────────────
function ProfileScreen({ go }) {
  return (
    <div style={{background: BBC.cream, minHeight: '100%', paddingBottom: 100}}>
      <TopBar title="Bechic của tôi" right={<IconButton icon="bell" badge={2}/>}/>

      {/* Profile card */}
      <div style={{padding: '4px 14px 0'}}>
        <div style={{
          background: 'linear-gradient(140deg, #B6E2D3, #FFD8DB)',
          borderRadius: 28, padding: 18, position:'relative', overflow:'hidden',
          boxShadow: BBC.sh1,
        }}>
          <DoodlePattern opacity={0.5}/>
          <div style={{position:'relative', zIndex:1, display:'flex', alignItems:'center', gap: 14}}>
            <div style={{width: 64, height: 64, borderRadius: '50%', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', boxShadow: BBC.sh1, overflow:'hidden'}}>
              <img src="../../images/mascots/mascot-girl-front.png" style={{height: 80, marginTop: 12}}/>
            </div>
            <div style={{flex: 1}}>
              <div style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 18, color: BBC.mint700}}>Linh Đan</div>
              <div style={{fontFamily: BBC.fontBody, fontSize: 12, color: BBC.inkSoft}}>BechicVIP · 1.250 điểm</div>
            </div>
            <Button variant="ghost" size="sm">Sửa</Button>
          </div>
          {/* points bar */}
          <div style={{marginTop: 14, position:'relative', zIndex:1}}>
            <div style={{height: 6, borderRadius: 999, background:'rgba(255,255,255,0.6)', overflow:'hidden'}}>
              <div style={{height:'100%', width:'62%', background: BBC.mint700, borderRadius: 999}}/>
            </div>
            <div style={{display:'flex', justifyContent:'space-between', marginTop: 6, fontFamily: BBC.fontBody, fontSize: 11, color: BBC.mint700, fontWeight: 500}}>
              <span>BechicVIP</span><span>còn 250 điểm → BechicPro 🌸</span>
            </div>
          </div>
        </div>
      </div>

      {/* Quick stats */}
      <div style={{padding: '14px 14px 0', display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 8}}>
        {[
          {n: 12, l:'Đơn'},
          {n: 3, l:'Đang giao'},
          {n: 8, l:'Wishlist'},
          {n: 5, l:'Voucher'},
        ].map(s => (
          <div key={s.l} style={{background:'#fff', borderRadius: 18, padding: '10px 8px', textAlign:'center', boxShadow: BBC.sh1}}>
            <div style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 18, color: BBC.mint700}}>{s.n}</div>
            <div style={{fontFamily: BBC.fontBody, fontSize: 10.5, color: BBC.inkSoft}}>{s.l}</div>
          </div>
        ))}
      </div>

      {/* Menu */}
      <div style={{padding: '16px 14px 0'}}>
        <Card padded={false}>
          {[
            {icon:'bag', label:'Đơn hàng của tôi', note:'3 đang giao'},
            {icon:'heart', label:'Sản phẩm yêu thích', note:'8 món'},
            {icon:'pin', label:'Địa chỉ giao hàng', note:'2 địa chỉ'},
            {icon:'discount', label:'Mã giảm giá', note:'5 mã'},
            {icon:'bell', label:'Thông báo'},
          ].map((m, i, arr) => (
            <div key={m.label} style={{
              display:'flex', alignItems:'center', gap: 12,
              padding: '14px 16px',
              borderBottom: i < arr.length - 1 ? `1px solid ${BBC.lineSoft}` : 'none',
              cursor: 'pointer',
            }}>
              <div style={{width: 36, height: 36, borderRadius: 12, background: BBC.mint100, color: BBC.mint700, display:'flex', alignItems:'center', justifyContent:'center'}}><Icon name={m.icon} size={18}/></div>
              <span style={{flex: 1, fontFamily: BBC.fontBody, fontSize: 14, fontWeight: 500, color: BBC.ink}}>{m.label}</span>
              {m.note && <span style={{fontFamily: BBC.fontBody, fontSize: 12, color: BBC.mute}}>{m.note}</span>}
              <Icon name="chev" size={16} color={BBC.mute}/>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { HomeScreen, ProductDetailScreen, CartScreen, SearchScreen, ProfileScreen, PRODUCTS });