/* BLOCKS C1 — extra Buttons & Forms variants */
(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:'c1-btn-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),1600); return ()=>clearTimeout(t); },[busy]);
        return (
          <div className="flex flex-col gap-3 items-center">
            <button onClick={()=>setBusy(true)} className={cx(B,s.cls.btnPrimary,'px-6 py-2.5 text-sm min-w-[150px]')} style={busy?{pointerEvents:'none'}:null}>
              {busy
                ? <><span className="inline-block w-4 h-4 rounded-full animate-spin" style={{border:'2px solid rgba(255,255,255,.4)',borderTopColor:'#fff'}}/>Saving…</>
                : <><Glyph d={G.check} size={15}/>Save changes</>}
            </button>
            <button className={cx(B,s.cls.btn,'px-6 py-2.5 text-sm min-w-[150px]')} style={{pointerEvents:'none'}}>
              <span className="inline-block w-4 h-4 rounded-full animate-spin" style={{border:'2px solid rgba(128,128,128,.35)',borderTopColor:s.cls.accent}}/>Loading
            </button>
          </div>); } },

    { id:'c1-btn-social-row', type:'buttons', subtype:'primary', title:'Social sign-in row', w:1,
      Render:(s)=>(
        <div className="flex flex-col gap-3 w-full max-w-[260px]">
          <button className={cx(B,s.cls.btn,'w-full px-4 py-2.5 text-sm')}>
            <span className="inline-flex w-4 h-4 rounded-full" style={{background:s.swatch?s.swatch[0]:s.cls.accent}}/>
            Continue with Google
          </button>
          <button className={cx(B,s.cls.btn,'w-full px-4 py-2.5 text-sm')}>
            <span className="inline-flex w-4 h-4 rounded-sm" style={{background:s.swatch?s.swatch[1]||s.cls.accent:s.cls.accent}}/>
            Continue with GitHub
          </button>
          <button className={cx(B,s.cls.btnPrimary,'w-full px-4 py-2.5 text-sm')}>
            <Glyph d={G.arrow} size={15}/>Continue with email
          </button>
        </div>) },

    { id:'c1-btn-gradient-cta', type:'buttons', subtype:'primary', title:'Gradient CTA', w:1,
      Render:(s)=>{
        const a=s.swatch&&s.swatch[0]||s.cls.accent; const b=s.swatch&&s.swatch[1]||s.cls.accent;
        return (
          <div className="flex flex-col gap-3 items-center">
            <button className={cx(B,'px-7 py-3 text-sm font-semibold rounded-xl text-white')} style={{background:`linear-gradient(90deg, ${a}, ${b})`,boxShadow:`0 8px 24px -8px ${a}`}}>
              <Glyph d={G.star} size={15} fill="currentColor"/>Upgrade to Pro
            </button>
            <span className={cx('text-[11px]',s.cls.muted)}>No card required · cancel anytime</span>
          </div>); } },

    { id:'c1-btn-split', type:'buttons', subtype:'group', title:'Split button', w:1,
      Render:(s)=>{
        const [open,setOpen]=React.useState(false);
        return (
          <div className="relative inline-flex">
            <div className="inline-flex">
              <button className={cx(B,s.cls.btnPrimary,'px-5 py-2.5 text-sm rounded-r-none')}>Deploy</button>
              <button onClick={()=>setOpen(o=>!o)} className={cx(B,s.cls.btnPrimary,'px-3 py-2.5 text-sm rounded-l-none')} style={{borderLeft:'1px solid rgba(255,255,255,.25)'}}>
                <Glyph d="M6 9l6 6 6-6" size={14}/>
              </button>
            </div>
            {open && (
              <div className={cx(s.cls.surface,'absolute top-full mt-2 right-0 w-44 p-1.5 z-10 flex flex-col gap-1')}>
                {['Deploy to staging','Deploy & watch','Schedule deploy'].map(o=>(
                  <button key={o} 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>); } },

    { id:'c1-btn-pill-toggle', type:'buttons', subtype:'group', title:'Pill toggle group', w:1,
      Render:(s)=>{
        const opts=[['list','List'],['grid','Grid'],['feed','Feed']];
        const [v,setV]=React.useState('grid');
        return (
          <div className={cx(s.cls.surface2,'p-1 inline-flex gap-1 rounded-full')}>
            {opts.map(([k,l])=>(
              <button key={k} onClick={()=>setV(k)}
                className={cx(B,'px-4 py-2 text-sm rounded-full transition', v===k?s.cls.btnPrimary:'opacity-65 hover:opacity-100')}>{l}</button>))}
          </div>); } },

    { id:'c1-btn-icon-labeled', type:'buttons', subtype:'icon', title:'Labeled icon buttons', w:1,
      Render:(s)=>{
        const items=[[G.heart,'248'],[G.star,'1.2k'],[G.bell,'Subscribe']];
        return (
          <div className="flex items-center gap-2 flex-wrap justify-center">
            {items.map(([d,l],i)=>(
              <button key={i} className={cx(B,i===2?s.cls.btnPrimary:s.cls.btn,'px-4 py-2 text-sm rounded-full')}>
                <Glyph d={d} size={15} fill={i<2?'currentColor':'none'}/>{l}
              </button>))}
          </div>); } },

    { id:'c1-btn-fab-menu', type:'buttons', subtype:'icon', title:'FAB speed dial', w:1,
      Render:(s)=>{
        const [open,setOpen]=React.useState(false);
        const icons=[G.heart,G.star,G.bell];
        return (
          <div className="relative flex flex-col items-center justify-end h-[180px]">
            <div className="flex flex-col gap-2 mb-2 items-center" style={{opacity:open?1:0,transform:open?'translateY(0)':'translateY(12px)',transition:'all .2s',pointerEvents:open?'auto':'none'}}>
              {icons.map((d,i)=>(
                <button key={i} className={cx(B,s.cls.btn,'w-10 h-10 rounded-full p-0')}><Glyph d={d} size={16}/></button>))}
            </div>
            <button onClick={()=>setOpen(o=>!o)} className={cx(B,s.cls.btnPrimary,'w-14 h-14 rounded-full p-0')} style={{transition:'transform .2s',transform:open?'rotate(45deg)':'none'}}>
              <Glyph d={G.plus} size={22}/>
            </button>
          </div>); } },

    /* ---------- FORMS ---------- */
    { id:'c1-form-search-field', type:'forms', subtype:'field', title:'Search field', w:1,
      Render:(s)=>{
        const [q,setQ]=React.useState('');
        return (
          <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)}>Search library</label>
            <div className="relative mt-2">
              <span className="absolute left-3 top-1/2 -translate-y-1/2" style={{color:s.cls.accent}}><Glyph d={G.search} size={16}/></span>
              <input value={q} onChange={e=>setQ(e.target.value)} className={cx(s.cls.input,'pl-9 pr-9 py-2.5 text-sm w-full')} placeholder="Try “glassmorphism”…"/>
              {q && <button onClick={()=>setQ('')} className="absolute right-2.5 top-1/2 -translate-y-1/2 opacity-60 hover:opacity-100"><Glyph d="M6 6l12 12M18 6L6 18" size={14}/></button>}
            </div>
            <div className="flex gap-2 mt-3 flex-wrap">
              {['Buttons','Cards','Forms'].map(t=>(
                <span key={t} className={cx(s.cls.chip,'px-2.5 py-1 text-[11px]')}>{t}</span>))}
            </div>
          </div>); } },

    { id:'c1-form-otp', type:'forms', subtype:'field', title:'OTP code input', w:1,
      Render:(s)=>{
        const [code,setCode]=React.useState(['','','','','','']);
        const set=(i,v)=>{ const n=[...code]; n[i]=v.replace(/\D/g,'').slice(-1); setCode(n); };
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6 text-center')}>
            <div className={head(s,'text-lg font-extrabold')}>Verify your email</div>
            <div className={cx('text-sm mt-1 mb-5',s.cls.sub)}>Enter the 6-digit code we sent</div>
            <div className="flex justify-center gap-2">
              {code.map((d,i)=>(
                <input key={i} value={d} onChange={e=>set(i,e.target.value)} inputMode="numeric" maxLength={1}
                  className={cx(s.cls.input,'w-10 h-12 text-center text-lg font-bold p-0')}/>))}
            </div>
            <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-5')}>Verify</button>
            <div className={cx('text-[11px] mt-3',s.cls.muted)}>Resend code in 0:42</div>
          </div>); } },

    { id:'c1-form-switch-list', type:'forms', subtype:'toggle', title:'Settings switch list', w:1,
      Render:(s)=>{
        const init={ push:true, email:false, sms:false };
        const [v,setV]=React.useState(init);
        const Sw=({on,onClick})=>(
          <button onClick={onClick} className="relative w-12 h-7 rounded-full transition shrink-0" 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>);
        const rows=[['push','Push notifications','On all devices'],['email','Email digest','Weekly summary'],['sms','SMS alerts','Critical only']];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-2')}>
            {rows.map(([k,t,d],i)=>(
              <div key={k} className={cx('flex items-center justify-between gap-3 px-4 py-3.5', i<rows.length-1?'border-b':'')} style={i<rows.length-1?{borderColor:'rgba(128,128,128,.18)'}:null}>
                <div className="text-left">
                  <div className="text-sm font-medium">{t}</div>
                  <div className={cx('text-[11px]',s.cls.muted)}>{d}</div>
                </div>
                <Sw on={v[k]} onClick={()=>setV(p=>({...p,[k]:!p[k]}))}/>
              </div>))}
          </div>); } },
  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();