/* BLOCKS E (cards a) — extra style-agnostic Cards blocks 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,n=5,f=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=[

    /* ============ MEDIA ============ */
    { id:'eCa-media-video', type:'cards', subtype:'media', title:'Video thumbnail (play overlay)', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
          <div className="relative">
            <Slot label="" className="w-full h-40" style={{color:s.cls.accent}}/>
            <div className="absolute inset-0 flex items-center justify-center">
              <span className="w-14 h-14 rounded-full flex items-center justify-center text-white shadow-lg" style={{background:s.cls.accent}}>
                <Glyph d={G.play} size={22} 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')}>12:48</span>
          </div>
          <div className="p-4">
            <div className={head(s,'text-sm font-extrabold leading-snug')}>Building Design Tokens from Scratch</div>
            <div className={cx('text-[11px] mt-1.5 flex items-center gap-2',s.cls.muted)}>
              <span>Empire Studio</span><span>·</span><span>84K views</span></div>
          </div>
        </div>) },

    { id:'eCa-media-podcast', type:'cards', subtype:'media', title:'Podcast episode', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-4 flex items-center gap-3')}>
          <Slot label="" className="w-16 h-16 rounded-lg shrink-0" style={{color:s.cls.accent}}/>
          <div className="min-w-0 flex-1">
            <div className={cx(s.cls.chip,'px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider inline-block mb-1')}>Ep 142</div>
            <div className={head(s,'text-sm font-extrabold truncate')}>Scaling Systems Calmly</div>
            <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>The Frontier · 38 min</div>
            <div className="flex items-center gap-2 mt-2">
              <button className="w-8 h-8 rounded-full flex items-center justify-center text-white shrink-0" style={{background:s.cls.accent}}>
                <Glyph d={G.play} size={14} fill="#fff"/></button>
              <div className={cx(s.cls.surface2,'flex-1 h-1.5 rounded-full overflow-hidden')}>
                <div className="h-full rounded-full" style={{width:'34%',background:s.cls.accent}}/></div>
            </div>
          </div>
        </div>) },

    { id:'eCa-media-album', type:'cards', subtype:'media', title:'Album / track', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-4')}>
          <div className="relative">
            <Slot label="" className="w-full h-44 rounded-lg" style={{color:s.cls.accent}}/>
            <button className="absolute bottom-3 right-3 w-11 h-11 rounded-full flex items-center justify-center text-white shadow-lg" style={{background:s.cls.accent}}>
              <Glyph d={G.play} size={18} fill="#fff"/></button>
          </div>
          <div className={head(s,'text-base font-extrabold mt-3')}>Neon Horizons</div>
          <div className={cx('text-xs',s.cls.muted)}>Aria Vale · 2025</div>
          <div className="flex items-center justify-between mt-3 text-[11px]">
            <span className={s.cls.sub}>12 tracks · 47 min</span>
            <span className="inline-flex items-center gap-1" style={{color:s.cls.accent}}><Glyph d={G.heart} size={13} fill={s.cls.accent}/>2.1K</span>
          </div>
        </div>) },

    { id:'eCa-media-article', type:'cards', subtype:'media', title:'Article with cover', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
          <Slot label="" className="w-full h-32" style={{color:s.cls.accent}}/>
          <div className="p-4">
            <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider')}>Engineering</span>
            <div className={head(s,'text-base font-extrabold mt-2 leading-snug')}>Why we rebuilt our render pipeline</div>
            <p className={cx('text-[12px] mt-1.5 leading-relaxed',s.cls.sub)}>A deep dive into the architecture choices that cut latency by half.</p>
            <div className="flex items-center gap-2 mt-3">
              <Slot label="" className="w-7 h-7 rounded-full" style={{color:s.cls.accent}}/>
              <span className={cx('text-[11px]',s.cls.muted)}>Lena Ortiz · 6 min read</span>
            </div>
          </div>
        </div>) },

    { id:'eCa-media-gallery', type:'cards', subtype:'media', title:'Gallery 2x2', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-4')}>
          <div className="flex items-center justify-between mb-3">
            <div className={head(s,'text-sm font-extrabold')}>Trip to Lisbon</div>
            <span className={cx('text-[11px]',s.cls.muted)}>48 photos</span>
          </div>
          <div className="grid grid-cols-2 gap-1.5">
            <Slot label="" className="w-full h-20 rounded-md" style={{color:s.cls.accent}}/>
            <Slot label="" className="w-full h-20 rounded-md" style={{color:s.cls.accent}}/>
            <Slot label="" className="w-full h-20 rounded-md" style={{color:s.cls.accent}}/>
            <div className="relative">
              <Slot label="" className="w-full h-20 rounded-md" style={{color:s.cls.accent}}/>
              <div className="absolute inset-0 rounded-md bg-black/55 flex items-center justify-center text-white text-sm font-bold">+44</div>
            </div>
          </div>
        </div>) },

    { id:'eCa-media-map', type:'cards', subtype:'media', title:'Map preview card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
          <div className="relative">
            <Slot label="map" className="w-full h-32" style={{color:s.cls.accent}}/>
            <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full flex items-center justify-center text-white shadow-lg" style={{background:s.cls.accent}}>
              <Glyph d={G.star} size={14} fill="#fff"/></span>
          </div>
          <div className="p-4">
            <div className={head(s,'text-sm font-extrabold')}>Praça do Comércio</div>
            <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>Lisbon, Portugal</div>
            <div className="flex items-center justify-between mt-3">
              <span className="inline-flex items-center gap-1 text-xs font-semibold" style={{color:s.cls.accent}}>{Stars(s,5,5)}</span>
              <button className={cx(B,ghost(s),'px-3 py-1.5 text-xs')}><Glyph d={G.arrow} size={13}/>Directions</button>
            </div>
          </div>
        </div>) },

    /* ============ PRODUCT ============ */
    { id:'eCa-prod-rating', type:'cards', subtype:'product', title:'Product with rating', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
          <Slot label="" className="w-full h-36" style={{color:s.cls.accent}}/>
          <div className="p-4">
            <div className={head(s,'text-base font-extrabold')}>Trailblazer Boots</div>
            <div className="flex items-center gap-2 mt-1.5">
              {Stars(s,5,4)}<span className={cx('text-[11px]',s.cls.muted)}>(312)</span>
            </div>
            <div className="flex items-center justify-between mt-3">
              <span className={head(s,'text-xl font-extrabold')} style={{color:s.cls.accent}}>$139</span>
              <button className={cx(B,s.cls.btnPrimary,'px-4 py-2 text-sm')}><Glyph d={G.plus} size={15}/>Add</button>
            </div>
          </div>
        </div>) },

    { id:'eCa-prod-sale', type:'cards', subtype:'product', title:'Product sale / discount badge', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
          <div className="relative">
            <Slot label="" className="w-full h-36" style={{color:s.cls.accent}}/>
            <span className="absolute top-2 left-2 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white rounded-md" style={{background:s.cls.accent}}>-30%</span>
          </div>
          <div className="p-4">
            <div className={head(s,'text-base font-extrabold')}>Solstice Watch</div>
            <p className={cx('text-[11px] mt-1',s.cls.sub)}>Titanium case · sapphire glass</p>
            <div className="flex items-end gap-2 mt-3">
              <span className={head(s,'text-xl font-extrabold')} style={{color:s.cls.accent}}>$209</span>
              <span className={cx('text-sm mb-0.5 line-through',s.cls.muted)}>$299</span>
            </div>
            <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-3')}>Add to cart</button>
          </div>
        </div>) },

    { id:'eCa-prod-swatch', type:'cards', subtype:'product', title:'Product with color swatches', w:1,
      Render:(s)=>{
        const [sel,setSel]=React.useState(0);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
            <Slot label="" className="w-full h-36" style={{color:s.swatch[sel%s.swatch.length]}}/>
            <div className="p-4">
              <div className={head(s,'text-base font-extrabold')}>Drift Sneakers</div>
              <div className="flex items-center gap-2 mt-2.5">
                {s.swatch.slice(0,4).map((c,i)=>(
                  <button key={i} onClick={()=>setSel(i)} className="w-6 h-6 rounded-full border-2 transition" style={{background:c,borderColor:sel===i?s.cls.accent:'transparent'}}/>))}
              </div>
              <div className="flex items-center justify-between mt-3">
                <span className={head(s,'text-xl font-extrabold')} style={{color:s.cls.accent}}>$95</span>
                <button className={cx(B,s.cls.btnPrimary,'px-4 py-2 text-sm')}><Glyph d={G.plus} size={15}/>Add</button>
              </div>
            </div>
          </div>); } },

    { id:'eCa-prod-minimal', type:'cards', subtype:'product', title:'Minimal product', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-4')}>
          <Slot label="" className="w-full h-44 rounded-lg" style={{color:s.cls.accent}}/>
          <div className="flex items-center justify-between mt-3">
            <div>
              <div className={cx('text-sm font-semibold',s.cls.text)}>Ceramic Mug</div>
              <div className={cx('text-[11px]',s.cls.muted)}>Matte White</div>
            </div>
            <span className={head(s,'text-lg font-extrabold')} style={{color:s.cls.accent}}>$18</span>
          </div>
        </div>) },

    { id:'eCa-prod-row', type:'cards', subtype:'product', title:'Product list row', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-3 flex items-center gap-3')}>
          <Slot label="" className="w-16 h-16 rounded-lg shrink-0" style={{color:s.cls.accent}}/>
          <div className="min-w-0 flex-1">
            <div className={cx('text-sm font-semibold truncate',s.cls.text)}>Linen Throw Blanket</div>
            <div className="flex items-center gap-1 mt-0.5">{Stars(s,5,5)}</div>
            <div className="flex items-center justify-between mt-1.5">
              <span className={head(s,'text-sm font-extrabold')} style={{color:s.cls.accent}}>$64</span>
              <button className={cx(B,ghost(s),'px-2.5 py-1 text-xs')}><Glyph d={G.plus} size={13}/>Add</button>
            </div>
          </div>
        </div>) },

    { id:'eCa-prod-sub', type:'cards', subtype:'product', title:'Subscription box', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5')}>
          <div className="flex items-center justify-between mb-3">
            <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider')}>Monthly box</span>
            <Glyph d={G.bell} size={15} style={{color:s.cls.accent}}/>
          </div>
          <Slot label="" className="w-full h-28 rounded-lg" style={{color:s.cls.accent}}/>
          <div className={head(s,'text-base font-extrabold mt-3')}>The Roaster's Club</div>
          <p className={cx('text-[12px] mt-1 leading-relaxed',s.cls.sub)}>Three single-origin bags shipped fresh every month. Cancel anytime.</p>
          <div className="flex items-end gap-1 mt-3">
            <span className={head(s,'text-2xl font-extrabold')} style={{color:s.cls.accent}}>$32</span>
            <span className={cx('text-xs mb-1',s.cls.muted)}>/mo</span>
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-3')}>Subscribe</button>
        </div>) },

    /* ============ PRICING ============ */
    { id:'eCa-price-single', type:'cards', subtype:'pricing', title:'Single tier', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-6 text-center')}>
          <div className={cx('text-sm font-semibold',s.cls.sub)}>Starter</div>
          <div className="flex items-end justify-center gap-1 mt-2">
            <span className={head(s,'text-4xl font-extrabold')} style={{color:s.cls.accent}}>$12</span>
            <span className={cx('text-sm mb-1.5',s.cls.muted)}>/mo</span>
          </div>
          <p className={cx('text-[12px] mt-1',s.cls.muted)}>For individuals getting started</p>
          <div className="flex flex-col gap-2.5 mt-5 text-left">
            {['5 projects','10 GB storage','Email support'].map(f=>(
              <div key={f} className={cx('flex items-center gap-2 text-sm',s.cls.text)}>
                <Glyph d={G.check} size={14} style={{color:s.cls.accent}}/>{f}</div>))}
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-5')}>Get Starter</button>
        </div>) },

    { id:'eCa-price-trio', type:'cards', subtype:'pricing', title:'3-tier compact row', w:2,
      Render:(s)=>{
        const tiers=[{n:'Free',p:'$0',hot:false},{n:'Pro',p:'$29',hot:true},{n:'Team',p:'$79',hot:false}];
        return (
          <div className="w-full grid grid-cols-3 gap-3">
            {tiers.map(t=>(
              <div key={t.n} className={cx(s.cls.surface,'p-4 text-center',t.hot&&'ring-2')} style={t.hot?{boxShadow:`0 0 0 2px ${s.cls.accent}`}:undefined}>
                {t.hot&&<div className={cx(s.cls.chip,'px-2 py-0.5 text-[9px] font-bold uppercase tracking-wider inline-block mb-1.5')}>Popular</div>}
                <div className={cx('text-xs font-semibold',s.cls.sub)}>{t.n}</div>
                <div className={head(s,'text-2xl font-extrabold mt-1')} style={{color:s.cls.accent}}>{t.p}</div>
                <div className={cx('text-[10px]',s.cls.muted)}>per month</div>
                <button className={cx(B,t.hot?s.cls.btnPrimary:ghost(s),'w-full py-2 text-xs mt-3')}>Choose</button>
              </div>))}
          </div>); } },

    { id:'eCa-price-toggle', type:'cards', subtype:'pricing', title:'Toggle monthly / yearly', w:1,
      Render:(s)=>{
        const [yr,setYr]=React.useState(true);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[280px] p-6')}>
            <div className={cx(s.cls.surface2,'p-0.5 inline-flex text-[11px] font-semibold cursor-pointer mb-4')} onClick={()=>setYr(v=>!v)}>
              <span className={cx('px-3 py-1 rounded-md',!yr?s.cls.btnPrimary:s.cls.muted)}>Monthly</span>
              <span className={cx('px-3 py-1 rounded-md',yr?s.cls.btnPrimary:s.cls.muted)}>Yearly</span>
            </div>
            <div className={cx('text-sm font-semibold',s.cls.sub)}>Growth</div>
            <div className="flex items-end gap-1 mt-1">
              <span className={head(s,'text-4xl font-extrabold')} style={{color:s.cls.accent}}>${yr?'40':'48'}</span>
              <span className={cx('text-sm mb-1.5',s.cls.muted)}>/mo</span>
            </div>
            <div className={cx('text-[11px] mt-1',s.cls.sub)}>{yr?'Billed $480/yr · save 16%':'Billed monthly'}</div>
            <div className="flex flex-col gap-2.5 mt-5">
              {['Unlimited seats','Advanced analytics','SSO & audit logs'].map(f=>(
                <div key={f} className={cx('flex items-center gap-2 text-sm',s.cls.text)}>
                  <Glyph d={G.check} size={14} style={{color:s.cls.accent}}/>{f}</div>))}
            </div>
            <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-5')}>Start Growth</button>
          </div>); } },

    { id:'eCa-price-enterprise', type:'cards', subtype:'pricing', title:'Enterprise contact', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-6')}>
          <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider')}>Enterprise</span>
          <div className={head(s,'text-2xl font-extrabold mt-3')}>Let's talk</div>
          <p className={cx('text-[12px] mt-1.5 leading-relaxed',s.cls.sub)}>Custom limits, dedicated support, and security reviews tailored to your org.</p>
          <div className="flex flex-col gap-2.5 mt-5">
            {['SLA & uptime guarantee','Dedicated success manager','Custom contracts'].map(f=>(
              <div key={f} className={cx('flex items-center gap-2 text-sm',s.cls.text)}>
                <Glyph d={G.check} size={14} style={{color:s.cls.accent}}/>{f}</div>))}
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-5')}>Contact sales</button>
          <div className={cx('text-[11px] text-center mt-2',s.cls.muted)}>Avg. response under 2 hours</div>
        </div>) },

    { id:'eCa-price-usage', type:'cards', subtype:'pricing', title:'Usage-based', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-6')}>
          <div className={cx('text-sm font-semibold',s.cls.sub)}>Pay as you go</div>
          <div className="flex items-end gap-1 mt-1">
            <span className={head(s,'text-4xl font-extrabold')} style={{color:s.cls.accent}}>$0.004</span>
          </div>
          <div className={cx('text-[11px]',s.cls.muted)}>per 1K requests</div>
          <div className={cx(s.cls.surface2,'rounded-lg p-3 mt-4')}>
            <div className="flex items-center justify-between text-xs">
              <span className={s.cls.sub}>This month</span>
              <span className={cx('font-semibold',s.cls.text)}>1.2M req</span>
            </div>
            <div className={cx('h-1.5 rounded-full overflow-hidden mt-2',s.cls.surface)}>
              <div className="h-full rounded-full" style={{width:'58%',background:s.cls.accent}}/></div>
            <div className={cx('text-[11px] mt-1.5',s.cls.muted)}>Est. $4.80 so far</div>
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-4')}>Enable billing</button>
        </div>) },

    { id:'eCa-price-compare', type:'cards', subtype:'pricing', title:'Free vs Pro compare', w:2,
      Render:(s)=>{
        const rows=[['Projects','3','Unlimited'],['Storage','5 GB','1 TB'],['Support','Community','Priority'],['Analytics','—','Advanced']];
        return (
          <div className={cx(s.cls.surface,'w-full p-5')}>
            <div className="grid grid-cols-3 items-end gap-2 pb-3 mb-2 border-b" style={{borderColor:s.cls.accent+'33'}}>
              <div className={cx('text-xs font-semibold',s.cls.muted)}>Feature</div>
              <div className="text-center">
                <div className={cx('text-xs font-semibold',s.cls.sub)}>Free</div>
                <div className={head(s,'text-lg font-extrabold')}>$0</div>
              </div>
              <div className="text-center">
                <div className={cx(s.cls.chip,'px-1.5 py-0.5 text-[9px] font-bold uppercase inline-block')}>Best</div>
                <div className={head(s,'text-lg font-extrabold')} style={{color:s.cls.accent}}>$29</div>
              </div>
            </div>
            {rows.map(r=>(
              <div key={r[0]} className="grid grid-cols-3 items-center gap-2 py-1.5 text-sm">
                <span className={s.cls.sub}>{r[0]}</span>
                <span className={cx('text-center',s.cls.muted)}>{r[1]}</span>
                <span className="text-center font-semibold" style={{color:s.cls.accent}}>{r[2]}</span>
              </div>))}
            <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-4')}>Upgrade to Pro</button>
          </div>); } },

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