// v-mustard.jsx — Back Office screen: every register/POS/inventory entry point
// opens the Mustard Seed coming-soon modal. No fake totals, ever.

function OpsScreen({ app }) {
  const open = (label) => app.openMustard(label);
  return (
    <div>
      <PageHead eyebrow="Back office" title="Back office"
        sub="Register, POS and inventory are moving into Mustard Seed — Lasso's back-of-house platform."
        right={<Pill tone="amber" icon={<I.droplet c="#a86d12" s={13} f/>}>Mustard Seed · coming soon</Pill>}/>

      {/* what works today */}
      <Card style={{ marginBottom:18 }}>
        <div style={{ display:'flex', gap:14, alignItems:'flex-start' }}>
          <div style={{ width:42, height:42, borderRadius:12, background:'rgba(46,139,78,0.12)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}><I.check c="#247a41" s={19}/></div>
          <div>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:900, fontSize:15, color:'var(--fg-primary)', marginBottom:4 }}>Everything Lasso keeps working today</div>
            <div style={{ fontFamily:'var(--font-body)', fontSize:13, lineHeight:1.55, color:'var(--warm-stone)', maxWidth:640 }}>
              Delivery orders, menu visibility, campaigns and this dashboard are unaffected. The tiles below are future scope — none of them show live numbers yet, and they won't until Mustard Seed ships.
            </div>
          </div>
        </div>
      </Card>

      {/* entry-point tiles — deliberately data-free */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14 }}>
        {MS_AREAS.map(a=>{
          const Icon = I[a.icon] || I.grid;
          return (
            <Card key={a.id} pad={18} hover onClick={()=>open(a.label)}>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14 }}>
                <div style={{ width:36, height:36, borderRadius:10, background:'var(--bg-warm)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon c="var(--warm-stone)" s={18}/></div>
                <I.lock c="var(--warm-stone)" s={14}/>
              </div>
              <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:14, color:'var(--fg-primary)' }}>{a.label}</div>
              <div style={{ marginTop:6 }}><Pill tone="amber" style={{ fontSize:9.5, letterSpacing:'0.05em', textTransform:'uppercase' }}>Not live yet</Pill></div>
            </Card>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { OpsScreen });