function Forecasts() {
  const { L, lang, fmt, O, recipes, inv, invMap, go } = useMizo();
  const f = O.forecast;
  const avg = 112860 / 28;
  const tom = f[0], k = tom.rev / avg;
  const units = recipes.map((r) => ({ r, u: Math.round((r.sold / 30) * k) })).sort((a, b) => b.u - a.u);
  const need = {}; units.forEach(({ r, u }) => r.lines.forEach((l) => { need[l.ing] = (need[l.ing] || 0) + l.qty * u; }));
  const ings = Object.entries(need).map(([id, q]) => ({ i: invMap[id], q })).filter((x) => x.i).sort((a, b) => b.q * b.i.cost - a.q * a.i.cost).slice(0, 8);
  const confL = { high: L('High', 'Élevée'), med: L('Medium', 'Moyenne') };
  return (
    <div className="page">
      <PageHead sub={L('Next 7 days, from your sales history, weather and local events. Sample model — accuracy improves once your POS is connected.', 'Les 7 prochains jours, selon l’historique, la météo et les événements. Modèle exemple — plus précis une fois le PDV connecté.')} />
      <SeeAlso k="aiFc" />
      <section className="stats">
        <Stat label={L('Next 7 days', '7 prochains jours')} value={fmt.money0(f.reduce((s, x) => s + x.rev, 0))}><Delta v={((f.reduce((s, x) => s + x.rev, 0) - O.week.reduce((s, x) => s + x[2], 0)) / O.week.reduce((s, x) => s + x[2], 0)) * 100} suffix={L(' vs this week', ' vs cette semaine')} /></Stat>
        <Stat label={L('Tickets', 'Additions')} value={fmt.num(f.reduce((s, x) => s + x.tk, 0))}>{L('Forecast', 'Prévision')}</Stat>
        <Stat label={L('Busiest day', 'Journée la plus occupée')} value={f.slice().sort((a, b) => b.rev - a.rev)[0].d[lang]} tone="acc">{fmt.money0(Math.max(...f.map((x) => x.rev)))}</Stat>
      </section>
      <section className="grid-2-1">
        <div className="panel ai-panel">
          <Meander />
          <div className="panel-head"><div><div className="ai-kicker"><Icon n="sparkle" />{L('Sales forecast', 'Prévision des ventes')}</div><p className="muted">{L('Forecast vs. the same weekday this week', 'Prévision vs même jour cette semaine')}</p></div>
            <div className="legend"><span><i className="dot dot-a"></i>{L('Forecast', 'Prévision')}</span><span><i className="dot dot-b"></i>{L('This week', 'Cette semaine')}</span></div></div>
          <BarChart data={f.map((x, i) => ({ label: x.d[lang], a: x.rev, b: O.week[i][2] }))} la={L('Forecast', 'Prévision')} lb={L('This week', 'Cette semaine')} fmtv={(v, full) => (full ? fmt.money0(v) : fmt.kmoney(v))} height={200} />
        </div>
        <div className="panel">
          <h3>{L('What’s driving it', 'Ce qui l’influence')}</h3>
          {f.filter((x) => x.note).map((x) => <div key={x.d.en} className="set-row"><div><div>{x.d[lang]}</div><div className="muted sm">{x.note[lang]}</div></div><Pill tone={x.conf === 'high' ? 'pos' : 'warn'}>{confL[x.conf]}</Pill></div>)}
        </div>
      </section>
      <section className="grid-1-1">
        <div className="panel panel-flush">
          <div className="panel-head pad"><div><h3>{L('Prep for tomorrow', 'Préparation pour demain')}</h3><p className="muted">{tom.d[lang]} · {fmt.money0(tom.rev)} {L('forecast', 'prévus')}</p></div></div>
          <div className="table-scroll">
            <table className="table mtable">
              <thead><tr><th>{L('Dish', 'Plat')}</th><th className="num">{L('Expected', 'Prévus')}</th></tr></thead>
              <tbody>{units.slice(0, 7).map(({ r, u }) => <tr key={r.id}><td className="cell-main">{r.name[lang]}</td><td className="num tnum">{u}</td></tr>)}</tbody>
            </table>
          </div>
        </div>
        <div className="panel panel-flush">
          <div className="panel-head pad"><div><h3>{L('Ingredients needed', 'Ingrédients nécessaires')}</h3><p className="muted">{L('Tomorrow’s usage vs. what’s on the shelf', 'Usage de demain vs ce qui est en stock')}</p></div>
            <button className="btn btn-secondary" onClick={() => go('inventory', { tab: 'reorder' })}>{L('Reorder', 'Commander')}</button></div>
          <div className="table-scroll">
            <table className="table mtable">
              <thead><tr><th>{L('Item', 'Article')}</th><th className="num">{L('Need', 'Besoin')}</th><th className="num">{L('On hand', 'En stock')}</th><th></th></tr></thead>
              <tbody>{ings.map(({ i, q }) => <tr key={i.id}><td className="cell-main">{i.name[lang]}</td><td className="num tnum">{fmt.num(Math.round(q * 10) / 10)} <span className="muted">{i.unit}</span></td><td className="num tnum">{fmt.num(i.onHand)}</td><td>{i.onHand < q ? <Pill tone="neg">{L('Short', 'Manque')}</Pill> : i.onHand < q * 2 ? <Pill tone="warn">{L('Tight', 'Juste')}</Pill> : <Pill tone="pos">OK</Pill>}</td></tr>)}</tbody>
            </table>
          </div>
        </div>
      </section>
    </div>
  );
}

