/* BLOCKS F (cards · product) — 15 distinct product-card archetypes for Empire UI v2 */
(function(){
  const { cx, Slot, Spark, Bars, Ring, Glyph, G } = window;
  const B='inline-flex items-center justify-center gap-2 cursor-pointer select-none whitespace-nowrap';
  const ghost=s=>s.cls.btnGhost||s.cls.btn;
  const head=(s,x='')=>cx(s.cls.display,s.cls.glow,x);
  const Stars=(s,f=5,n=5)=>(<span className="inline-flex items-center gap-0.5">
    {Array.from({length:n}).map((_,i)=>(<Glyph key={i} d={G.star} size={13} fill={i<f?s.cls.accent:'transparent'} style={{color:s.cls.accent}}/>))}
  </span>);

  const blocks=[

    /* 1 — image-top classic */
    { id:'fP-classic', type:'cards', subtype:'product', title:'Classic (image top)', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
          <Slot label="product" className="w-full h-40" style={{color:s.cls.accent}}/>
          <div className="p-4">
            <div className={cx('text-[11px] uppercase tracking-wider',s.cls.muted)}>Aerie</div>
            <div className={head(s,'text-sm font-extrabold mt-1 leading-snug')}>Merino Wool Crew Sweater</div>
            <div className="flex items-center justify-between mt-3">
              <span className={cx('text-base font-extrabold',s.cls.text)}>$128</span>
              <button className={cx(B,s.cls.btnPrimary,'px-3 py-2 text-xs')}><Glyph d={G.plus} size={14}/>Add</button>
            </div>
          </div>
        </div>) },

    /* 2 — horizontal (image left / info right) */
    { id:'fP-horizontal', type:'cards', subtype:'product', title:'Horizontal (image left)', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-4 flex items-center gap-4')}>
          <Slot label="product" className="w-28 h-28 rounded-lg shrink-0" style={{color:s.cls.accent}}/>
          <div className="min-w-0 flex-1">
            <div className={cx('text-[11px] uppercase tracking-wider',s.cls.muted)}>Lumen Audio</div>
            <div className={head(s,'text-base font-extrabold mt-1 leading-snug')}>Studio Wireless Headphones</div>
            <p className={cx('text-[12px] mt-1.5 leading-relaxed',s.cls.sub)}>40h battery · active noise cancelling · USB-C fast charge.</p>
            <div className="flex items-center justify-between mt-3">
              <span className={cx('text-lg font-extrabold',s.cls.text)}>$249</span>
              <button className={cx(B,s.cls.btnPrimary,'px-4 py-2 text-sm')}>Add to cart</button>
            </div>
          </div>
        </div>) },

    /* 3 — image with overlaid title + price */
    { id:'fP-overlay', type:'cards', subtype:'product', title:'Overlay title + price', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden relative')}>
          <Slot label="product" className="w-full h-56" style={{color:s.cls.accent}}/>
          <div className="absolute inset-x-0 bottom-0 p-4" style={{background:'linear-gradient(to top, rgba(0,0,0,0.72), transparent)'}}>
            <div className="text-sm font-extrabold text-white leading-snug">Canvas Weekender Bag</div>
            <div className="flex items-center justify-between mt-2">
              <span className="text-base font-extrabold text-white">$96</span>
              <span className="px-3 py-1.5 rounded-full text-xs font-bold text-white" style={{background:s.cls.accent}}>Shop</span>
            </div>
          </div>
        </div>) },

    /* 4 — hover quick-add */
    { id:'fP-quickadd', type:'cards', subtype:'product', title:'Hover quick-add', w:1,
      Render:(s)=>{
        const [h,setH]=React.useState(false);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}
            onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}>
            <div className="relative">
              <Slot label="product" className="w-full h-40" style={{color:s.cls.accent}}/>
              <div className="absolute inset-x-3 bottom-3 transition-all duration-200"
                style={{opacity:h?1:0,transform:h?'translateY(0)':'translateY(8px)'}}>
                <button className={cx(B,s.cls.btnPrimary,'w-full px-3 py-2.5 text-sm')}><Glyph d={G.plus} size={15}/>Quick add</button>
              </div>
            </div>
            <div className="p-4">
              <div className={head(s,'text-sm font-extrabold leading-snug')}>Trail Runner Sneakers</div>
              <span className={cx('text-base font-extrabold mt-1.5 block',s.cls.text)}>$140</span>
            </div>
          </div>); } },

    /* 5 — sale badge + struck price */
    { id:'fP-sale', type:'cards', subtype:'product', title:'Sale badge + struck price', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
          <div className="relative">
            <Slot label="product" className="w-full h-40" style={{color:s.cls.accent}}/>
            <span className="absolute top-3 left-3 px-2.5 py-1 rounded-full text-[10px] font-bold text-white" style={{background:s.cls.accent}}>-30%</span>
          </div>
          <div className="p-4">
            <div className={head(s,'text-sm font-extrabold leading-snug')}>Linen Button-Down Shirt</div>
            <div className="flex items-baseline gap-2 mt-2">
              <span className="text-base font-extrabold" style={{color:'#22c55e'}}>$63</span>
              <span className={cx('text-sm line-through',s.cls.muted)}>$90</span>
            </div>
          </div>
        </div>) },

    /* 6 — with star rating row */
    { id:'fP-rating', type:'cards', subtype:'product', title:'With star rating', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
          <Slot label="product" className="w-full h-40" style={{color:s.cls.accent}}/>
          <div className="p-4">
            <div className={head(s,'text-sm font-extrabold leading-snug')}>Ceramic Pour-Over Set</div>
            <div className="flex items-center gap-2 mt-2">
              {Stars(s,4)}
              <span className={cx('text-[11px]',s.cls.muted)}>4.0 · 218 reviews</span>
            </div>
            <span className={cx('text-base font-extrabold mt-2 block',s.cls.text)}>$54</span>
          </div>
        </div>) },

    /* 7 — color swatch selector */
    { id:'fP-swatches', type:'cards', subtype:'product', title:'Color swatch selector', w:1,
      Render:(s)=>{
        const colors=['#1f2937','#b45309','#0e7490','#9d174d'];
        const [c,setC]=React.useState(0);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
            <Slot label="product" className="w-full h-40" style={{color:s.cls.accent}}/>
            <div className="p-4">
              <div className={head(s,'text-sm font-extrabold leading-snug')}>Everyday Cotton Tee</div>
              <div className="flex items-center gap-2 mt-3">
                {colors.map((col,i)=>(
                  <button key={i} onClick={()=>setC(i)} aria-label="color"
                    className="w-6 h-6 rounded-full transition-all"
                    style={{background:col,outline:c===i?('2px solid '+s.cls.accent):'none',outlineOffset:'2px'}}/>))}
              </div>
              <span className={cx('text-base font-extrabold mt-3 block',s.cls.text)}>$32</span>
            </div>
          </div>); } },

    /* 8 — wishlist heart toggle */
    { id:'fP-wishlist', type:'cards', subtype:'product', title:'Wishlist heart toggle', w:1,
      Render:(s)=>{
        const [w,setW]=React.useState(false);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
            <div className="relative">
              <Slot label="product" className="w-full h-40" style={{color:s.cls.accent}}/>
              <button onClick={()=>setW(!w)} aria-label="wishlist"
                className={cx(s.cls.surface2,'absolute top-3 right-3 w-9 h-9 rounded-full flex items-center justify-center')}>
                <Glyph d={G.heart} size={16} fill={w?s.cls.accent:'transparent'} style={{color:s.cls.accent}}/>
              </button>
            </div>
            <div className="p-4">
              <div className={head(s,'text-sm font-extrabold leading-snug')}>Down Puffer Jacket</div>
              <span className={cx('text-base font-extrabold mt-1.5 block',s.cls.text)}>$210</span>
            </div>
          </div>); } },

    /* 9 — minimal text-only */
    { id:'fP-minimal', type:'cards', subtype:'product', title:'Minimal (text only)', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5')}>
          <div className={cx('text-[11px] uppercase tracking-wider',s.cls.muted)}>New arrival</div>
          <div className={head(s,'text-lg font-extrabold mt-2 leading-snug')}>Signature Eau de Parfum</div>
          <p className={cx('text-[12px] mt-2 leading-relaxed',s.cls.sub)}>Cedar, bergamot, and warm amber. 50ml.</p>
          <div className="flex items-center justify-between mt-4 pt-4" style={{borderTop:'1px solid '+s.cls.line||'transparent'}}>
            <span className={cx('text-lg font-extrabold',s.cls.text)}>$118</span>
            <button className={cx(B,ghost(s),'px-4 py-2 text-sm')}>Add</button>
          </div>
        </div>) },

    /* 10 — compact list row */
    { id:'fP-listrow', type:'cards', subtype:'product', title:'Compact list row', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-3 flex items-center gap-3')}>
          <Slot label="" className="w-14 h-14 rounded-lg shrink-0" style={{color:s.cls.accent}}/>
          <div className="min-w-0 flex-1">
            <div className={head(s,'text-sm font-bold truncate')}>USB-C Braided Cable (2m)</div>
            <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>In stock · ships today</div>
          </div>
          <span className={cx('text-sm font-extrabold shrink-0',s.cls.text)}>$19</span>
          <button className={cx(B,s.cls.btnPrimary,'px-3 py-2 text-xs shrink-0')}><Glyph d={G.plus} size={13}/>Add</button>
        </div>) },

    /* 11 — featured large w:2 */
    { id:'fP-featured', type:'cards', subtype:'product', title:'Featured (large)', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] overflow-hidden flex flex-col sm:flex-row')}>
          <Slot label="product" className="w-full sm:w-1/2 h-48 sm:h-auto shrink-0" style={{color:s.cls.accent}}/>
          <div className="p-5 flex flex-col justify-center flex-1">
            <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider inline-block w-fit')}>Editor's pick</span>
            <div className={head(s,'text-xl font-extrabold mt-2 leading-tight')}>Aurora Smart Lamp</div>
            <p className={cx('text-[13px] mt-2 leading-relaxed',s.cls.sub)}>16M colors, app control, and adaptive circadian scenes for any room.</p>
            <div className="flex items-center gap-2 mt-3">{Stars(s,5)}<span className={cx('text-[11px]',s.cls.muted)}>1.2k reviews</span></div>
            <div className="flex items-center justify-between mt-4">
              <span className={cx('text-2xl font-extrabold',s.cls.text)}>$89</span>
              <button className={cx(B,s.cls.btnPrimary,'px-5 py-2.5 text-sm')}>Add to cart</button>
            </div>
          </div>
        </div>) },

    /* 12 — out of stock (dimmed) */
    { id:'fP-oos', type:'cards', subtype:'product', title:'Out of stock', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
          <div className="relative">
            <Slot label="product" className="w-full h-40 opacity-50" style={{color:s.cls.accent}}/>
            <span className={cx(s.cls.chip,'absolute top-3 left-3 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider')}>Sold out</span>
          </div>
          <div className="p-4">
            <div className={cx('text-sm font-extrabold leading-snug',s.cls.muted)}>Limited Edition Vinyl</div>
            <div className="flex items-center justify-between mt-3">
              <span className={cx('text-base font-extrabold',s.cls.muted)}>$45</span>
              <button disabled className={cx(B,ghost(s),'px-3 py-2 text-xs opacity-50 cursor-not-allowed')}><Glyph d={G.bell} size={13}/>Notify me</button>
            </div>
          </div>
        </div>) },

    /* 13 — bundle (two slots + total) */
    { id:'fP-bundle', type:'cards', subtype:'product', title:'Bundle (two items + total)', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-5')}>
          <div className={cx('text-[11px] uppercase tracking-wider mb-3',s.cls.muted)}>Frequently bought together</div>
          <div className="flex items-center gap-3">
            <div className="flex-1 text-center">
              <Slot label="" className="w-full h-24 rounded-lg" style={{color:s.cls.accent}}/>
              <div className={cx('text-[12px] font-bold mt-2',s.cls.text)}>Mechanical Keyboard</div>
              <div className={cx('text-[11px]',s.cls.muted)}>$119</div>
            </div>
            <Glyph d={G.plus} size={18} style={{color:s.cls.accent}}/>
            <div className="flex-1 text-center">
              <Slot label="" className="w-full h-24 rounded-lg" style={{color:s.cls.accent}}/>
              <div className={cx('text-[12px] font-bold mt-2',s.cls.text)}>Wrist Rest</div>
              <div className={cx('text-[11px]',s.cls.muted)}>$29</div>
            </div>
          </div>
          <div className="flex items-center justify-between mt-4 pt-4 border-t border-transparent">
            <span className={cx('text-sm',s.cls.sub)}>Bundle total <span className={cx('font-extrabold ml-1',s.cls.text)}>$139</span></span>
            <button className={cx(B,s.cls.btnPrimary,'px-4 py-2.5 text-sm')}>Add both</button>
          </div>
        </div>) },

    /* 14 — video thumbnail (play overlay) */
    { id:'fP-video', type:'cards', subtype:'product', title:'Video thumbnail (play)', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
          <div className="relative">
            <Slot label="product" className="w-full h-40" style={{color:s.cls.accent}}/>
            <div className="absolute inset-0 flex items-center justify-center">
              <span className="w-12 h-12 rounded-full flex items-center justify-center text-white shadow-lg" style={{background:s.cls.accent}}>
                <Glyph d={G.play} size={18} fill="#fff"/></span>
            </div>
            <span className={cx(s.cls.chip,'absolute bottom-2 right-2 px-1.5 py-0.5 text-[10px] font-bold')}>0:42</span>
          </div>
          <div className="p-4">
            <div className={head(s,'text-sm font-extrabold leading-snug')}>Robot Vacuum Pro · See it in action</div>
            <span className={cx('text-base font-extrabold mt-1.5 block',s.cls.text)}>$399</span>
          </div>
        </div>) },

    /* 15 — subscription ($/mo + Subscribe) */
    { id:'fP-subscription', type:'cards', subtype:'product', title:'Subscription ($/mo)', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5')}>
          <div className="flex items-center justify-between">
            <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider')}>Subscribe & save</span>
            <span className="text-[11px] font-bold" style={{color:'#22c55e'}}>Save 15%</span>
          </div>
          <Slot label="product" className="w-full h-28 rounded-lg mt-3" style={{color:s.cls.accent}}/>
          <div className={head(s,'text-base font-extrabold mt-3 leading-snug')}>Coffee Roast Club</div>
          <div className="flex items-baseline gap-1 mt-2">
            <span className={cx('text-2xl font-extrabold',s.cls.text)}>$24</span>
            <span className={cx('text-sm',s.cls.muted)}>/mo</span>
          </div>
          <div className={cx('text-[11px] mt-1',s.cls.sub)}>Cancel anytime · ships every 4 weeks</div>
          <button className={cx(B,s.cls.btnPrimary,'w-full px-3 py-2.5 text-sm mt-4')}>Subscribe</button>
        </div>) },

  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();