/* BLOCKS D2 — more variants across buttons, data, forms, navigation, marketing, overlays */
(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, extra='') => cx(s.cls.display, s.cls.glow, extra);

  const blocks = [
    /* ---------- BUTTONS ---------- */
    { id:'d2-btn-segmented-vertical', type:'buttons', subtype:'group', title:'Vertical segmented pills', w:1,
      Render:(s)=>{
        const opts=[['overview','Overview'],['activity','Activity'],['billing','Billing'],['team','Team']];
        const [v,setV]=React.useState('activity');
        return (
          <div className={cx(s.cls.surface2,'p-1.5 inline-flex flex-col gap-1 rounded-2xl w-[180px]')}>
            {opts.map(([k,l])=>(
              <button key={k} onClick={()=>setV(k)}
                className={cx(B,'w-full justify-start px-4 py-2.5 text-sm rounded-xl transition', v===k?s.cls.btnPrimary:cx(s.cls.text,'opacity-60 hover:opacity-100'))}>
                {l}
              </button>))}
          </div>); } },

    { id:'d2-btn-icon-badge', type:'buttons', subtype:'icon', title:'Icon button with badge', w:1,
      Render:(s)=>{
        const [n,setN]=React.useState(7);
        return (
          <div className="flex items-center gap-4">
            <button onClick={()=>setN(0)} className={cx(B,s.cls.btn,'relative w-12 h-12 rounded-full p-0')}>
              <Glyph d={G.bell} size={19}/>
              {n>0 && <span className="absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold flex items-center justify-center text-white" style={{background:s.cls.accent,border:'2px solid rgba(0,0,0,.15)'}}>{n}</span>}
            </button>
            <button className={cx(B,s.cls.btnPrimary,'relative px-5 py-2.5 text-sm rounded-full')}>
              <Glyph d={G.bell} size={16}/>Notifications
              <span className="ml-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold flex items-center justify-center" style={{background:'rgba(255,255,255,.25)'}}>{n||'·'}</span>
            </button>
          </div>); } },

    /* ---------- DATA ---------- */
    { id:'d2-data-area-legend', type:'data', subtype:'area', title:'Area chart with legend', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[340px] 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')}>14,203</div>
            </div>
            <span className={cx(s.cls.chip,'px-2 py-0.5 text-[11px] font-bold')}>+18.6%</span>
          </div>
          <div className="relative h-28 mt-2">
            <div className="absolute inset-0"><Spark colors={[s.chart[0]]} h={112} data={[22,30,27,40,36,50,46,62,57,72,68,84]}/></div>
            <div className="absolute inset-0 opacity-60"><Spark colors={[s.chart[1]||s.chart[0]]} h={112} data={[12,16,14,22,19,28,25,34,30,40,37,48]}/></div>
          </div>
          <div className="flex gap-4 mt-3 text-[11px]">
            <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full" style={{background:s.chart[0]}}/>Desktop</span>
            <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full" style={{background:s.chart[1]||s.chart[0]}}/>Mobile</span>
          </div>
        </div>) },

    { id:'d2-data-table-compact', type:'data', subtype:'table', title:'Compact data table', w:2,
      Render:(s)=>{
        const rows=[
          ['Ava Mercer','ava@acme.io','Owner','Active'],
          ['Leo Park','leo@acme.io','Editor','Active'],
          ['Mira Costa','mira@acme.io','Viewer','Invited'],
          ['Theo Wood','theo@acme.io','Editor','Active'],
          ['Sora Lind','sora@acme.io','Viewer','Suspended'],
        ];
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-5')}>
          <div className="flex items-center justify-between mb-3">
            <div className={head(s,'font-extrabold')}>Members</div>
            <button className={cx(B,s.cls.btnPrimary,'px-3 py-1.5 text-xs')}><Glyph d={G.plus} size={13}/>Invite</button>
          </div>
          <div className={cx('grid grid-cols-[1.4fr_1.6fr_auto_auto] gap-x-4 text-[11px] uppercase tracking-wider pb-2',s.cls.muted)} style={{borderBottom:'1px solid rgba(128,128,128,.25)'}}>
            <span>Name</span><span>Email</span><span>Role</span><span className="text-right">Status</span>
          </div>
          {rows.map(([n,e,r,st])=>(
            <div key={e} className="grid grid-cols-[1.4fr_1.6fr_auto_auto] gap-x-4 items-center py-2 text-sm" style={{borderBottom:'1px solid rgba(128,128,128,.12)'}}>
              <span className="flex items-center gap-2 font-medium min-w-0">
                <span className="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white shrink-0" style={{background:s.cls.accent}}>{n.split(' ').map(p=>p[0]).join('')}</span>
                <span className="truncate">{n}</span>
              </span>
              <span className={cx('truncate',s.cls.sub)}>{e}</span>
              <span className={s.cls.sub}>{r}</span>
              <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold justify-self-end')}>{st}</span>
            </div>))}
        </div>); } },

    /* ---------- FORMS ---------- */
    { id:'d2-form-signin-split', type:'forms', subtype:'signin', title:'Split sign-in card', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[560px] p-0 overflow-hidden grid grid-cols-1 sm:grid-cols-2')}>
          <div className="hidden sm:flex flex-col justify-between p-6 relative" style={{background:`linear-gradient(150deg, ${s.swatch&&s.swatch[0]||s.cls.accent}, ${s.swatch&&s.swatch[1]||s.cls.accent})`}}>
            <div className="text-white/90 font-bold text-lg tracking-tight">Empire UI</div>
            <div>
              <Slot/>
              <p className="text-white/85 text-sm leading-relaxed mt-3">“Shipped a full design system in an afternoon.”</p>
              <p className="text-white/60 text-[11px] mt-1.5">— Jordan, Staff Engineer</p>
            </div>
          </div>
          <div className="p-6">
            <div className={head(s,'text-lg font-extrabold')}>Welcome back</div>
            <div className={cx('text-sm mt-1 mb-4',s.cls.sub)}>Sign in to your workspace</div>
            <label className={cx('text-[11px] font-semibold uppercase tracking-wider',s.cls.muted)}>Email</label>
            <input className={cx(s.cls.input,'w-full px-3 py-2.5 text-sm mt-1 mb-3')} placeholder="you@company.com"/>
            <label className={cx('text-[11px] font-semibold uppercase tracking-wider',s.cls.muted)}>Password</label>
            <input type="password" className={cx(s.cls.input,'w-full px-3 py-2.5 text-sm mt-1')} placeholder="••••••••"/>
            <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-4')}>Sign in<Glyph d={G.arrow} size={15}/></button>
            <div className={cx('text-[11px] mt-3 text-center',s.cls.muted)}>No account? <span style={{color:s.cls.accent}} className="font-semibold cursor-pointer">Create one</span></div>
          </div>
        </div>) },

    { id:'d2-form-signin-magic', type:'forms', subtype:'signin', title:'Magic-link sign-in', w:1,
      Render:(s)=>{
        const [sent,setSent]=React.useState(false);
        const [email,setEmail]=React.useState('');
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[320px] p-6 text-center')}>
          <span className="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 text-white" style={{background:s.cls.accent}}><Glyph d={sent?G.check:G.search} size={20}/></span>
          {sent ? (
            <>
              <div className={head(s,'text-lg font-extrabold')}>Check your inbox</div>
              <p className={cx('text-sm mt-1.5 leading-relaxed',s.cls.sub)}>We sent a magic link to<br/><span className="font-semibold" style={{color:s.cls.accent}}>{email||'your email'}</span></p>
              <button onClick={()=>setSent(false)} className={cx(B,ghost(s),'w-full py-2.5 text-sm mt-4')}>Use a different email</button>
            </>
          ) : (
            <>
              <div className={head(s,'text-lg font-extrabold')}>Sign in with email</div>
              <p className={cx('text-sm mt-1 mb-4',s.cls.sub)}>No password needed — we'll email you a link.</p>
              <input value={email} onChange={e=>setEmail(e.target.value)} className={cx(s.cls.input,'w-full px-3 py-2.5 text-sm text-center')} placeholder="you@company.com"/>
              <button onClick={()=>setSent(true)} className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-3')}>Send magic link<Glyph d={G.arrow} size={15}/></button>
            </>
          )}
        </div>); } },

    { id:'d2-form-theme-toggle', type:'forms', subtype:'toggle', title:'Segmented theme toggle', w:1,
      Render:(s)=>{
        const opts=[['light','Light','M12 3v2M12 19v2M3 12h2M19 12h2'],['dark','Dark','M21 12.8A8 8 0 1111.2 3 6.5 6.5 0 0021 12.8z'],['system','System','M4 5h16v10H4zM8 19h8']];
        const [v,setV]=React.useState('dark');
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-5')}>
            <div className={cx('text-xs font-semibold uppercase tracking-wider mb-2',s.cls.sub)}>Appearance</div>
            <div className={cx(s.cls.surface2,'p-1 grid grid-cols-3 gap-1 rounded-xl')}>
              {opts.map(([k,l,d])=>(
                <button key={k} onClick={()=>setV(k)}
                  className={cx(B,'flex-col gap-1 py-2.5 text-xs rounded-lg transition', v===k?s.cls.btnPrimary:cx(s.cls.text,'opacity-55 hover:opacity-100'))}>
                  <Glyph d={d} size={16}/>{l}
                </button>))}
            </div>
            <div className={cx('text-[11px] mt-2.5',s.cls.muted)}>Syncs across all your devices.</div>
          </div>); } },

    /* ---------- NAVIGATION ---------- */
    { id:'d2-nav-appbar', type:'navigation', subtype:'navbar', title:'App top bar', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[560px] px-4 py-3 flex items-center gap-3')}>
          <div className={head(s,'font-extrabold tracking-tight shrink-0')}>Empire</div>
          <nav className="hidden md:flex items-center gap-1 ml-2">
            {['Dashboard','Library','Docs'].map((l,i)=>(
              <button key={l} className={cx(B,'px-3 py-1.5 text-sm rounded-lg', i===0?s.cls.surface2:cx(s.cls.sub,'hover:opacity-70'))}>{l}</button>))}
          </nav>
          <div className="relative flex-1 max-w-[220px] ml-auto">
            <span className="absolute left-3 top-1/2 -translate-y-1/2" style={{color:s.cls.accent}}><Glyph d={G.search} size={15}/></span>
            <input className={cx(s.cls.input,'pl-9 pr-3 py-2 text-sm w-full')} placeholder="Search…"/>
          </div>
          <button className={cx(B,ghost(s),'relative w-9 h-9 rounded-full p-0 shrink-0')}>
            <Glyph d={G.bell} size={17}/>
            <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full" style={{background:s.cls.accent}}/>
          </button>
          <span className="w-9 h-9 rounded-full flex items-center justify-center text-[12px] font-bold text-white shrink-0" style={{background:s.cls.accent}}>AM</span>
        </div>) },

    { id:'d2-nav-breadcrumb-dropdown', type:'navigation', subtype:'breadcrumb', title:'Breadcrumb with dropdown', w:1,
      Render:(s)=>{
        const [open,setOpen]=React.useState(false);
        const sep=<span className={cx('px-1',s.cls.muted)}>/</span>;
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[340px] px-4 py-3')}>
            <div className="flex items-center text-sm flex-wrap">
              <button className={cx(s.cls.sub,'hover:opacity-70')}>Home</button>
              {sep}
              <div className="relative">
                <button onClick={()=>setOpen(o=>!o)} className={cx(B,'gap-1',s.cls.sub,'hover:opacity-70')}>
                  Projects <Glyph d="M6 9l6 6 6-6" size={13}/>
                </button>
                {open && (
                  <div className={cx(s.cls.surface,'absolute top-full mt-2 left-0 w-44 p-1.5 z-10 flex flex-col gap-1')}>
                    {['Empire UI','Marketing site','Mobile app'].map(o=>(
                      <button key={o} onClick={()=>setOpen(false)} className={cx(B,'w-full justify-start px-3 py-2 text-xs rounded-lg',s.cls.text,'hover:opacity-70')}>{o}</button>))}
                  </div>)}
              </div>
              {sep}
              <span className="font-semibold">Empire UI</span>
            </div>
          </div>); } },

    /* ---------- MARKETING ---------- */
    { id:'d2-mkt-cta-split', type:'marketing', subtype:'cta', title:'Split CTA banner', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[600px] p-7 flex flex-col sm:flex-row items-center gap-5')}>
          <div className="flex-1 text-center sm:text-left">
            <div className={head(s,'text-xl font-extrabold')}>Ship beautiful UI, faster.</div>
            <p className={cx('text-sm mt-1.5 leading-relaxed',s.cls.sub)}>120+ production-ready components across 40 styles. Copy, paste, ship.</p>
          </div>
          <div className="flex flex-col gap-2 w-full sm:w-auto shrink-0">
            <button className={cx(B,s.cls.btnPrimary,'px-6 py-3 text-sm')}><Glyph d={G.star} size={15} fill="currentColor"/>Start free</button>
            <button className={cx(B,ghost(s),'px-6 py-2.5 text-sm')}>Book a demo</button>
          </div>
        </div>) },

    { id:'d2-mkt-hero-screenshot', type:'marketing', subtype:'hero', title:'Hero with screenshot', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[600px] p-7')}>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
            <div>
              <span className={cx(s.cls.chip,'px-2.5 py-1 text-[11px] font-bold inline-flex items-center gap-1.5')}><Glyph d={G.star} size={12} fill="currentColor"/>New: 40 style universes</span>
              <h2 className={head(s,'text-2xl font-extrabold leading-tight mt-3')}>The design system that adapts to your brand</h2>
              <p className={cx('text-sm mt-2 leading-relaxed',s.cls.sub)}>One component library, infinite looks. Switch styles with a single token swap.</p>
              <div className="flex gap-2 mt-4">
                <button className={cx(B,s.cls.btnPrimary,'px-5 py-2.5 text-sm')}>Get started<Glyph d={G.arrow} size={15}/></button>
                <button className={cx(B,ghost(s),'px-5 py-2.5 text-sm')}><Glyph d={G.play} size={14}/>Watch</button>
              </div>
            </div>
            <div className={cx(s.cls.surface2,'p-2 aspect-[4/3] flex items-center justify-center')}>
              <div className="w-full h-full rounded-lg flex items-center justify-center" style={{background:`linear-gradient(150deg, ${s.swatch&&s.swatch[0]||s.cls.accent}22, ${s.swatch&&s.swatch[1]||s.cls.accent}22)`}}>
                <Slot/>
              </div>
            </div>
          </div>
        </div>) },

    /* ---------- OVERLAYS ---------- */
    { id:'d2-overlay-confirm', type:'overlays', subtype:'modal', title:'Confirm dialog', w:1,
      Render:(s)=>{
        const [busy,setBusy]=React.useState(false);
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[360px] p-6 text-center')}>
          <span className="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3" style={{background:'rgba(255,90,90,.16)',color:'#ff6b6b'}}><Glyph d="M12 8v5M12 16v.5" size={22}/></span>
          <div className={head(s,'text-lg font-extrabold')}>Discard changes?</div>
          <p className={cx('text-sm mt-1.5 leading-relaxed',s.cls.sub)}>Your unsaved edits to this component will be lost.</p>
          <div className="flex gap-3 mt-5">
            <button className={cx(B,ghost(s),'flex-1 py-2.5 text-sm')}>Keep editing</button>
            <button onClick={()=>setBusy(b=>!b)} className={cx(B,'flex-1 py-2.5 text-sm text-white rounded-xl')} style={{background:'#ff5a5a'}}>{busy?'Discarding…':'Discard'}</button>
          </div>
        </div>); } },

    { id:'d2-overlay-popover', type:'overlays', subtype:'tooltip', title:'Rich popover', w:1,
      Render:(s)=>(
        <div className="flex flex-col items-center gap-3">
          <div className={cx(s.cls.surface,'w-[260px] p-4 relative')}>
            <div className="flex items-center gap-3">
              <span className="w-10 h-10 rounded-full flex items-center justify-center text-[12px] font-bold text-white shrink-0" style={{background:s.cls.accent}}>LP</span>
              <div className="min-w-0">
                <div className="text-sm font-bold truncate">Leo Park</div>
                <div className={cx('text-[11px] truncate',s.cls.muted)}>Product Designer · Acme</div>
              </div>
            </div>
            <p className={cx('text-xs leading-relaxed mt-3',s.cls.sub)}>Maintains the Glassmorphism universe and 12 shared collections.</p>
            <div className="flex items-center gap-4 mt-3 text-[11px]">
              <span className={s.cls.sub}><span className="font-bold">128</span> components</span>
              <span className={s.cls.sub}><span className="font-bold">2.4k</span> uses</span>
            </div>
            <div className="flex gap-2 mt-3">
              <button className={cx(B,s.cls.btnPrimary,'flex-1 py-2 text-xs')}><Glyph d={G.plus} size={13}/>Follow</button>
              <button className={cx(B,ghost(s),'flex-1 py-2 text-xs')}>Message</button>
            </div>
            <span className="absolute left-1/2 -bottom-1.5 w-3 h-3" style={{transform:'translateX(-50%) rotate(45deg)',background:'inherit'}}/>
          </div>
          <span className={cx('text-[11px]',s.cls.muted)}>Hover a teammate to preview</span>
        </div>) },
  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();