// ui_kits/website/Shop.jsx — product shelf + cards
//
// Bilingual products: name / meta / badge are language objects.

const shopStyles = {
  section: { background: '#fff', padding: '96px 0', borderTop: '1px solid var(--color-divider)' },
  header: {
    maxWidth: 1200, margin: '0 auto 36px', padding: '0 32px',
    display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
  },
  grid: {
    maxWidth: 1200, margin: '0 auto', padding: '0 32px',
    display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24,
  },
  card: {
    background: '#fff', borderRadius: 12,
    border: '1px solid var(--color-divider)',
    overflow: 'hidden',
    cursor: 'pointer',
    transition: 'all 240ms var(--ease-out)',
  },
  art: {
    aspectRatio: '1 / 1',
    background: 'var(--brand-mint-wash)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    position: 'relative',
  },
  badge: {
    position: 'absolute', top: 12, left: 12,
    padding: '3px 10px', borderRadius: 9999,
    background: 'var(--brand-coral)', color: '#fff',
    fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 700,
    letterSpacing: '0.14em', textTransform: 'uppercase',
  },
  body: { padding: '16px 18px 20px' },
  rating: { display: 'flex', alignItems: 'center', gap: 4, color: '#E8B458', fontFamily: 'var(--font-sans)', fontSize: 12 },
  name: { fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 16, color: '#383838', margin: '8px 0 4px' },
  meta: { fontFamily: 'var(--font-sans)', fontSize: 12, color: '#767574', marginBottom: 12 },
  bottom: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  price: { fontFamily: 'var(--font-sans)', fontSize: 18, fontWeight: 700, color: '#151414' },
  bag: {
    width: 36, height: 36, borderRadius: 8,
    background: 'var(--brand-leaf)', color: '#fff',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    border: 'none', cursor: 'pointer',
  },
};

const PRODUCTS = [
  {
    name:  { es: 'Glicinato de Magnesio',     en: 'Magnesium Glycinate' },
    meta:  { es: 'Sueño · 60 cápsulas',       en: 'Sleep · 60 caps' },
    price: '$28', rating: 4.8,
    badgeKey: 'shop.badge.bestseller',
    tint: 'linear-gradient(135deg,#C8E8D6,#8FCFAE)',
  },
  {
    name:  { es: 'Aceite Facial de Rosa Mosqueta', en: 'Rosehip Facial Oil' },
    meta:  { es: 'Piel · 30 mL',                   en: 'Skin · 30 mL' },
    price: '$34', rating: 4.7,
    badgeKey: null,
    tint: 'linear-gradient(135deg,#EFC5BE,#D9A29B)',
  },
  {
    name:  { es: 'Mezcla de Té Adaptógeno',   en: 'Adaptogen Tea Blend' },
    meta:  { es: 'Estrés · 24 sobres',        en: 'Stress · 24 sachets' },
    price: '$22', rating: 4.9,
    badgeKey: 'shop.badge.new',
    tint: 'linear-gradient(135deg,#F2D391,#E8B458)',
  },
  {
    name:  { es: 'Vitamina D3 + K2',          en: 'Vitamin D3 + K2' },
    meta:  { es: 'Huesos · 90 cápsulas',      en: 'Bones · 90 caps' },
    price: '$24', rating: 4.6,
    badgeKey: null,
    tint: 'linear-gradient(135deg,#A3BEDA,#6E97C2)',
  },
];

function ShopProductCard({ product }) {
  const lang = React.useContext(LangContext);
  const tr = useT();
  const [hover, setHover] = React.useState(false);

  const name = product.name[lang] ?? product.name.en;
  const meta = product.meta[lang] ?? product.meta.en;
  const badge = product.badgeKey ? tr(product.badgeKey) : null;

  return (
    <article style={{ ...shopStyles.card,
                      transform: hover ? 'translateY(-3px)' : 'none',
                      boxShadow: hover ? '0 14px 32px rgba(31,79,64,0.10)' : 'none' }}
             onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <div style={{ ...shopStyles.art, background: product.tint }}>
        {badge && <span style={shopStyles.badge}>{badge}</span>}
        <Star size={64} stroke="#fff" sw={1.4} style={{ opacity: 0.35 }}/>
      </div>
      <div style={shopStyles.body}>
        <div style={shopStyles.rating}>
          {[1,2,3,4,5].map(i => <Star key={i} size={12}/>)}
          <span style={{ color: '#767574', marginLeft: 4 }}>{product.rating}</span>
        </div>
        <div style={shopStyles.name}>{name}</div>
        <div style={shopStyles.meta}>{meta}</div>
        <div style={shopStyles.bottom}>
          <div style={shopStyles.price}>{product.price}</div>
          <button style={shopStyles.bag}><ShoppingBag size={16}/></button>
        </div>
      </div>
    </article>
  );
}

function ShopSection() {
  const tr = useT();
  return (
    <section style={shopStyles.section}>
      <div style={shopStyles.header}>
        <div>
          <div className="eyebrow">{tr('shop.eyebrow')}</div>
          <h2 className="section-title" style={{ marginTop: 8 }}>{tr('shop.title')}</h2>
          <p className="section-sub">{tr('shop.sub')}</p>
        </div>
        <button className="btn btn--secondary">{tr('shop.viewAll')} <ArrowRight size={16}/></button>
      </div>
      <div style={shopStyles.grid}>
        {PRODUCTS.map((p, i) => <ShopProductCard key={i} product={p}/>)}
      </div>
    </section>
  );
}

window.ShopSection = ShopSection;
window.ShopProductCard = ShopProductCard;
window.PRODUCTS = PRODUCTS;