// Mise (the agent) product page

function ProductMisePage() {
  useReveal();
  return (
    <div className="site">
      <PublicNav current="product"/>
      <main>
        <section style={{ paddingTop:80, paddingBottom:80, position:'relative', overflow:'hidden' }}>
          <div className="hero-grad"/>
          <div className="wrap" style={{ position:'relative' }}>
            <div style={{ maxWidth:760, marginBottom:64 }}>
              <Eyebrow>Mise · the agent</Eyebrow>
              <h1 className="display display-xl" style={{ marginTop:24 }}>
                A colleague,<br/>
                <em className="display-italic ink-gold">not an autopilot</em>.
              </h1>
              <p className="lede" style={{ marginTop:32, maxWidth:580 }}>
                Mise reads everything that lands in your inbox, your books, and your supplier replies.
                It writes the email, the PO, the shift swap, the menu note. It hands you the draft.
                You spend ten seconds where you used to spend ten minutes.
              </p>
            </div>
            <div className="reveal">
              <ProductShot path="bord.app / mise · approval queue">
                <div style={{ height:560 }}>
                  <MiseHeroShot/>
                </div>
              </ProductShot>
            </div>
          </div>
        </section>

        <section className="section" style={{ borderTop:'1px solid var(--site-hair)' }}>
          <div className="wrap">
            <SectionHead align="center" eyebrow="Four tiers of trust"
              title="You set the line. Mise never crosses it."
              lede="Every tool Mise can call is one of four colors. You pick the color, per restaurant, per role, per tool. Defaults err on the side of asking."/>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, border:'1px solid var(--site-hair)' }}>
              <TierCard color="var(--success)"   tier="AUTO"    label="Routine"
                ex={['Sync calendars and integrations','Refresh forecasts at 04:00','Retry a failed inbox sync','Mark a stale waitlist entry']}/>
              <TierCard color="var(--info)"      tier="NOTIFY"  label="Reversible"
                ex={['Confirm a clear booking','Mark a dish 86d for the night','Send the pre-shift briefing','Tag a guest as VIP after 5 visits']}/>
              <TierCard color="var(--accent-gold)" tier="DRAFT"  label="Consequential"
                ex={['Purchase orders','Replies to guests','Schedule changes','Menu price moves','Refunds and comps']}/>
              <TierCard color="var(--text-tertiary)" tier="NEVER" label="Off-limits"
                ex={['Hire / fire','Wire transfers','Booking platform refunds','Anything you flag']}/>
            </div>
          </div>
        </section>

        <section className="section" style={{ borderTop:'1px solid var(--site-hair)' }}>
          <div className="wrap">
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:80, alignItems:'start' }}>
              <div style={{ position:'sticky', top:96 }}>
                <Eyebrow>What it can do</Eyebrow>
                <h2 className="display display-lg" style={{ marginTop:24 }}>
                  Eight tools.<br/>
                  <em className="display-italic">No personality.</em>
                </h2>
                <p className="copy" style={{ marginTop:24 }}>
                  Mise is not a chatbot. It does not have opinions.
                  It calls eight named tools — visible, auditable, replayable.
                  Every tool call leaves a paper trail. You can see, today,
                  the exact prompt that produced last Saturday's PO.
                </p>
              </div>
              <ol className="numlist">
                {[
                  ['reservations.compare_weeks',     'AUTO',    'Compare cover counts and revenue between weeks.'],
                  ['inventory.forecast_consumption', 'AUTO',    'Project tonight\'s ingredient draw from bookings.'],
                  ['integrations.retry_sync',        'AUTO',    'Re-attempt a failed Nylas / OpenTable / Stripe handshake.'],
                  ['dishes.suggest_substitution',    'NOTIFY',  'When stock is short, propose a swap.'],
                  ['briefing.generate',              'NOTIFY',  'Produce the printable pre-shift PDF.'],
                  ['guests.draft_reply',             'DRAFT',   'Write a reply in your house voice; you approve and send.'],
                  ['purchasing.draft_po',            'DRAFT',   'Build a purchase order; you approve before it leaves.'],
                  ['schedule.draft_changes',         'DRAFT',   'Propose schedule edits when forecast or absences shift.'],
                ].map(([name,tier,body],i) => {
                  const c = tier==='AUTO' ? 'var(--success)' : tier==='NOTIFY' ? 'var(--info)' : 'var(--accent-gold)';
                  return (
                    <li key={i}>
                      <div>
                        <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:6 }}>
                          <code style={{ fontFamily:'var(--font-num)', fontSize:13, color:'var(--site-ink)', background:'var(--site-bg-tint)', padding:'2px 8px', borderRadius:3, border:'1px solid var(--site-hair)' }}>{name}</code>
                          <span style={{ display:'inline-flex', alignItems:'center', gap:5, fontSize:10, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color:c }}>
                            <span style={{ width:6, height:6, background:c, transform:'rotate(45deg)' }}/>{tier}
                          </span>
                        </div>
                        <p className="copy" style={{ marginTop:0, fontSize:14 }}>{body}</p>
                      </div>
                    </li>
                  );
                })}
              </ol>
            </div>
          </div>
        </section>

        <section className="section" style={{ borderTop:'1px solid var(--site-hair)' }}>
          <div className="wrap">
            <Pullquote attrib="Henrik Lundgren · Owner, Salt & Ember · Göteborg">
              I expected to argue with the AI. I haven't, once. It writes the message, I read it,
              I press send. The two seconds are the point.
            </Pullquote>
          </div>
        </section>

        <CtaBlock
          eyebrow="Run Mise on your data"
          title={<>Bring us <em className="display-italic ink-gold">a week of email</em>.</>}
          sub="In a 30-minute call, we'll show you what Mise would have drafted for last Saturday — replies, POs, swaps. You decide whether you'd have pressed send."
        />
      </main>
      <PublicFooter/>
    </div>
  );
}

