/* products.jsx — Product cards: thumbnail + name + format */

function ProductsCard() {
  const products = [
    {n:'Champô',        sc:'Cedar & Sandalwood',     fmt:'5 L · recarga inox', cat:'cabelo',    code:'CDR-SHM-5L',  vat:23, price:46.00, kind:'bottle'},
    {n:'Sabonete líquido', sc:'Bergamot & Patchouli', fmt:'5 L · recarga inox', cat:'corpo',     code:'BGP-SBL-5L',  vat:23, price:42.00, kind:'jar'},
    {n:'Loção corpo',   sc:'Sea Salt',                   fmt:'1 L · refill PET',   cat:'corpo',     code:'SLT-LOC-1L',  vat:23, price:18.00, kind:'tube'},
    {n:'Óleo barba',    sc:'Cedar & Sandalwood',     fmt:'300 ml · vidro',     cat:'barba',     code:'CDR-OLB-30',  vat:23, price:24.50, kind:'bottle'},
    {n:'Sabonete em barra', sc:'Sea Salt',               fmt:'120 g · papel',      cat:'corpo',     code:'SLT-SBR-12',  vat:23, price:6.40,  kind:'bar'},
    {n:'Pasta de cabelo', sc:'Bergamot & Patchouli', fmt:'100 ml · alumínio',  cat:'cabelo',    code:'BGP-PCB-10',  vat:23, price:14.20, kind:'jar'},
    {n:'Toalha rosto',  sc:'linho cru',                  fmt:'40 × 60 cm',         cat:'vestuário', code:'LNH-TLR-46',  vat:23, price:8.80,  kind:'bar'},
    {n:'Roupão',        sc:'algodão escovado',           fmt:'M · L · XL',         cat:'vestuário', code:'ALG-RPN-ML',  vat:23, price:62.00, kind:'bar'},
  ];

  return (
    <div className="ab" style={{padding:'44px 52px', overflow:'hidden'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
        <SectionMark n={10} label="Cartões de produto" />
        <div className="smallcaps">grelha · CRM produtos</div>
      </div>

      <div style={{marginTop:24, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14, flex:1}}>
        {products.map((p,i)=>(
          <div key={i} style={{
            background:'var(--surface)', border:'0.5px solid var(--rule)',
            borderRadius:4, padding:14, display:'flex', flexDirection:'column', gap:10,
          }}>
            {/* code + actions */}
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <span className="mono" style={{fontSize:10, color:'var(--ink-3)', letterSpacing:0.06}}>{p.code}</span>
              <span className="mono" style={{fontSize:10, color:'var(--ink-3)'}}>IVA {p.vat}%</span>
            </div>

            {/* product image */}
            <div style={{height:120, background:'var(--bone-3)', borderRadius:2, display:'flex', alignItems:'center', justifyContent:'center', position:'relative'}}>
              <PlaceholderImg kind={p.kind} w={56} h={88} />
              <span className="smallcaps" style={{position:'absolute', top:8, left:8, fontSize:9}}>{p.cat}</span>
            </div>

            {/* name + scent */}
            <div>
              <div style={{fontFamily:'var(--display)', fontSize:18, lineHeight:1.15}} dangerouslySetInnerHTML={{__html: p.n}} />
              <div style={{fontFamily:'var(--display)', fontStyle:'italic', fontSize:13, color:'var(--ink-3)', marginTop:2}} dangerouslySetInnerHTML={{__html: p.sc}} />
            </div>

            <Hr style={{margin:'2px 0'}} />

            <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
              <div style={{fontSize:11, color:'var(--ink-3)'}}>{p.fmt}</div>
              <div className="mono tab" style={{fontSize:13, fontWeight:600}}>{p.price.toFixed(2).replace('.',',')} €</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{marginTop:20, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div className="smallcaps">8 SKUs · 4 categorias · IVA 23%</div>
        <div className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>cabelo · barba · corpo · vestuário</div>
      </div>
    </div>
  );
}

Object.assign(window, { ProductsCard });