/* BLOCKS F (marketing) — premium, well-spaced, style-agnostic hero / cta / features */
(function(){
  const { cx, Slot, Spark, Bars, 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 acc=s=>s.cls.accent||(s.swatch&&s.swatch[0]);

  const blocks=[

    /* ============================ HERO (8) ============================ */

    // 1 — centered hero
    { id:'fM-hero-centered', type:'marketing', subtype:'hero', title:'Centered hero', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-10 text-center')}>
          <span className={cx(B,s.cls.chip,'px-3 py-1 text-[11px] font-medium mb-5')}>✦ Trusted by 9,000+ teams</span>
          <h1 className={head(s,'text-3xl font-extrabold leading-tight')}>Build products people can't put down</h1>
          <p className={cx('mt-3 text-sm leading-relaxed max-w-md mx-auto',s.cls.sub)}>A component system that turns rough ideas into polished products — no design debt, no rewrites.</p>
          <div className="mt-7 flex items-center justify-center gap-3">
            <button className={cx(B,s.cls.btnPrimary,'px-5 py-2.5 text-sm font-semibold')}>Start free <Glyph d={G.arrow} size={15}/></button>
            <button className={cx(B,ghost(s),'px-5 py-2.5 text-sm font-semibold')}>Watch demo</button>
          </div>
          <div className={cx('mt-5 text-[11px]',s.cls.muted)}>No credit card · Free forever tier</div>
        </div>) },

    // 2 — split hero + screenshot
    { id:'fM-hero-split', type:'marketing', subtype:'hero', title:'Split hero + screenshot', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-8 grid grid-cols-1 sm:grid-cols-2 gap-7 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-3 text-[13px] leading-relaxed',s.cls.sub)}>Hand off pixel-perfect components straight to production — no translation lost.</p>
            <div className="mt-6 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')}>Read docs</button>
            </div>
          </div>
          <Slot label="screenshot" className="w-full h-44"/>
        </div>) },

    // 3 — hero + email capture
    { id:'fM-hero-email', type:'marketing', subtype:'hero', title:'Hero + email capture', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] 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 max-w-md mx-auto',s.cls.sub)}>Get early access plus a weekly drop of patterns, templates and behind-the-scenes notes.</p>
          <div className="mt-7 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)}>One email a week. Unsubscribe anytime.</div>
        </div>) },

    // 4 — hero + stat band (3 stats)
    { id:'fM-hero-stats', type:'marketing', subtype:'hero', title:'Hero + stat band', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] 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 max-w-md mx-auto',s.cls.sub)}>Powering products from seed-stage startups 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:acc(s)}}>{x[0]}</div>
                <div className={cx('text-[11px] mt-1',s.cls.muted)}>{x[1]}</div>
              </div>))}
          </div>
        </div>) },

    // 5 — hero + logo cloud
    { id:'fM-hero-logos', type:'marketing', subtype:'hero', title:'Hero + logo cloud', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-9 text-center')}>
          <h1 className={head(s,'text-2xl font-extrabold leading-tight')}>The toolkit behind great products</h1>
          <p className={cx('mt-3 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-8 text-[10px] uppercase tracking-widest',s.cls.muted)}>Trusted by industry leaders</div>
          <div className="mt-4 grid grid-cols-4 gap-2.5">
            {[0,1,2,3,4,5,6,7].map(i=>(<Slot key={i} label="logo" className="h-9"/>))}
          </div>
        </div>) },

    // 6 — gradient announcement hero
    { id:'fM-hero-gradient', type:'marketing', subtype:'hero', title:'Gradient announcement hero', w:2,
      Render:(s)=>(
        <div className="w-full max-w-[540px] p-10 text-center rounded-2xl overflow-hidden relative"
             style={{background:`linear-gradient(135deg, ${acc(s)} 0%, ${acc(s)}b3 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 max-w-md mx-auto" style={{color:'rgba(255,255,255,.85)'}}>Everything you need to go from prototype to production in a single afternoon.</p>
          <div className="mt-7 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:acc(s)}}>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>) },

    // 7 — video-bg hero (Slot + play)
    { id:'fM-hero-video', type:'marketing', subtype:'hero', title:'Video-bg hero', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] overflow-hidden')}>
          <div className="relative">
            <Slot label="video poster" className="w-full h-56"/>
            <button className={cx(B,'absolute inset-0 m-auto w-14 h-14 rounded-full')}
                    style={{background:acc(s),color:'#fff',boxShadow:'0 8px 30px rgba(0,0,0,.25)'}}>
              <Glyph d={G.play} size={22}/></button>
          </div>
          <div className="p-8 text-center">
            <h1 className={head(s,'text-2xl font-extrabold leading-tight')}>See it in ninety seconds</h1>
            <p className={cx('mt-3 text-[13px] leading-relaxed max-w-md mx-auto',s.cls.sub)}>A quick tour of how teams design, build and ship with Empire UI.</p>
            <button className={cx(B,s.cls.btnPrimary,'mt-6 px-5 py-2.5 text-sm font-semibold')}>Get started free</button>
          </div>
        </div>) },

    // 8 — dual-CTA hero
    { id:'fM-hero-dual', type:'marketing', subtype:'hero', title:'Dual-CTA hero', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-10 text-center')}>
          <span className={cx(B,s.cls.chip,'px-3 py-1 text-[11px] font-medium mb-5')}>★ 4.9 average · 1,200 reviews</span>
          <h1 className={head(s,'text-3xl font-extrabold leading-tight')}>Two paths. One great outcome.</h1>
          <p className={cx('mt-3 text-sm leading-relaxed max-w-md mx-auto',s.cls.sub)}>Dive in solo with the free tier, or bring your team and scale with Enterprise.</p>
          <div className="mt-7 flex flex-col sm:flex-row items-center justify-center gap-3">
            <button className={cx(B,s.cls.btnPrimary,'w-full sm:w-auto px-6 py-2.5 text-sm font-semibold')}>Start building <Glyph d={G.arrow} size={15}/></button>
            <button className={cx(B,ghost(s),'w-full sm:w-auto px-6 py-2.5 text-sm font-semibold')}>Talk to sales</button>
          </div>
        </div>) },

    /* ============================= CTA (4) ============================= */

    // 1 — full-width banner
    { id:'fM-cta-banner', type:'marketing', subtype:'cta', title:'Full-width CTA banner', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-9 text-center')}>
          <h2 className={head(s,'text-2xl font-extrabold leading-tight')}>Ready to ship faster?</h2>
          <p className={cx('mt-3 text-sm max-w-md mx-auto',s.cls.sub)}>Join thousands of teams building with Empire UI today.</p>
          <div className="mt-7 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 (text + button)
    { id:'fM-cta-split', type:'marketing', subtype:'cta', title:'Split CTA', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-8 flex items-center justify-between gap-6 flex-wrap')}>
          <div className="min-w-[220px]">
            <h2 className={head(s,'text-xl font-extrabold')}>Start your free trial</h2>
            <p className={cx('mt-1.5 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 (input)
    { id:'fM-cta-newsletter', type:'marketing', subtype:'cta', title:'Newsletter CTA', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-8')}>
          <div className="flex items-start gap-3">
            <span className={cx(B,'w-10 h-10 rounded-xl shrink-0')} style={{background:acc(s)+'22',color:acc(s)}}><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-6 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 — countdown / sale CTA (4 time boxes)
    { id:'fM-cta-countdown', type:'marketing', subtype:'cta', title:'Sale countdown CTA', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] 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-6 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-[54px]')}>
                <div className="text-lg font-extrabold tabular-nums" style={{color:acc(s)}}>{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-7 px-6 py-2.5 text-sm font-bold')}>Claim the deal</button>
        </div>) },

    /* =========================== FEATURES (6) =========================== */

    // 1 — 3-up icon grid
    { id:'fM-feat-grid', type:'marketing', subtype:'features', title:'3-up icon grid', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-8')}>
          <div className="text-center mb-7">
            <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-5">
            {[[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:acc(s)+'22',color:acc(s)}}><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 media row (Slot + text)
    { id:'fM-feat-row', type:'marketing', subtype:'features', title:'Alternating media row', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-8 grid grid-cols-1 sm:grid-cols-2 gap-7 items-center')}>
          <Slot label="feature visual" className="w-full h-44"/>
          <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-3 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.5">
              {['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)}>
                  <span style={{color:acc(s)}}><Glyph d={G.check} size={14}/></span> {t}
                </li>))}
            </ul>
          </div>
        </div>) },

    // 3 — bento grid (mixed sizes)
    { id:'fM-feat-bento', type:'marketing', subtype:'features', title:'Bento grid', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-8')}>
          <h2 className={head(s,'text-xl font-extrabold mb-5')}>One platform, every angle</h2>
          <div className="grid grid-cols-2 gap-3">
            <div className={cx(s.cls.surface2,'col-span-2 p-5 rounded-xl flex items-center gap-4')}>
              <span className={cx(B,'w-11 h-11 rounded-xl shrink-0')} style={{background:acc(s)+'22',color:acc(s)}}><Glyph d={G.star} size={20}/></span>
              <div>
                <h3 className={cx('text-sm font-bold',s.cls.text)}>Polished by default</h3>
                <p className={cx('mt-1 text-[12px] leading-relaxed',s.cls.sub)}>Accessible, responsive components straight out of the box.</p>
              </div>
            </div>
            {[[G.arrow,'Migrate fast','Codemods, not rewrites.'],[G.heart,'Loved by users','4.9 across 1,200 reviews.']].map((f,i)=>(
              <div key={i} className={cx(s.cls.surface2,'p-5 rounded-xl')}>
                <span className={cx(B,'w-9 h-9 rounded-lg mb-3')} style={{background:acc(s)+'22',color:acc(s)}}><Glyph d={f[0]} size={16}/></span>
                <h3 className={cx('text-[13px] 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 className={cx(s.cls.surface2,'col-span-2 p-5 rounded-xl')}>
              <Slot label="dashboard preview" className="w-full h-28"/>
            </div>
          </div>
        </div>) },

    // 4 — icon checklist
    { id:'fM-feat-checklist', type:'marketing', subtype:'features', title:'Icon checklist', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-8')}>
          <h2 className={head(s,'text-xl font-extrabold mb-5')}>What's included on every plan</h2>
          <ul className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3.5">
            {['Unlimited components','Dark mode tokens','Figma kit + codemods','Realtime collaboration','Self-host option','Priority email support','99.99% uptime SLA','SOC 2 Type II'].map((t,i)=>(
              <li key={i} className={cx('flex items-center gap-2.5 text-[13px]',s.cls.text)}>
                <span className={cx(B,'w-5 h-5 rounded-full shrink-0')} style={{background:acc(s)+'22',color:acc(s)}}><Glyph d={G.check} size={12}/></span>
                {t}
              </li>))}
          </ul>
        </div>) },

    // 5 — comparison (us vs them)
    { id:'fM-feat-compare', type:'marketing', subtype:'features', title:'Comparison us vs them', w:2,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-8')}>
          <h2 className={head(s,'text-xl font-extrabold text-center mb-6')}>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="font-semibold pb-2 text-center" style={{color:acc(s)}}>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],['SOC 2',1,0]].map((r,i)=>(
              <React.Fragment key={i}>
                <div className={cx('py-2.5 border-t',s.cls.sub)} style={{borderColor:acc(s)+'18'}}>{r[0]}</div>
                <div className="py-2.5 border-t flex justify-center" style={{borderColor:acc(s)+'18',color:acc(s)}}>{r[1]?<Glyph d={G.check} size={15}/>:'✕'}</div>
                <div className={cx('py-2.5 border-t flex justify-center',s.cls.muted)} style={{borderColor:acc(s)+'18'}}>{r[2]?<Glyph d={G.check} size={15}/>:'✕'}</div>
              </React.Fragment>))}
          </div>
        </div>) },

    // 6 — FAQ accordion (useState open)
    { id:'fM-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-[540px] 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.5 text-left text-[13px] font-semibold',s.cls.text)}>
                    {q[0]}
                    <span style={{transform:open===i?'rotate(45deg)':'none',transition:'transform .15s',color:acc(s)}}><Glyph d={G.plus} size={15}/></span>
                  </button>
                  {open===i && <div className={cx('px-4 pb-4 text-[12px] leading-relaxed',s.cls.sub)}>{q[1]}</div>}
                </div>))}
            </div>
          </div>); } },

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