/* BLOCKS F (cards: pricing + profile) — style-agnostic Cards blocks for Empire UI v2 */
(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 Tick=({s})=>(<Glyph d={G.check} size={15} style={{color:s.cls.accent}}/>);
  const Feat=(s,f,on=true)=>(
    <div key={f} className={cx('flex items-center gap-2.5 text-[12.5px]',on?s.cls.text:s.cls.muted)}>
      {on?<Tick s={s}/>:<span className="w-[15px] text-center" style={{color:s.cls.muted}}>—</span>}
      <span className={!on?'line-through':''}>{f}</span></div>);

  const blocks=[

    /* ============ PRICING ============ */

    /* 1 — single plan */
    { id:'fPP-pricing-single', type:'cards', subtype:'pricing', title:'Single plan', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[270px] p-6')}>
          <div className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider inline-block')}>Starter</div>
          <div className="flex items-baseline gap-1 mt-4">
            <span className={head(s,'text-4xl font-extrabold')}>$19</span>
            <span className={cx('text-sm',s.cls.muted)}>/mo</span>
          </div>
          <p className={cx('text-[12.5px] mt-2 leading-relaxed',s.cls.sub)}>Everything a solo maker needs to ship the first version.</p>
          <div className="flex flex-col gap-2.5 mt-5">
            {['10 projects','Unlimited collaborators','Community support'].map(f=>Feat(s,f))}
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-6')}>Get started</button>
        </div>) },

    /* 2 — three-tier row (w:2, middle highlighted) */
    { id:'fPP-pricing-trio', type:'cards', subtype:'pricing', title:'Three-tier row', w:2,
      Render:(s)=>{
        const tiers=[
          {name:'Basic',price:'$12',sub:'For individuals',feats:['3 projects','5 GB storage','Email support'],hi:false},
          {name:'Pro',price:'$29',sub:'For growing teams',feats:['Unlimited projects','100 GB storage','Priority support'],hi:true},
          {name:'Scale',price:'$79',sub:'For organizations',feats:['Everything in Pro','SSO & audit log','Dedicated manager'],hi:false},
        ];
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-5')}>
          <div className="grid grid-cols-3 gap-3">
            {tiers.map(t=>(
              <div key={t.name} className={cx('rounded-xl p-4 flex flex-col',t.hi?'':s.cls.surface2)}
                style={t.hi?{border:`2px solid ${s.cls.accent}`}:{}}>
                {t.hi&&<div className="text-[9px] font-bold uppercase tracking-wider mb-1.5" style={{color:s.cls.accent}}>Popular</div>}
                <div className={cx('text-xs font-bold',s.cls.sub)}>{t.name}</div>
                <div className="flex items-baseline gap-0.5 mt-1.5">
                  <span className={head(s,'text-2xl font-extrabold')}>{t.price}</span>
                  <span className={cx('text-[11px]',s.cls.muted)}>/mo</span></div>
                <div className={cx('text-[10px] mt-0.5',s.cls.muted)}>{t.sub}</div>
                <div className="flex flex-col gap-1.5 mt-3 flex-1">
                  {t.feats.map(f=>(<div key={f} className="flex items-center gap-1.5 text-[11px]"><Tick s={s}/><span className={s.cls.text}>{f}</span></div>))}
                </div>
                <button className={cx(B,t.hi?s.cls.btnPrimary:ghost(s),'w-full py-2 text-[12px] mt-4')}>Choose</button>
              </div>))}
          </div>
        </div>); } },

    /* 3 — monthly/yearly toggle */
    { id:'fPP-pricing-toggle', type:'cards', subtype:'pricing', title:'Monthly / yearly toggle', w:1,
      Render:(s)=>{
        const [yr,setYr]=React.useState(false);
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[270px] p-6')}>
          <div className="flex items-center justify-center gap-2.5 mb-5">
            <span className={cx('text-[12px] font-semibold',yr?s.cls.muted:s.cls.text)}>Monthly</span>
            <button onClick={()=>setYr(!yr)} className="relative w-10 h-5 rounded-full transition-colors shrink-0"
              style={{background:yr?s.cls.accent:undefined}}>
              <span className={cx(!yr?s.cls.surface2:'','absolute inset-0 rounded-full',!yr?'border':'')} style={!yr?{}:{background:s.cls.accent}}/>
              <span className="absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-all" style={{left:yr?'22px':'2px'}}/>
            </button>
            <span className={cx('text-[12px] font-semibold',yr?s.cls.text:s.cls.muted)}>Yearly</span>
          </div>
          <div className="text-center">
            <div className="flex items-baseline justify-center gap-1">
              <span className={head(s,'text-4xl font-extrabold')}>${yr?'290':'29'}</span>
              <span className={cx('text-sm',s.cls.muted)}>/{yr?'yr':'mo'}</span>
            </div>
            <div className="text-[11px] mt-1.5 font-semibold" style={{color:s.cls.accent}}>{yr?'Save $58 a year':'Switch to yearly & save'}</div>
          </div>
          <div className="flex flex-col gap-2.5 mt-5">
            {['Unlimited projects','Advanced analytics','Priority support'].map(f=>Feat(s,f))}
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-6')}>Start free trial</button>
        </div>); } },

    /* 4 — comparison checklist */
    { id:'fPP-pricing-compare', type:'cards', subtype:'pricing', title:'Comparison checklist', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[270px] p-6')}>
          <div className={head(s,'text-base font-extrabold')}>Team</div>
          <div className="flex items-baseline gap-1 mt-2">
            <span className={head(s,'text-3xl font-extrabold')}>$49</span>
            <span className={cx('text-sm',s.cls.muted)}>/mo</span>
          </div>
          <div className="flex flex-col gap-2.5 mt-5">
            {Feat(s,'Unlimited projects')}
            {Feat(s,'Role-based access')}
            {Feat(s,'API & webhooks')}
            {Feat(s,'SSO / SAML',false)}
            {Feat(s,'Dedicated manager',false)}
          </div>
          <button className={cx(B,ghost(s),'w-full py-2.5 text-sm mt-6')}>Choose Team</button>
        </div>) },

    /* 5 — usage slider → price */
    { id:'fPP-pricing-usage', type:'cards', subtype:'pricing', title:'Usage slider', w:1,
      Render:(s)=>{
        const [seats,setSeats]=React.useState(5);
        const price=seats*8;
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[270px] p-6')}>
          <div className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider inline-block')}>Pay per seat</div>
          <div className="flex items-baseline gap-1 mt-4">
            <span className={head(s,'text-4xl font-extrabold')}>${price}</span>
            <span className={cx('text-sm',s.cls.muted)}>/mo</span>
          </div>
          <div className={cx('text-[12px] mt-1',s.cls.sub)}>{seats} seats · $8 each</div>
          <input type="range" min="1" max="50" value={seats} onChange={e=>setSeats(+e.target.value)}
            className="w-full mt-5" style={{accentColor:s.cls.accent}}/>
          <div className={cx('flex justify-between text-[10px] mt-1',s.cls.muted)}><span>1</span><span>50</span></div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-5')}>Continue</button>
        </div>); } },

    /* 6 — enterprise contact us */
    { id:'fPP-pricing-enterprise', type:'cards', subtype:'pricing', title:'Enterprise contact', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[270px] p-6')}>
          <div className={cx(s.cls.chip,'px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider inline-block')}>Enterprise</div>
          <div className={head(s,'text-2xl font-extrabold mt-4')}>Let's talk</div>
          <p className={cx('text-[12.5px] mt-2 leading-relaxed',s.cls.sub)}>Custom limits, security reviews, and a plan priced for your scale.</p>
          <div className="flex flex-col gap-2.5 mt-5">
            {['Unlimited everything','99.99% uptime SLA','SSO, SAML & SCIM','24/7 dedicated support'].map(f=>Feat(s,f))}
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-6')}>Contact sales</button>
          <button className={cx(B,ghost(s),'w-full py-2 text-[12px] mt-2')}>Book a demo</button>
        </div>) },

    /* 7 — freemium 2-col (Free vs Pro) */
    { id:'fPP-pricing-freemium', type:'cards', subtype:'pricing', title:'Free vs Pro', w:2,
      Render:(s)=>{
        const cols=[
          {name:'Free',price:'$0',cta:'Current plan',hi:false,feats:[['1 project',true],['100 MB storage',true],['Community support',true],['Custom domains',false],['Advanced analytics',false]]},
          {name:'Pro',price:'$24',cta:'Upgrade to Pro',hi:true,feats:[['Unlimited projects',true],['50 GB storage',true],['Email support',true],['Custom domains',true],['Advanced analytics',true]]},
        ];
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[540px] p-5')}>
          <div className="grid grid-cols-2 gap-4">
            {cols.map(c=>(
              <div key={c.name} className={cx('rounded-xl p-5 flex flex-col',c.hi?'':s.cls.surface2)}
                style={c.hi?{border:`2px solid ${s.cls.accent}`}:{}}>
                <div className="flex items-center justify-between">
                  <div className={cx('text-sm font-bold',s.cls.text)}>{c.name}</div>
                  {c.hi&&<span className="text-[9px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded text-white" style={{background:s.cls.accent}}>Best</span>}
                </div>
                <div className="flex items-baseline gap-1 mt-2">
                  <span className={head(s,'text-3xl font-extrabold')}>{c.price}</span>
                  <span className={cx('text-[11px]',s.cls.muted)}>/mo</span></div>
                <div className="flex flex-col gap-2 mt-4 flex-1">
                  {c.feats.map(([f,on])=>Feat(s,f,on))}
                </div>
                <button className={cx(B,c.hi?s.cls.btnPrimary:ghost(s),'w-full py-2.5 text-[12.5px] mt-5')}>{c.cta}</button>
              </div>))}
          </div>
        </div>); } },

    /* 8 — gradient / featured single (accent ring) */
    { id:'fPP-pricing-featured', type:'cards', subtype:'pricing', title:'Featured plan (accent ring)', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'relative w-full max-w-[270px] p-6 overflow-hidden')}
          style={{border:`2px solid ${s.cls.accent}`}}>
          <div className="absolute -top-10 -right-10 w-28 h-28 rounded-full opacity-20" style={{background:s.cls.accent}}/>
          <span className="absolute top-4 right-4 text-[9px] font-bold uppercase tracking-wider px-2 py-1 rounded-full text-white" style={{background:s.cls.accent}}>Most popular</span>
          <div className={cx('text-xs font-bold uppercase tracking-wider',s.cls.sub)}>Pro</div>
          <div className="flex items-baseline gap-1 mt-4 relative">
            <span className={head(s,'text-4xl font-extrabold')}>$39</span>
            <span className={cx('text-sm',s.cls.muted)}>/mo</span>
          </div>
          <p className={cx('text-[12.5px] mt-2 leading-relaxed relative',s.cls.sub)}>The complete toolkit for teams that ship every week.</p>
          <div className="flex flex-col gap-2.5 mt-5 relative">
            {['Unlimited projects','Advanced analytics','Priority 24h support','Custom integrations'].map(f=>Feat(s,f))}
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-6 relative')}>Upgrade now</button>
        </div>) },

    /* ============ PROFILE ============ */

    /* 1 — banner + avatar overlap */
    { id:'fPP-profile-banner', type:'cards', subtype:'profile', title:'Banner + avatar', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[270px] overflow-hidden')}>
          <div className="relative">
            <Slot label="" className="w-full h-20" style={{color:s.cls.accent}}/>
            <Slot label="" className="absolute -bottom-7 left-5 w-16 h-16 rounded-full ring-4" style={{color:s.cls.accent,'--tw-ring-color':s.cls.surfaceBg||'#fff'}}/>
          </div>
          <div className="px-5 pt-9 pb-5">
            <div className={head(s,'text-base font-extrabold')}>Maya Chen</div>
            <div className={cx('text-[12px]',s.cls.muted)}>Product Designer · San Francisco</div>
            <p className={cx('text-[12px] mt-2.5 leading-relaxed',s.cls.sub)}>Designing calm interfaces for complex systems.</p>
            <div className="flex gap-2 mt-4">
              <button className={cx(B,s.cls.btnPrimary,'flex-1 py-2 text-[12px]')}>Follow</button>
              <button className={cx(B,ghost(s),'flex-1 py-2 text-[12px]')}>Message</button>
            </div>
          </div>
        </div>) },

    /* 2 — horizontal contact card */
    { id:'fPP-profile-contact', type:'cards', subtype:'profile', title:'Horizontal contact card', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[270px] p-5 flex items-center gap-4')}>
          <Slot label="" className="w-14 h-14 rounded-full shrink-0" style={{color:s.cls.accent}}/>
          <div className="min-w-0 flex-1">
            <div className={head(s,'text-sm font-extrabold truncate')}>Daniel Reyes</div>
            <div className={cx('text-[11.5px] truncate',s.cls.muted)}>daniel@empire.dev</div>
            <div className={cx('text-[11.5px] truncate',s.cls.sub)}>+1 (415) 555-0182</div>
            <button className={cx(B,ghost(s),'mt-2.5 px-3 py-1.5 text-[11px]')}>View profile</button>
          </div>
        </div>) },

    /* 3 — avatar + stat row */
    { id:'fPP-profile-stats', type:'cards', subtype:'profile', title:'Avatar + stat row', w:1,
      Render:(s)=>{
        const stats=[['248','Posts'],['18.4K','Followers'],['312','Following']];
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[270px] 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-base font-extrabold mt-3')}>Aria Vale</div>
          <div className={cx('text-[12px]',s.cls.muted)}>@ariavale</div>
          <div className="grid grid-cols-3 gap-2 mt-5">
            {stats.map(([n,l])=>(
              <div key={l}>
                <div className={head(s,'text-lg font-extrabold')}>{n}</div>
                <div className={cx('text-[10px] uppercase tracking-wide',s.cls.muted)}>{l}</div>
              </div>))}
          </div>
          <button className={cx(B,s.cls.btnPrimary,'w-full py-2.5 text-sm mt-5')}>Follow</button>
        </div>); } },

    /* 4 — social links row */
    { id:'fPP-profile-social', type:'cards', subtype:'profile', title:'Social links row', w:1,
      Render:(s)=>{
        const links=['Tw','In','Gh','Dr'];
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[270px] p-6 text-center')}>
          <Slot label="" className="w-16 h-16 rounded-full mx-auto" style={{color:s.cls.accent}}/>
          <div className={head(s,'text-base font-extrabold mt-3')}>Leo Marsh</div>
          <div className={cx('text-[12px]',s.cls.sub)}>Creative technologist</div>
          <div className="flex justify-center gap-2 mt-4">
            {links.map(l=>(
              <button key={l} className={cx(s.cls.surface2,'w-9 h-9 rounded-full flex items-center justify-center text-[11px] font-bold')}
                style={{color:s.cls.accent}}>{l}</button>))}
          </div>
        </div>); } },

    /* 5 — team member */
    { id:'fPP-profile-team', type:'cards', subtype:'profile', title:'Team member', w:1,
      Render:(s)=>(
        <div className={cx(s.cls.surface,'w-full max-w-[270px] p-5 flex items-center gap-4')}>
          <Slot label="" className="w-16 h-16 rounded-xl shrink-0" style={{color:s.cls.accent}}/>
          <div className="min-w-0">
            <div className={head(s,'text-sm font-extrabold')}>Priya Nair</div>
            <div className="text-[12px] font-semibold" style={{color:s.cls.accent}}>Engineering Lead</div>
            <div className={cx('text-[11px] mt-0.5',s.cls.muted)}>Platform · Joined 2021</div>
          </div>
        </div>) },

    /* 6 — verified badge + follow toggle */
    { id:'fPP-profile-verified', type:'cards', subtype:'profile', title:'Verified + follow toggle', w:1,
      Render:(s)=>{
        const [following,setFollowing]=React.useState(false);
        return (
        <div className={cx(s.cls.surface,'w-full max-w-[270px] p-6 text-center')}>
          <Slot label="" className="w-20 h-20 rounded-full mx-auto" style={{color:s.cls.accent}}/>
          <div className="flex items-center justify-center gap-1.5 mt-3">
            <div className={head(s,'text-base font-extrabold')}>Sofia Bauer</div>
            <span className="w-4 h-4 rounded-full flex items-center justify-center text-white shrink-0" style={{background:s.cls.accent}}>
              <Glyph d={G.check} size={10} style={{color:'#fff'}}/></span>
          </div>
          <div className={cx('text-[12px]',s.cls.muted)}>@sofia · 42.1K followers</div>
          <button onClick={()=>setFollowing(!following)}
            className={cx(B,following?ghost(s):s.cls.btnPrimary,'w-full py-2.5 text-sm mt-5')}>
            {following?'Following':'Follow'}</button>
        </div>); } },

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