/* BLOCKS F-BTN-NAV — buttons (primary/group/icon) + navigation (navbar/tabs) */
(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 sw=(s,i,fb)=>(s.swatch&&s.swatch[i])||fb||s.cls.accent;
  const chevron='M9 6l6 6-6 6';

  const Logo=({s,name='Empire'})=>(
    <div className="flex items-center gap-2 shrink-0">
      <span className="w-7 h-7 rounded-lg inline-flex items-center justify-center text-white text-xs font-extrabold"
        style={{background:sw(s,0)}}>E</span>
      <span className={head(s,'text-sm font-extrabold')}>{name}</span>
    </div>);

  const blocks=[
    /* ===================== BUTTONS · PRIMARY ===================== */
    { id:'fBN-pri-gradient', type:'buttons', subtype:'primary', title:'Gradient CTA', w:1,
      Render:(s)=>(
        <div className="flex flex-col gap-3 items-center">
          <button className={cx(B,s.cls.btnPrimary,'px-8 py-3 text-sm font-semibold')}>
            <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:'fBN-pri-icons', type:'buttons', subtype:'primary', title:'Icon-leading & trailing', 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')}>
            Continue<Glyph d={G.arrow} size={16}/>
          </button>
        </div>) },

    { id:'fBN-pri-loading', type:'buttons', subtype:'primary', title:'Loading state 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 flex-col gap-2.5 items-center">
            <button onClick={()=>setBusy(true)} className={cx(B,s.cls.btnPrimary,'px-6 py-2.5 text-sm min-w-[170px]')} 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'}}/>Saving changes…</>
                : <><Glyph d={G.check} size={15}/>Save changes</>}
            </button>
            <span className={cx(s.cls.muted,'text-[11px]')}>Click to simulate request</span>
          </div>); } },

    { id:'fBN-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>) },

    /* ===================== BUTTONS · GROUP ===================== */
    { id:'fBN-grp-attached', type:'buttons', subtype:'group', title:'Attached segmented', w:1,
      Render:(s)=>{
        const [v,setV]=React.useState(1); const opts=['Left','Center','Right'];
        return (
          <div className="flex justify-center">
            <div className="inline-flex rounded-lg overflow-hidden" style={{boxShadow:'inset 0 0 0 1px rgba(128,128,128,.25)'}}>
              {opts.map((o,i)=>(
                <button key={o} onClick={()=>setV(i)}
                  className={cx(B,'px-5 py-2 text-sm',v===i?s.cls.btnPrimary:cx('bg-transparent',s.cls.sub))}
                  style={i>0?{borderLeft:'1px solid rgba(128,128,128,.25)'}:null}>{o}</button>))}
            </div>
          </div>); } },

    { id:'fBN-grp-slider', type:'buttons', subtype:'group', title:'Sliding-indicator segmented', w:1,
      Render:(s)=>{
        const [v,setV]=React.useState(0); const opts=['Monthly','Yearly'];
        return (
          <div className="flex flex-col gap-2 items-center">
            <div className={cx(s.cls.surface2,'relative inline-flex p-1 rounded-xl')}>
              <span className={cx('absolute top-1 bottom-1 rounded-lg transition-transform duration-300 ease-out',s.cls.btnPrimary)}
                style={{left:4,width:`calc(50% - 4px)`,transform:`translateX(${v*100}%)`}}/>
              {opts.map((o,i)=>(
                <button key={o} onClick={()=>setV(i)}
                  className={cx(B,'relative z-10 px-6 py-1.5 text-sm w-[96px]',v===i?'text-white':s.cls.sub)}>{o}</button>))}
            </div>
            <span className={cx(s.cls.muted,'text-[11px]')}>Save 20% billed yearly</span>
          </div>); } },

    /* ===================== BUTTONS · ICON ===================== */
    { id:'fBN-icon-speeddial', type:'buttons', subtype:'icon', title:'Speed-dial FAB', w:1,
      Render:(s)=>{
        const [open,setOpen]=React.useState(false);
        const a=sw(s,0);
        const actions=[G.star,G.heart,G.bell];
        return (
          <div className="flex justify-center items-end" style={{minHeight:180}}>
            <div className="relative flex flex-col items-center gap-3">
              <div className={cx('flex flex-col items-center gap-3 transition-all duration-300',open?'opacity-100 translate-y-0':'opacity-0 translate-y-3 pointer-events-none')}>
                {actions.map((d,i)=>(
                  <button key={i} className={cx(B,s.cls.surface2,'w-11 h-11 rounded-full')}><Glyph d={d} size={16}/></button>))}
              </div>
              <button onClick={()=>setOpen(o=>!o)} className={cx(B,'w-14 h-14 rounded-full text-white transition-transform duration-300')}
                style={{background:a,boxShadow:`0 12px 30px -8px ${a}`,transform:open?'rotate(45deg)':'none'}}>
                <Glyph d={G.plus} size={24}/>
              </button>
            </div>
          </div>); } },

    { id:'fBN-icon-reactions', type:'buttons', subtype:'icon', title:'Reaction row', w:1,
      Render:(s)=>{
        const init=[[G.heart,128,false],[G.star,42,false],[G.check,17,false],[G.bell,5,false]];
        const [r,setR]=React.useState(init);
        const tog=i=>setR(p=>p.map((x,j)=>j===i?[x[0],x[1]+(x[2]?-1:1),!x[2]]:x));
        return (
          <div className="flex flex-wrap gap-2 justify-center">
            {r.map(([d,n,on],i)=>(
              <button key={i} onClick={()=>tog(i)}
                className={cx(B,on?s.cls.btnPrimary:s.cls.chip,'px-3 py-1.5 text-xs rounded-full')}>
                <Glyph d={d} size={14} fill={on?'currentColor':'none'}/><span className="font-semibold tabular-nums">{n}</span>
              </button>))}
          </div>); } },

    /* ===================== NAVIGATION · NAVBAR ===================== */
    { id:'fBN-nav-simple', type:'navigation', subtype:'navbar', title:'Simple top nav', w:2,
      Render:(s)=>{
        const [act,setAct]=React.useState('Home');
        const links=['Home','Features','Pricing','About'];
        return (
          <div className={cx(s.cls.surface,'w-full flex items-center gap-5 px-6 py-3.5')}>
            <Logo s={s}/>
            <nav className="flex items-center gap-1 ml-auto">
              {links.map(l=>(
                <button key={l} onClick={()=>setAct(l)}
                  className={cx('px-3 py-1.5 rounded-lg text-sm transition',l===act?s.cls.btnPrimary:cx('font-medium',s.cls.sub,'opacity-80 hover:opacity-100'))}>{l}</button>))}
            </nav>
          </div>); } },

    { id:'fBN-nav-search', type:'navigation', subtype:'navbar', title:'Nav with search', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full flex items-center gap-4 px-6 py-3')}>
          <Logo s={s} name="Console"/>
          <div className={cx(s.cls.input,'flex items-center gap-2 flex-1 max-w-md px-3 py-2 mx-2')}>
            <span className={s.cls.muted}><Glyph d={G.search} size={15}/></span>
            <input placeholder="Search projects, docs, people…" className="bg-transparent border-0 outline-none text-sm w-full"/>
            <kbd className={cx('text-[10px] px-1.5 py-0.5 rounded',s.cls.chip)}>⌘K</kbd>
          </div>
          <div className="ml-auto flex items-center gap-2">
            <button className={cx(B,s.cls.surface2,'w-9 h-9 rounded-full p-0')}><Glyph d={G.bell} size={16}/></button>
            <button className={cx(B,s.cls.btnPrimary,'px-4 py-1.5 text-sm')}><Glyph d={G.plus} size={14}/>New</button>
          </div>
        </div>) },

    { id:'fBN-nav-centered', type:'navigation', subtype:'navbar', title:'Centered-logo nav', w:2,
      Render:(s)=>{
        const left=['Shop','Collections']; const right=['Journal','Contact'];
        return (
          <div className={cx(s.cls.surface,'w-full grid items-center px-6 py-3.5')} style={{gridTemplateColumns:'1fr auto 1fr'}}>
            <nav className="flex items-center gap-5">
              {left.map(l=>(<a key={l} className={cx('text-sm font-medium cursor-pointer transition hover:opacity-100',s.cls.sub,'opacity-80')}>{l}</a>))}
            </nav>
            <div className="flex justify-center"><Logo s={s} name="ATELIER"/></div>
            <nav className="flex items-center gap-5 justify-end">
              {right.map(l=>(<a key={l} className={cx('text-sm font-medium cursor-pointer transition hover:opacity-100',s.cls.sub,'opacity-80')}>{l}</a>))}
            </nav>
          </div>); } },

    { id:'fBN-nav-transparent', type:'navigation', subtype:'navbar', title:'Transparent nav + CTA', w:2,
      Render:(s)=>{
        const links=['Product','Solutions','Pricing','Docs'];
        return (
          <div className="w-full flex items-center gap-6 px-6 py-4 bg-transparent">
            <Logo s={s}/>
            <nav className="hidden md:flex items-center gap-5 ml-4">
              {links.map(l=>(<a key={l} className={cx('text-sm font-medium cursor-pointer transition hover:opacity-100',s.cls.sub,'opacity-80')}>{l}</a>))}
            </nav>
            <div className="ml-auto flex items-center gap-2">
              <button className={cx(B,ghost(s),'px-3 py-1.5 text-sm')}>Sign in</button>
              <button className={cx(B,s.cls.btnPrimary,'px-4 py-1.5 text-sm')}>Get started<Glyph d={G.arrow} size={14}/></button>
            </div>
          </div>); } },

    { id:'fBN-nav-appbar', type:'navigation', subtype:'navbar', title:'App bar with avatar + bell', w:2,
      Render:(s)=>{
        const [act,setAct]=React.useState('Dashboard');
        const links=['Dashboard','Projects','Reports','Settings'];
        return (
          <div className={cx(s.cls.surface,'w-full flex items-center gap-5 px-5 py-3')}>
            <Logo s={s}/>
            <nav className="flex items-center gap-1 ml-2">
              {links.map(l=>(
                <button key={l} onClick={()=>setAct(l)}
                  className={cx('px-3 py-1.5 rounded-lg text-sm transition',l===act?s.cls.btnPrimary:cx('font-medium',s.cls.sub,'opacity-80 hover:opacity-100'))}>{l}</button>))}
            </nav>
            <div className="ml-auto flex items-center gap-3">
              <button className={cx(B,s.cls.surface2,'relative w-9 h-9 rounded-full p-0')}>
                <Glyph d={G.bell} size={16}/>
                <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full" style={{background:sw(s,0)}}/>
              </button>
              <span className="w-9 h-9 rounded-full inline-flex items-center justify-center text-white text-xs font-bold" style={{background:sw(s,0)}}>JD</span>
            </div>
          </div>); } },

    { id:'fBN-nav-ecommerce', type:'navigation', subtype:'navbar', title:'E-commerce nav w/ cart badge', w:2,
      Render:(s)=>{
        const links=['New','Men','Women','Sale'];
        const cart='M3 3h2l2.4 12.4a2 2 0 002 1.6h7.7a2 2 0 002-1.6L21 7H6';
        return (
          <div className={cx(s.cls.surface,'w-full flex items-center gap-6 px-6 py-3.5')}>
            <Logo s={s} name="LUXE"/>
            <nav className="flex items-center gap-5 ml-2">
              {links.map(l=>(<a key={l} className={cx('text-sm font-medium cursor-pointer transition hover:opacity-100',s.cls.sub,'opacity-80')}>{l}</a>))}
            </nav>
            <div className="ml-auto flex items-center gap-3">
              <button className={cx(B,s.cls.surface2,'w-9 h-9 rounded-full p-0')}><Glyph d={G.search} size={16}/></button>
              <button className={cx(B,s.cls.surface2,'w-9 h-9 rounded-full p-0')}><Glyph d={G.heart} size={16}/></button>
              <button className={cx(B,s.cls.surface2,'relative w-9 h-9 rounded-full p-0')}>
                <Glyph d={cart} size={16}/>
                <span className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold text-white inline-flex items-center justify-center" style={{background:sw(s,0)}}>3</span>
              </button>
            </div>
          </div>); } },

    /* ===================== NAVIGATION · TABS ===================== */
    { id:'fBN-tabs-underline', type:'navigation', subtype:'tabs', title:'Animated underline tabs', w:1,
      Render:(s)=>{
        const tabs=['Overview','Activity','Usage','Members'];
        const [i,setI]=React.useState(0);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[360px] px-4 pt-3')}>
            <div className="relative flex gap-6" style={{borderBottom:'1px solid rgba(128,128,128,.2)'}}>
              {tabs.map((t,j)=>(
                <button key={t} onClick={()=>setI(j)}
                  className={cx('pb-2.5 text-sm transition',j===i?cx('font-semibold',s.cls.text):cx('font-medium',s.cls.sub))}>{t}</button>))}
              <span className="absolute bottom-0 h-[2px] rounded-full transition-all duration-300 ease-out"
                style={{background:s.cls.accent,left:`${i*25}%`,width:'25%'}}/>
            </div>
            <div className={cx('py-4 text-xs',s.cls.sub)}>Showing <span className={s.cls.text}>{tabs[i]}</span> for this workspace.</div>
          </div>); } },

    { id:'fBN-tabs-scroll', type:'navigation', subtype:'tabs', title:'Scrollable tabs w/ badges', w:1,
      Render:(s)=>{
        const tabs=[['All',312],['Open',24],['In review',8],['Merged',132],['Closed',5],['Draft',3]];
        const [act,setAct]=React.useState('All');
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[360px] p-3')}>
            <div className="flex gap-2 overflow-x-auto pb-1" style={{scrollbarWidth:'none'}}>
              {tabs.map(([t,n])=>{ const on=t===act; return (
                <button key={t} onClick={()=>setAct(t)}
                  className={cx(B,'shrink-0 px-3 py-1.5 text-sm rounded-lg transition',on?s.cls.surface2:'opacity-75 hover:opacity-100')}
                  style={on?{boxShadow:`inset 0 0 0 1.5px ${s.cls.accent}`}:null}>
                  <span className={cx('font-medium',on?s.cls.text:s.cls.sub)}>{t}</span>
                  <span className="px-1.5 py-0.5 rounded-full text-[10px] font-bold" style={on?{background:s.cls.accent,color:'#fff'}:{background:'rgba(128,128,128,.18)'}}>{n}</span>
                </button>); })}
            </div>
          </div>); } },
  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();