function Automations() {
  const { L, lang, O, toast } = useMizo();
  const [rules, setRules] = React.useState(O.rules);
  const runs = [
    { t: L('Today 08:51', 'Aujourd’hui 8 h 51'), r: 'par', what: L('Drafted PO-1048 · Boucherie Saint-Laurent · chicken, pork', 'Brouillon BC-1048 · Boucherie Saint-Laurent · poulet, porc') },
    { t: L('Yesterday 23:10', 'Hier 23 h 10'), r: 'price', what: L('Feta +6.6% on INV-2291 vs. last delivery', 'Feta +6,6 % sur INV-2291 vs dernière livraison') },
    { t: L('Oct 26', '26 oct.'), r: 'dup', what: L('LinGo and Nettoyage Pro both billed for linens', 'LinGo et Nettoyage Pro facturent tous deux la lingerie') },
    { t: L('Oct 26', '26 oct.'), r: 'ot', what: L('Jean-François scheduled 41.5 h this week', 'Jean-François prévu 41,5 h cette semaine') },
  ];
  const rn = Object.fromEntries(rules.map((r) => [r.id, r]));
  return (
    <div className="page">
      <PageHead sub={L('Rules MIZO will run for you in the background. Nothing is sent or paid without your approval. In this demo, switches are remembered but rules don’t run.', 'Les règles que MIZO appliquera en arrière-plan. Rien n’est envoyé ni payé sans votre accord. Dans cette démo, les règles ne s’exécutent pas.')}><SimTag /></PageHead>
      <section className="grid-2-1">
        <div className="panel">
          <h3>{L('Rules', 'Règles')} <span className="muted sm">{rules.filter((r) => r.on).length} / {rules.length} {L('on', 'actives')}</span></h3>
          {rules.map((r) => (
            <div key={r.id} className="set-row">
              <div className="emp-cell" style={{ alignItems: 'flex-start' }}><span className="alert-ic acc"><Icon n={r.ic} /></span><div><div>{r.name[lang]}</div><div className="muted sm">{r.desc[lang]}</div></div></div>
              <Toggle on={r.on} label={r.name[lang]} onChange={(v) => { setRules(rules.map((x) => (x.id === r.id ? { ...x, on: v } : x))); toast(v ? L('Rule turned on', 'Règle activée') : L('Rule turned off', 'Règle désactivée')); }} />
            </div>
          ))}
        </div>
        <div className="panel">
          <h3>{L('Recent runs', 'Dernières exécutions')}</h3>
          <ul className="act">{runs.map((x, i) => <li key={i}><span className="act-ic ai"><Icon n={rn[x.r].ic} /></span><span><b>{rn[x.r].name[lang]}</b><br /><span className="muted sm">{x.t} · {x.what}</span></span></li>)}</ul>
        </div>
      </section>
    </div>
  );
}

