/* ============================================================
   BLOCKS C5 — extra Inputs & Forms variants (top up to ~10)
   Token-driven: renders in every style via s.cls.* classes.
   ============================================================ */
(function(){
  const { cx, Slot, Glyph, G } = window;
  const B = 'inline-flex items-center justify-center gap-2 cursor-pointer select-none whitespace-nowrap';

  const blocks = [
    /* ---------- FORMS / signin ---------- */
    { id:'c5-signin-social', type:'forms', subtype:'signin', title:'Sign-in with socials', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6')}>
          <div className="font-bold text-lg">Welcome back</div>
          <div className={cx('text-xs mb-4',s.cls.sub)}>Sign in to continue</div>
          <div className="flex flex-col gap-2.5">
            <button className={cx(B,s.cls.btn,'w-full py-2.5 text-sm')}><Glyph d="M21 12a9 9 0 11-6.2-8.5" size={15}/>Continue with Google</button>
            <button className={cx(B,s.cls.btn,'w-full py-2.5 text-sm')}><Glyph d={G.star} size={15}/>Continue with GitHub</button>
          </div>
          <div className="flex items-center gap-3 my-4">
            <span className="flex-1 h-px" style={{background:'currentColor',opacity:.15}}/>
            <span className={cx('text-[11px]',s.cls.muted)}>OR</span>
            <span className="flex-1 h-px" style={{background:'currentColor',opacity:.15}}/>
          </div>
          <input className={cx(s.cls.input,'w-full px-3 py-2.5 text-sm mb-2')} placeholder="you@company.com"/>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm')}>Continue</button>
        </div>) },

    /* ---------- FORMS / field ---------- */
    { id:'c5-field-search', type:'forms', subtype:'field', title:'Search field', w:1,
      Render:(s)=>(
        <div className="w-full max-w-[300px] flex flex-col gap-3">
          <div className="relative">
            <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 className={cx(s.cls.input,'w-full pl-9 pr-3 py-2.5 text-sm')} placeholder="Search components…"/>
          </div>
          <div className="flex gap-2 flex-wrap">
            {['All','Buttons','Cards','Charts'].map((t,i)=>(
              <span key={t} className={cx(s.cls.chip,'px-2.5 py-1 text-[11px]',i===0?'font-bold':'')} style={i===0?{color:s.cls.accent}:undefined}>{t}</span>
            ))}
          </div>
        </div>) },

    { id:'c5-field-otp', type:'forms', subtype:'field', title:'Verification code', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6 text-center')}>
          <div className="font-bold">Enter the 4-digit code</div>
          <div className={cx('text-xs mt-1 mb-4',s.cls.sub)}>Sent to •••• 4242</div>
          <div className="flex justify-center gap-2.5 mb-4">
            {['2','7','',''].map((v,i)=>(
              <div key={i} className={cx(s.cls.input,'w-12 h-14 grid place-items-center text-xl font-bold')}
                style={i===2?{outline:'2px solid '+s.cls.accent,outlineOffset:'1px'}:undefined}>{v}</div>
            ))}
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm')}>Verify</button>
        </div>) },

    /* ---------- FORMS / toggle ---------- */
    { id:'c5-toggle-prefs', type:'forms', subtype:'toggle', title:'Preference switches', w:1,
      Render:(s)=>{
        const [on,setOn]=React.useState({push:true,email:false,sms:true});
        const Row=({k,label,desc})=>(
          <div className="flex items-center gap-3 py-2.5">
            <div className="flex-1">
              <div className="text-sm font-medium">{label}</div>
              <div className={cx('text-[11px]',s.cls.muted)}>{desc}</div>
            </div>
            <button onClick={()=>setOn(o=>({...o,[k]:!o[k]}))}
              className="w-11 h-6 rounded-full p-0.5 transition shrink-0"
              style={{background:on[k]?s.cls.accent:'rgba(127,127,127,.35)'}}>
              <span className="block w-5 h-5 rounded-full bg-white transition-transform" style={{transform:on[k]?'translateX(20px)':'none'}}/>
            </button>
          </div>);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-5')}>
            <div className="font-bold mb-1">Notifications</div>
            <Row k="push" label="Push" desc="In-app alerts"/>
            <Row k="email" label="Email" desc="Weekly digest"/>
            <Row k="sms" label="SMS" desc="Critical only"/>
          </div>); } },
  ];

  blocks.forEach(b=>window.BLOCKS.push(b));
})();