/* BLOCKS E (cardsb) — extra style-agnostic Cards variants (profile / stat / testimonial) */
(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 upTri='M5 12l5-5 4 4 5-6';
  const downTri='M5 8l5 5 4-4 5 6';
  const linkedin='M16 8a6 6 0 016 6v6h-4v-6a2 2 0 00-4 0v6h-4v-6a6 6 0 016-6zM6 9H2v11h4zM4 6a2 2 0 100-4 2 2 0 000 4z';
  const twitter='M22 5.8c-.7.3-1.5.5-2.3.6.8-.5 1.5-1.3 1.8-2.3-.8.5-1.7.8-2.6 1A4 4 0 0012 8.8c0 .3 0 .6.1.9C8.7 9.5 5.7 7.9 3.7 5.3a4 4 0 001.2 5.3c-.6 0-1.2-.2-1.7-.5a4 4 0 003.2 3.9c-.5.2-1.1.2-1.6.1a4 4 0 003.7 2.8A8 8 0 012 18.6 11.3 11.3 0 008.1 20c7.3 0 11.3-6 11.3-11.3v-.5c.8-.6 1.5-1.3 2-2.1z';

  const blocks = [
    /* ====================== PROFILE ====================== */
    { id:'eCb-prof-team', type:'cards', subtype:'profile', title:'Team member card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5')}>
          <div className="flex items-center gap-3">
            <Slot label="" className="w-14 h-14 rounded-2xl shrink-0" style={{color:s.cls.accent}}/>
            <div className="min-w-0">
              <div className={head(s,'text-base font-extrabold truncate')}>Elena Marsh</div>
              <div className={cx('text-xs',s.cls.muted)}>Staff Engineer · Platform</div>
            </div>
          </div>
          <div className="flex flex-wrap gap-1.5 mt-4">
            <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold')}>TypeScript</span>
            <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold')}>Rust</span>
            <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold')}>Infra</span>
          </div>
          <div className="flex items-center gap-2 mt-4 pt-4" style={{borderTop:'1px solid rgba(128,128,128,.18)'}}>
            <button className={cx(B,s.cls.btnPrimary,'flex-1 px-3 py-2 text-sm')}><Glyph d="M4 4h16v16H4z M4 8l8 5 8-5" size={14}/>Message</button>
            <button className={cx(B,ghost(s),'w-9 h-9 rounded-lg p-0')}><Glyph d={linkedin} size={15}/></button>
          </div>
        </div>) },

    { id:'eCb-prof-social', type:'cards', subtype:'profile', title:'Social profile with stats', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
          <div className="h-16 w-full" style={{background:`linear-gradient(120deg, ${s.cls.accent}, ${(s.swatch&&s.swatch[1])||s.cls.accent})`,opacity:.85}}/>
          <div className="px-5 pb-5 -mt-8">
            <Slot label="" className="w-16 h-16 rounded-full ring-4" style={{color:s.cls.accent,'--tw-ring-color':s.cls.accent}}/>
            <div className={head(s,'text-base font-extrabold mt-2')}>@jordan.codes</div>
            <p className={cx('text-[12px] mt-1 leading-relaxed',s.cls.sub)}>Building design systems &amp; teaching the craft.</p>
            <div className="grid grid-cols-3 gap-2 mt-4 text-center">
              {[['1.2k','Posts'],['48k','Followers'],['312','Following']].map(([n,l])=>(
                <div key={l}>
                  <div className="text-sm font-extrabold" style={{color:s.cls.accent}}>{n}</div>
                  <div className={cx('text-[10px] uppercase tracking-wide',s.cls.muted)}>{l}</div>
                </div>))}
            </div>
          </div>
        </div>) },

    { id:'eCb-prof-contact', type:'cards', subtype:'profile', title:'Contact card with actions', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5')}>
          <div className="flex items-start gap-3">
            <Slot label="" className="w-12 h-12 rounded-full shrink-0" style={{color:s.cls.accent}}/>
            <div className="min-w-0 flex-1">
              <div className={head(s,'text-base font-extrabold truncate')}>Priya Anand</div>
              <div className={cx('text-xs',s.cls.muted)}>Account Manager</div>
            </div>
            <span className="inline-flex items-center gap-1 text-[11px] font-semibold" style={{color:s.cls.accent}}>
              <span className="w-1.5 h-1.5 rounded-full" style={{background:s.cls.accent}}/>Online</span>
          </div>
          <div className={cx('mt-4 space-y-2 text-[12px]',s.cls.sub)}>
            <div className="flex items-center gap-2"><Glyph d="M4 4h16v16H4z M4 8l8 5 8-5" size={14}/><span className="truncate">priya@northwind.io</span></div>
            <div className="flex items-center gap-2"><Glyph d="M5 4h4l2 5-2 1a12 12 0 005 5l1-2 5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z" size={14}/><span>+44 20 7946 0123</span></div>
          </div>
          <div className="grid grid-cols-2 gap-2 mt-4">
            <button className={cx(B,s.cls.btnPrimary,'px-3 py-2 text-sm')}><Glyph d="M5 4h4l2 5-2 1a12 12 0 005 5l1-2 5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z" size={14}/>Call</button>
            <button className={cx(B,ghost(s),'px-3 py-2 text-sm')}><Glyph d={G.plus} size={14}/>Save</button>
          </div>
        </div>) },

    { id:'eCb-prof-followstack', type:'cards', subtype:'profile', title:'Follow card with avatar stack', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5')}>
          <div className={head(s,'text-base font-extrabold')}>Frontend Guild</div>
          <p className={cx('text-[12px] mt-1 leading-relaxed',s.cls.sub)}>A community of 8,400 designers and engineers shipping interfaces.</p>
          <div className="flex items-center gap-3 mt-4">
            <div className="flex -space-x-2">
              {[0,1,2,3].map(i=>(
                <Slot key={i} label="" className="w-8 h-8 rounded-full ring-2" style={{color:s.cls.accent,'--tw-ring-color':s.cls.surface&&'transparent'}}/>
              ))}
              <span className={cx(s.cls.surface2,'w-8 h-8 rounded-full flex items-center justify-center text-[10px] font-bold')}>+9k</span>
            </div>
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full px-3 py-2.5 text-sm mt-4')}><Glyph d={G.plus} size={15}/>Join guild</button>
        </div>) },

    { id:'eCb-prof-achievement', type:'cards', subtype:'profile', title:'Badge / achievement profile', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-6 text-center')}>
          <div className="relative inline-flex">
            <Slot label="" className="w-20 h-20 rounded-full mx-auto" style={{color:s.cls.accent}}/>
            <span className="absolute -bottom-1 -right-1 w-8 h-8 rounded-full flex items-center justify-center text-white" style={{background:s.cls.accent}}>
              <Glyph d={G.star} size={15} fill="currentColor"/></span>
          </div>
          <div className={head(s,'text-lg font-extrabold mt-3')}>Sam Okafor</div>
          <div className={cx('text-xs',s.cls.muted)}>Level 12 · Top Contributor</div>
          <div className="flex gap-2 justify-center mt-4">
            {[G.star,G.heart,G.check].map((d,i)=>(
              <span key={i} className={cx(s.cls.surface2,'w-10 h-10 rounded-xl flex items-center justify-center')} style={{color:s.cls.accent}}>
                <Glyph d={d} size={17} fill={d===G.star?s.cls.accent:'none'}/></span>))}
          </div>
          <div className={cx('text-[11px] mt-3',s.cls.sub)}>3,240 reputation · 18 badges earned</div>
        </div>) },

    { id:'eCb-prof-org', type:'cards', subtype:'profile', title:'Organization / company card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5')}>
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl flex items-center justify-center text-white text-lg font-black shrink-0" style={{background:s.cls.accent}}>N</div>
            <div className="min-w-0">
              <div className={head(s,'text-base font-extrabold truncate')}>Northwind Labs</div>
              <div className={cx('text-xs',s.cls.muted)}>Software · Series B</div>
            </div>
          </div>
          <p className={cx('text-[12px] mt-3 leading-relaxed',s.cls.sub)}>Developer tooling for autonomous data pipelines and observability.</p>
          <div className="flex items-center justify-between mt-4 text-[12px]">
            <span className={cx('inline-flex items-center gap-1.5',s.cls.sub)}><Glyph d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6" size={14}/>London, UK</span>
            <span className="inline-flex items-center gap-1.5 font-semibold" style={{color:s.cls.accent}}>248 staff</span>
          </div>
          <button className={cx(B,ghost(s),'w-full px-3 py-2 text-sm mt-4')}>View company<Glyph d={G.arrow} size={15}/></button>
        </div>) },

    /* ====================== STAT ====================== */
    { id:'eCb-stat-spark', type:'cards', subtype:'stat', title:'KPI with sparkline', 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('text-xs uppercase tracking-wide',s.cls.muted)}>Monthly revenue</span>
            <span className={cx(s.cls.chip,'px-2 py-0.5 text-[11px] font-bold inline-flex items-center gap-1')}>
              <Glyph d={upTri} size={12}/>8.2%</span>
          </div>
          <div className={head(s,'text-3xl font-extrabold mt-2')} style={{color:s.cls.accent}}>$84,290</div>
          <div className="h-14 mt-3"><Spark colors={s.chart} h={56} data={[30,34,32,40,38,48,46,58,54,70]}/></div>
          <div className={cx('text-[11px] mt-2',s.cls.sub)}>vs $77,910 last month</div>
        </div>) },

    { id:'eCb-stat-ring', type:'cards', subtype:'stat', title:'KPI with progress ring', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5')}>
          <div className="flex items-center gap-4">
            <div className="relative shrink-0" style={{color:s.cls.accent}}>
              <Ring colors={s.chart} value={73} size={88}/>
              <span className="absolute inset-0 flex items-center justify-center text-base font-extrabold" style={{color:s.cls.accent}}>73%</span>
            </div>
            <div className="min-w-0">
              <div className={cx('text-xs uppercase tracking-wide',s.cls.muted)}>Storage used</div>
              <div className={head(s,'text-xl font-extrabold mt-0.5')}>1.46 TB</div>
              <div className={cx('text-[11px] mt-1',s.cls.sub)}>of 2 TB plan</div>
            </div>
          </div>
          <div className={cx('text-[11px] mt-4 flex items-center gap-1.5',s.cls.sub)}>
            <span className="w-2 h-2 rounded-full" style={{background:s.cls.accent}}/>Upgrade before you hit the cap</div>
        </div>) },

    { id:'eCb-stat-bignum', type:'cards', subtype:'stat', title:'Big number with delta', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-6')}>
          <div className={cx(s.cls.surface2,'w-10 h-10 rounded-xl flex items-center justify-center mb-4')} style={{color:s.cls.accent}}>
            <Glyph d={G.bell} size={18}/></div>
          <div className={head(s,'text-4xl font-black leading-none')} style={{color:s.cls.accent}}>12,847</div>
          <div className={cx('text-sm mt-2',s.cls.sub)}>Active subscriptions</div>
          <div className="flex items-center gap-1.5 mt-3 text-[12px] font-semibold" style={{color:s.cls.accent}}>
            <Glyph d={upTri} size={13}/>+1,204<span className={cx('font-normal',s.cls.muted)}>this quarter</span>
          </div>
        </div>) },

    { id:'eCb-stat-grid', type:'cards', subtype:'stat', title:'2×2 stat grid', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[480px] p-5')}>
          <div className={head(s,'text-sm font-extrabold mb-4')}>This week at a glance</div>
          <div className="grid grid-cols-2 gap-3">
            {[['Visitors','24.8k',upTri,'+6%'],['Conversions','1,932',upTri,'+11%'],['Bounce rate','38.4%',downTri,'-2%'],['Avg. session','4m 12s',upTri,'+0.3%']].map(([l,n,tri,d])=>(
              <div key={l} className={cx(s.cls.surface2,'p-4 rounded-xl')}>
                <div className={cx('text-[11px] uppercase tracking-wide',s.cls.muted)}>{l}</div>
                <div className={head(s,'text-xl font-extrabold mt-1')}>{n}</div>
                <div className="inline-flex items-center gap-1 text-[11px] font-semibold mt-1" style={{color:s.cls.accent}}>
                  <Glyph d={tri} size={11}/>{d}</div>
              </div>))}
          </div>
        </div>) },

    { id:'eCb-stat-goal', type:'cards', subtype:'stat', title:'Goal progress bar', 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('text-xs uppercase tracking-wide',s.cls.muted)}>Q3 sales goal</span>
            <span className="text-[11px] font-bold" style={{color:s.cls.accent}}>64%</span>
          </div>
          <div className="flex items-end gap-2 mt-2">
            <span className={head(s,'text-2xl font-extrabold')}>$320k</span>
            <span className={cx('text-xs mb-1',s.cls.muted)}>/ $500k</span>
          </div>
          <div className={cx(s.cls.surface2,'h-2.5 rounded-full mt-3 overflow-hidden')}>
            <div className="h-full rounded-full" style={{width:'64%',background:`linear-gradient(90deg, ${s.chart[0]}, ${s.chart[1]||s.chart[0]})`}}/>
          </div>
          <div className={cx('text-[11px] mt-2.5',s.cls.sub)}>$180k to target · 41 days left</div>
        </div>) },

    { id:'eCb-stat-compare', type:'cards', subtype:'stat', title:'Comparison stat (up/down)', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5')}>
          <div className={head(s,'text-sm font-extrabold mb-3')}>Performance vs last period</div>
          <div className="space-y-3">
            {[['New users','3,420',upTri,'+18.2%',true],['Churned','214',downTri,'-9.4%',true],['Refunds','58',upTri,'+4.1%',false]].map(([l,n,tri,d,good])=>(
              <div key={l} className="flex items-center justify-between">
                <span className={cx('text-[12px]',s.cls.sub)}>{l}</span>
                <span className="inline-flex items-center gap-3">
                  <span className={head(s,'text-sm font-bold')}>{n}</span>
                  <span className="inline-flex items-center gap-1 text-[11px] font-semibold" style={{color:good?s.cls.accent:undefined}} >
                    <Glyph d={tri} size={11}/>{d}</span>
                </span>
              </div>))}
          </div>
        </div>) },

    /* ====================== TESTIMONIAL ====================== */
    { id:'eCb-test-quote', type:'cards', subtype:'testimonial', title:'Quote with avatar', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-6')}>
          <p className={cx('text-[13px] leading-relaxed',s.cls.text)}>&ldquo;Empire UI cut our component build time in half. The token system just clicks.&rdquo;</p>
          <div className="flex items-center gap-3 mt-5 pt-4" style={{borderTop:'1px solid rgba(128,128,128,.18)'}}>
            <Slot label="" className="w-10 h-10 rounded-full shrink-0" style={{color:s.cls.accent}}/>
            <div className="min-w-0">
              <div className="text-sm font-bold truncate">Aisha Bello</div>
              <div className={cx('text-xs',s.cls.muted)}>Lead Designer · Vela</div>
            </div>
          </div>
        </div>) },

    { id:'eCb-test-rating', type:'cards', subtype:'testimonial', title:'Star-rating review', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-6')}>
          <div className="flex items-center justify-between">
            <div className="flex gap-0.5" style={{color:s.cls.accent}}>
              {[0,1,2,3,4].map(i=><Glyph key={i} d={G.star} size={15} fill={s.cls.accent}/>)}</div>
            <span className={cx('text-xs font-semibold',s.cls.muted)}>5.0</span>
          </div>
          <div className={head(s,'text-sm font-extrabold mt-3')}>Worth every penny</div>
          <p className={cx('text-[12px] mt-1.5 leading-relaxed',s.cls.sub)}>Shipped a full rebrand in an afternoon. Support replied within minutes.</p>
          <div className="flex items-center gap-2 mt-4">
            <Slot label="" className="w-8 h-8 rounded-full shrink-0" style={{color:s.cls.accent}}/>
            <div className="text-[12px] font-semibold">Marcus Lee <span className={cx('font-normal',s.cls.muted)}>· Verified buyer</span></div>
          </div>
        </div>) },

    { id:'eCb-test-tweet', type:'cards', subtype:'testimonial', title:'Tweet-style testimonial', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5')}>
          <div className="flex items-start gap-3">
            <Slot label="" className="w-10 h-10 rounded-full shrink-0" style={{color:s.cls.accent}}/>
            <div className="min-w-0 flex-1">
              <div className="text-sm font-bold leading-tight truncate">Dev Patel</div>
              <div className={cx('text-xs',s.cls.muted)}>@devbuilds</div>
            </div>
            <span style={{color:s.cls.accent}}><Glyph d={twitter} size={18} fill="currentColor" /></span>
          </div>
          <p className={cx('text-[13px] mt-3 leading-relaxed',s.cls.text)}>Just swapped our whole UI to Empire and our Lighthouse score jumped 14 points. Wild. 🔥</p>
          <div className={cx('flex items-center gap-5 mt-4 text-[11px]',s.cls.muted)}>
            <span className="inline-flex items-center gap-1"><Glyph d={G.heart} size={13}/>2.4k</span>
            <span className="inline-flex items-center gap-1"><Glyph d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" size={13}/>318</span>
            <span className="ml-auto">2:14 PM · Jun 4</span>
          </div>
        </div>) },

    { id:'eCb-test-logo', type:'cards', subtype:'testimonial', title:'Logo + quote', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-6')}>
          <div className="flex items-center gap-2 mb-4">
            <span className="w-7 h-7 rounded-lg flex items-center justify-center text-white text-sm font-black" style={{background:s.cls.accent}}>A</span>
            <span className={head(s,'text-base font-extrabold')}>Acme</span>
          </div>
          <p className={head(s,'text-lg font-bold leading-snug')}>&ldquo;The fastest design-to-ship pipeline we&rsquo;ve ever run.&rdquo;</p>
          <div className={cx('text-[12px] mt-4',s.cls.sub)}>Tara Voss, Head of Product</div>
        </div>) },

    { id:'eCb-test-video', type:'cards', subtype:'testimonial', title:'Video testimonial', 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 inset-0 flex items-center justify-center">
              <span className="w-12 h-12 rounded-full flex items-center justify-center text-white" style={{background:s.cls.accent,boxShadow:`0 8px 24px -6px ${s.cls.accent}`}}>
                <Glyph d={G.play} size={20} fill="currentColor"/></span>
            </span>
          </div>
          <div className="p-5">
            <p className={cx('text-[13px] leading-relaxed',s.cls.text)}>&ldquo;Watch how our team rebuilt the dashboard in two days.&rdquo;</p>
            <div className="flex items-center gap-2 mt-3">
              <Slot label="" className="w-8 h-8 rounded-full shrink-0" style={{color:s.cls.accent}}/>
              <div className="text-[12px] font-semibold">Lucia Romano <span className={cx('font-normal',s.cls.muted)}>· CTO, Drift</span></div>
            </div>
          </div>
        </div>) },

    { id:'eCb-test-carousel', type:'cards', subtype:'testimonial', title:'Carousel single with dots', w:1,
      Render:(s)=>{
        const items=[
          {q:'A genuine game-changer for our small team.',n:'Owen Clarke',r:'Founder · Loop'},
          {q:'Documentation is the best I have seen, period.',n:'Hana Suzuki',r:'Engineer · Mast'},
          {q:'We replaced three libraries with this one.',n:'Felix Mora',r:'PM · Ridge'},
        ];
        const [i,setI]=React.useState(0);
        const it=items[i];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[280px] p-6 text-center')}>
            <div className="text-5xl leading-none font-serif" style={{color:s.cls.accent,opacity:.5}}>&ldquo;</div>
            <p className={head(s,'text-base font-bold leading-snug -mt-3 min-h-[60px]')}>{it.q}</p>
            <div className="text-[12px] font-semibold mt-3">{it.n}</div>
            <div className={cx('text-[11px]',s.cls.muted)}>{it.r}</div>
            <div className="flex gap-1.5 justify-center mt-4">
              {items.map((_,k)=>(
                <button key={k} onClick={()=>setI(k)} className="rounded-full transition-all" style={{
                  width:k===i?18:7,height:7,
                  background:k===i?s.cls.accent:'rgba(128,128,128,.35)'}}/>))}
            </div>
          </div>); } },
  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();