/* BLOCKS E — extra style-agnostic Buttons variants (18: 6 primary, 6 group, 6 icon) */
(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 blocks=[
    /* ============ PRIMARY ============ */
    { id:'eB-pri-gradient', type:'buttons', subtype:'primary', title:'Gradient CTA', w:1,
      Render:(s)=>{
        const a=s.swatch&&s.swatch[0]||s.cls.accent, b=s.swatch&&s.swatch[1]||s.cls.accent;
        return (
          <div className="flex flex-col gap-3 items-center">
            <button className={cx(B,'px-8 py-3 text-sm font-semibold rounded-xl text-white')} style={{background:`linear-gradient(100deg, ${a}, ${b})`,boxShadow:`0 10px 30px -10px ${a}`}}>
              <Glyph d={G.star} size={15} fill="currentColor"/>Start free trial
            </button>
            <span className={cx(s.cls.muted,'text-[11px]')}>No credit card required</span>
          </div>); } },

    { id:'eB-pri-leading-icon', type:'buttons', subtype:'primary', title:'Leading icon button', w:1,
      Render:(s)=>(
        <div className="flex flex-wrap gap-3 items-center justify-center">
          <button className={cx(B,s.cls.btnPrimary,'px-5 py-2.5 text-sm')}>
            <Glyph d={G.plus} size={16}/>New project
          </button>
          <button className={cx(B,s.cls.btn,'px-5 py-2.5 text-sm')}>
            <Glyph d={G.search} size={16}/>Browse
          </button>
        </div>) },

    { id:'eB-pri-loading', type:'buttons', subtype:'primary', title:'Loading button', w:1,
      Render:(s)=>{
        const [busy,setBusy]=React.useState(false);
        React.useEffect(()=>{ if(!busy) return; const t=setTimeout(()=>setBusy(false),1800); return ()=>clearTimeout(t); },[busy]);
        return (
          <div className="flex justify-center">
            <button onClick={()=>setBusy(true)} className={cx(B,s.cls.btnPrimary,'px-6 py-2.5 text-sm min-w-[160px]')} style={busy?{pointerEvents:'none',opacity:.9}:null}>
              {busy
                ? <><span className="inline-block w-4 h-4 rounded-full animate-spin" style={{border:'2px solid rgba(255,255,255,.35)',borderTopColor:'#fff'}}/>Publishing…</>
                : <><Glyph d={G.check} size={15}/>Publish post</>}
            </button>
          </div>); } },

    { id:'eB-pri-fullwidth', type:'buttons', subtype:'primary', title:'Full-width block button', w:1,
      Render:(s)=>(
        <div className="flex flex-col gap-2.5 w-full max-w-[300px] mx-auto">
          <button className={cx(B,s.cls.btnPrimary,'w-full px-4 py-3 text-sm font-medium')}>
            Continue to checkout<Glyph d={G.arrow} size={16}/>
          </button>
          <button className={cx(B,ghost(s),'w-full px-4 py-3 text-sm')}>Cancel</button>
        </div>) },

    { id:'eB-pri-pill', type:'buttons', subtype:'primary', title:'Pill button', w:1,
      Render:(s)=>(
        <div className="flex flex-wrap gap-3 items-center justify-center">
          <button className={cx(B,s.cls.btnPrimary,'px-6 py-2.5 text-sm rounded-full')}>
            <Glyph d={G.play} size={14} fill="currentColor"/>Watch demo
          </button>
          <button className={cx(B,s.cls.btn,'px-6 py-2.5 text-sm rounded-full')}>Learn more</button>
        </div>) },

    { id:'eB-pri-danger', type:'buttons', subtype:'primary', title:'Destructive button', w:1,
      Render:(s)=>{
        const r='#ef4444'; /* destructive = semantic danger red in every style (never a palette swatch) */
        return (
          <div className="flex flex-col gap-3 items-center">
            <button className={cx(B,'px-6 py-2.5 text-sm font-medium rounded-lg text-white')} style={{background:r,boxShadow:`0 6px 18px -8px ${r}`}}>
              Delete account
            </button>
            <button className={cx(B,'px-6 py-2.5 text-sm font-medium rounded-lg bg-transparent')} style={{color:r,border:`1px solid ${r}`}}>
              Remove permanently
            </button>
          </div>); } },

    /* ============ GROUP ============ */
    { id:'eB-grp-2seg', type:'buttons', subtype:'group', title:'2-option segmented', w:1,
      Render:(s)=>{
        const [v,setV]=React.useState(0); const opts=['Monthly','Yearly'];
        return (
          <div className="flex justify-center">
            <div className={cx(s.cls.surface2,'inline-flex p-1 rounded-lg gap-1')}>
              {opts.map((o,i)=>(
                <button key={o} onClick={()=>setV(i)} className={cx(B,'px-5 py-1.5 text-sm rounded-md',v===i?s.cls.btnPrimary:cx('bg-transparent',s.cls.sub))}>{o}</button>))}
            </div>
          </div>); } },

    { id:'eB-grp-vseg', type:'buttons', subtype:'group', title:'Vertical segmented', w:1,
      Render:(s)=>{
        const [v,setV]=React.useState(1); const opts=['Overview','Activity','Settings'];
        return (
          <div className="flex justify-center">
            <div className={cx(s.cls.surface2,'inline-flex flex-col p-1 rounded-lg gap-1 w-[180px]')}>
              {opts.map((o,i)=>(
                <button key={o} onClick={()=>setV(i)} className={cx(B,'w-full px-4 py-2 text-sm rounded-md justify-start',v===i?s.cls.btnPrimary:cx('bg-transparent',s.cls.sub))}>{o}</button>))}
            </div>
          </div>); } },

    { id:'eB-grp-pilltoggle', type:'buttons', subtype:'group', title:'Pill toggle', w:1,
      Render:(s)=>{
        const [on,setOn]=React.useState(true);
        return (
          <div className="flex flex-col gap-2 items-center">
            <div className={cx(s.cls.surface2,'inline-flex p-1 rounded-full gap-1')}>
              <button onClick={()=>setOn(true)} className={cx(B,'px-5 py-1.5 text-sm rounded-full',on?s.cls.btnPrimary:cx('bg-transparent',s.cls.sub))}>On</button>
              <button onClick={()=>setOn(false)} className={cx(B,'px-5 py-1.5 text-sm rounded-full',!on?s.cls.btnPrimary:cx('bg-transparent',s.cls.sub))}>Off</button>
            </div>
            <span className={cx(s.cls.muted,'text-[11px]')}>Notifications {on?'enabled':'muted'}</span>
          </div>); } },

    { id:'eB-grp-iconseg', type:'buttons', subtype:'group', title:'Icon-only view switch', w:1,
      Render:(s)=>{
        const [v,setV]=React.useState(0);
        const views=[
          'M3 4h18M3 12h18M3 20h18',
          'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z',
          'M4 6h16M4 12h16M4 18h10'
        ];
        return (
          <div className="flex justify-center">
            <div className={cx(s.cls.surface2,'inline-flex p-1 rounded-lg gap-1')}>
              {views.map((d,i)=>(
                <button key={i} onClick={()=>setV(i)} className={cx(B,'w-9 h-9 rounded-md',v===i?s.cls.btnPrimary:cx('bg-transparent',s.cls.sub))}>
                  <Glyph d={d} size={16}/>
                </button>))}
            </div>
          </div>); } },

    { id:'eB-grp-filterchips', type:'buttons', subtype:'group', title:'Multi-select filter chips', w:1,
      Render:(s)=>{
        const all=['Design','Engineering','Marketing','Sales','Support'];
        const [sel,setSel]=React.useState(['Design','Sales']);
        const tog=t=>setSel(p=>p.includes(t)?p.filter(x=>x!==t):[...p,t]);
        return (
          <div className="flex flex-wrap gap-2 justify-center max-w-[300px] mx-auto">
            {all.map(t=>{ const on=sel.includes(t); return (
              <button key={t} onClick={()=>tog(t)} className={cx(B,'px-3 py-1.5 text-xs rounded-full',on?s.cls.btnPrimary:s.cls.chip)}>
                {on&&<Glyph d={G.check} size={12}/>}{t}
              </button>); })}
          </div>); } },

    { id:'eB-grp-sortview', type:'buttons', subtype:'group', title:'Sort & view switch', w:1,
      Render:(s)=>{
        const [sort,setSort]=React.useState(0); const [grid,setGrid]=React.useState(true);
        const sorts=['Newest','Popular'];
        return (
          <div className="flex flex-wrap gap-3 items-center justify-center">
            <div className={cx(s.cls.surface2,'inline-flex p-1 rounded-lg gap-1')}>
              {sorts.map((o,i)=>(
                <button key={o} onClick={()=>setSort(i)} className={cx(B,'px-4 py-1.5 text-xs rounded-md',sort===i?s.cls.btnPrimary:cx('bg-transparent',s.cls.sub))}>{o}</button>))}
            </div>
            <div className={cx(s.cls.surface2,'inline-flex p-1 rounded-lg gap-1')}>
              <button onClick={()=>setGrid(true)} className={cx(B,'w-8 h-8 rounded-md',grid?s.cls.btnPrimary:cx('bg-transparent',s.cls.sub))}><Glyph d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" size={14}/></button>
              <button onClick={()=>setGrid(false)} className={cx(B,'w-8 h-8 rounded-md',!grid?s.cls.btnPrimary:cx('bg-transparent',s.cls.sub))}><Glyph d="M3 5h18M3 12h18M3 19h18" size={14}/></button>
            </div>
          </div>); } },

    /* ============ ICON ============ */
    { id:'eB-icon-round', type:'buttons', subtype:'icon', title:'Round icon set', w:1,
      Render:(s)=>{
        const icons=[G.heart,G.star,G.bell,G.search];
        return (
          <div className="flex gap-3 justify-center">
            {icons.map((d,i)=>(
              <button key={i} className={cx(B,s.cls.btn,'w-11 h-11 rounded-full')}><Glyph d={d} size={17}/></button>))}
          </div>); } },

    { id:'eB-icon-square', type:'buttons', subtype:'icon', title:'Square icon set', w:1,
      Render:(s)=>{
        const icons=[G.plus,G.check,G.arrow,G.play];
        return (
          <div className="flex gap-2.5 justify-center">
            {icons.map((d,i)=>(
              <button key={i} className={cx(B,i===0?s.cls.btnPrimary:s.cls.btn,'w-11 h-11 rounded-lg')}><Glyph d={d} size={17}/></button>))}
          </div>); } },

    { id:'eB-icon-fab', type:'buttons', subtype:'icon', title:'Floating action button', w:1,
      Render:(s)=>{
        const a=s.swatch&&s.swatch[0]||s.cls.accent;
        return (
          <div className="flex flex-col gap-3 items-center">
            <button className={cx(B,'w-14 h-14 rounded-full text-white')} style={{background:a,boxShadow:`0 12px 30px -8px ${a}`}}>
              <Glyph d="M12 19V5M5 12l7-7 7 7" size={22}/>
            </button>
            <span className={cx(s.cls.muted,'text-[11px]')}>Back to top</span>
          </div>); } },

    { id:'eB-icon-likeshare', type:'buttons', subtype:'icon', title:'Like / share / save', w:1,
      Render:(s)=>{
        const [liked,setLiked]=React.useState(false);
        const a=s.cls.accent;
        return (
          <div className="flex gap-3 justify-center">
            <button onClick={()=>setLiked(l=>!l)} className={cx(B,liked?s.cls.btnPrimary:s.cls.btn,'px-4 py-2 text-sm rounded-lg')}>
              <Glyph d={G.heart} size={16} fill={liked?'currentColor':'none'}/>{liked?'Liked':'Like'}
            </button>
            <button className={cx(B,s.cls.btn,'w-10 h-10 rounded-lg')}><Glyph d="M4 12v8h16v-8M12 3v13M7 8l5-5 5 5" size={16}/></button>
            <button className={cx(B,s.cls.btn,'w-10 h-10 rounded-lg')}><Glyph d="M6 3h12v18l-6-4-6 4z" size={16}/></button>
          </div>); } },

    { id:'eB-icon-toolbar', type:'buttons', subtype:'icon', title:'Toolbar cluster', w:1,
      Render:(s)=>{
        const tools=[
          'M6 4v13a3 3 0 006 0V4M6 20h12',
          'M19 4l-9 16M9 4H6v3M18 17v3h-3',
          'M4 7V4h16v3M9 20h6M12 4v16',
          'M4 12h16M12 4v16'
        ];
        return (
          <div className="flex justify-center">
            <div className={cx(s.cls.surface2,'inline-flex p-1 rounded-lg gap-1')}>
              {tools.map((d,i)=>(
                <button key={i} className={cx(B,'w-9 h-9 rounded-md',i===0?s.cls.btnPrimary:cx('bg-transparent',s.cls.sub))}><Glyph d={d} size={16}/></button>))}
            </div>
          </div>); } },

    { id:'eB-icon-badge', type:'buttons', subtype:'icon', title:'Icon button with badge', w:1,
      Render:(s)=>{
        const a=s.swatch&&s.swatch[0]||s.cls.accent;
        const Item=(d,n)=>(
          <button className={cx(B,s.cls.btn,'relative w-11 h-11 rounded-lg')}>
            <Glyph d={d} size={18}/>
            <span className="absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold text-white inline-flex items-center justify-center" style={{background:a}}>{n}</span>
          </button>);
        return (
          <div className="flex gap-4 justify-center">
            {Item(G.bell,'3')}
            {Item('M4 4h16v12H5.2L4 18z','12')}
            {Item('M3 3h2l2.4 12.4a2 2 0 002 1.6h7.7a2 2 0 002-1.6L21 7H6','5')}
          </div>); } },
  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();