/* BLOCKS F — Overlays (modal, toast, tooltip) — static previews, style-agnostic */
(function(){
  const { cx, Slot, Glyph, G } = window;
  const B='inline-flex items-center justify-center gap-2 cursor-pointer select-none whitespace-nowrap';
  const head=(s,x='')=>cx(s.cls.display,s.cls.glow,x);
  const ghost=s=>s.cls.btnGhost||s.cls.btn;
  const sw=(s,i,fb)=>(s.swatch&&s.swatch[i])||fb||s.cls.accent;
  const OK='#22c55e', ERR='#ef4444', WARN='#f59e0b', INFO='#3b82f6';
  const DARK='#1f1f23';
  const div='1px solid rgba(128,128,128,.18)';
  const tint=(c,a=.15)=>{
    const h=c.replace('#',''); const n=h.length===3?h.split('').map(x=>x+x).join(''):h;
    const r=parseInt(n.slice(0,2),16),g=parseInt(n.slice(2,4),16),b=parseInt(n.slice(4,6),16);
    return `rgba(${r},${g},${b},${a})`; };
  const Backdrop=({children,className=''})=>(
    <div className={cx('w-full rounded-2xl p-6 flex items-center justify-center',className)}
      style={{background:'rgba(20,20,24,.35)',backdropFilter:'blur(2px)'}}>{children}</div>);
  const Kbd=({s,children})=>(
    <span className={cx(s.cls.surface2,'px-1.5 py-0.5 rounded text-[10px] font-semibold leading-none inline-flex items-center min-w-[18px] justify-center')}
      style={{boxShadow:'inset 0 0 0 1px rgba(128,128,128,.22)'}}>{children}</span>);

  const blocks=[

    /* ============================== MODAL ============================== */
    { id:'fO-modal-confirm', type:'overlays', subtype:'modal', title:'Center confirm dialog', w:1,
      Render:(s)=>(
        <Backdrop>
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6')}>
            <div className="flex items-start gap-3">
              <span className="w-10 h-10 rounded-full inline-flex items-center justify-center shrink-0" style={{background:tint(WARN),color:WARN}}>
                <Glyph d={G.bell} size={17}/></span>
              <div className="min-w-0">
                <div className={head(s,'text-sm font-extrabold')}>Discard changes?</div>
                <div className={cx('text-xs mt-1.5 leading-relaxed',s.cls.sub)}>You have unsaved edits to this document. Leaving now will lose them for good.</div>
              </div>
            </div>
            <div className="flex gap-2 mt-6">
              <button className={cx(B,ghost(s),'flex-1 py-2.5 text-xs')}>Keep editing</button>
              <button className={cx(B,s.cls.btnPrimary,'flex-1 py-2.5 text-xs')}>Discard</button>
            </div>
          </div>
        </Backdrop>) },

    { id:'fO-modal-form', type:'overlays', subtype:'modal', title:'Form modal (inputs)', w:1,
      Render:(s)=>(
        <Backdrop>
          <div className={cx(s.cls.surface,'w-full max-w-[320px] p-6')}>
            <div className="flex items-center justify-between">
              <div className={head(s,'text-sm font-extrabold')}>Create project</div>
              <button className={cx(B,ghost(s),'w-7 h-7 rounded-full p-0 text-base')}>×</button>
            </div>
            <div className={cx('text-xs mt-1',s.cls.muted)}>Set a name and visibility to get started.</div>
            <div className="mt-5 flex flex-col gap-3.5">
              <div>
                <label className={cx('block text-[11px] font-semibold mb-1.5',s.cls.sub)}>Project name</label>
                <input placeholder="Aurora dashboard" className={cx(s.cls.input,'w-full px-3 py-2 text-xs')}/>
              </div>
              <div>
                <label className={cx('block text-[11px] font-semibold mb-1.5',s.cls.sub)}>Description</label>
                <textarea rows={2} placeholder="What is this project for?" className={cx(s.cls.input,'w-full px-3 py-2 text-xs resize-none')}/>
              </div>
              <div>
                <label className={cx('block text-[11px] font-semibold mb-1.5',s.cls.sub)}>Visibility</label>
                <div className="flex gap-1.5">
                  {['Private','Team','Public'].map((r,i)=>(
                    <span key={r} className={cx(s.cls.chip,'flex-1 text-center px-2 py-1.5 text-[11px] font-medium')} style={i===1?{boxShadow:`inset 0 0 0 1.5px ${s.cls.accent}`,color:s.cls.accent}:null}>{r}</span>))}
                </div>
              </div>
            </div>
            <div className="flex gap-2 mt-6">
              <button className={cx(B,ghost(s),'flex-1 py-2.5 text-xs')}>Cancel</button>
              <button className={cx(B,s.cls.btnPrimary,'flex-1 py-2.5 text-xs')}><Glyph d={G.plus} size={13}/>Create</button>
            </div>
          </div>
        </Backdrop>) },

    { id:'fO-modal-drawer', type:'overlays', subtype:'modal', title:'Right drawer sheet', w:1,
      Render:(s)=>(
        <div className="w-full rounded-2xl overflow-hidden flex justify-end" style={{background:'rgba(20,20,24,.35)',backdropFilter:'blur(2px)',minHeight:'320px'}}>
          <div className={cx(s.cls.surface,'w-[280px] h-full p-5 rounded-none flex flex-col')} style={{boxShadow:'-12px 0 30px -12px rgba(0,0,0,.4)'}}>
            <div className="flex items-center justify-between">
              <div className={head(s,'text-sm font-extrabold')}>Filters</div>
              <button className={cx(B,ghost(s),'w-7 h-7 rounded-full p-0 text-base')}>×</button>
            </div>
            <div className="mt-5 flex flex-col gap-4 flex-1">
              <div>
                <div className={cx('text-[11px] font-semibold mb-2',s.cls.sub)}>Status</div>
                <div className="flex flex-wrap gap-1.5">
                  {['Active','Paused','Draft'].map((t,i)=>(
                    <span key={t} className={cx(s.cls.chip,'px-2.5 py-1 text-[11px] font-medium')} style={i===0?{boxShadow:`inset 0 0 0 1.5px ${s.cls.accent}`,color:s.cls.accent}:null}>{t}</span>))}
                </div>
              </div>
              <div>
                <div className={cx('text-[11px] font-semibold mb-2',s.cls.sub)}>Owner</div>
                <input placeholder="Search people…" className={cx(s.cls.input,'w-full px-3 py-2 text-xs')}/>
              </div>
              <div>
                <div className={cx('text-[11px] font-semibold mb-2',s.cls.sub)}>Date range</div>
                <div className="flex gap-2">
                  <input placeholder="From" className={cx(s.cls.input,'flex-1 px-2 py-2 text-xs')}/>
                  <input placeholder="To" className={cx(s.cls.input,'flex-1 px-2 py-2 text-xs')}/>
                </div>
              </div>
            </div>
            <div className="flex gap-2 pt-4" style={{borderTop:div}}>
              <button className={cx(B,ghost(s),'flex-1 py-2 text-xs')}>Reset</button>
              <button className={cx(B,s.cls.btnPrimary,'flex-1 py-2 text-xs')}>Apply</button>
            </div>
          </div>
        </div>) },

    { id:'fO-modal-bottom', type:'overlays', subtype:'modal', title:'Bottom sheet', w:1,
      Render:(s)=>(
        <div className="w-full rounded-2xl overflow-hidden flex items-end justify-center" style={{background:'rgba(20,20,24,.35)',backdropFilter:'blur(2px)',minHeight:'300px'}}>
          <div className={cx(s.cls.surface,'w-full max-w-[320px] p-5 pt-3 rounded-b-none')} style={{borderTopLeftRadius:'1.25rem',borderTopRightRadius:'1.25rem',boxShadow:'0 -12px 30px -12px rgba(0,0,0,.4)'}}>
            <div className="w-10 h-1.5 rounded-full mx-auto mb-4" style={{background:'rgba(128,128,128,.35)'}}/>
            <div className={head(s,'text-sm font-extrabold')}>Quick actions</div>
            <div className="mt-3 flex flex-col">
              {[['Edit details',G.plus,s.cls.accent],['Duplicate',G.plus,s.cls.accent],['Move to folder',G.arrow,s.cls.accent],['Delete',G.bell,ERR]].map(([t,d,c],i)=>(
                <button key={i} className={cx('flex items-center gap-3 px-2 py-3 text-left rounded-lg',i!==0&&'')} style={{borderTop:i!==0?div:'none'}}>
                  <span className="w-8 h-8 rounded-full inline-flex items-center justify-center shrink-0" style={{background:tint(c,.15),color:c}}><Glyph d={d} size={14}/></span>
                  <span className="text-xs font-medium" style={c===ERR?{color:ERR}:null}>{t}</span>
                </button>))}
            </div>
          </div>
        </div>) },

    { id:'fO-modal-command', type:'overlays', subtype:'modal', title:'Command palette (⌘K)', w:2,
      Render:(s)=>{
        const groups=[
          ['Actions',[['New document',G.plus],['Invite teammate',G.plus],['Search files',G.search]]],
          ['Recent',[['Q3 Revenue report',G.arrow],['Design system v2',G.arrow]]],
        ];
        return (
          <Backdrop className="items-start">
            <div className={cx(s.cls.surface,'w-full max-w-[440px] p-0 overflow-hidden')}>
              <div className="flex items-center gap-3 px-4 py-3.5" style={{borderBottom:div}}>
                <span className={s.cls.muted}><Glyph d={G.search} size={16}/></span>
                <input autoFocus placeholder="Type a command or search…" className="flex-1 bg-transparent outline-none text-sm" style={{color:'inherit'}}/>
                <Kbd s={s}>⌘K</Kbd>
              </div>
              <div className="p-2 max-h-[260px] overflow-auto">
                {groups.map(([g,items])=>(
                  <div key={g} className="mb-1">
                    <div className={cx('px-3 pt-2 pb-1 text-[10px] font-bold uppercase tracking-wider',s.cls.muted)}>{g}</div>
                    {items.map(([t,d],i)=>(
                      <button key={t} className={cx('w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left text-sm',i===0&&g==='Actions'?s.cls.surface2:'')}>
                        <span className={s.cls.sub}><Glyph d={d} size={15}/></span>
                        <span className="flex-1 font-medium">{t}</span>
                        {i===0&&g==='Actions'&&<Glyph d={G.arrow} size={13} style={{color:s.cls.accent}}/>}
                      </button>))}
                  </div>))}
              </div>
              <div className={cx('flex items-center gap-3 px-4 py-2.5 text-[10px]',s.cls.muted)} style={{borderTop:div}}>
                <span className="flex items-center gap-1"><Kbd s={s}>↑</Kbd><Kbd s={s}>↓</Kbd>to navigate</span>
                <span className="flex items-center gap-1"><Kbd s={s}>↵</Kbd>to select</span>
                <span className="flex items-center gap-1 ml-auto"><Kbd s={s}>esc</Kbd>to close</span>
              </div>
            </div>
          </Backdrop>); } },

    { id:'fO-modal-share', type:'overlays', subtype:'modal', title:'Share dialog (link + people)', w:2,
      Render:(s)=>{
        const [copied,setCopied]=React.useState(false);
        const people=[['Maya Chen','Owner'],['Jonah Reed','Can edit'],['Priya Nair','Can view']];
        return (
          <Backdrop>
            <div className={cx(s.cls.surface,'w-full max-w-[420px] p-6')}>
              <div className="flex items-center justify-between">
                <div className={head(s,'text-sm font-extrabold')}>Share “Aurora roadmap”</div>
                <button className={cx(B,ghost(s),'w-7 h-7 rounded-full p-0 text-base')}>×</button>
              </div>
              <div className="flex gap-2 mt-4">
                <input placeholder="Add people by email…" className={cx(s.cls.input,'flex-1 px-3 py-2 text-xs')}/>
                <button className={cx(B,s.cls.btnPrimary,'px-4 py-2 text-xs')}>Invite</button>
              </div>
              <div className="mt-4 flex flex-col gap-1">
                {people.map(([n,r],i)=>(
                  <div key={n} className="flex items-center gap-3 py-1.5">
                    <span className="w-8 h-8 rounded-full inline-flex items-center justify-center text-white text-[11px] font-bold shrink-0" style={{background:sw(s,i%3,s.cls.accent)}}>{n.split(' ').map(x=>x[0]).join('')}</span>
                    <span className="text-xs font-medium flex-1 truncate">{n}</span>
                    <span className={cx('text-[11px]',s.cls.muted)}>{r}</span>
                  </div>))}
              </div>
              <div className="flex items-center justify-between mt-4 pt-4" style={{borderTop:div}}>
                <div className={cx('text-[11px] flex items-center gap-2',s.cls.muted)}>
                  <span className="w-7 h-7 rounded-full inline-flex items-center justify-center" style={{background:tint(s.cls.accent),color:s.cls.accent}}><Glyph d={G.arrow} size={13}/></span>
                  Anyone with the link can view
                </div>
                <button onClick={()=>{setCopied(true);setTimeout(()=>setCopied(false),1400);}}
                  className={cx(B,copied?ghost(s):s.cls.btn,'px-3 py-2 text-xs')}>
                  {copied?<><Glyph d={G.check} size={13}/>Copied</>:<><Glyph d={G.plus} size={13}/>Copy link</>}</button>
              </div>
            </div>
          </Backdrop>); } },

    /* ============================== TOAST ============================== */
    { id:'fO-toast-action', type:'overlays', subtype:'toast', title:'Toast w/ action + dismiss', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[320px] p-4')} style={{boxShadow:`inset 3px 0 0 ${INFO}`}}>
          <div className="flex items-start gap-3">
            <span className="w-8 h-8 rounded-full inline-flex items-center justify-center shrink-0" style={{background:tint(INFO),color:INFO}}><Glyph d={G.bell} size={15}/></span>
            <div className="min-w-0 flex-1">
              <div className="text-xs font-semibold">Document published</div>
              <div className={cx('text-[11px] mt-0.5 leading-relaxed',s.cls.sub)}>“Aurora roadmap” is now live for your team.</div>
              <div className="flex gap-2 mt-2.5">
                <button className={cx(B,s.cls.btnPrimary,'px-3 py-1.5 text-[11px]')}>View</button>
                <button className={cx(B,ghost(s),'px-3 py-1.5 text-[11px]')}>Undo</button>
              </div>
            </div>
            <button className={cx(B,ghost(s),'w-6 h-6 rounded-full p-0 text-sm shrink-0')}>×</button>
          </div>
        </div>) },

    { id:'fO-toast-stacked', type:'overlays', subtype:'toast', title:'Stacked toasts', w:1,
      Render:(s)=>{
        const items=[['Backup completed',OK,G.check,'Just now'],['New comment from Maya',INFO,G.bell,'2m ago'],['Storage almost full',WARN,G.bell,'10m ago']];
        return (
          <div className="w-full max-w-[300px] flex flex-col gap-2.5">
            {items.map(([t,c,d,when],i)=>(
              <div key={i} className={cx(s.cls.surface,'p-3 flex items-center gap-2.5')}
                style={{boxShadow:`inset 3px 0 0 ${c}, 0 6px 18px -10px rgba(0,0,0,.4)`,opacity:1-i*0.1,transform:`scale(${1-i*0.025})`}}>
                <span className="w-7 h-7 rounded-full inline-flex items-center justify-center shrink-0" style={{background:tint(c),color:c}}><Glyph d={d} size={14}/></span>
                <div className="min-w-0 flex-1">
                  <div className="text-xs font-medium truncate">{t}</div>
                  <div className={cx('text-[10px]',s.cls.muted)}>{when}</div>
                </div>
                <button className={cx('w-5 h-5 inline-flex items-center justify-center text-sm shrink-0',s.cls.muted)}>×</button>
              </div>))}
          </div>); } },

    /* ============================== TOOLTIP ============================== */
    { id:'fO-tooltip-card', type:'overlays', subtype:'tooltip', title:'Rich hover card (profile)', w:1,
      Render:(s)=>(
        <div className="flex flex-col items-center gap-2 py-3">
          <div className={cx(s.cls.surface,'w-full max-w-[260px] p-4 relative')} style={{boxShadow:'0 12px 30px -12px rgba(0,0,0,.4)'}}>
            <div className="flex items-center gap-3">
              <span className="w-11 h-11 rounded-full inline-flex items-center justify-center text-white text-sm font-bold shrink-0" style={{background:sw(s,0)}}>MC</span>
              <div className="min-w-0">
                <div className={head(s,'text-sm font-extrabold truncate')}>Maya Chen</div>
                <div className={cx('text-[11px]',s.cls.muted)}>@mayac · Product Design</div>
              </div>
            </div>
            <div className={cx('text-[11px] mt-3 leading-relaxed',s.cls.sub)}>Leads the design systems team at Empire. Cares about typography and fast feedback loops.</div>
            <div className="flex items-center gap-4 mt-3">
              <span className={cx('text-[11px]',s.cls.muted)}><b className={s.cls.text}>1,204</b> followers</span>
              <span className={cx('text-[11px]',s.cls.muted)}><b className={s.cls.text}>318</b> following</span>
            </div>
            <button className={cx(B,s.cls.btnPrimary,'w-full py-2 text-xs mt-3')}><Glyph d={G.plus} size={13}/>Follow</button>
            <span className="absolute left-8 -bottom-1 w-2.5 h-2.5 rotate-45" style={{background:'var(--surface, transparent)'}}/>
          </div>
          <button className={cx(B,s.cls.surface2,'px-3 py-1.5 text-xs')}>@mayac</button>
        </div>) },

    { id:'fO-tooltip-kbd', type:'overlays', subtype:'tooltip', title:'Keyboard-hint tooltip', w:1,
      Render:(s)=>(
        <div className="flex flex-col items-center gap-2 py-4">
          <div className="rounded-lg px-3 py-2 flex items-center gap-2.5 text-white relative" style={{background:DARK,boxShadow:'0 10px 28px -10px rgba(0,0,0,.55)'}}>
            <span className="text-xs">Save changes</span>
            <span className="flex items-center gap-1">
              <span className="px-1.5 py-0.5 rounded text-[10px] font-semibold leading-none inline-flex items-center" style={{background:'rgba(255,255,255,.14)'}}>⌘</span>
              <span className="px-1.5 py-0.5 rounded text-[10px] font-semibold leading-none inline-flex items-center" style={{background:'rgba(255,255,255,.14)'}}>S</span>
            </span>
            <span className="absolute left-1/2 -translate-x-1/2 -bottom-1 w-2 h-2 rotate-45" style={{background:DARK}}/>
          </div>
          <button className={cx(B,s.cls.btnPrimary,'px-4 py-2 text-xs')}>Save</button>
        </div>) },

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