/* BLOCKS F (cards: stat / testimonial / media) — style-agnostic Cards 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 head=(s,x='')=>cx(s.cls.display,s.cls.glow,x);
  const UP='#22c55e', DOWN='#ef4444';
  const Delta=(v,dir='up')=>(<span className="inline-flex items-center gap-1 text-xs font-bold" style={{color:dir==='up'?UP:DOWN}}>
    <Glyph d={dir==='up'?'M5 12l7-7 7 7M12 5v14':'M5 12l7 7 7-7M12 19V5'} size={12}/>{v}</span>);
  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=[

    /* ============ STAT ============ */
    { id:'fST-stat-big', type:'cards', subtype:'stat', title:'Big number + delta', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-5')}>
          <div className={cx('text-[11px] font-semibold uppercase tracking-wider',s.cls.muted)}>Monthly revenue</div>
          <div className={head(s,'text-4xl font-extrabold mt-2 leading-none')} style={{color:s.cls.accent}}>$48,290</div>
          <div className="flex items-center gap-2 mt-3">{Delta('12.4%','up')}<span className={cx('text-[11px]',s.cls.muted)}>vs last month</span></div>
        </div>) },

    { id:'fST-stat-spark', type:'cards', subtype:'stat', title:'Number + sparkline', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-5')}>
          <div className="flex items-start justify-between">
            <div>
              <div className={cx('text-[11px] font-semibold uppercase tracking-wider',s.cls.muted)}>Active users</div>
              <div className={head(s,'text-3xl font-extrabold mt-1.5')}>18,402</div>
            </div>
            {Delta('8.1%','up')}
          </div>
          <div className="mt-3 h-12"><Spark colors={s.chart}/></div>
        </div>) },

    { id:'fST-stat-ring', type:'cards', subtype:'stat', title:'Gauge / ring %', 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 className="min-w-0">
            <div className={head(s,'text-2xl font-extrabold')} style={{color:s.cls.accent}}>72%</div>
            <div className={cx('text-sm font-semibold',s.cls.text)}>Goal reached</div>
            <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>720 of 1,000 leads</div>
          </div>
        </div>) },

    { id:'fST-stat-icon', type:'cards', subtype:'stat', title:'Icon + value + label', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-5')}>
          <span className="w-11 h-11 rounded-xl flex items-center justify-center" style={{background:s.cls.accent+'1f'}}>
            <Glyph d={G.bell} size={20} style={{color:s.cls.accent}}/></span>
          <div className={head(s,'text-3xl font-extrabold mt-3')}>2,847</div>
          <div className={cx('text-sm font-semibold',s.cls.sub)}>Notifications sent</div>
          <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>Last 7 days</div>
        </div>) },

    { id:'fST-stat-progress', type:'cards', subtype:'stat', title:'Progress toward goal', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-5')}>
          <div className="flex items-center justify-between">
            <div className={cx('text-sm font-semibold',s.cls.text)}>Fundraising goal</div>
            <span className="text-xs font-bold" style={{color:s.cls.accent}}>64%</span>
          </div>
          <div className="flex items-end gap-1 mt-2">
            <span className={head(s,'text-2xl font-extrabold')} style={{color:s.cls.accent}}>$32,000</span>
            <span className={cx('text-xs mb-1',s.cls.muted)}>/ $50,000</span>
          </div>
          <div className={cx('h-2 rounded-full overflow-hidden mt-3',s.cls.surface2)}>
            <div className="h-full rounded-full" style={{width:'64%',background:s.cls.accent}}/></div>
          <div className={cx('text-[11px] mt-2',s.cls.muted)}>1,204 backers · 12 days left</div>
        </div>) },

    { id:'fST-stat-grid', type:'cards', subtype:'stat', title:'Multi-metric KPI grid', w:2,
      Render:(s)=>{
        const kpis=[{l:'Revenue',v:'$48.2K',d:'12.4%',u:'up'},{l:'Orders',v:'1,847',d:'5.2%',u:'up'},
          {l:'Refunds',v:'$1.1K',d:'3.1%',u:'down'},{l:'Conversion',v:'3.8%',d:'0.6%',u:'up'}];
        return (
          <div className={cx(s.cls.surface,'w-full p-5')}>
            <div className="grid grid-cols-2 gap-px rounded-xl overflow-hidden" style={{background:s.cls.accent+'22'}}>
              {kpis.map(k=>(
                <div key={k.l} className={cx(s.cls.surface,'p-4')}>
                  <div className={cx('text-[11px] font-semibold uppercase tracking-wider',s.cls.muted)}>{k.l}</div>
                  <div className={head(s,'text-xl font-extrabold mt-1')}>{k.v}</div>
                  <div className="mt-1.5">{Delta(k.d,k.u)}</div>
                </div>))}
            </div>
          </div>); } },

    /* ============ TESTIMONIAL ============ */
    { id:'fST-test-quote', type:'cards', subtype:'testimonial', title:'Large pull-quote', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-6')}>
          <div className="text-5xl leading-none font-serif" style={{color:s.cls.accent}}>&ldquo;</div>
          <p className={cx('text-base font-medium leading-relaxed -mt-3',s.cls.text)}>This is the tool our whole team reaches for first. It just gets out of the way.</p>
          <div className={cx('text-sm font-semibold mt-4',s.cls.sub)}>Maya Chen</div>
          <div className={cx('text-[11px]',s.cls.muted)}>Head of Design, Northwind</div>
        </div>) },

    { id:'fST-test-avatar', type:'cards', subtype:'testimonial', title:'Avatar + quote + role', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-5')}>
          <p className={cx('text-sm leading-relaxed',s.cls.text)}>We shipped our redesign in half the time we budgeted. Honestly didn't expect that.</p>
          <div className="flex items-center gap-3 mt-4">
            <Slot label="" className="w-10 h-10 rounded-full shrink-0" style={{color:s.cls.accent}}/>
            <div className="min-w-0">
              <div className={cx('text-sm font-semibold truncate',s.cls.text)}>Diego Ramos</div>
              <div className={cx('text-[11px] truncate',s.cls.muted)}>Engineering Lead · Lumen</div>
            </div>
          </div>
        </div>) },

    { id:'fST-test-stars', type:'cards', subtype:'testimonial', title:'Star rating + quote', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-5')}>
          <div className="flex items-center gap-2">{Stars(s,5,5)}<span className={cx('text-[11px] font-semibold',s.cls.muted)}>5.0</span></div>
          <p className={cx('text-sm leading-relaxed mt-3',s.cls.text)}>Best support I've had from any SaaS. Real answers, fast, every single time.</p>
          <div className={cx('text-[11px] mt-3',s.cls.sub)}>— Priya N., verified customer</div>
        </div>) },

    { id:'fST-test-logo', type:'cards', subtype:'testimonial', title:'Company logo + quote', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-5')}>
          <Slot label="logo" className="h-7 w-24 rounded-md" style={{color:s.cls.accent}}/>
          <p className={cx('text-sm leading-relaxed mt-4',s.cls.text)}>Empire became the backbone of how we ship product. We can't imagine working without it.</p>
          <div className={cx('text-[11px] mt-4',s.cls.muted)}>Sarah Whitfield · VP Product, Atlas</div>
        </div>) },

    /* ============ MEDIA ============ */
    { id:'fST-media-image', type:'cards', subtype:'media', title:'Image card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] overflow-hidden')}>
          <Slot label="" className="w-full h-40" style={{color:s.cls.accent}}/>
          <div className="p-4">
            <div className={head(s,'text-sm font-extrabold')}>Coastal Dawn</div>
            <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>Captured in Cascais · 2025</div>
          </div>
        </div>) },

    { id:'fST-media-video', type:'cards', subtype:'media', title:'Video w/ play + duration', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] 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 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')}>9:24</span>
          </div>
          <div className="p-4">
            <div className={head(s,'text-sm font-extrabold leading-snug')}>A walkthrough of the new editor</div>
            <div className={cx('text-[11px] mt-1',s.cls.muted)}>Empire Studio · 41K views</div>
          </div>
        </div>) },

    { id:'fST-media-gallery', type:'cards', subtype:'media', title:'Gallery grid (4-up)', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full p-5')}>
          <div className="flex items-center justify-between mb-3">
            <div className={head(s,'text-sm font-extrabold')}>Recent shots</div>
            <span className={cx('text-[11px]',s.cls.muted)}>128 photos</span>
          </div>
          <div className="grid grid-cols-4 gap-2">
            <Slot label="" className="w-full h-24 rounded-lg" style={{color:s.cls.accent}}/>
            <Slot label="" className="w-full h-24 rounded-lg" style={{color:s.cls.accent}}/>
            <Slot label="" className="w-full h-24 rounded-lg" style={{color:s.cls.accent}}/>
            <div className="relative">
              <Slot label="" className="w-full h-24 rounded-lg" style={{color:s.cls.accent}}/>
              <div className="absolute inset-0 rounded-lg bg-black/55 flex items-center justify-center text-white text-sm font-bold">+124</div>
            </div>
          </div>
        </div>) },

    { id:'fST-media-audio', type:'cards', subtype:'media', title:'Audio / podcast row', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-4 flex items-center gap-3')}>
          <button className="w-11 h-11 rounded-full flex items-center justify-center shrink-0" style={{background:s.cls.accent}}>
            <Glyph d={G.play} size={16} fill="#fff"/></button>
          <div className="min-w-0 flex-1">
            <div className={cx('text-sm font-semibold truncate',s.cls.text)}>Midnight Drive</div>
            <div className="h-7 mt-1"><Bars colors={s.chart}/></div>
          </div>
          <span className={cx('text-[11px] font-semibold shrink-0',s.cls.muted)}>3:14</span>
        </div>) },

    { id:'fST-media-stories', type:'cards', subtype:'media', title:'Story circle row', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-4')}>
          <div className="flex items-center gap-3 overflow-hidden">
            {['You','Mara','Leo','Ines','Kai'].map((n,i)=>(
              <div key={n} className="flex flex-col items-center gap-1 shrink-0">
                <span className="rounded-full p-0.5" style={{background:i===0?'transparent':s.cls.accent}}>
                  <Slot label="" className="w-12 h-12 rounded-full block" style={{color:s.cls.accent}}/>
                </span>
                <span className={cx('text-[10px] truncate max-w-[48px]',s.cls.muted)}>{n}</span>
              </div>))}
          </div>
        </div>) },

    { id:'fST-media-caption', type:'cards', subtype:'media', title:'Image + overlaid caption', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] overflow-hidden')}>
          <div className="relative">
            <Slot label="" className="w-full h-52" style={{color:s.cls.accent}}/>
            <div className="absolute inset-0" style={{background:'linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0) 60%)'}}/>
            <div className="absolute bottom-0 left-0 right-0 p-4">
              <span className="px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white rounded-md inline-block mb-1.5" style={{background:s.cls.accent}}>Featured</span>
              <div className="text-white text-base font-extrabold leading-snug">The quiet streets of Porto at dawn</div>
              <div className="text-white/70 text-[11px] mt-0.5">Photo essay · 8 min read</div>
            </div>
          </div>
        </div>) },

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