// Reusable product card + small pieces

const ProductCard = ({ p }) => {
  const { setRoute, wish, toggleWish } = useApp();
  const liked = wish.includes(p.id);
  return (
    <div className="product-card" onClick={() => setRoute('product', { id: p.id })}>
      <div className="img-wrap">
        {p.img
          ? <img src={p.img} alt={p.name} className="pimg" loading="lazy"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', aspectRatio: '4/5' }}/>
          : <div className="ph" data-label={p.id}/>}
        {p.tag && <div className={cx('tag', p.tag === 'SALE' && 'accent', p.tag === 'FRIDAY DROP' && 'accent', p.tag === 'LIMITED' && 'accent')}>{p.tag}</div>}
        <button className="wish" onClick={(e) => { e.stopPropagation(); toggleWish(p.id); }}>
          <IconHeart size={16} style={{ fill: liked ? 'var(--accent)' : 'none', color: liked ? 'var(--accent)' : 'var(--ink)' }}/>
        </button>
      </div>
      <div className="meta">
        <div className="sub">{p.series}</div>
        <div className="title">{p.name}</div>
        {p.zh && <div className="sub" style={{ textTransform: 'none', letterSpacing: 0 }}>{p.zh}</div>}
        <div className="price">
          {p.old && <span className="old">{fmtPrice(p.old)}</span>}
          <span style={{ color: p.old ? 'var(--accent)' : 'var(--ink)' }}>{fmtPrice(p.price)}</span>
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
          {p.colors.slice(0, 4).map(cn => {
            const c = COLORS.find(x => x.n === cn);
            return c && <span key={cn} className="swatch" style={{ background: c.v, width: 12, height: 12 }}/>;
          })}
        </div>
      </div>
    </div>
  );
};

const Breadcrumb = ({ items }) => (
  <div className="container-wide">
    <div className="breadcrumb">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="sep">/</span>}
          {it.onClick ? <a href="#" onClick={(e) => { e.preventDefault(); it.onClick(); }}>{it.label}</a>
                      : <span className="cur">{it.label}</span>}
        </React.Fragment>
      ))}
    </div>
  </div>
);

Object.assign(window, { ProductCard, Breadcrumb });