/* ============================================================
   BLOCKS A — Buttons, Cards, Navigation, Inputs & Forms
   ============================================================ */
(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:'btn-primary', type:'buttons', subtype:'primary', title:'Primary & states',
      Render:(s)=>(
        <div className="flex flex-col gap-4 items-center">
          <div className="flex gap-3 flex-wrap justify-center">
            <button className={cx(B,s.cls.btnPrimary,'px-5 py-2.5 text-sm')}>Get started</button>
            <button className={cx(B,s.cls.btn,'px-5 py-2.5 text-sm')}>Learn more</button>
          </div>
          <div className="flex gap-3 flex-wrap justify-center">
            <button className={cx(B,ghost(s),'px-5 py-2.5 text-sm')}><Glyph d={G.plus} size={14}/>Invite</button>
            <button className={cx(B,s.cls.btnPrimary,'px-5 py-2.5 text-sm')} style={{opacity:.45,pointerEvents:'none'}}>Disabled</button>
          </div>
        </div>) },

    { id:'btn-group', type:'buttons', subtype:'group', title:'Segmented button group',
      Render:(s)=>{
        const [v,setV]=React.useState('week');
        const opts=[['day','Day'],['week','Week'],['month','Month']];
        return (
          <div className={cx(s.cls.surface2,'p-1 inline-flex gap-1')}>
            {opts.map(([k,l])=>(
              <button key={k} onClick={()=>setV(k)}
                className={cx(B,'px-4 py-2 text-sm rounded-lg transition', v===k?s.cls.btnPrimary:'opacity-70 hover:opacity-100')}>
                {l}</button>
            ))}
          </div>); } },

    { id:'btn-icon', type:'buttons', subtype:'icon', title:'Icon buttons & FAB',
      Render:(s)=>(
        <div className="flex items-center gap-4">
          {[G.heart,G.bell,G.search].map((d,i)=>(
            <button key={i} className={cx(B,s.cls.btn,'w-11 h-11 rounded-full p-0')}><Glyph d={d} size={18}/></button>
          ))}
          <button className={cx(B,s.cls.btnPrimary,'w-14 h-14 rounded-full p-0 text-xl')}><Glyph d={G.plus} size={22}/></button>
        </div>) },

    /* ---------- CARDS ---------- */
    { id:'card-product', type:'cards', subtype:'product', title:'Product card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-4')}>
          <Slot label="product shot" className="w-full h-32 mb-4"/>
          <div className="flex items-start justify-between gap-2">
            <div>
              <div className="font-bold leading-tight">Aer Carry-On Pro</div>
              <div className={cx('text-xs mt-0.5',s.cls.sub)}>Cabin-size travel pack</div>
            </div>
            <div className={cx('text-lg font-extrabold',s.cls.glow)}>$245</div>
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full mt-4 py-2.5 text-sm')}>Add to bag</button>
        </div>) },

    { id:'card-pricing', type:'cards', subtype:'pricing', title:'Pricing card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[270px] p-6 relative')}>
          <div className={cx(s.cls.chip,'absolute top-4 right-4 px-2.5 py-1 text-[10px] font-bold')}>POPULAR</div>
          <div className={cx('text-sm uppercase tracking-wider',s.cls.sub)}>Pro</div>
          <div className="flex items-end gap-1 mt-2">
            <span className={head(s,'text-4xl font-extrabold')}>$24</span>
            <span className={cx('text-sm mb-1',s.cls.muted)}>/month</span>
          </div>
          <div className="flex flex-col gap-2.5 mt-5">
            {['Unlimited components','All 4 style universes','Figma + code export','Priority support'].map(f=>(
              <div key={f} className="flex items-center gap-2.5 text-sm">
                <span style={{color:s.cls.accent}}><Glyph d={G.check} size={15}/></span>{f}
              </div>))}
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full mt-6 py-2.5 text-sm')}>Choose Pro</button>
        </div>) },

    { id:'card-profile', type:'cards', subtype:'profile', title:'Profile card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-6 text-center')}>
          <Slot label="avatar" className="w-20 h-20 mx-auto mb-3 rounded-full"/>
          <div className="font-bold text-lg">Mara Okonkwo</div>
          <div className={cx('text-sm',s.cls.sub)}>Lead Product Designer</div>
          <div className="flex justify-center gap-6 mt-4 mb-4">
            {[['248','Posts'],['12.4k','Followers'],['319','Following']].map(([n,l])=>(
              <div key={l}><div className="font-bold">{n}</div><div className={cx('text-[11px]',s.cls.muted)}>{l}</div></div>))}
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2 text-sm')}>Follow</button>
        </div>) },

    { id:'card-stat', type:'cards', subtype:'stat', title:'Stat / KPI card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-5')}>
          <div className="flex items-center justify-between">
            <span className={cx('text-sm',s.cls.sub)}>Monthly revenue</span>
            <span className={cx(s.cls.chip,'px-2 py-0.5 text-[11px] font-bold')}>+12.4%</span>
          </div>
          <div className={head(s,'text-3xl font-extrabold mt-1')}>$48,290</div>
          <div className="h-16 mt-3 -mx-1"><Spark colors={s.chart}/></div>
          <div className={cx('text-[11px] mt-1',s.cls.muted)}>vs. $42,960 last month</div>
        </div>) },

    { id:'card-testimonial', type:'cards', subtype:'testimonial', title:'Testimonial', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6')}>
          <div className="flex gap-1 mb-3" style={{color:s.cls.accent}}>
            {[0,1,2,3,4].map(i=><Glyph key={i} d={G.star} size={15} fill="currentColor"/>)}
          </div>
          <p className="text-[15px] leading-relaxed font-medium">“We shipped a full marketing site in a weekend. Every block already felt like one product.”</p>
          <div className="flex items-center gap-3 mt-4">
            <Slot label="" className="w-9 h-9 rounded-full"/>
            <div><div className="text-sm font-bold">Diego Santamaría</div><div className={cx('text-[11px]',s.cls.muted)}>Founder, Northbeam</div></div>
          </div>
        </div>) },

    { id:'card-media', type:'cards', subtype:'media', title:'Media card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-4')}>
          <div className="relative">
            <Slot label="cover art" className="w-full h-36"/>
            <button className={cx(B,s.cls.btnPrimary,'absolute bottom-3 right-3 w-11 h-11 rounded-full p-0')}><Glyph d={G.play} size={18} fill="currentColor"/></button>
          </div>
          <div className="mt-3 font-bold">Midnight Frequencies</div>
          <div className={cx('text-xs',s.cls.sub)}>Loraine · 14 tracks · 52 min</div>
        </div>) },

    /* ---------- NAVIGATION ---------- */
    { id:'nav-bar', type:'navigation', subtype:'navbar', title:'Top nav bar', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[480px] px-5 py-3 flex items-center gap-5')}>
          <div className={head(s,'font-extrabold tracking-tight')}>Northwind</div>
          <div className="hidden sm:flex gap-4 text-sm ml-2">
            {['Product','Pricing','Docs'].map((l,i)=><span key={l} className={i===0?'font-semibold':s.cls.sub}>{l}</span>)}
          </div>
          <div className="ml-auto flex items-center gap-2">
            <button className={cx(B,s.cls.btn,'w-9 h-9 rounded-full p-0')}><Glyph d={G.search} size={16}/></button>
            <button className={cx(B,s.cls.btnPrimary,'px-4 py-2 text-sm')}>Sign in</button>
          </div>
        </div>) },

    { id:'nav-tabs', type:'navigation', subtype:'tabs', title:'Tabs', w:1,
      Render:(s)=>{
        const [t,setT]=React.useState(0); const tabs=['Overview','Activity','Settings'];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[340px] p-2')}>
            <div className="flex gap-1 relative">
              {tabs.map((l,i)=>(
                <button key={l} onClick={()=>setT(i)}
                  className={cx(B,'flex-1 py-2.5 text-sm rounded-xl transition', t===i?s.cls.btnPrimary:cx('opacity-60 hover:opacity-100',s.cls.text))}>{l}</button>))}
            </div>
            <div className={cx('px-3 py-4 text-sm',s.cls.sub)}>Showing <b>{tabs[t]}</b> — 24 items updated today.</div>
          </div>); } },

    { id:'nav-breadcrumb', type:'navigation', subtype:'breadcrumb', title:'Breadcrumb', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface2,'px-4 py-3 flex items-center gap-2 text-sm')}>
          {['Home','Library','Glassmorphism'].map((l,i,a)=>(
            <React.Fragment key={l}>
              <span className={i===a.length-1?'font-semibold':s.cls.muted}>{l}</span>
              {i<a.length-1 && <Glyph d="M9 6l6 6-6 6" size={13}/>}
            </React.Fragment>))}
        </div>) },

    /* ---------- INPUTS & FORMS ---------- */
    { id:'form-signin', type:'forms', subtype:'signin', title:'Sign-in form', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6')}>
          <div className={head(s,'text-xl font-extrabold')}>Welcome back</div>
          <div className={cx('text-sm mt-1 mb-5',s.cls.sub)}>Sign in to continue to Empire</div>
          <div className="flex flex-col gap-3">
            <input className={cx(s.cls.input,'px-3.5 py-2.5 text-sm w-full')} placeholder="you@studio.com" defaultValue=""/>
            <input className={cx(s.cls.input,'px-3.5 py-2.5 text-sm w-full')} placeholder="Password" type="password"/>
            <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-1')}>Sign in</button>
          </div>
          <div className={cx('text-center text-xs mt-4',s.cls.muted)}>Forgot password?</div>
        </div>) },

    { id:'form-field', type:'forms', subtype:'field', title:'Text field', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6')}>
          <label className={cx('text-xs font-semibold uppercase tracking-wider',s.cls.sub)}>Workspace name</label>
          <input className={cx(s.cls.input,'px-3.5 py-2.5 text-sm w-full mt-2')} defaultValue="Acme Design Co."/>
          <div className={cx('text-[11px] mt-2 flex items-center gap-1.5',s.cls.muted)}>
            <span style={{color:s.cls.accent}}><Glyph d={G.check} size={13}/></span>acme-design.empire.app is available
          </div>
        </div>) },

    { id:'form-toggle', type:'forms', subtype:'toggle', title:'Toggles & switch', w:1,
      Render:(s)=>{
        const [a,setA]=React.useState(true); const [b,setB]=React.useState(false);
        const Sw=({on,set})=>(
          <button onClick={()=>set(!on)} className="relative w-12 h-7 rounded-full transition" style={{
            background:on?s.cls.accent:'rgba(128,128,128,.35)', border:'1px solid rgba(255,255,255,.2)'}}>
            <span className="absolute top-1 w-5 h-5 rounded-full bg-white transition-all" style={{left:on?'24px':'4px',boxShadow:'0 1px 4px rgba(0,0,0,.3)'}}/>
          </button>);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6 flex flex-col gap-4')}>
            {[['Email notifications',a,setA],['Weekly digest',b,setB]].map(([l,on,set])=>(
              <div key={l} className="flex items-center justify-between">
                <span className="text-sm font-medium">{l}</span><Sw on={on} set={set}/></div>))}
          </div>); } },
  ];
  window.BLOCKS.push(...blocks);
})();