/* BLOCKS E — extra style-agnostic Forms blocks (signin, field, toggle) */
(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 Lbl=({s,children})=>(<label className={cx('block text-xs font-semibold mb-1.5',s.cls.sub)}>{children}</label>);
  const Div=()=>(<span className="flex-1 h-px" style={{background:'rgba(128,128,128,.22)'}}/>);

  const blocks=[
    /* ============ SIGNIN ============ */
    { id:'eF-signin-email', type:'forms', subtype:'signin', title:'Email + password card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6')}>
          <div className={head(s,'text-lg font-extrabold')}>Welcome back</div>
          <div className={cx('text-xs mt-1',s.cls.muted)}>Sign in to your Empire account</div>
          <div className="mt-5 flex flex-col gap-3">
            <div>
              <Lbl s={s}>Email</Lbl>
              <input className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} placeholder="you@empire.ui"/>
            </div>
            <div>
              <Lbl s={s}>Password</Lbl>
              <input type="password" className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} placeholder="••••••••"/>
            </div>
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-5')}>Sign in<Glyph d={G.arrow} size={14}/></button>
          <div className={cx('text-[11px] text-center mt-3',s.cls.muted)}>No account? <span style={{color:s.cls.accent}}>Create one</span></div>
        </div>) },

    { id:'eF-signin-social', type:'forms', subtype:'signin', title:'Social-only sign-in', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[290px] p-6 text-center')}>
          <div className={head(s,'text-lg font-extrabold')}>Continue to Empire</div>
          <div className={cx('text-xs mt-1 mb-5',s.cls.muted)}>Pick a provider to get started</div>
          <div className="flex flex-col gap-2.5">
            {[['Continue with Google','G'],['Continue with GitHub','GH'],['Continue with Apple','A']].map(([t,m])=>(
              <button key={t} className={cx(B,s.cls.btn,'w-full py-2.5 text-sm justify-start gap-3 px-4')}>
                <span className="w-5 h-5 rounded-full inline-flex items-center justify-center text-[10px] font-bold" style={{background:s.cls.accent,color:'#fff'}}>{m}</span>
                {t}
              </button>))}
          </div>
          <div className={cx('text-[11px] mt-4 leading-relaxed',s.cls.muted)}>By continuing you agree to our <span style={{color:s.cls.accent}}>Terms</span></div>
        </div>) },

    { id:'eF-signin-magic', type:'forms', subtype:'signin', title:'Magic-link sign-in', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[290px] p-6')}>
          <span className="w-11 h-11 rounded-full inline-flex items-center justify-center" style={{background:s.cls.accent,color:'#fff'}}><Glyph d={G.bell} size={18}/></span>
          <div className={head(s,'text-lg font-extrabold mt-4')}>Magic link</div>
          <div className={cx('text-xs mt-1',s.cls.muted)}>We'll email you a one-tap sign-in link. No password needed.</div>
          <div className="mt-5">
            <Lbl s={s}>Email address</Lbl>
            <input className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} placeholder="you@empire.ui"/>
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-4')}>Send magic link</button>
        </div>) },

    { id:'eF-signin-signup2col', type:'forms', subtype:'signin', title:'Two-column sign-up', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[560px] overflow-hidden grid grid-cols-2')}>
          <div className="p-7 flex flex-col justify-center text-white" style={{background:`linear-gradient(150deg, ${(s.swatch&&s.swatch[0])||s.cls.accent}, ${(s.swatch&&s.swatch[1])||s.cls.accent})`}}>
            <div className="text-xl font-extrabold leading-tight">Build faster with Empire UI</div>
            <div className="text-xs opacity-90 mt-2 leading-relaxed">Join 12,000+ teams shipping polished interfaces in record time.</div>
            <div className="flex flex-col gap-2 mt-5">
              {['Unlimited components','Figma + code sync','Priority support'].map(f=>(
                <div key={f} className="flex items-center gap-2 text-xs"><Glyph d={G.check} size={14}/>{f}</div>))}
            </div>
          </div>
          <div className="p-6">
            <div className={head(s,'text-base font-extrabold')}>Create account</div>
            <div className="mt-4 flex flex-col gap-3">
              <div className="grid grid-cols-2 gap-2">
                <input className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} placeholder="First name"/>
                <input className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} placeholder="Last name"/>
              </div>
              <input className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} placeholder="Work email"/>
              <input type="password" className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} placeholder="Password"/>
            </div>
            <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-4')}>Get started free</button>
          </div>
        </div>) },

    { id:'eF-signin-remember', type:'forms', subtype:'signin', title:'Sign-in w/ remember + forgot', w:1,
      Render:(s)=>{
        const [rem,setRem]=React.useState(true);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6')}>
            <div className={head(s,'text-lg font-extrabold')}>Sign in</div>
            <div className="mt-5 flex flex-col gap-3">
              <input className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} placeholder="Email"/>
              <input type="password" className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} placeholder="Password"/>
            </div>
            <div className="flex items-center justify-between mt-3">
              <button onClick={()=>setRem(r=>!r)} className="flex items-center gap-2 text-xs">
                <span className="w-4 h-4 rounded inline-flex items-center justify-center transition" style={rem?{background:s.cls.accent,color:'#fff'}:{boxShadow:'inset 0 0 0 1.5px rgba(128,128,128,.4)'}}>{rem&&<Glyph d={G.check} size={11}/>}</span>
                <span className={s.cls.sub}>Remember me</span>
              </button>
              <span className="text-xs font-medium" style={{color:s.cls.accent}}>Forgot?</span>
            </div>
            <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-4')}>Sign in</button>
          </div>); } },

    { id:'eF-signin-phone-otp', type:'forms', subtype:'signin', title:'Phone + OTP request', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[290px] p-6')}>
          <div className={head(s,'text-lg font-extrabold')}>Verify your phone</div>
          <div className={cx('text-xs mt-1',s.cls.muted)}>We'll text a 6-digit code to confirm it's you.</div>
          <div className="mt-5">
            <Lbl s={s}>Phone number</Lbl>
            <div className="flex gap-2">
              <span className={cx(s.cls.input,'px-3 py-2 text-sm font-medium')}>+44</span>
              <input className={cx(s.cls.input,'flex-1 px-3 py-2 text-sm')} placeholder="7700 900123"/>
            </div>
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-4')}>Send code</button>
          <div className={cx('text-[11px] text-center mt-3',s.cls.muted)}>Standard message rates may apply</div>
        </div>) },

    /* ============ FIELD ============ */
    { id:'eF-field-helper', type:'forms', subtype:'field', title:'Labeled input w/ helper', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5')}>
          <Lbl s={s}>Workspace name</Lbl>
          <input className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} placeholder="Acme Inc."/>
          <div className={cx('text-[11px] mt-1.5',s.cls.muted)}>This appears in your URL and invites.</div>
        </div>) },

    { id:'eF-field-icon', type:'forms', subtype:'field', title:'Input w/ leading icon', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5')}>
          <Lbl s={s}>Search projects</Lbl>
          <div className="relative">
            <span className={cx('absolute left-3 top-1/2 -translate-y-1/2',s.cls.muted)}><Glyph d={G.search} size={15}/></span>
            <input className={cx(s.cls.input,'w-full pl-9 pr-3 py-2 text-sm')} placeholder="Type to filter…"/>
          </div>
        </div>) },

    { id:'eF-field-textarea', type:'forms', subtype:'field', title:'Textarea w/ counter', w:1,
      Render:(s)=>{
        const max=160; const [v,setV]=React.useState('Loving the new dashboard layout');
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[290px] p-5')}>
            <Lbl s={s}>Your feedback</Lbl>
            <textarea value={v} onChange={e=>setV(e.target.value.slice(0,max))} rows={3}
              className={cx(s.cls.input,'w-full px-3 py-2 text-sm resize-none')} placeholder="Tell us what you think…"/>
            <div className="flex justify-end mt-1.5">
              <span className={cx('text-[11px] font-medium')} style={{color:v.length>max-20?s.cls.accent:undefined}}>{v.length}/{max}</span>
            </div>
          </div>); } },

    { id:'eF-field-select', type:'forms', subtype:'field', title:'Select dropdown', w:1,
      Render:(s)=>{
        const opts=['Engineering','Design','Marketing','Operations']; const [open,setOpen]=React.useState(false); const [sel,setSel]=React.useState(0);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[270px] p-5')}>
            <Lbl s={s}>Department</Lbl>
            <button onClick={()=>setOpen(o=>!o)} className={cx(s.cls.input,'w-full px-3 py-2 text-sm flex items-center justify-between')}>
              <span>{opts[sel]}</span>
              <span className={s.cls.muted} style={{transform:open?'rotate(90deg)':'none',transition:'.15s'}}><Glyph d={G.arrow} size={13}/></span>
            </button>
            {open&&(
              <div className={cx(s.cls.surface2,'mt-1 rounded-lg overflow-hidden p-1')}>
                {opts.map((o,i)=>(
                  <button key={o} onClick={()=>{setSel(i);setOpen(false);}} className={cx('w-full text-left px-3 py-1.5 text-sm rounded flex items-center justify-between',i===sel?'':'opacity-75 hover:opacity-100')}
                    style={i===sel?{background:s.cls.accent,color:'#fff'}:null}>
                    {o}{i===sel&&<Glyph d={G.check} size={13}/>}
                  </button>))}
              </div>)}
          </div>); } },

    { id:'eF-field-validate', type:'forms', subtype:'field', title:'Inline validation states', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5 flex flex-col gap-4')}>
          <div>
            <Lbl s={s}>Username</Lbl>
            <div className="relative">
              <input defaultValue="empire_dev" className={cx(s.cls.input,'w-full px-3 py-2 pr-9 text-sm')} style={{boxShadow:'inset 0 0 0 1.5px #22c55e'}}/>
              <span className="absolute right-3 top-1/2 -translate-y-1/2" style={{color:'#22c55e'}}><Glyph d={G.check} size={15}/></span>
            </div>
            <div className="text-[11px] mt-1.5" style={{color:'#22c55e'}}>Available</div>
          </div>
          <div>
            <Lbl s={s}>Email</Lbl>
            <input defaultValue="not-an-email" className={cx(s.cls.input,'w-full px-3 py-2 text-sm')} style={{boxShadow:'inset 0 0 0 1.5px #ef4444'}}/>
            <div className="text-[11px] mt-1.5" style={{color:'#ef4444'}}>Enter a valid email address</div>
          </div>
        </div>) },

    /* ============ TOGGLE ============ */
    { id:'eF-toggle-switchrow', type:'forms', subtype:'toggle', title:'Switch row', w:1,
      Render:(s)=>{
        const [on,setOn]=React.useState(true);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5 flex items-center justify-between')}>
            <div>
              <div className="text-sm font-semibold">Email notifications</div>
              <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>Daily digest at 9am</div>
            </div>
            <button onClick={()=>setOn(o=>!o)} className="w-11 h-6 rounded-full p-0.5 shrink-0 transition" style={on?{background:s.cls.accent}:{background:'rgba(128,128,128,.3)'}}>
              <span className="block w-5 h-5 rounded-full bg-white transition" style={{transform:on?'translateX(20px)':'none',boxShadow:'0 1px 3px rgba(0,0,0,.3)'}}/>
            </button>
          </div>); } },

    { id:'eF-toggle-switchgroup', type:'forms', subtype:'toggle', title:'Switch group', w:1,
      Render:(s)=>{
        const items=['Product updates','Security alerts','Weekly newsletter','Mentions'];
        const [v,setV]=React.useState([true,true,false,true]);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[290px] p-5')}>
            <div className={head(s,'text-sm font-extrabold mb-3')}>Notifications</div>
            <div className="flex flex-col gap-3">
              {items.map((it,i)=>(
                <div key={it} className="flex items-center justify-between">
                  <span className={cx('text-sm',s.cls.text)}>{it}</span>
                  <button onClick={()=>setV(a=>a.map((x,j)=>j===i?!x:x))} className="w-10 h-[22px] rounded-full p-0.5 shrink-0 transition" style={v[i]?{background:s.cls.accent}:{background:'rgba(128,128,128,.3)'}}>
                    <span className="block w-[18px] h-[18px] rounded-full bg-white transition" style={{transform:v[i]?'translateX(18px)':'none',boxShadow:'0 1px 2px rgba(0,0,0,.3)'}}/>
                  </button>
                </div>))}
            </div>
          </div>); } },

    { id:'eF-toggle-checklist', type:'forms', subtype:'toggle', title:'Checkbox list', w:1,
      Render:(s)=>{
        const items=['Wireframes','Visual design','Prototype','Handoff'];
        const [v,setV]=React.useState([true,true,false,false]);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[270px] p-5')}>
            <div className={head(s,'text-sm font-extrabold mb-3')}>Project checklist</div>
            <div className="flex flex-col gap-2.5">
              {items.map((it,i)=>(
                <button key={it} onClick={()=>setV(a=>a.map((x,j)=>j===i?!x:x))} className="flex items-center gap-2.5 text-left">
                  <span className="w-5 h-5 rounded inline-flex items-center justify-center shrink-0 transition" style={v[i]?{background:s.cls.accent,color:'#fff'}:{boxShadow:'inset 0 0 0 1.5px rgba(128,128,128,.4)'}}>{v[i]&&<Glyph d={G.check} size={13}/>}</span>
                  <span className={cx('text-sm',v[i]?cx('line-through',s.cls.muted):s.cls.text)}>{it}</span>
                </button>))}
            </div>
          </div>); } },

    { id:'eF-toggle-radiocard', type:'forms', subtype:'toggle', title:'Radio card group', w:1,
      Render:(s)=>{
        const opts=[['Starter','For individuals'],['Team','For small teams'],['Business','For organizations']];
        const [sel,setSel]=React.useState(1);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5')}>
            <div className={head(s,'text-sm font-extrabold mb-3')}>Choose a plan</div>
            <div className="flex flex-col gap-2">
              {opts.map(([n,d],i)=>(
                <button key={n} onClick={()=>setSel(i)} className={cx('flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition',i===sel?'':'opacity-70 hover:opacity-100')}
                  style={i===sel?{boxShadow:`inset 0 0 0 1.5px ${s.cls.accent}`}:{boxShadow:'inset 0 0 0 1px rgba(128,128,128,.2)'}}>
                  <span className="w-4 h-4 rounded-full inline-flex items-center justify-center shrink-0" style={{boxShadow:`inset 0 0 0 1.5px ${i===sel?s.cls.accent:'rgba(128,128,128,.4)'}`}}>
                    {i===sel&&<span className="w-2 h-2 rounded-full" style={{background:s.cls.accent}}/>}
                  </span>
                  <div>
                    <div className="text-sm font-semibold">{n}</div>
                    <div className={cx('text-[11px]',s.cls.muted)}>{d}</div>
                  </div>
                </button>))}
            </div>
          </div>); } },

    { id:'eF-toggle-segmented', type:'forms', subtype:'toggle', title:'Segmented toggle', w:1,
      Render:(s)=>{
        const opts=['Day','Week','Month']; const [sel,setSel]=React.useState(1);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[270px] p-5')}>
            <Lbl s={s}>View range</Lbl>
            <div className={cx(s.cls.surface2,'flex gap-1 p-1 rounded-lg')}>
              {opts.map((o,i)=>(
                <button key={o} onClick={()=>setSel(i)} className={cx('flex-1 py-1.5 text-sm font-medium rounded-md transition',i!==sel&&'opacity-60 hover:opacity-100')}
                  style={i===sel?{background:s.cls.accent,color:'#fff'}:null}>{o}</button>))}
            </div>
          </div>); } },

    { id:'eF-toggle-rating', type:'forms', subtype:'toggle', title:'Star rating input', w:1,
      Render:(s)=>{
        const [r,setR]=React.useState(4); const labels=['','Poor','Fair','Good','Great','Excellent'];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[270px] p-5 text-center')}>
            <div className={head(s,'text-sm font-extrabold')}>Rate your experience</div>
            <div className="inline-flex gap-1.5 mt-3">
              {[1,2,3,4,5].map(n=>(
                <button key={n} onClick={()=>setR(n)} style={{color:n<=r?s.cls.accent:'rgba(128,128,128,.35)'}}>
                  <Glyph d={G.star} size={26} fill={n<=r?'currentColor':'none'}/>
                </button>))}
            </div>
            <div className={cx('text-xs mt-2 font-medium')} style={{color:s.cls.accent}}>{labels[r]}</div>
          </div>); } },
  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();