/* BLOCKS D1 — extra Card variants (media, pricing, product, 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 head = (s, extra='') => cx(s.cls.display, s.cls.glow, extra);
  const sw = (s,i,fb) => (s.swatch && s.swatch[i]) || fb || s.cls.accent;

  const Stars = ({s,n=5,filled=5}) => (
    <div className="inline-flex gap-0.5" style={{color:s.cls.accent}}>
      {Array.from({length:n}).map((_,i)=>(
        <Glyph key={i} d={G.star} size={13} fill={i<filled?'currentColor':'none'} />
      ))}
    </div>);

  const blocks = [
    /* ---------- MEDIA ---------- */
    { id:'d1-media-video', type:'cards', subtype:'media', title:'Video thumbnail card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
          <div className="relative">
            <Slot label="thumbnail" className="w-full h-36"/>
            <div className="absolute inset-0 flex items-center justify-center">
              <span className={cx(B,'w-12 h-12 rounded-full p-0')} style={{background:s.cls.accent,boxShadow:`0 6px 20px -6px ${s.cls.accent}`}}>
                <Glyph d={G.play} size={18} fill="#fff"/>
              </span>
            </div>
            <span className="absolute bottom-2 right-2 px-1.5 py-0.5 text-[11px] font-semibold rounded text-white" style={{background:'rgba(0,0,0,.7)'}}>12:48</span>
          </div>
          <div className="p-4">
            <div className="text-sm font-semibold leading-snug">Building a design system 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><span>·</span><span>2 days ago</span>
            </div>
          </div>
        </div>) },

    { id:'d1-media-article', type:'cards', subtype:'media', title:'Article / blog card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
          <Slot label="cover" className="w-full h-32"/>
          <div className="p-4">
            <div className="flex items-center gap-2 mb-2">
              <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider')}>Design</span>
              <span className={cx('text-[11px]',s.cls.muted)}>6 min read</span>
            </div>
            <div className={head(s,'text-base font-extrabold leading-snug')}>The quiet power of whitespace</div>
            <div className={cx('text-xs mt-2 leading-relaxed',s.cls.sub)}>Why restraint, not decoration, is the hardest part of interface design.</div>
            <div className="flex items-center gap-2 mt-4">
              <span className="w-6 h-6 rounded-full" style={{background:sw(s,0)}}/>
              <span className={cx('text-[11px]',s.cls.sub)}>Mara Velez · Jun 3</span>
            </div>
          </div>
        </div>) },

    { id:'d1-media-gallery', type:'cards', subtype:'media', title:'Gallery grid card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-3')}>
          <div className="grid grid-cols-3 gap-1.5">
            {Array.from({length:6}).map((_,i)=>(
              <div key={i} className="relative">
                <Slot label="" className="w-full h-16"/>
                {i===5 && <div className="absolute inset-0 flex items-center justify-center text-white text-sm font-bold rounded" style={{background:'rgba(0,0,0,.55)'}}>+24</div>}
              </div>))}
          </div>
          <div className="flex items-center justify-between mt-3 px-1">
            <div>
              <div className="text-sm font-semibold">Lisbon, 2025</div>
              <div className={cx('text-[11px]',s.cls.muted)}>30 photos</div>
            </div>
            <button className={cx(B,s.cls.btn,'px-3 py-1.5 text-xs')}><Glyph d={G.heart} size={13}/>Save</button>
          </div>
        </div>) },

    /* ---------- PRICING ---------- */
    { id:'d1-pricing-compact', type:'cards', subtype:'pricing', title:'Compact 3-tier toggle', w:1,
      Render:(s)=>{
        const [yr,setYr]=React.useState(true);
        const tiers=[['Starter',yr?'9':'12','Solo'],['Pro',yr?'29':'36','Teams'],['Scale',yr?'79':'99','Growth']];
        const [sel,setSel]=React.useState(1);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[290px] p-5')}>
            <div className="flex items-center justify-between mb-4">
              <div className={head(s,'text-base font-extrabold')}>Plans</div>
              <button onClick={()=>setYr(y=>!y)} className={cx(s.cls.surface2,'px-1 inline-flex gap-1 rounded-full text-[11px] p-1')}>
                <span className={cx('px-2 py-0.5 rounded-full',yr?s.cls.btnPrimary:'opacity-60')}>Yearly</span>
                <span className={cx('px-2 py-0.5 rounded-full',!yr?s.cls.btnPrimary:'opacity-60')}>Monthly</span>
              </button>
            </div>
            <div className="flex flex-col gap-2">
              {tiers.map(([n,p,d],i)=>(
                <button key={n} onClick={()=>setSel(i)} className={cx('flex items-center justify-between px-3 py-2.5 rounded-lg text-left transition',i===sel?s.cls.surface2:'opacity-70 hover:opacity-100')}
                  style={i===sel?{boxShadow:`inset 0 0 0 1.5px ${s.cls.accent}`}:null}>
                  <div>
                    <div className="text-sm font-semibold">{n}</div>
                    <div className={cx('text-[11px]',s.cls.muted)}>{d}</div>
                  </div>
                  <div className="text-right"><span className="text-base font-extrabold">${p}</span><span className={cx('text-[11px]',s.cls.muted)}>/mo</span></div>
                </button>))}
            </div>
            <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-4')}>Choose {tiers[sel][0]}<Glyph d={G.arrow} size={14}/></button>
          </div>); } },

    { id:'d1-pricing-enterprise', type:'cards', subtype:'pricing', title:'Enterprise contact card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] overflow-hidden')}>
          <div className="px-5 py-4 text-white" style={{background:`linear-gradient(135deg, ${sw(s,0)}, ${sw(s,1)})`}}>
            <div className="text-[11px] uppercase tracking-widest opacity-90">Enterprise</div>
            <div className="text-2xl font-extrabold mt-1">Let's talk</div>
            <div className="text-xs opacity-90 mt-1">Custom pricing for 50+ seats</div>
          </div>
          <div className="p-5">
            <div className="flex flex-col gap-2.5">
              {['Dedicated success manager','SSO & SCIM provisioning','99.99% uptime SLA','Unlimited audit history'].map(f=>(
                <div key={f} className="flex items-center gap-2 text-xs">
                  <span style={{color:s.cls.accent}}><Glyph d={G.check} size={14}/></span>
                  <span className={s.cls.sub}>{f}</span>
                </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 within 2 hours</div>
          </div>
        </div>) },

    /* ---------- PRODUCT ---------- */
    { id:'d1-product-row', type:'cards', subtype:'product', title:'Horizontal product row', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-3 flex gap-3')}>
          <Slot label="" className="w-24 h-24 shrink-0 rounded-lg"/>
          <div className="flex flex-col min-w-0 flex-1">
            <div className="text-sm font-semibold leading-snug">Aero Wireless Headphones</div>
            <div className="flex items-center gap-1.5 mt-1">
              <Stars s={s} filled={4}/>
              <span className={cx('text-[11px]',s.cls.muted)}>(312)</span>
            </div>
            <div className={cx('text-[11px] mt-1.5 line-clamp-2',s.cls.sub)}>Active noise cancelling · 40h battery</div>
            <div className="flex items-center justify-between mt-auto pt-2">
              <span className="text-base font-extrabold">$179</span>
              <button className={cx(B,s.cls.btnPrimary,'px-3 py-1.5 text-xs')}><Glyph d={G.plus} size={13}/>Add</button>
            </div>
          </div>
        </div>) },

    { id:'d1-product-swatches', type:'cards', subtype:'product', title:'Product w/ color swatches', w:1,
      Render:(s)=>{
        const [c,setC]=React.useState(0);
        const cols=[sw(s,0),sw(s,1,'#888'),sw(s,2,s.cls.accent),'#2b2b2b'];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[270px] overflow-hidden')}>
            <div className="relative">
              <Slot label="product" className="w-full h-40"/>
              <span className="absolute top-2 left-2 px-2 py-0.5 text-[10px] font-bold rounded text-white" style={{background:s.cls.accent}}>-30%</span>
            </div>
            <div className="p-4">
              <div className="text-sm font-semibold">Runner Mesh Sneakers</div>
              <div className="flex items-center gap-2 mt-1.5">
                <span className="text-base font-extrabold">$84</span>
                <span className={cx('text-xs line-through',s.cls.muted)}>$120</span>
              </div>
              <div className="flex gap-1.5 mt-3">
                {cols.map((col,i)=>(
                  <button key={i} onClick={()=>setC(i)} className="w-6 h-6 rounded-full transition" style={{background:col,boxShadow:i===c?`0 0 0 2px ${s.cls.accent}, 0 0 0 4px transparent`:'inset 0 0 0 1px rgba(128,128,128,.3)'}}/>))}
              </div>
              <button className={cx(B,s.cls.btnPrimary,'w-full py-2 text-sm mt-4')}>Add to cart</button>
            </div>
          </div>); } },

    /* ---------- PROFILE ---------- */
    { id:'d1-profile-contact', type:'cards', subtype:'profile', title:'Horizontal contact card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-4')}>
          <div className="flex items-center gap-3">
            <div className="relative shrink-0">
              <span className="w-14 h-14 rounded-full inline-flex items-center justify-center text-white text-lg font-bold" style={{background:`linear-gradient(135deg, ${sw(s,0)}, ${sw(s,1)})`}}>JD</span>
              <span className="absolute bottom-0 right-0 w-3.5 h-3.5 rounded-full" style={{background:'#22c55e',border:'2px solid var(--card-bg,#fff)'}}/>
            </div>
            <div className="min-w-0">
              <div className="text-sm font-semibold truncate">Jordan Diaz</div>
              <div className={cx('text-xs',s.cls.sub)}>Product Designer</div>
              <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>jordan@empire.ui</div>
            </div>
          </div>
          <div className="flex gap-2 mt-4">
            <button className={cx(B,s.cls.btnPrimary,'flex-1 py-2 text-xs')}><Glyph d={G.bell} size={13}/>Message</button>
            <button className={cx(B,s.cls.btn,'flex-1 py-2 text-xs')}>Call</button>
            <button className={cx(B,s.cls.btn,'w-9 py-2 px-0')}><Glyph d={G.star} size={14}/></button>
          </div>
        </div>) },

    { id:'d1-profile-team', type:'cards', subtype:'profile', title:'Team member card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[250px] p-5 text-center')}>
          <Slot label="avatar" className="w-20 h-20 rounded-full mx-auto"/>
          <div className={head(s,'text-base font-extrabold mt-3')}>Amara Okafor</div>
          <div className="text-xs font-medium mt-0.5" style={{color:s.cls.accent}}>VP of Engineering</div>
          <div className={cx('text-[11px] mt-2 leading-relaxed',s.cls.sub)}>Scaling platforms and the people who build them.</div>
          <div className="flex justify-center gap-2 mt-4">
            {[G.heart,G.bell,G.search].map((d,i)=>(
              <button key={i} className={cx(B,s.cls.surface2,'w-8 h-8 rounded-full p-0')}><Glyph d={d} size={14}/></button>))}
          </div>
        </div>) },

    /* ---------- STAT ---------- */
    { id:'d1-stat-kpi-spark', type:'cards', subtype:'stat', title:'KPI w/ sparkline + delta', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-5')}>
          <div className="flex items-center justify-between">
            <span className={cx('text-xs font-medium uppercase tracking-wider',s.cls.sub)}>Revenue</span>
            <span className="px-2 py-0.5 text-[11px] font-semibold rounded-full" style={{background:'rgba(34,197,94,.15)',color:'#22c55e'}}>+18.2%</span>
          </div>
          <div className="text-3xl font-extrabold mt-2">$48.2K</div>
          <div className={cx('text-[11px] mt-1',s.cls.muted)}>vs $40.8K last month</div>
          <div className="h-12 mt-3"><Spark colors={s.chart}/></div>
        </div>) },

    { id:'d1-stat-ring', type:'cards', subtype:'stat', title:'Progress-ring metric', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-5 flex items-center gap-4')}>
          <div className="w-20 h-20 shrink-0"><Ring colors={s.chart} value={72}/></div>
          <div>
            <div className={cx('text-xs font-medium uppercase tracking-wider',s.cls.sub)}>Goal progress</div>
            <div className="text-2xl font-extrabold mt-1">72%</div>
            <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>$36K of $50K target</div>
            <div className="flex items-center gap-1 mt-2 text-[11px]" style={{color:s.cls.accent}}>
              <Glyph d={G.arrow} size={12}/><span>On track for Q3</span>
            </div>
          </div>
        </div>) },

    /* ---------- TESTIMONIAL ---------- */
    { id:'d1-testi-quote', type:'cards', subtype:'testimonial', title:'Large quote + avatar', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6')}>
          <div className="text-5xl leading-none font-serif" style={{color:s.cls.accent,opacity:.4}}>“</div>
          <div className={cx('text-sm leading-relaxed -mt-3',s.cls.text)}>Empire UI cut our design-to-ship time in half. The components feel hand-crafted but scale like a system.</div>
          <Stars s={s} filled={5}/>
          <div className="flex items-center gap-3 mt-4 pt-4" style={{borderTop:'1px solid rgba(128,128,128,.18)'}}>
            <span className="w-10 h-10 rounded-full inline-flex items-center justify-center text-white text-sm font-bold" style={{background:`linear-gradient(135deg, ${sw(s,0)}, ${sw(s,1)})`}}>RK</span>
            <div>
              <div className="text-sm font-semibold">Riya Kapoor</div>
              <div className={cx('text-[11px]',s.cls.muted)}>Head of Design, Northwind</div>
            </div>
          </div>
        </div>) },

    { id:'d1-testi-tweet', type:'cards', subtype:'testimonial', title:'Tweet-style testimonial', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[290px] p-4')}>
          <div className="flex items-center gap-2.5">
            <span className="w-9 h-9 rounded-full inline-flex items-center justify-center text-white text-xs font-bold shrink-0" style={{background:sw(s,0)}}>TM</span>
            <div className="min-w-0">
              <div className="text-sm font-semibold leading-tight">Theo Maddox</div>
              <div className={cx('text-[11px]',s.cls.muted)}>@theobuilds</div>
            </div>
            <span className="ml-auto w-5 h-5 rounded-sm" style={{background:sw(s,1,s.cls.accent)}}/>
          </div>
          <div className={cx('text-sm mt-3 leading-relaxed',s.cls.text)}>shipped a full dashboard in an afternoon with <span style={{color:s.cls.accent}}>@empireui</span>. genuinely the cleanest component kit I've used. no notes.</div>
          <div className={cx('flex items-center gap-4 mt-3 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={G.arrow} size={13}/>318</span>
            <span className="ml-auto">2:14 PM · Jun 6</span>
          </div>
        </div>) },
  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();