/* ============================================================
   BLOCKS B — Overlays & Feedback, Data & Charts,
   Marketing Sections, Dashboard
   ============================================================ */
(function(){
  const { cx, Slot, Spark, Bars, Ring, Glyph, G } = window;
  const Bn = '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 blocks = [
    /* ---------- OVERLAYS & FEEDBACK ---------- */
    { id:'ov-modal', type:'overlays', subtype:'modal', title:'Modal dialog', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[320px] p-6')}>
          <div className={cx(s.cls.surface2,'w-11 h-11 rounded-full flex items-center justify-center mb-3')} style={{color:s.cls.accent}}>
            <Glyph d={G.bell} size={20}/></div>
          <div className={head(s,'text-lg font-extrabold')}>Publish this collection?</div>
          <p className={cx('text-sm mt-1.5 leading-relaxed',s.cls.sub)}>52 components will go live across the Glassmorphism universe. You can revert anytime.</p>
          <div className="flex gap-2.5 mt-5">
            <button className={cx(Bn,s.cls.btn,'flex-1 py-2.5 text-sm')}>Cancel</button>
            <button className={cx(Bn,s.cls.btnPrimary,'flex-1 py-2.5 text-sm')}>Publish</button>
          </div>
        </div>) },

    { id:'ov-toast', type:'overlays', subtype:'toast', title:'Toast notifications', w:1,
      Render:(s)=>(
        <div className="flex flex-col gap-3 w-full max-w-[320px]">
          <div className={cx(s.cls.surface,'px-4 py-3 flex items-center gap-3')}>
            <span className="w-7 h-7 rounded-full flex items-center justify-center text-white" style={{background:s.cls.accent}}><Glyph d={G.check} size={15}/></span>
            <div className="flex-1"><div className="text-sm font-semibold">Component copied</div><div className={cx('text-[11px]',s.cls.muted)}>Pricing card · TSX on your clipboard</div></div>
          </div>
          <div className={cx(s.cls.surface,'px-4 py-3 flex items-center gap-3')}>
            <span className="w-7 h-7 rounded-full flex items-center justify-center" style={{background:'rgba(255,90,90,.2)',color:'#ff6b6b'}}><Glyph d="M12 8v5M12 16v.5" size={15}/></span>
            <div className="flex-1"><div className="text-sm font-semibold">Sync paused</div><div className={cx('text-[11px]',s.cls.muted)}>Reconnect to keep editing</div></div>
          </div>
        </div>) },

    { id:'ov-tooltip', type:'overlays', subtype:'tooltip', title:'Tooltip', w:1,
      Render:(s)=>(
        <div className="flex flex-col items-center gap-3">
          <div className={cx(s.cls.surface2,'px-3.5 py-2 text-xs font-medium relative')}>
            Renders live in every style
            <span className="absolute left-1/2 -bottom-1.5 w-3 h-3 rotate-45" style={{transform:'translateX(-50%) rotate(45deg)',background:'inherit'}}/>
          </div>
          <button className={cx(Bn,s.cls.btn,'w-10 h-10 rounded-full p-0')}><Glyph d="M12 16v-4M12 8v.5" size={18}/></button>
        </div>) },

    /* ---------- DATA & CHARTS ---------- */
    { id:'data-area', type:'data', subtype:'area', title:'Area chart', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[330px] p-5')}>
          <div className="flex items-center justify-between mb-1">
            <div><div className={cx('text-sm',s.cls.sub)}>Active sessions</div><div className={head(s,'text-2xl font-extrabold')}>18,402</div></div>
            <span className={cx(s.cls.chip,'px-2 py-0.5 text-[11px] font-bold')}>+8.1%</span>
          </div>
          <div className="h-24 mt-2"><Spark colors={s.chart} h={96} data={[14,20,16,28,22,34,30,42,38,50,44,58,54,66]}/></div>
          <div className={cx('flex justify-between text-[10px] mt-1',s.cls.muted)}><span>Mon</span><span>Wed</span><span>Fri</span><span>Sun</span></div>
        </div>) },

    { id:'data-bars', type:'data', subtype:'bars', title:'Bar chart', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[330px] p-5')}>
          <div className={cx('text-sm',s.cls.sub)}>Revenue by channel</div>
          <div className={head(s,'text-2xl font-extrabold mb-3')}>$92,640</div>
          <div className="h-28"><Bars colors={s.chart} data={[40,68,52,84,60,92,74]}/></div>
          <div className={cx('flex justify-between text-[10px] mt-2',s.cls.muted)}>
            {['Dir','Org','Ref','Soc','Em','Ad','API'].map(l=><span key={l}>{l}</span>)}</div>
        </div>) },

    { id:'data-table', type:'data', subtype:'table', title:'Data table', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[460px] p-5')}>
          <div className="flex items-center justify-between mb-3">
            <div className={head(s,'font-extrabold')}>Recent orders</div>
            <button className={cx(Bn,s.cls.btn,'px-3 py-1.5 text-xs')}>Export</button>
          </div>
          <div className={cx('grid grid-cols-[1fr_auto_auto] gap-x-4 text-[11px] uppercase tracking-wider pb-2 mb-1',s.cls.muted)}
            style={{borderBottom:'1px solid rgba(128,128,128,.25)'}}>
            <span>Customer</span><span>Status</span><span className="text-right">Total</span></div>
          {[['Liang Wei','Paid','$1,240'],['Sofia Rossi','Pending','$680'],['Noah Bell','Paid','$3,110'],['Yuki Tanaka','Refund','$420']].map(([n,st,t])=>(
            <div key={n} className="grid grid-cols-[1fr_auto_auto] gap-x-4 items-center py-2 text-sm" style={{borderBottom:'1px solid rgba(128,128,128,.12)'}}>
              <span className="font-medium">{n}</span>
              <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold justify-self-start')}>{st}</span>
              <span className="text-right font-semibold">{t}</span></div>))}
        </div>) },

    /* ---------- MARKETING SECTIONS ---------- */
    { id:'mk-hero', type:'marketing', subtype:'hero', title:'Hero section', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[480px] p-8 text-center')}>
          <div className={cx(s.cls.chip,'inline-block px-3 py-1 text-[11px] font-bold mb-4')}>NOW IN 4 STYLES</div>
          <h2 className={head(s,'text-3xl font-extrabold leading-tight')}>Build once.<br/>Ship in any vibe.</h2>
          <p className={cx('text-sm mt-3 max-w-[320px] mx-auto',s.cls.sub)}>Production components that already agree with each other. Pick a universe and go.</p>
          <div className="flex gap-3 justify-center mt-6">
            <button className={cx(Bn,s.cls.btnPrimary,'px-6 py-3 text-sm')}>Start free</button>
            <button className={cx(Bn,s.cls.btn,'px-6 py-3 text-sm')}>Watch demo</button>
          </div>
        </div>) },

    { id:'mk-cta', type:'marketing', subtype:'cta', title:'CTA banner', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[480px] p-7 flex items-center gap-5 flex-wrap')}>
          <div className="flex-1 min-w-[200px]">
            <div className={head(s,'text-xl font-extrabold')}>Ready to switch styles?</div>
            <div className={cx('text-sm mt-1',s.cls.sub)}>Every component re-skins in one click. No re-build.</div>
          </div>
          <button className={cx(Bn,s.cls.btnPrimary,'px-6 py-3 text-sm')}>Explore library<Glyph d={G.arrow} size={16}/></button>
        </div>) },

    { id:'mk-features', type:'marketing', subtype:'features', title:'Feature grid', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[480px] p-6')}>
          <div className={head(s,'text-lg font-extrabold mb-4')}>Why teams pick Empire</div>
          <div className="grid grid-cols-2 gap-3">
            {[['Coherent','One token system per universe'],['Instant','Copy TSX, paste, done'],['Responsive','Mobile-first by default'],['Themeable','Re-skin without re-coding']].map(([t,d])=>(
              <div key={t} className={cx(s.cls.surface2,'p-3.5')}>
                <div className="w-8 h-8 rounded-lg mb-2 flex items-center justify-center text-white" style={{background:s.cls.accent}}><Glyph d={G.check} size={16}/></div>
                <div className="text-sm font-bold">{t}</div><div className={cx('text-[11px] mt-0.5',s.cls.muted)}>{d}</div></div>))}
          </div>
        </div>) },

    /* ---------- DASHBOARD ---------- */
    { id:'db-analytics', type:'dashboard', subtype:'analytics', title:'Analytics widget', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[460px] p-6')}>
          <div className="flex items-center justify-between mb-4">
            <div className={head(s,'font-extrabold')}>Performance</div>
            <div className={cx(s.cls.surface2,'p-0.5 inline-flex text-xs')}>
              <span className={cx('px-2.5 py-1 rounded-md',s.cls.btnPrimary)}>7d</span><span className={cx('px-2.5 py-1',s.cls.muted)}>30d</span></div>
          </div>
          <div className="grid grid-cols-3 gap-4 items-center">
            <div className="col-span-2 h-24"><Spark colors={s.chart} h={96}/></div>
            <div className="flex flex-col items-center" style={{color:s.cls.text.includes('111')?'#111':undefined}}>
              <Ring colors={s.chart} value={76}/><div className="text-xs mt-1 font-semibold">76% goal</div></div>
          </div>
          <div className="grid grid-cols-3 gap-3 mt-4">
            {[['Visitors','24.1k'],['Signups','1,820'],['Conv.','7.5%']].map(([l,v])=>(
              <div key={l} className={cx(s.cls.surface2,'p-3')}><div className={cx('text-[11px]',s.cls.muted)}>{l}</div><div className="text-lg font-extrabold">{v}</div></div>))}
          </div>
        </div>) },

    { id:'db-activity', type:'dashboard', subtype:'activity', title:'Activity feed', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-5')}>
          <div className={head(s,'font-extrabold mb-3')}>Activity</div>
          <div className="flex flex-col gap-3.5">
            {[['Mara','published Pricing v3','2m'],['Diego','edited Hero tokens','18m'],['Yuki','forked Retro set','1h'],['You','copied Stat card','3h']].map(([who,what,t],i)=>(
              <div key={i} className="flex items-center gap-3">
                <Slot label="" className="w-8 h-8 rounded-full shrink-0"/>
                <div className="flex-1 text-sm leading-tight"><b>{who}</b> <span className={s.cls.sub}>{what}</span></div>
                <span className={cx('text-[11px]',s.cls.muted)}>{t}</span></div>))}
          </div>
        </div>) },
  ];
  window.BLOCKS.push(...blocks);
})();