/* BLOCKS C2 — extra Cards & Navigation 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 = [
    /* ---------- CARDS ---------- */
    { id:'c2-card-feature', type:'cards', subtype:'product', title:'Feature product card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[300px] overflow-hidden')}>
          <Slot label="product" className="w-full h-36" style={{color:s.cls.accent}}/>
          <div className="p-5">
            <div className="flex items-center justify-between mb-1">
              <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider')}>New</span>
              <span className="inline-flex items-center gap-1 text-xs font-semibold" style={{color:s.cls.accent}}>
                <Glyph d={G.star} size={13} fill={s.cls.accent}/>4.9</span>
            </div>
            <div className={head(s,'text-lg font-extrabold')}>Aurora Headphones</div>
            <p className={cx('text-[12px] mt-1 leading-relaxed',s.cls.sub)}>Adaptive ANC with 40-hour battery and spatial audio.</p>
            <div className="flex items-center justify-between mt-4">
              <div><span className={head(s,'text-xl font-extrabold')}>$249</span><span className={cx('text-xs ml-1 line-through',s.cls.muted)}>$299</span></div>
              <button className={cx(B,s.cls.btnPrimary,'px-4 py-2 text-sm')}><Glyph d={G.plus} size={15}/>Add</button>
            </div>
          </div>
        </div>) },

    { id:'c2-card-pricing-toggle', type:'cards', subtype:'pricing', title:'Pricing card with toggle', w:1,
      Render:(s)=>{
        const [yearly,setYearly] = React.useState(true);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6')}>
            <div className="flex items-center justify-between mb-4">
              <span className={cx(s.cls.chip,'px-2.5 py-0.5 text-[11px] font-bold')}>Pro</span>
              <div className={cx(s.cls.surface2,'p-0.5 inline-flex text-[11px] font-semibold cursor-pointer')} onClick={()=>setYearly(y=>!y)}>
                <span className={cx('px-2.5 py-1 rounded-md', !yearly?s.cls.btnPrimary:s.cls.muted)}>Mo</span>
                <span className={cx('px-2.5 py-1 rounded-md', yearly?s.cls.btnPrimary:s.cls.muted)}>Yr</span>
              </div>
            </div>
            <div className="flex items-end gap-1">
              <span className={head(s,'text-4xl font-extrabold')}>${yearly?'24':'29'}</span>
              <span className={cx('text-sm mb-1.5',s.cls.muted)}>/mo</span>
            </div>
            <div className={cx('text-[11px] mt-1',s.cls.sub)}>{yearly?'Billed $288 yearly · save 17%':'Billed monthly'}</div>
            <div className="flex flex-col gap-2.5 mt-5">
              {['Unlimited projects','Custom tokens','Priority support'].map(f=>(
                <div key={f} className="flex items-center gap-2 text-sm">
                  <span className="w-5 h-5 rounded-full flex items-center justify-center text-white shrink-0" style={{background:s.cls.accent}}><Glyph d={G.check} size={12}/></span>
                  {f}</div>))}
            </div>
            <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-5')}>Choose Pro</button>
          </div>); } },

    { id:'c2-card-team', type:'cards', subtype:'profile', title:'Team profile card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-6 text-center')}>
          <Slot label="" className="w-20 h-20 rounded-full mx-auto" style={{color:s.cls.accent}}/>
          <div className={head(s,'text-lg font-extrabold mt-3')}>Mara Lindqvist</div>
          <div className={cx('text-xs',s.cls.muted)}>Principal Designer</div>
          <p className={cx('text-[12px] mt-2.5 leading-relaxed',s.cls.sub)}>Crafting coherent token systems across every Empire universe.</p>
          <div className="flex gap-2 justify-center mt-4">
            <button className={cx(B,ghost(s),'w-9 h-9 rounded-full p-0')}><Glyph d="M16 8a6 6 0 016 6v6h-4v-6a2 2 0 00-4 0v6h-4v-6a6 6 0 016-6zM6 9H2v11h4zM4 6a2 2 0 100-4 2 2 0 000 4z" size={15}/></button>
            <button className={cx(B,ghost(s),'w-9 h-9 rounded-full p-0')}><Glyph d={G.bell} size={15}/></button>
            <button className={cx(B,s.cls.btnPrimary,'px-4 h-9 text-sm')}>Follow</button>
          </div>
        </div>) },

    { id:'c2-card-stat-trend', type:'cards', subtype:'stat', title:'Stat card with trend', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[280px] p-5')}>
          <div className="flex items-center justify-between">
            <div className={cx(s.cls.surface2,'w-9 h-9 rounded-lg flex items-center justify-center')} style={{color:s.cls.accent}}>
              <Glyph d={G.heart} size={17}/></div>
            <span className={cx(s.cls.chip,'px-2 py-0.5 text-[11px] font-bold inline-flex items-center gap-1')}>
              <Glyph d="M5 12l5-5 4 4 5-6" size={12}/>+12.4%</span>
          </div>
          <div className={head(s,'text-3xl font-extrabold mt-3')}>48,920</div>
          <div className={cx('text-xs',s.cls.sub)}>Engaged users this week</div>
          <div className="h-12 mt-3"><Spark colors={s.chart} h={48} data={[20,24,22,30,28,36,34,44,40,52]}/></div>
        </div>) },

    { id:'c2-card-quote-lg', type:'cards', subtype:'testimonial', title:'Large quote testimonial', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[480px] p-8')}>
          <div className="text-6xl leading-none font-serif" style={{color:s.cls.accent,opacity:.6}}>&ldquo;</div>
          <p className={head(s,'text-xl font-bold leading-snug -mt-4')}>Switching every component to a new style took one click. Our rebrand shipped in an afternoon.</p>
          <div className="flex items-center gap-3 mt-6">
            <Slot label="" className="w-12 h-12 rounded-full shrink-0" style={{color:s.cls.accent}}/>
            <div className="flex-1">
              <div className="text-sm font-bold">Diego Fuentes</div>
              <div className={cx('text-xs',s.cls.muted)}>VP Engineering · Northwind</div>
            </div>
            <div className="flex gap-0.5" style={{color:s.cls.accent}}>
              {[0,1,2,3,4].map(i=><Glyph key={i} d={G.star} size={15} fill={s.cls.accent}/>)}</div>
          </div>
        </div>) },

    /* ---------- NAVIGATION ---------- */
    { id:'c2-nav-app-bar', type:'navigation', subtype:'navbar', title:'Application top bar', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[480px] px-4 py-3 flex items-center gap-4')}>
          <div className={head(s,'font-extrabold text-lg')}>Empire</div>
          <div className={cx(s.cls.input,'flex-1 flex items-center gap-2 px-3 py-2 text-sm min-w-0')}>
            <span className={s.cls.muted}><Glyph d={G.search} size={15}/></span>
            <span className={cx('truncate',s.cls.muted)}>Search components…</span>
          </div>
          <button className={cx(B,ghost(s),'w-9 h-9 rounded-full p-0 shrink-0')}><Glyph d={G.bell} size={17}/></button>
          <Slot label="" className="w-9 h-9 rounded-full shrink-0" style={{color:s.cls.accent}}/>
        </div>) },

    { id:'c2-nav-sidebar-mini', type:'navigation', subtype:'navbar', title:'Mini sidebar rail', w:1,
      Render:(s)=>{
        const items = [G.search, G.heart, G.bell, G.star, G.plus];
        const [active,setActive] = React.useState(1);
        return (
          <div className={cx(s.cls.surface,'p-2 flex flex-col gap-2 items-center')}>
            <div className="w-10 h-10 rounded-xl flex items-center justify-center text-white mb-1" style={{background:s.cls.accent}}>
              <Glyph d={G.play} size={18} fill="#fff"/></div>
            {items.map((d,i)=>(
              <button key={i} onClick={()=>setActive(i)}
                className={cx(B,'w-10 h-10 rounded-xl p-0', i===active?s.cls.btnPrimary:ghost(s))}>
                <Glyph d={d} size={18}/></button>))}
          </div>); } },

    { id:'c2-nav-pill-tabs', type:'navigation', subtype:'tabs', title:'Pill tabs', w:1,
      Render:(s)=>{
        const tabs = ['All','Cards','Nav','Charts'];
        const [active,setActive] = React.useState(0);
        return (
          <div className={cx(s.cls.surface2,'p-1 inline-flex gap-1')}>
            {tabs.map((t,i)=>(
              <button key={t} onClick={()=>setActive(i)}
                className={cx(B,'px-4 py-2 text-sm rounded-full', i===active?s.cls.btnPrimary:cx('bg-transparent',s.cls.muted))}>
                {t}</button>))}
          </div>); } },

    { id:'c2-nav-underline-tabs', type:'navigation', subtype:'tabs', title:'Underline tabs', w:1,
      Render:(s)=>{
        const tabs = ['Overview','Activity','Settings'];
        const [active,setActive] = React.useState(0);
        return (
          <div className={cx(s.cls.surface,'px-5 pt-3 w-full max-w-[300px]')}>
            <div className="flex gap-5" style={{borderBottom:'1px solid rgba(128,128,128,.25)'}}>
              {tabs.map((t,i)=>(
                <button key={t} onClick={()=>setActive(i)}
                  className={cx(B,'pb-2.5 text-sm', i===active?'font-bold':cx('font-medium',s.cls.muted))}
                  style={i===active?{borderBottom:`2px solid ${s.cls.accent}`,marginBottom:'-1px',color:s.cls.accent}:undefined}>
                  {t}</button>))}
            </div>
            <div className={cx('py-4 text-sm',s.cls.sub)}>Viewing the {tabs[active]} panel.</div>
          </div>); } },

    { id:'c2-nav-segmented', type:'navigation', subtype:'tabs', title:'Segmented control', w:1,
      Render:(s)=>{
        const segs = ['Day','Week','Month'];
        const [active,setActive] = React.useState(1);
        return (
          <div className={cx(s.cls.surface2,'p-0.5 inline-flex w-full max-w-[260px]')}>
            {segs.map((t,i)=>(
              <button key={t} onClick={()=>setActive(i)}
                className={cx(B,'flex-1 px-3 py-2 text-sm rounded-md', i===active?s.cls.btnPrimary:cx('bg-transparent',s.cls.sub))}>
                {t}</button>))}
          </div>); } },

    { id:'c2-nav-breadcrumb-chevron', type:'navigation', subtype:'breadcrumb', title:'Chevron breadcrumb', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'px-5 py-3 w-full max-w-[440px] flex items-center gap-1.5 flex-wrap text-sm')}>
          {[['Library',false],['Navigation',false],['Breadcrumb',true]].map(([label,cur],i)=>(
            <React.Fragment key={label}>
              {i>0 && <span className={s.cls.muted}><Glyph d="M9 6l6 6-6 6" size={14}/></span>}
              <span className={cur?'font-bold':cx('cursor-pointer',s.cls.muted)} style={cur?{color:s.cls.accent}:undefined}>{label}</span>
            </React.Fragment>))}
        </div>) },

    { id:'c2-nav-steps', type:'navigation', subtype:'breadcrumb', title:'Step progress', w:2,
      Render:(s)=>{
        const steps = ['Account','Workspace','Tokens','Done'];
        const [active,setActive] = React.useState(2);
        return (
          <div className={cx(s.cls.surface,'px-6 py-5 w-full max-w-[460px]')}>
            <div className="flex items-center">
              {steps.map((t,i)=>(
                <React.Fragment key={t}>
                  <div className="flex flex-col items-center gap-1.5 cursor-pointer" onClick={()=>setActive(i)}>
                    <span className={cx(B,'w-8 h-8 rounded-full text-sm font-bold', i<=active?s.cls.btnPrimary:s.cls.surface2)}
                      style={i>active?{color:'inherit'}:undefined}>
                      {i<active ? <Glyph d={G.check} size={15}/> : i+1}</span>
                    <span className={cx('text-[11px]', i<=active?'font-semibold':s.cls.muted)}>{t}</span>
                  </div>
                  {i<steps.length-1 && <div className="flex-1 h-0.5 mx-2 rounded -mt-5" style={{background: i<active?s.cls.accent:'rgba(128,128,128,.25)'}}/>}
                </React.Fragment>))}
            </div>
          </div>); } },
  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();