function TierCard({ color, tier, label, ex }) {
  return (
    <div style={{ padding:24, borderRight:'1px solid var(--site-hair)' }}>
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:14 }}>
        <span style={{ width:10, height:10, background:color, transform:'rotate(45deg)' }}/>
        <span style={{ fontSize:10.5, fontWeight:700, letterSpacing:'0.18em', textTransform:'uppercase', color }}>{tier}</span>
      </div>
      <div className="display display-sm" style={{ fontWeight:500, marginBottom:14 }}>{label}</div>
      <ul style={{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:8 }}>
        {ex.map(x => (
          <li key={x} style={{ display:'flex', alignItems:'flex-start', gap:8, fontSize:12.5, color:'var(--site-ink-mute)', lineHeight:1.4 }}>
            <span style={{ width:4, height:4, background:'var(--site-ink-dim)', marginTop:7, transform:'rotate(45deg)', flexShrink:0 }}/>
            {x}
          </li>
        ))}
      </ul>
    </div>
  );
}

function MiseHeroShot() {
  return (
    <ShotApp active="mise" title="Mise" subtitle="2 awaiting approval" crumbs={['Bord','Mise']} compactSidebar
      actions={<><Button size="sm" variant="ghost" icon={<Icon.refresh size={11}/>}>Refresh</Button><Button size="sm" variant="secondary" icon={<Icon.gear size={11}/>}>Tiers</Button></>}>
      <div style={{ display:'flex', gap:12, height:'100%' }}>
        <div style={{ flex:1.4, display:'flex', flexDirection:'column', gap:10, overflow:'hidden' }}>
          <div style={{ display:'flex', gap:10 }}>
            <Avatar name="Mise" size={28}/>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:11, color:'var(--text-tertiary)', marginBottom:4 }}>Mise · 4m ago</div>
              <div style={{ background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', borderRadius:6, padding:'12px 14px', fontSize:12.5, lineHeight:1.5 }}>
                Scallop is at <span className="num ink">2.1 kg</span>. Tonight expects ~14 orders × <span className="num">0.18 kg</span> = <span className="num">2.5 kg</span>. Drafted PO-00249 · Havets Delikatesser AB.
              </div>
              <div style={{ display:'flex', gap:6, marginTop:6, flexWrap:'wrap' }}>
                <Badge variant="success" size="sm" icon={<Icon.check size={9}/>}>inventory.forecast_consumption · auto</Badge>
                <Badge variant="gold" size="sm" icon={<Icon.alert size={9}/>}>purchasing.draft_po · awaits approval</Badge>
              </div>
            </div>
          </div>
          <div style={{ background:'var(--bg-secondary)', border:'1px solid var(--accent-gold-ring)', borderRadius:8, padding:14, boxShadow:'var(--shadow-gold)' }}>
            <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
              <span style={{ fontSize:10, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent-gold)' }}>Awaiting your approval</span>
              <span style={{ flex:1 }}/>
              <span style={{ fontSize:10.5, color:'var(--text-tertiary)' }}>1 of 2</span>
            </div>
            <div style={{ fontSize:13, fontWeight:600, marginBottom:10 }}>PO-00249 · Havets Delikatesser AB</div>
            <table style={{ width:'100%', fontSize:11.5, borderCollapse:'collapse' }}>
              <tbody>
                {[['Scallop','6 kg','5 280 kr'],['Langoustine','4 kg','5 600 kr'],['Turbot','3 kg','3 940 kr']].map((r,i)=>(
                  <tr key={i} style={{ borderBottom:'1px solid var(--border-subtle)' }}>
                    <td style={{ padding:'6px 0', color:'var(--text-secondary)' }}>{r[0]}</td>
                    <td className="num" style={{ padding:'6px 0', color:'var(--text-tertiary)', textAlign:'right' }}>{r[1]}</td>
                    <td className="num" style={{ padding:'6px 0', textAlign:'right', fontWeight:600 }}>{r[2]}</td>
                  </tr>
                ))}
                <tr><td style={{ padding:'8px 0', fontWeight:600 }}>Subtotal</td><td/><td className="num" style={{ padding:'8px 0', textAlign:'right', fontWeight:700, color:'var(--accent-gold)' }}>14 820 kr</td></tr>
              </tbody>
            </table>
            <div style={{ display:'flex', gap:6, marginTop:10 }}>
              <Button size="sm" variant="secondary" style={{ flex:1 }}>Edit</Button>
              <Button size="sm" variant="primary" icon={<Icon.check size={11}/>} style={{ flex:1 }}>Approve & send</Button>
            </div>
          </div>
          <div style={{ background:'var(--bg-secondary)', border:'1px solid var(--border-subtle)', borderRadius:6, padding:'12px 14px', display:'flex', alignItems:'center', gap:10 }}>
            <span style={{ fontSize:13, fontWeight:600 }}>Reply · Anja Dörner · table swap</span>
            <span style={{ flex:1, fontSize:11.5, color:'var(--text-tertiary)', fontStyle:'italic' }}>"Of course — we've moved you to T7…"</span>
            <Badge variant="gold" size="sm">Draft</Badge>
          </div>
        </div>
        <aside style={{ width:240, flexShrink:0, padding:14, background:'var(--bg-secondary)', border:'1px solid var(--border-subtle)', borderRadius:6 }}>
          <div style={{ fontSize:10, color:'var(--text-tertiary)', textTransform:'uppercase', letterSpacing:'0.08em', fontWeight:700, marginBottom:10 }}>Recent · auto</div>
          <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
            {[
              ['09:42','Synced Nylas inbox','12 messages parsed'],
              ['08:00','Refreshed forecast','Sat covers: 72'],
              ['07:30','Retried Stripe payout','OK · 2 attempts'],
              ['04:00','Recomputed GP','62.8% food'],
              ['03:00','Backed up'],
            ].map((r,i) => (
              <div key={i} style={{ fontSize:11, padding:'6px 0', borderBottom:'1px solid var(--border-subtle)' }}>
                <div style={{ display:'flex', justifyContent:'space-between', color:'var(--text-tertiary)' }}>
                  <span>{r[0]}</span>
                  <Icon.check size={10} color="var(--success)"/>
                </div>
                <div style={{ color:'var(--text-primary)', fontWeight:500, marginTop:2 }}>{r[1]}</div>
                {r[2] && <div style={{ color:'var(--text-tertiary)', fontSize:10 }}>{r[2]}</div>}
              </div>
            ))}
          </div>
        </aside>
      </div>
    </ShotApp>
  );
}

window.ProductMisePage = ProductMisePage;