function UsersRoles() {
  const { L, lang, O, toast } = useMizo();
  const [users, setUsers] = React.useState(O.users);
  const [inv, setInv] = React.useState(null);
  const roleName = Object.fromEntries(O.roles.map(([k, n]) => [k, n[lang]]));
  const mods = SECTIONS.map((s) => [s.id, L(...s.s)]);
  return (
    <div className="page">
      <PageHead sub={L('Who can sign in, and what each role can see or change.', 'Qui peut se connecter, et ce que chaque rôle peut voir ou modifier.')}>
        <button className="btn btn-primary" onClick={() => setInv({ email: '', role: 'staff' })}><Icon n="user-plus" />{L('Invite someone', 'Inviter quelqu’un')}</button>
      </PageHead>
      <section className="role-cards">{[['owner', 'crown-simple', L('Sees and changes everything, including payroll and bank details.', 'Voit et modifie tout, y compris la paie et la banque.')], ['manager', 'user-gear', L('Runs the restaurant day to day. Can approve orders up to the limit you set.', 'Gère le quotidien. Peut approuver les commandes jusqu’à la limite fixée.')], ['lead', 'user-focus', L('Counts stock, receives deliveries, fills checklists.', 'Compte le stock, reçoit les livraisons, remplit les listes.')], ['staff', 'user', L('Clocks in and out and sees their own schedule.', 'Pointe et voit son horaire.')], ['accountant', 'calculator', L('Reads the money pages and exports reports. Can’t change orders.', 'Lit les pages financières et exporte. Ne modifie pas les commandes.')]].map(([k, ic, d]) => <div key={k} className="role-card"><span className="alert-ic acc"><Icon n={ic} /></span><div><b>{roleName[k]}</b> <span className="muted sm">· {users.filter((u) => u.role === k).length} {L('people', 'pers.')}</span><div className="muted sm">{d}</div></div></div>)}</section>
      <div className="panel panel-flush">
        <div className="table-scroll">
          <table className="table mtable">
            <thead><tr><th>{L('Person', 'Personne')}</th><th>{L('Role', 'Rôle')}</th><th className="hide-sm">{L('Last active', 'Dernière activité')}</th></tr></thead>
            <tbody>{users.map((u, i) => (
              <tr key={u.email}>
                <td><div className="emp-cell"><span className="emp-av">{u.name.split(' ').map((w) => w[0]).join('').slice(0, 2)}</span><div><div className="cell-main">{u.name} {u.external ? <span className="tag tag-neutral">{L('External', 'Externe')}</span> : null}</div><div className="cell-sub">{u.email}</div></div></div></td>
                <td>{u.role === 'owner' ? <span className="tag tag-accent">{roleName.owner}</span> : <select className="input" style={{ maxWidth: 200 }} value={u.role} onChange={(e) => { setUsers(users.map((x, j) => (j === i ? { ...x, role: e.target.value } : x))); toast(L('Role updated', 'Rôle mis à jour')); }}>{O.roles.filter(([k]) => k !== 'owner').map(([k, n]) => <option key={k} value={k}>{n[lang]}</option>)}</select>}</td>
                <td className="hide-sm muted">{u.last ? u.last[lang] : L('Invite sent', 'Invitation envoyée')}</td>
              </tr>
            ))}</tbody>
          </table>
        </div>
      </div>
      <div className="panel panel-flush">
        <div className="panel-head pad"><div><h3>{L('What each role can do', 'Ce que chaque rôle peut faire')}</h3><div className="perm-legend"><span><Icon n="check-circle" className="perm-full" /> {L('Can view and change', 'Peut voir et modifier')}</span><span><Icon n="eye" className="muted" /> {L('Can only view', 'Peut seulement voir')}</span><span><Icon n="minus" className="perm-none" /> {L('Hidden', 'Masqué')}</span></div></div></div>
        <div className="table-scroll">
          <table className="table mtable perm">
            <thead><tr><th>{L('Section', 'Section')}</th>{O.roles.map(([k, n]) => <th key={k} className="num">{n[lang]}</th>)}</tr></thead>
            <tbody>{mods.map(([id, n]) => <tr key={id}><td className="cell-main">{n}</td>{O.perms[id].map((p, j) => <td key={j} className="num">{p === 2 ? <span className="perm-c"><Icon n="check-circle" className="perm-full" s="1.2rem" /><span className="perm-t">{L('Change', 'Modifier')}</span></span> : p === 1 ? <span className="perm-c"><Icon n="eye" className="muted" s="1.2rem" /><span className="perm-t">{L('View', 'Voir')}</span></span> : <span className="perm-c"><Icon n="minus" className="perm-none" s="1.2rem" /><span className="perm-t muted">{L('Hidden', 'Masqué')}</span></span>}</td>)}</tr>)}</tbody>
          </table>
        </div>
      </div>
      <Modal open={!!inv} onClose={() => setInv(null)} title={L('Invite someone', 'Inviter quelqu’un')} actions={<>
        <button className="btn btn-secondary" onClick={() => setInv(null)}>{L('Cancel', 'Annuler')}</button>
        <button className="btn btn-primary" disabled={!inv || !/.+@.+\..+/.test(inv.email)} onClick={() => { setUsers([...users, { name: inv.email.split('@')[0], email: inv.email, role: inv.role, last: null }]); setInv(null); toast(L('Invitation sent', 'Invitation envoyée')); }}>{L('Send invite', 'Envoyer')}</button>
      </>}>
        {inv ? <div className="form-grid">
          <Field span label={L('Email', 'Courriel')} id="inv-e" error={inv.email && inv.touched ? vEmail(inv.email, L) : null} hint={L('They’ll get an email with a link to sign in.', 'La personne recevra un lien pour se connecter.')}><input id="inv-e" className="input" type="email" value={inv.email} onBlur={() => setInv({ ...inv, touched: true })} onChange={(e) => setInv({ ...inv, email: e.target.value })} placeholder="nom@exemple.ca" /></Field>
          <div className="field span-2"><label>{L('Role', 'Rôle')}</label><select className="input" value={inv.role} onChange={(e) => setInv({ ...inv, role: e.target.value })}>{O.roles.filter(([k]) => k !== 'owner').map(([k, n]) => <option key={k} value={k}>{n[lang]}</option>)}</select></div>
        </div> : null}
      </Modal>
    </div>
  );
}

