/* BLOCKS E (marketing) — style-agnostic hero / cta / features sections */
(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 sw=(s,i,fb)=>(s.swatch && s.swatch[i])||fb||s.cls.accent;

  const blocks=[

    /* ============================ HERO ============================ */

    // 1 — centered hero
    { id:'eM-hero-centered', type:'marketing', subtype:'hero', title:'Centered hero', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-10 text-center')}>
          <span className={cx(B,s.cls.chip,'px-3 py-1 text-[11px] font-medium mb-5')}>✦ New · v2 just shipped</span>
          <h1 className={head(s,'text-3xl font-extrabold leading-tight')}>Ship interfaces your users remember</h1>
          <p className={cx('mt-3 text-sm leading-relaxed',s.cls.sub)}>A component system that turns rough ideas into polished products — no design debt, no rewrites.</p>
          <div className="mt-6 flex items-center justify-center gap-3">
            <button className={cx(B,s.cls.btnPrimary,'px-5 py-2.5 text-sm font-semibold')}>Start building <Glyph d={G.arrow} size={15}/></button>
            <button className={cx(B,ghost(s),'px-5 py-2.5 text-sm font-semibold')}>Live demo</button>
          </div>
          <div className={cx('mt-5 text-[11px]',s.cls.muted)}>No credit card · Free forever tier</div>
        </div>) },

    // 2 — split hero w/ screenshot
    { id:'eM-hero-split', type:'marketing', subtype:'hero', title:'Split hero + screenshot', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-7 grid grid-cols-1 sm:grid-cols-2 gap-6 items-center')}>
          <div>
            <span className={cx(B,s.cls.chip,'px-2.5 py-1 text-[11px] font-medium mb-3')}>Built for teams</span>
            <h1 className={head(s,'text-2xl font-extrabold leading-tight')}>Design once. Ship everywhere.</h1>
            <p className={cx('mt-2.5 text-[13px] leading-relaxed',s.cls.sub)}>Hand off pixel-perfect components straight to production.</p>
            <div className="mt-5 flex gap-2.5">
              <button className={cx(B,s.cls.btnPrimary,'px-4 py-2 text-[13px] font-semibold')}>Get started</button>
              <button className={cx(B,ghost(s),'px-4 py-2 text-[13px] font-semibold')}>Docs</button>
            </div>
          </div>
          <Slot label="product screenshot" className="w-full h-40"/>
        </div>) },

    // 3 — hero w/ email capture
    { id:'eM-hero-email', type:'marketing', subtype:'hero', title:'Hero + email capture', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-10 text-center')}>
          <h1 className={head(s,'text-3xl font-extrabold leading-tight')}>Join 40,000 builders</h1>
          <p className={cx('mt-3 text-sm leading-relaxed',s.cls.sub)}>Get early access plus a weekly drop of patterns, templates and tips.</p>
          <div className="mt-6 flex gap-2 max-w-sm mx-auto">
            <input className={cx(s.cls.input,'flex-1 px-3.5 py-2.5 text-sm')} placeholder="you@company.com"/>
            <button className={cx(B,s.cls.btnPrimary,'px-5 py-2.5 text-sm font-semibold')}>Request access</button>
          </div>
          <div className={cx('mt-3 text-[11px]',s.cls.muted)}>We email once a week. Unsubscribe anytime.</div>
        </div>) },

    // 4 — hero w/ stat band
    { id:'eM-hero-stats', type:'marketing', subtype:'hero', title:'Hero + stat band', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-9 text-center')}>
          <h1 className={head(s,'text-3xl font-extrabold leading-tight')}>The platform engineers trust</h1>
          <p className={cx('mt-3 text-sm leading-relaxed',s.cls.sub)}>Powering products from seed-stage to public companies.</p>
          <button className={cx(B,s.cls.btnPrimary,'mt-6 px-5 py-2.5 text-sm font-semibold')}>Talk to sales <Glyph d={G.arrow} size={15}/></button>
          <div className="mt-8 grid grid-cols-3 gap-4">
            {[['99.99%','Uptime SLA'],['2.4M','Daily requests'],['180+','Countries']].map((x,i)=>(
              <div key={i}>
                <div className={head(s,'text-2xl font-extrabold')} style={{color:sw(s,i)}}>{x[0]}</div>
                <div className={cx('text-[11px] mt-1',s.cls.muted)}>{x[1]}</div>
              </div>))}
          </div>
        </div>) },

    // 5 — hero w/ logo cloud
    { id:'eM-hero-logos', type:'marketing', subtype:'hero', title:'Hero + logo cloud', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-9 text-center')}>
          <h1 className={head(s,'text-2xl font-extrabold leading-tight')}>The toolkit behind great products</h1>
          <p className={cx('mt-2.5 text-[13px] leading-relaxed',s.cls.sub)}>From first commit to global scale.</p>
          <button className={cx(B,s.cls.btnPrimary,'mt-5 px-5 py-2.5 text-sm font-semibold')}>Start free</button>
          <div className={cx('mt-7 text-[10px] uppercase tracking-widest',s.cls.muted)}>Trusted by</div>
          <div className="mt-3 grid grid-cols-4 gap-2.5">
            {['Northwind','Acme','Vertex','Lumen','Orbit','Halcyon','Nimbus','Forge'].map((n,i)=>(
              <div key={i} className={cx(s.cls.surface2,'h-9 flex items-center justify-center text-[11px] font-semibold',s.cls.muted)}>{n}</div>))}
          </div>
        </div>) },

    // 6 — gradient / announcement hero
    { id:'eM-hero-gradient', type:'marketing', subtype:'hero', title:'Gradient announcement hero', w:2,
      Render:(s)=>(
        <div className="w-full max-w-[520px] p-10 text-center rounded-2xl overflow-hidden relative"
             style={{background:`linear-gradient(135deg, ${sw(s,0)} 0%, ${sw(s,2,s.cls.accent)} 100%)`, color:'#fff'}}>
          <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-semibold mb-5"
                style={{background:'rgba(255,255,255,.18)'}}>🚀 Announcing Empire 3.0</span>
          <h1 className="text-3xl font-extrabold leading-tight">The fastest way to launch</h1>
          <p className="mt-3 text-sm leading-relaxed" style={{color:'rgba(255,255,255,.85)'}}>Everything you need to go from prototype to production in a single afternoon.</p>
          <div className="mt-6 flex items-center justify-center gap-3">
            <button className={cx(B,'px-5 py-2.5 text-sm font-bold rounded-lg')} style={{background:'#fff',color:sw(s,0)}}>Claim your spot</button>
            <button className={cx(B,'px-5 py-2.5 text-sm font-semibold rounded-lg')} style={{border:'1px solid rgba(255,255,255,.45)',color:'#fff'}}>Read the post</button>
          </div>
        </div>) },

    /* ============================= CTA ============================= */

    // 1 — full CTA banner
    { id:'eM-cta-banner', type:'marketing', subtype:'cta', title:'Full CTA banner', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-9 text-center')}>
          <h2 className={head(s,'text-2xl font-extrabold leading-tight')}>Ready to ship faster?</h2>
          <p className={cx('mt-2.5 text-sm',s.cls.sub)}>Join thousands of teams building with Empire UI today.</p>
          <div className="mt-6 flex items-center justify-center gap-3">
            <button className={cx(B,s.cls.btnPrimary,'px-6 py-2.5 text-sm font-semibold')}>Create account</button>
            <button className={cx(B,ghost(s),'px-6 py-2.5 text-sm font-semibold')}>Book a demo</button>
          </div>
        </div>) },

    // 2 — split CTA
    { id:'eM-cta-split', type:'marketing', subtype:'cta', title:'Split CTA', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-7 flex items-center justify-between gap-5 flex-wrap')}>
          <div className="min-w-[200px]">
            <h2 className={head(s,'text-xl font-extrabold')}>Start your free trial</h2>
            <p className={cx('mt-1 text-[13px]',s.cls.sub)}>14 days, full access, no card needed.</p>
          </div>
          <button className={cx(B,s.cls.btnPrimary,'px-6 py-2.5 text-sm font-semibold shrink-0')}>Get started <Glyph d={G.arrow} size={15}/></button>
        </div>) },

    // 3 — newsletter CTA
    { id:'eM-cta-newsletter', type:'marketing', subtype:'cta', title:'Newsletter CTA', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-8')}>
          <div className="flex items-start gap-3">
            <span className={cx(B,'w-10 h-10 rounded-xl shrink-0')} style={{background:s.cls.accent+'22',color:s.cls.accent}}><Glyph d={G.bell} size={18}/></span>
            <div>
              <h2 className={head(s,'text-lg font-extrabold')}>The weekly dispatch</h2>
              <p className={cx('mt-1 text-[13px]',s.cls.sub)}>One thoughtful email. Patterns, releases, and behind-the-scenes.</p>
            </div>
          </div>
          <div className="mt-5 flex gap-2">
            <input className={cx(s.cls.input,'flex-1 px-3.5 py-2.5 text-sm')} placeholder="Email address"/>
            <button className={cx(B,s.cls.btnPrimary,'px-5 py-2.5 text-sm font-semibold')}>Subscribe</button>
          </div>
        </div>) },

    // 4 — card CTA grid (2)
    { id:'eM-cta-cards', type:'marketing', subtype:'cta', title:'Card CTA grid', w:2,
      Render:(s)=>(
        <div className="w-full max-w-[520px] grid grid-cols-1 sm:grid-cols-2 gap-3">
          {[['For developers','Drop-in components, fully typed.','Read docs'],['For designers','Tokens that map straight to code.','Open kit']].map((c,i)=>(
            <div key={i} className={cx(s.cls.surface,'p-6 flex flex-col')}>
              <span className={cx(B,'w-9 h-9 rounded-lg mb-3')} style={{background:sw(s,i)+'22',color:sw(s,i)}}><Glyph d={i?G.star:G.check} size={16}/></span>
              <h3 className={cx('text-sm font-bold',s.cls.text)}>{c[0]}</h3>
              <p className={cx('mt-1 text-[12px] leading-relaxed flex-1',s.cls.sub)}>{c[1]}</p>
              <button className={cx(B,ghost(s),'mt-4 px-3.5 py-2 text-[12px] font-semibold self-start')}>{c[2]} <Glyph d={G.arrow} size={13}/></button>
            </div>))}
        </div>) },

    // 5 — download / app CTA
    { id:'eM-cta-download', type:'marketing', subtype:'cta', title:'Download / app CTA', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-8 grid grid-cols-1 sm:grid-cols-2 gap-6 items-center')}>
          <div>
            <h2 className={head(s,'text-xl font-extrabold leading-tight')}>Take Empire anywhere</h2>
            <p className={cx('mt-2 text-[13px]',s.cls.sub)}>Native apps for iOS and Android. Sync in real time.</p>
            <div className="mt-5 flex gap-2.5">
              <button className={cx(B,s.cls.btn,'px-4 py-2.5 text-[12px] font-semibold')}> App Store</button>
              <button className={cx(B,s.cls.btn,'px-4 py-2.5 text-[12px] font-semibold')}>▶ Google Play</button>
            </div>
          </div>
          <Slot label="app preview" className="w-full h-36"/>
        </div>) },

    // 6 — sale / countdown CTA
    { id:'eM-cta-countdown', type:'marketing', subtype:'cta', title:'Sale countdown CTA', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-8 text-center')}>
          <span className={cx(B,s.cls.chip,'px-3 py-1 text-[11px] font-semibold mb-4')}>🔥 Limited offer · 40% off</span>
          <h2 className={head(s,'text-2xl font-extrabold leading-tight')}>Lifetime access ends soon</h2>
          <div className="mt-5 flex items-center justify-center gap-2.5">
            {[['02','Days'],['11','Hrs'],['46','Min'],['09','Sec']].map((t,i)=>(
              <div key={i} className={cx(s.cls.surface2,'px-3 py-2 rounded-lg min-w-[52px]')}>
                <div className={cx('text-lg font-extrabold tabular-nums',s.cls.text)} style={{color:s.cls.accent}}>{t[0]}</div>
                <div className={cx('text-[10px] uppercase tracking-wide',s.cls.muted)}>{t[1]}</div>
              </div>))}
          </div>
          <button className={cx(B,s.cls.btnPrimary,'mt-6 px-6 py-2.5 text-sm font-bold')}>Claim the deal</button>
        </div>) },

    /* =========================== FEATURES =========================== */

    // 1 — 3-up feature grid
    { id:'eM-feat-grid', type:'marketing', subtype:'features', title:'3-up feature grid', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-8')}>
          <div className="text-center mb-6">
            <h2 className={head(s,'text-2xl font-extrabold')}>Everything in the box</h2>
            <p className={cx('mt-2 text-[13px]',s.cls.sub)}>The essentials, done right from day one.</p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            {[[G.check,'Type-safe','End-to-end types across the stack.'],[G.star,'Themeable','Swap brand tokens in seconds.'],[G.bell,'Realtime','Live updates with zero config.']].map((f,i)=>(
              <div key={i}>
                <span className={cx(B,'w-10 h-10 rounded-xl mb-3')} style={{background:sw(s,i)+'22',color:sw(s,i)}}><Glyph d={f[0]} size={18}/></span>
                <h3 className={cx('text-sm font-bold',s.cls.text)}>{f[1]}</h3>
                <p className={cx('mt-1 text-[12px] leading-relaxed',s.cls.sub)}>{f[2]}</p>
              </div>))}
          </div>
        </div>) },

    // 2 — alternating feature row w/ Slot
    { id:'eM-feat-row', type:'marketing', subtype:'features', title:'Alternating feature row', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-7 grid grid-cols-1 sm:grid-cols-2 gap-6 items-center')}>
          <Slot label="feature visual" className="w-full h-40"/>
          <div>
            <span className={cx(B,s.cls.chip,'px-2.5 py-1 text-[11px] font-medium mb-3')}>Automation</span>
            <h2 className={head(s,'text-xl font-extrabold leading-tight')}>Let the workflow run itself</h2>
            <p className={cx('mt-2.5 text-[13px] leading-relaxed',s.cls.sub)}>Trigger pipelines on any event and ship without lifting a finger.</p>
            <ul className="mt-4 space-y-2">
              {['Visual rule builder','Branch on conditions','Audit every run'].map((t,i)=>(
                <li key={i} className={cx('flex items-center gap-2 text-[12px]',s.cls.sub)}>
                  <Glyph d={G.check} size={14}/> {t}
                </li>))}
            </ul>
          </div>
        </div>) },

    // 3 — icon feature list
    { id:'eM-feat-list', type:'marketing', subtype:'features', title:'Icon feature list', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-8')}>
          <h2 className={head(s,'text-xl font-extrabold mb-5')}>Why teams switch</h2>
          <div className="space-y-4">
            {[[G.star,'Polished by default','Every component ships accessible and responsive.'],[G.arrow,'Migrate in minutes','Codemods move you over without a rewrite.'],[G.heart,'Loved by users','A 4.9 average across 1,200+ reviews.']].map((f,i)=>(
              <div key={i} className="flex items-start gap-3">
                <span className={cx(B,'w-9 h-9 rounded-lg shrink-0')} style={{background:sw(s,i)+'22',color:sw(s,i)}}><Glyph d={f[0]} size={16}/></span>
                <div>
                  <h3 className={cx('text-[13px] font-bold',s.cls.text)}>{f[1]}</h3>
                  <p className={cx('mt-0.5 text-[12px] leading-relaxed',s.cls.sub)}>{f[2]}</p>
                </div>
              </div>))}
          </div>
        </div>) },

    // 4 — comparison checklist
    { id:'eM-feat-compare', type:'marketing', subtype:'features', title:'Comparison checklist', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-8')}>
          <h2 className={head(s,'text-xl font-extrabold text-center mb-5')}>Empire vs. the rest</h2>
          <div className="grid grid-cols-3 text-[12px]">
            <div className={cx('font-semibold pb-2',s.cls.muted)}>Feature</div>
            <div className={cx('font-semibold pb-2 text-center',s.cls.text)} style={{color:s.cls.accent}}>Empire</div>
            <div className={cx('font-semibold pb-2 text-center',s.cls.muted)}>Others</div>
            {[['Design tokens',1,0],['Realtime sync',1,0],['Free tier',1,1],['Self-host',1,0]].map((r,i)=>(
              <React.Fragment key={i}>
                <div className={cx('py-2 border-t',s.cls.sub)} style={{borderColor:s.cls.accent+'18'}}>{r[0]}</div>
                <div className="py-2 border-t flex justify-center" style={{borderColor:s.cls.accent+'18',color:s.cls.accent}}>{r[1]?<Glyph d={G.check} size={15}/>:'—'}</div>
                <div className={cx('py-2 border-t flex justify-center',s.cls.muted)} style={{borderColor:s.cls.accent+'18'}}>{r[2]?<Glyph d={G.check} size={15}/>:'—'}</div>
              </React.Fragment>))}
          </div>
        </div>) },

    // 5 — stats / metrics band
    { id:'eM-feat-metrics', type:'marketing', subtype:'features', title:'Stats metrics band', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[520px] p-8')}>
          <h2 className={head(s,'text-xl font-extrabold text-center')}>Numbers that compound</h2>
          <p className={cx('mt-2 text-[13px] text-center',s.cls.sub)}>Results our customers see in the first quarter.</p>
          <div className="mt-6 grid grid-cols-2 sm:grid-cols-4 gap-4 text-center">
            {[['3.2x','Faster ship'],['−61%','Bug rate'],['12k','Hrs saved'],['4.9★','Avg rating']].map((m,i)=>(
              <div key={i} className={cx(s.cls.surface2,'py-4 rounded-xl')}>
                <div className={head(s,'text-2xl font-extrabold')} style={{color:sw(s,i)}}>{m[0]}</div>
                <div className={cx('text-[11px] mt-1',s.cls.muted)}>{m[1]}</div>
              </div>))}
          </div>
        </div>) },

    // 6 — FAQ accordion
    { id:'eM-feat-faq', type:'marketing', subtype:'features', title:'FAQ accordion', w:2,
      Render:(s)=>{
        const [open,setOpen]=React.useState(0);
        const qs=[
          ['Is there a free plan?','Yes — the free tier includes every core component with no time limit.'],
          ['Can I self-host?','Absolutely. Self-hosting is available on every paid plan.'],
          ['Do you offer support?','Email support on all plans, with priority and Slack on Pro.'],
          ['How does billing work?','Monthly or annual. Cancel any time, prorated to the day.'],
        ];
        return (
          <div className={cx(s.cls.surface,'w-full max-w-[520px] p-8')}>
            <h2 className={head(s,'text-xl font-extrabold mb-5')}>Frequently asked</h2>
            <div className="space-y-2">
              {qs.map((q,i)=>(
                <div key={i} className={cx(s.cls.surface2,'rounded-lg overflow-hidden')}>
                  <button onClick={()=>setOpen(open===i?-1:i)} className={cx('w-full flex items-center justify-between gap-3 px-4 py-3 text-left text-[13px] font-semibold',s.cls.text)}>
                    {q[0]}
                    <span style={{transform:open===i?'rotate(45deg)':'none',transition:'transform .15s',color:s.cls.accent}}><Glyph d={G.plus} size={15}/></span>
                  </button>
                  {open===i && <div className={cx('px-4 pb-3.5 text-[12px] leading-relaxed',s.cls.sub)}>{q[1]}</div>}
                </div>))}
            </div>
          </div>); } },

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