/* BLOCKS C4 — extra Marketing & Dashboard 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 = [
    /* ---------- MARKETING: HERO ---------- */
    { id:'c4-hero-split', type:'marketing', subtype:'hero', title:'Hero — split', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[560px] p-8 grid md:grid-cols-2 gap-6 items-center')}>
          <div>
            <div className={cx(s.cls.chip,'inline-flex px-3 py-1 text-[11px] font-bold mb-4')}>NEW · v2 RELEASE</div>
            <div className={head(s,'text-3xl font-extrabold leading-tight')}>Ship beautiful UI in one weekend.</div>
            <p className={cx('text-sm mt-3 leading-relaxed',s.cls.sub)}>Forty cohesive style universes, every block designed as one product. Copy, paste, launch.</p>
            <div className="flex gap-3 mt-6">
              <button className={cx(B,s.cls.btnPrimary,'px-5 py-2.5 text-sm')}>Start free<Glyph d={G.arrow} size={15}/></button>
              <button className={cx(B,ghost(s),'px-5 py-2.5 text-sm')}><Glyph d={G.play} size={14} fill="currentColor"/>Demo</button>
            </div>
          </div>
          <Slot label="hero visual" className="w-full h-48"/>
        </div>) },

    { id:'c4-hero-centered', type:'marketing', subtype:'hero', title:'Hero — centered', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[560px] p-10 text-center')}>
          <div className={cx(s.cls.chip,'inline-flex px-3 py-1 text-[11px] font-bold mb-5')}>BACKED BY 12,000 BUILDERS</div>
          <div className={head(s,'text-4xl font-extrabold leading-tight max-w-[440px] mx-auto')}>The design system that builds itself.</div>
          <p className={cx('text-sm mt-4 leading-relaxed max-w-[400px] mx-auto',s.cls.sub)}>Every component, every state, every style — already in tune. Pick a vibe and go.</p>
          <div className="flex gap-3 justify-center mt-7">
            <button className={cx(B,s.cls.btnPrimary,'px-6 py-3 text-sm')}>Get started free</button>
            <button className={cx(B,s.cls.btn,'px-6 py-3 text-sm')}>Browse library</button>
          </div>
          <div className={cx('text-[11px] mt-5',s.cls.muted)}>No credit card · 40 styles · MIT licensed</div>
        </div>) },

    /* ---------- MARKETING: CTA ---------- */
    { id:'c4-cta-banner', type:'marketing', subtype:'cta', title:'CTA — banner', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface2,'w-full max-w-[560px] p-8 flex flex-col sm:flex-row items-center gap-5')}>
          <div className="flex-1 text-center sm:text-left">
            <div className={head(s,'text-2xl font-extrabold')}>Ready to build your empire?</div>
            <p className={cx('text-sm mt-1.5',s.cls.sub)}>Join thousands shipping faster with one unified system.</p>
          </div>
          <button className={cx(B,s.cls.btnPrimary,'px-6 py-3 text-sm whitespace-nowrap')}>Claim your spot<Glyph d={G.arrow} size={15}/></button>
        </div>) },

    { id:'c4-cta-newsletter', type:'marketing', subtype:'cta', title:'CTA — newsletter', w:2,
      Render:(s)=>{
        const [v,setV]=React.useState(''); const [done,setDone]=React.useState(false);
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[480px] p-8 text-center')}>
            <span style={{color:s.cls.accent}} className="inline-flex"><Glyph d={G.bell} size={26}/></span>
            <div className={head(s,'text-2xl font-extrabold mt-3')}>Stay in the loop</div>
            <p className={cx('text-sm mt-1.5 mb-5',s.cls.sub)}>New styles, blocks and tips — once a week, no noise.</p>
            <div className="flex gap-2">
              <input value={v} onChange={e=>setV(e.target.value)} className={cx(s.cls.input,'px-3.5 py-2.5 text-sm flex-1')} placeholder="you@studio.com"/>
              <button onClick={()=>setDone(true)} className={cx(B,s.cls.btnPrimary,'px-5 py-2.5 text-sm')}>
                {done ? <Glyph d={G.check} size={16}/> : 'Subscribe'}</button>
            </div>
            {done && <div className={cx('text-[11px] mt-3',s.cls.muted)}>You're on the list — welcome aboard.</div>}
          </div>); } },

    /* ---------- MARKETING: FEATURES ---------- */
    { id:'c4-features-grid', type:'marketing', subtype:'features', title:'Features — grid', w:2,
      Render:(s)=>{
        const items=[
          [G.star,'Cohesive by default','Every block belongs to one design language.'],
          [G.play,'Live previews','See real components, not screenshots.'],
          [G.check,'Production-ready','Copy clean, accessible markup instantly.'],
          [G.heart,'Loved by teams','12k+ builders ship with Empire UI.'],
        ];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[540px] p-8')}>
            <div className={head(s,'text-2xl font-extrabold text-center')}>Everything in one system</div>
            <div className="grid sm:grid-cols-2 gap-4 mt-6">
              {items.map(([d,t,b])=>(
                <div key={t} className={cx(s.cls.surface2,'p-4')}>
                  <span style={{color:s.cls.accent}} className="inline-flex mb-2"><Glyph d={d} size={20}/></span>
                  <div className="font-bold text-sm">{t}</div>
                  <div className={cx('text-xs mt-1 leading-relaxed',s.cls.sub)}>{b}</div>
                </div>))}
            </div>
          </div>); } },

    { id:'c4-features-list', type:'marketing', subtype:'features', title:'Features — list', w:1,
      Render:(s)=>{
        const items=['40 style universes','Dark & light tuned','Figma + code export','Zero-config theming','Weekly new blocks'];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[320px] p-6')}>
            <div className={head(s,'text-xl font-extrabold')}>Why Empire UI</div>
            <div className="flex flex-col gap-3 mt-5">
              {items.map(f=>(
                <div key={f} className="flex items-center gap-3 text-sm">
                  <span className="inline-flex items-center justify-center w-6 h-6 rounded-full shrink-0"
                    style={{background:s.cls.accent,color:'#fff'}}><Glyph d={G.check} size={13}/></span>
                  <span className="font-medium">{f}</span>
                </div>))}
            </div>
          </div>); } },

    { id:'c4-logos-row', type:'marketing', subtype:'features', title:'Logos — trust row', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-8 text-center')}>
          <div className={cx('text-xs uppercase tracking-[0.18em] font-semibold',s.cls.muted)}>Trusted by teams at</div>
          <div className="flex flex-wrap items-center justify-center gap-3 mt-5">
            {['Northbeam','Loraine','Acme','Vela','Quartz','Helios'].map(n=>(
              <div key={n} className={cx(s.cls.surface2,'px-4 py-2.5 text-sm font-bold opacity-80')}>{n}</div>))}
          </div>
        </div>) },

    /* ---------- DASHBOARD: ANALYTICS ---------- */
    { id:'c4-dash-kpi-row', type:'dashboard', subtype:'analytics', title:'Dashboard — KPI row', w:2,
      Render:(s)=>{
        const kpis=[['Revenue','$48.2k','+12.4%'],['Users','9,318','+4.1%'],['Churn','1.8%','-0.3%'],['MRR','$21.7k','+8.9%']];
        return (
          <div className="w-full max-w-[560px] grid grid-cols-2 sm:grid-cols-4 gap-3">
            {kpis.map(([l,v,d])=>(
              <div key={l} className={cx(s.cls.surface,'p-4')}>
                <div className={cx('text-[11px] uppercase tracking-wide',s.cls.muted)}>{l}</div>
                <div className={head(s,'text-xl font-extrabold mt-1')}>{v}</div>
                <div className={cx(s.cls.chip,'inline-flex mt-2 px-2 py-0.5 text-[10px] font-bold')}>{d}</div>
              </div>))}
          </div>); } },

    { id:'c4-dash-revenue', type:'dashboard', subtype:'analytics', title:'Dashboard — revenue chart', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-6')}>
          <div className="flex items-start justify-between">
            <div>
              <div className={cx('text-sm',s.cls.sub)}>Total revenue</div>
              <div className={head(s,'text-3xl font-extrabold mt-0.5')}>$148,920</div>
            </div>
            <span className={cx(s.cls.chip,'px-2.5 py-1 text-[11px] font-bold')}>+18.2% YTD</span>
          </div>
          <div className="h-40 mt-4 -mx-1"><Spark colors={s.chart}/></div>
          <div className="flex justify-between mt-2 text-[11px]" style={{opacity:.6}}>
            {['Jan','Mar','May','Jul','Sep','Nov'].map(m=><span key={m}>{m}</span>)}
          </div>
        </div>) },

    { id:'c4-dash-ring-stats', type:'dashboard', subtype:'analytics', title:'Dashboard — ring stats', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[260px] p-6 text-center')}>
          <div className={cx('text-sm mb-3',s.cls.sub)}>Goal completion</div>
          <div className="relative inline-flex items-center justify-center">
            <Ring colors={s.chart} value={78} size={120}/>
            <div className="absolute inset-0 flex flex-col items-center justify-center">
              <span className={head(s,'text-2xl font-extrabold')}>78%</span>
              <span className={cx('text-[10px]',s.cls.muted)}>of target</span>
            </div>
          </div>
          <div className="flex justify-around mt-4">
            {[['Won','42'],['Open','12']].map(([l,v])=>(
              <div key={l}><div className="font-bold">{v}</div><div className={cx('text-[11px]',s.cls.muted)}>{l}</div></div>))}
          </div>
        </div>) },

    { id:'c4-dash-progress', type:'dashboard', subtype:'analytics', title:'Dashboard — progress bars', w:1,
      Render:(s)=>{
        const rows=[['Design',82],['Engineering',64],['Marketing',47],['Sales',91]];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[300px] p-6')}>
            <div className={head(s,'text-lg font-extrabold mb-4')}>Team capacity</div>
            <div className="flex flex-col gap-4">
              {rows.map(([l,p])=>(
                <div key={l}>
                  <div className="flex justify-between text-sm mb-1.5">
                    <span className="font-medium">{l}</span><span className={s.cls.muted}>{p}%</span>
                  </div>
                  <div className="h-2 rounded-full overflow-hidden" style={{background:'rgba(128,128,128,.25)'}}>
                    <div className="h-full rounded-full" style={{width:`${p}%`,background:s.cls.accent}}/>
                  </div>
                </div>))}
            </div>
          </div>); } },

    /* ---------- DASHBOARD: ACTIVITY ---------- */
    { id:'c4-dash-activity-feed', type:'dashboard', subtype:'activity', title:'Dashboard — activity feed', w:1,
      Render:(s)=>{
        const feed=[
          ['Mara','published a new style','2m'],
          ['Diego','closed deal · $4.2k','18m'],
          ['Vela','invited 3 teammates','1h'],
          ['System','deploy succeeded','3h'],
        ];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[320px] p-6')}>
            <div className={head(s,'text-lg font-extrabold mb-4')}>Recent activity</div>
            <div className="flex flex-col gap-4">
              {feed.map(([who,what,t],i)=>(
                <div key={i} className="flex items-start gap-3">
                  <Slot label="" className="w-8 h-8 rounded-full shrink-0"/>
                  <div className="flex-1 text-sm leading-tight">
                    <span className="font-semibold">{who}</span> <span className={s.cls.sub}>{what}</span>
                    <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>{t} ago</div>
                  </div>
                </div>))}
            </div>
          </div>); } },

    { id:'c4-dash-notifications', type:'dashboard', subtype:'activity', title:'Dashboard — notifications', w:1,
      Render:(s)=>{
        const list=[
          [G.bell,'New comment on Pricing card','now',true],
          [G.heart,'Your style got 24 likes','12m',true],
          [G.check,'Build passed on main','1h',false],
        ];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[320px] p-5')}>
            <div className="flex items-center justify-between mb-4">
              <div className={head(s,'text-lg font-extrabold')}>Notifications</div>
              <span className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold')}>2 new</span>
            </div>
            <div className="flex flex-col gap-2">
              {list.map(([d,t,when,unread],i)=>(
                <div key={i} className={cx(s.cls.surface2,'p-3 flex items-center gap-3')}>
                  <span style={{color:s.cls.accent}} className="inline-flex shrink-0"><Glyph d={d} size={17}/></span>
                  <div className="flex-1 text-sm leading-tight">{t}<div className={cx('text-[11px] mt-0.5',s.cls.muted)}>{when}</div></div>
                  {unread && <span className="w-2 h-2 rounded-full shrink-0" style={{background:s.cls.accent}}/>}
                </div>))}
            </div>
          </div>); } },

    { id:'c4-dash-tasks', type:'dashboard', subtype:'activity', title:'Dashboard — task list', w:1,
      Render:(s)=>{
        const [done,setDone]=React.useState({1:true});
        const tasks=['Finalize Q3 roadmap','Review pull request #482','Ship glassmorphism pack','Email new subscribers'];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[320px] p-6')}>
            <div className="flex items-center justify-between mb-4">
              <div className={head(s,'text-lg font-extrabold')}>Today's tasks</div>
              <span className={cx('text-[11px]',s.cls.muted)}>{Object.values(done).filter(Boolean).length}/{tasks.length}</span>
            </div>
            <div className="flex flex-col gap-2.5">
              {tasks.map((t,i)=>{
                const on=!!done[i];
                return (
                  <button key={i} onClick={()=>setDone(p=>({...p,[i]:!p[i]}))} className="flex items-center gap-3 text-left">
                    <span className="inline-flex items-center justify-center w-5 h-5 rounded-md shrink-0 transition"
                      style={{background:on?s.cls.accent:'transparent',border:`1.5px solid ${on?s.cls.accent:'rgba(128,128,128,.5)'}`,color:'#fff'}}>
                      {on && <Glyph d={G.check} size={12}/>}</span>
                    <span className={cx('text-sm',on?'line-through opacity-50':'font-medium')}>{t}</span>
                  </button>);
              })}
            </div>
          </div>); } },

    { id:'c4-dash-leaderboard', type:'dashboard', subtype:'activity', title:'Dashboard — leaderboard', w:1,
      Render:(s)=>{
        const rows=[['Mara Okonkwo','4,820'],['Diego Santamaría','4,210'],['Vela Feraru','3,995'],['Helios Park','3,540']];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[320px] p-6')}>
            <div className={head(s,'text-lg font-extrabold mb-4')}>Top contributors</div>
            <div className="flex flex-col gap-3">
              {rows.map(([name,pts],i)=>(
                <div key={name} className="flex items-center gap-3">
                  {i===0
                    ? <span className="inline-flex items-center justify-center w-6 h-6 rounded-full text-[11px] font-extrabold shrink-0" style={{background:s.cls.accent,color:'#fff'}}>1</span>
                    : <span className={cx(s.cls.chip,'inline-flex items-center justify-center w-6 h-6 rounded-full text-[11px] font-extrabold shrink-0')}>{i+1}</span>}
                  <Slot label="" className="w-8 h-8 rounded-full shrink-0"/>
                  <span className="flex-1 text-sm font-medium truncate">{name}</span>
                  <span className={cx('text-sm font-bold',s.cls.glow)}>{pts}</span>
                </div>))}
            </div>
          </div>); } },
  ];
  blocks.forEach(b=>window.BLOCKS.push(b));
})();