function Notifications() {
  const { L, lang, O, toast } = useMizo();
  const [m, setM] = React.useState(() => Object.fromEntries(O.notif.map(([k, , v]) => [k, v])));
  const [quiet, setQuiet] = React.useState(true);
  const [savedAt, setSavedAt] = React.useState(null);
  const ch = [L('Email', 'Courriel'), L('Text', 'Texto'), L('Push', 'Notif.')];
  return (
    <div className="page">
      <PageHead sub={L('Choose how MIZO reaches you for each kind of alert.', 'Choisissez comment MIZO vous joint pour chaque type d’alerte.')}>
        {savedAt ? <span className="save-ok"><Icon n="check-circle" />{L(`Saved ${savedAt} · alerts aren’t delivered in this demo`, `Enregistré ${savedAt} · aucune alerte n’est envoyée dans cette démo`)}</span> : null}<button className="btn btn-primary" onClick={() => setSavedAt(new Date().toLocaleTimeString(lang === 'fr' ? 'fr-CA' : 'en-CA', { hour: 'numeric', minute: '2-digit' }))}><Icon n="floppy-disk" />{L('Save', 'Enregistrer')}</button>
      </PageHead>
      <section className="grid-2-1">
        <div className="panel panel-flush">
          <div className="table-scroll">
            <table className="table mtable">
              <thead><tr><th>{L('Alert', 'Alerte')}</th>{ch.map((c) => <th key={c} className="num">{c}</th>)}</tr></thead>
              <tbody>{O.notif.map(([k, n]) => <tr key={k}><td className="cell-main">{n[lang]}</td>{m[k].map((v, j) => <td key={j} className="num"><Toggle on={!!v} label={n[lang] + ' ' + ch[j]} onChange={(x) => setM({ ...m, [k]: m[k].map((y, i) => (i === j ? (x ? 1 : 0) : y)) })} /></td>)}</tr>)}</tbody>
            </table>
          </div>
        </div>
        <div className="panel">
          <h3>{L('Delivery', 'Envoi')}</h3>
          <div className="set-row"><div><div>{L('Send to', 'Envoyer à')}</div><div className="muted sm">eleni@souvlakivillage.ca · 514-555-0100</div></div></div>
          <div className="set-row"><div><div>{L('Quiet hours', 'Heures calmes')}</div><div className="muted sm">{L('No texts or push 11 pm – 7 am, except fridge alarms', 'Aucun texto ni notif. de 23 h à 7 h, sauf alarmes de frigo')}</div></div><Toggle on={quiet} onChange={setQuiet} label={L('Quiet hours', 'Heures calmes')} /></div>
          <div className="set-row"><div><div>{L('Daily summary time', 'Heure du résumé')}</div></div><select className="input" style={{ maxWidth: 130 }} defaultValue="22:30"><option>21:30</option><option>22:30</option><option>23:30</option></select></div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Forecasts, Automations, UsersRoles, Notifications });