// Landing page — the anchor surface. Editorial dark, gold accent.

function LandingPage() {
  useReveal();
  return (
    <div className="site">
      <PublicNav current="home"/>
      <main>
        <Hero/>
        <LogosSection/>
        <ProblemSection/>
        <ProductTour/>
        <MiseSection/>
        <PrinciplesSection/>
        <NumbersSection/>
        <CustomerVoice/>
        <CtaBlock/>
      </main>
      <PublicFooter/>
      <CookieBanner/>
    </div>
  );
}

// ============================================================================
// HERO
// ============================================================================
function Hero() {
  return (
    <section style={{ position:'relative', overflow:'hidden', paddingTop:48, paddingBottom:96 }}>
      <div className="hero-grad"/>
      <div className="wrap" style={{ position:'relative' }}>
        {/* Top meta line */}
        <div style={{ display:'flex', alignItems:'center', gap:14, marginBottom:32, paddingBottom:14, borderBottom:'1px solid var(--site-hair)' }}>
          <span className="eyebrow">Vol. III · Spring 2026</span>
          <span style={{ flex:1 }}/>
          <span className="ink-dim" style={{ fontSize:12, fontFamily:'var(--font-display)', fontStyle:'italic' }}>
            For the operator who serves dinner tonight.
          </span>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'minmax(0, 1fr) auto', gap:48, alignItems:'end' }}>
          <div>
            <h1 className="display display-xl fade-in">
              The calm operating system<br/>
              for <em className="display-italic ink-gold">fine&nbsp;dining</em>.
            </h1>
            <div style={{ display:'flex', gap:20, marginTop:32, flexWrap:'wrap', alignItems:'center' }}>
              <a href="/demo" className="btn btn-primary fade-in fade-in-1">Request a demo</a>
              <a href="/product/reservations" className="btn btn-ghost fade-in fade-in-2">Take the tour</a>
              <span className="ink-dim fade-in fade-in-3" style={{ fontSize:12.5, fontStyle:'italic', fontFamily:'var(--font-display)' }}>
                30 minutes. Your data, not slides.
              </span>
            </div>
          </div>

          <p className="lede fade-in fade-in-2" style={{ maxWidth:380, marginBottom:14 }}>
            Reservations, service, and finance on one table —
            with an AI that drafts, never decides.
            Built in Stockholm for restaurants where
            every seat carries a name.
          </p>
        </div>

        {/* Hero product shot */}
        <div className="reveal" style={{ marginTop:64, position:'relative' }}>
          <ProductShot path="bord.app / overview · 19:42 · Sat 25 Apr">
            <div style={{ height:580 }}>
              <HeroShotContent/>
            </div>
          </ProductShot>
          {/* corner annotations */}
          <div style={{
            position:'absolute', top:-12, left:-12, fontSize:10, letterSpacing:'0.2em',
            color:'var(--site-gold)', fontWeight:700, textTransform:'uppercase',
            background:'var(--site-bg)', padding:'4px 8px', border:'1px solid var(--site-gold)',
          }}>FIG. 01 — operator overview</div>
        </div>
      </div>
    </section>
  );
}

// Composed hero shot — overview-style, simplified to read at full bleed
function HeroShotContent() {
  return (
    <ShotApp
      active="overview"
      title="Overview"
      subtitle="Sat · 25 Apr"
      crumbs={['Bord','Service']}
      actions={<>
        <Button size="sm" variant="secondary" icon={<Icon.sparkle size={12}/>}>Brief me</Button>
        <Button size="sm" variant="primary" icon={<Icon.newspaper size={12}/>}>Start service</Button>
      </>}
    >
      {/* Stat strip */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:10, marginBottom:14 }}>
        <StatCard icon={<Icon.users size={11}/>} label="Covers" value={<span className="num">72</span>} delta="+5.9% vs last Sat" deltaTone="up"/>
        <StatCard icon={<Icon.star size={11}/>} label="VIPs" value={<span className="num">3</span>} tone="gold" trailing="tonight"/>
        <StatCard icon={<Icon.check size={11}/>} label="Approvals" value={<span className="num">2</span>} tone="warning"/>
        <StatCard icon={<Icon.team size={11}/>} label="Staff on" value={<span className="num">9/10</span>}/>
        <StatCard icon={<Icon.coin size={11}/>} label="Forecast" value={<Money value={94500} size="lg"/>}/>
      </div>

      {/* Three-column body */}
      <div style={{ display:'grid', gridTemplateColumns:'1.5fr 1fr 1fr', gap:12, height: 'calc(100% - 110px)' }}>
        {/* Tonight's service */}
        <Card padded>
          <SectionHeader size="sm" title="Tonight's service" subtitle="6 on book · 3 VIPs"/>
          <div style={{ display:'flex', flexDirection:'column', marginTop:-6 }}>
            {[
              { time:'18:00', name:'Anja Dörner', party:2, status:'CONFIRMED', vip:'VIP', dietary:[], notes:'window' },
              { time:'18:30', name:'Sandra Björkqvist-Rosén', party:4, status:'CONFIRMED', vip:null, dietary:['nut','shell'], notes:'birthday' },
              { time:'19:00', name:'Chen Wen-Hsiu', party:8, status:'PENDING', vip:'VVIP', dietary:[], notes:'tasting · 8 wines' },
              { time:'19:30', name:'Linnea Andersson', party:2, status:'CONFIRMED', vip:'VIP', dietary:['gluten'], notes:'' },
              { time:'20:00', name:'Karim El Hassan', party:6, status:'CONFIRMED', vip:null, dietary:[], notes:'corporate' },
              { time:'20:30', name:'Elin Kvarnström', party:2, status:'CONFIRMED', vip:null, dietary:[], notes:'' },
            ].map((r,i) => (
              <div key={i} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 0', borderBottom:'1px solid var(--border-subtle)' }}>
                <span className="num" style={{ fontSize:13, fontWeight:600, minWidth:40 }}>{r.time}</span>
                <Avatar name={r.name} vip={r.vip} size={24}/>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:12, fontWeight:600, color:'var(--text-primary)', display:'flex', alignItems:'center', gap:4 }}>
                    {r.vip==='VVIP' && <Icon.star size={10} color="var(--accent-gold)"/>}
                    <span style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{r.name}</span>
                  </div>
                  <div style={{ fontSize:10.5, color:'var(--text-tertiary)', marginTop:1 }}>
                    <span className="num">{r.party}</span> guests
                    {r.dietary.length > 0 && <> · <span style={{ color:'var(--critical)' }}>{r.dietary.join(', ')}</span></>}
                    {r.notes && <> · <span style={{ fontStyle:'italic' }}>{r.notes}</span></>}
                  </div>
                </div>
                {r.status==='PENDING'
                  ? <Badge variant="warning" size="sm">Pending</Badge>
                  : <Badge variant="neutral" size="sm">Confirmed</Badge>}
              </div>
            ))}
          </div>
        </Card>

        {/* Needs you */}
        <Card padded>
          <SectionHeader size="sm" title="Needs you" subtitle="2 drafts pending"/>
          <div style={{ display:'flex', flexDirection:'column', gap:8, marginTop:4 }}>
            {[
              { title:'Reorder scallop · 6 kg · 14 820 kr', kind:'PO', who:'Mise', age:'4m' },
              { title:'Reply to Anja Dörner · table swap', kind:'WhatsApp', who:'Mise', age:'12m' },
            ].map((a,i) => (
              <div key={i} style={{ display:'flex', alignItems:'flex-start', gap:8, padding:10, background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', borderRadius:6 }}>
                <div style={{ width:24, height:24, borderRadius:4, background:'var(--accent-gold-soft)', color:'var(--accent-gold)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <Icon.sparkle size={12}/>
                </div>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:11.5, fontWeight:600, color:'var(--text-primary)', lineHeight:1.35 }}>{a.title}</div>
                  <div style={{ fontSize:10, color:'var(--text-tertiary)', marginTop:3 }}>{a.kind} · {a.who} · {a.age} ago</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop:14, padding:'10px 12px', background:'var(--bg-elevated)', border:'1px dashed var(--border-default)', borderRadius:6 }}>
            <div style={{ fontSize:10.5, color:'var(--text-tertiary)', marginBottom:4, letterSpacing:'0.06em', textTransform:'uppercase', fontWeight:600 }}>Mise · live</div>
            <div style={{ fontSize:11.5, color:'var(--text-primary)', fontFamily:'var(--font-display)', fontStyle:'italic', lineHeight:1.4 }}>
              "Scallop short by 0.4 kg. After 21:00 I'll suggest swapping starters to langoustine."
            </div>
          </div>
        </Card>

        {/* This week */}
        <Card padded>
          <SectionHeader size="sm" title="This week" subtitle="vs last week"/>
          <div style={{ marginTop:4 }}>
            <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:4 }}>
              <span style={{ fontSize:11, color:'var(--text-tertiary)' }}>Revenue MTD</span>
              <DeltaArrow value={5}/>
            </div>
            <Money value={1283000} size="2xl" tone="gold"/>
            <div style={{ fontSize:10.5, color:'var(--text-tertiary)', marginTop:6 }}>
              Target <span className="num">1 350 000 kr</span> · on pace
            </div>
            <div style={{ marginTop:10 }}>
              <Sparkline data={[82,91,88,76,94,102,89,95,108,97,112,118,94]} width={240} height={32}/>
            </div>
          </div>
          <div style={{ height:1, background:'var(--border-subtle)', margin:'16px 0' }}/>
          <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
            <ProgressBar label="Food GP" value={62.8} max={100} tone="success" size="sm"/>
            <ProgressBar label="Bev GP"  value={71.2} max={100} tone="gold"    size="sm"/>
            <ProgressBar label="Labor %" value={28.4} max={35}  tone="info"    size="sm"/>
          </div>
        </Card>
      </div>
    </ShotApp>
  );
}

// ============================================================================
// LOGOS
// ============================================================================
function LogosSection() {
  return (
    <section className="section-sm">
      <div className="wrap">
        <div style={{ textAlign:'center', marginBottom:32 }}>
          <Eyebrow>Trusted in 11 countries · 187 rooms</Eyebrow>
        </div>
        <LogoStrip marquee/>
      </div>
    </section>
  );
}

// ============================================================================
// PROBLEM
// ============================================================================
function ProblemSection() {
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead
          eyebrow="Why we built this"
          title={<>Six tabs.<br/>Zero answers.</>}
          lede={<>Fine-dining is run on a stack of tools that don't speak to each other:
            a booking platform, a POS, a spreadsheet for margin, a shared inbox for suppliers,
            a WhatsApp thread for the staff, a clipboard for the floor.</>}
        >
          <p className="copy">
            <strong className="ink">Mise en Place is one table.</strong> Reservations, service, finance —
            all on the same data, with an agent that drafts the work that used to live in a thousand
            messages. You stay in charge of the dining room. Everything else, we make calm.
          </p>
        </SectionHead>

        <div className="grid-12" style={{ marginTop:24 }}>
          <BeforeAfter/>
        </div>
      </div>
    </section>
  );
}

function BeforeAfter() {
  const before = [
    'Booking platform',
    'POS terminal',
    'Excel · margin',
    'Shared inbox · suppliers',
    'WhatsApp · staff',
    'Clipboard · floor plan',
  ];
  const after = [
    { name:'Bord', sub:'one table' },
  ];
  return (
    <>
      <div style={{ gridColumn:'span 6', borderTop:'1px solid var(--site-hair)', paddingTop:32 }}>
        <Eyebrow mute>Before</Eyebrow>
        <div style={{ marginTop:18, display:'flex', flexDirection:'column', gap:1, fontFamily:'var(--font-display)' }}>
          {before.map((b,i) => (
            <div key={i} style={{ display:'flex', alignItems:'center', gap:14, padding:'12px 0', borderBottom:'1px dashed var(--site-hair)' }}>
              <span className="num" style={{ fontSize:11, color:'var(--site-ink-dim)', minWidth:24 }}>{String(i+1).padStart(2,'0')}</span>
              <span style={{ fontSize:18, color:'var(--site-ink-mute)', fontStyle:'italic', textDecoration:'line-through', textDecorationColor:'var(--site-ink-dim)' }}>{b}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ gridColumn:'span 6', borderTop:'1px solid var(--site-gold)', paddingTop:32 }}>
        <Eyebrow>After</Eyebrow>
        <div style={{ marginTop:18, padding:'48px 32px', border:'1px solid var(--site-hair)', background:'var(--site-bg-tint)', borderRadius:6, position:'relative' }}>
          <div style={{ position:'absolute', top:14, right:14 }}>
            <span className="tag tag-gold">In place</span>
          </div>
          <div style={{ fontFamily:'var(--font-display)', fontSize:64, lineHeight:0.95, letterSpacing:'-0.03em' }}>Bord.</div>
          <div className="lede" style={{ marginTop:12 }}>One table. The whole restaurant.</div>
          <div style={{ marginTop:32, display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, fontSize:12.5, color:'var(--site-ink-mute)' }}>
            <div>
              <div className="ink" style={{ fontWeight:600, marginBottom:4 }}>Reservations</div>
              <div>Books · waitlist · CRM · WhatsApp</div>
            </div>
            <div>
              <div className="ink" style={{ fontWeight:600, marginBottom:4 }}>Service</div>
              <div>Floor plan · pacing · host stand</div>
            </div>
            <div>
              <div className="ink" style={{ fontWeight:600, marginBottom:4 }}>Finance</div>
              <div>Invoices · GP · menu engineering</div>
            </div>
            <div>
              <div className="ink" style={{ fontWeight:600, marginBottom:4 }}>Mise · the agent</div>
              <div>Drafts. You approve.</div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

// ============================================================================
// PRODUCT TOUR — three modules with screenshots
// ============================================================================
function ProductTour() {
  return (
    <section className="section" style={{ borderTop:'1px solid var(--site-hair)' }}>
      <div className="wrap">
        <div style={{ marginBottom:64 }}>
          <Eyebrow>The product · in three movements</Eyebrow>
          <h2 className="display display-lg" style={{ marginTop:24, maxWidth:880 }}>
            Three rooms,<br/>
            <em className="display-italic ink-gold">one floor plan.</em>
          </h2>
        </div>

        <TourModule
          ix="01"
          title="Reservations that read your dining room"
          body="Every booking carries the names, allergies, history, and quiet preferences your hosts already know. Pacing is offered, not enforced. The waitlist is a person, not a row."
          link={['Tour reservations','/product/reservations']}
          shot={<TourShotReservations/>}
          path="bord.app / reservations"
        />
        <TourModule
          ix="02"
          title="A floor plan that thinks in pace"
          reverse
          body="The floor plan colors itself by what's happening: ordered, fired, finishing, paid. The host stand sees a single iPad-shaped truth. Servers see the next move, not the last alert."
          link={['Tour the floor','/product/service']}
          shot={<TourShotFloor/>}
          path="bord.app / floor plan"
        />
        <TourModule
          ix="03"
          title="Finance that stays open all night"
          body="Invoices match themselves. Menu engineering shows you the four dishes that move the room. Gross profit isn't a quarterly conversation — it's the price tag next to the name of the dish."
          link={['Tour finance','/product/finance']}
          shot={<TourShotMenu/>}
          path="bord.app / menu engineering"
        />
      </div>
    </section>
  );
}

function TourModule({ ix, title, body, link, shot, reverse, path }) {
  return (
    <div className="reveal" style={{
      display:'grid',
      gridTemplateColumns: reverse ? '1.4fr 1fr' : '1fr 1.4fr',
      gap:80, alignItems:'center',
      paddingTop:80, paddingBottom:80,
      borderTop:'1px solid var(--site-hair)',
    }}>
      <div style={{ order: reverse ? 2 : 1 }}>
        <div style={{ fontFamily:'var(--font-display)', fontSize:64, color:'var(--site-gold)', lineHeight:1, letterSpacing:'-0.02em', fontStyle:'italic' }}>{ix}</div>
        <h3 className="display display-md" style={{ marginTop:16, maxWidth:440 }}>{title}</h3>
        <p className="copy" style={{ marginTop:18 }}>{body}</p>
        <div style={{ marginTop:28 }}>
          <a href={link[1]} className="btn-link">{link[0]}</a>
        </div>
      </div>
      <div style={{ order: reverse ? 1 : 2 }}>
        <ProductShot path={path}>
          <div style={{ height:440 }}>{shot}</div>
        </ProductShot>
      </div>
    </div>
  );
}

function TourShotReservations() {
  return (
    <ShotApp active="reservations" title="Reservations" subtitle="Sat · 25 Apr" crumbs={['Bord','Service','Reservations']} compactSidebar
      actions={<><Button size="sm" variant="ghost" icon={<Icon.download size={12}/>}>Export</Button><Button size="sm" variant="primary" icon={<Icon.plus size={12}/>}>New booking</Button></>}>
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:10 }}>
        <Input size="sm" icon={<Icon.search size={11}/>} placeholder="Search guest…" value="" onChange={()=>{}} style={{ width:180 }}/>
        <ToggleGroup size="sm" options={[
          {value:'all', label:'All'},{value:'vip', label:'VIP'},{value:'allergy', label:'Allergies'},{value:'pending', label:'Pending'},
        ]} value="all" onChange={()=>{}}/>
        <span style={{ flex:1 }}/>
        <span style={{ fontSize:10.5, color:'var(--text-tertiary)' }}>22 of 22</span>
      </div>
      <DataTable
        compact
        columns={[
          { key:'time', label:'Time', width:'56px', render:r => <span className="num" style={{ fontWeight:600 }}>{r.time}</span> },
          { key:'p', label:'#', width:'28px', align:'center', render:r => <span className="num">{r.party}</span> },
          { key:'name', label:'Guest', render:r => (
            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
              <Avatar name={r.name} vip={r.vip} size={22}/>
              <div style={{ minWidth:0 }}>
                <div style={{ fontSize:12, fontWeight:500 }}>{r.name}</div>
                {r.dietary.length > 0 && <div style={{ fontSize:10, color:'var(--critical)' }}>{r.dietary.join(', ')}</div>}
              </div>
            </div>
          )},
          { key:'src', label:'Source', width:'70px', render:r => <span style={{ fontSize:10.5, color:'var(--text-tertiary)' }}>{r.src}</span> },
          { key:'st', label:'Status', width:'88px', render:r => <Badge variant={r.stv} size="sm">{r.st}</Badge> },
          { key:'tier', label:'Tier', width:'52px', render:r => r.vip ? <Badge variant="gold" size="sm">{r.vip}</Badge> : <span style={{ color:'var(--text-tertiary)' }}>—</span> },
        ]}
        rows={[
          { id:1, time:'18:00', party:2, name:'Anja Dörner', vip:'VIP',  dietary:[],            src:'Direct',   st:'Confirmed',stv:'success' },
          { id:2, time:'18:30', party:4, name:'Sandra Björkqvist-Rosén', vip:null, dietary:['nut','shell'], src:'Web',  st:'Confirmed',stv:'success' },
          { id:3, time:'19:00', party:8, name:'Chen Wen-Hsiu', vip:'VVIP', dietary:[],            src:'Concierge',st:'Pending',  stv:'warning' },
          { id:4, time:'19:30', party:2, name:'Linnea Andersson', vip:'VIP', dietary:['gluten'],   src:'Web',     st:'Confirmed',stv:'success' },
          { id:5, time:'20:00', party:6, name:'Karim El Hassan', vip:null, dietary:[],            src:'Direct',   st:'Confirmed',stv:'success' },
          { id:6, time:'20:30', party:2, name:'Elin Kvarnström', vip:null, dietary:['vegan'],     src:'Direct',   st:'Confirmed',stv:'success' },
          { id:7, time:'21:00', party:4, name:'Lucía García',     vip:null, dietary:[],            src:'Web',     st:'Cancelled',stv:'neutral' },
        ]}
        getKey={r=>r.id} selectedKey={3}
      />
    </ShotApp>
  );
}

function TourShotFloor() {
  // SVG-style floor plan
  const tables = [
    { x:30, y:30,  w:80,  h:50, label:'T1', state:'seated', party:2 },
    { x:130,y:30,  w:80,  h:50, label:'T2', state:'finishing', party:4 },
    { x:230,y:30,  w:80,  h:50, label:'T3', state:'open', party:0 },
    { x:330,y:30,  w:90,  h:50, label:'T4', state:'seated', party:6 },
    { x:30, y:100, w:60,  h:60, label:'T5', state:'held',   party:2 },
    { x:110,y:100, w:60,  h:60, label:'T6', state:'seated', party:2 },
    { x:190,y:100, w:80,  h:60, label:'T7', state:'seated', party:4, vip:true },
    { x:290,y:100, w:60,  h:60, label:'T8', state:'open', party:0 },
    { x:370,y:100, w:60,  h:60, label:'T9', state:'dirty', party:0 },
    { x:30, y:180, w:140, h:50, label:'T10', state:'seated', party:8, vip:true },
    { x:190,y:180, w:80, h:50,  label:'T11', state:'finishing', party:2 },
    { x:290,y:180, w:80, h:50,  label:'T12', state:'open', party:0 },
    { x:380,y:180, w:50, h:50,  label:'BAR', state:'blocked', party:0 },
  ];
  const STATE = {
    open:      { fill:'var(--tbl-open)',      stroke:'var(--tbl-open-stroke)' },
    held:      { fill:'var(--tbl-held)',      stroke:'var(--tbl-held-stroke)' },
    seated:    { fill:'var(--tbl-seated)',    stroke:'var(--tbl-seated-stroke)' },
    finishing: { fill:'var(--tbl-finishing)', stroke:'var(--tbl-finishing-stroke)' },
    dirty:     { fill:'var(--tbl-dirty)',     stroke:'var(--tbl-dirty-stroke)' },
    blocked:   { fill:'var(--tbl-blocked)',   stroke:'var(--tbl-blocked-stroke)' },
  };
  return (
    <ShotApp active="floor" title="Floor plan" subtitle="Sat 19:42 · pacing on" crumbs={['Bord','Service','Floor']} compactSidebar
      actions={<>
        <Button size="sm" variant="ghost" icon={<Icon.flame size={12}/>}>Pace</Button>
        <Button size="sm" variant="secondary" icon={<Icon.clock size={12}/>}>Timeline</Button>
      </>}>
      <div style={{ display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:12, height:'100%' }}>
        <Card padded style={{ display:'flex', flexDirection:'column' }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
            <SectionHeader size="sm" title="Dining room" subtitle="13 tables · 9 active"/>
            <div style={{ display:'flex', gap:6 }}>
              {Object.entries(STATE).map(([k,v]) => (
                <span key={k} style={{ display:'inline-flex', alignItems:'center', gap:4, fontSize:10, color:'var(--text-tertiary)', textTransform:'capitalize' }}>
                  <span style={{ width:8, height:8, borderRadius:2, background:v.fill, border:`1px solid ${v.stroke}` }}/> {k}
                </span>
              ))}
            </div>
          </div>
          <div style={{ flex:1, position:'relative', background:'var(--bg-elevated)', borderRadius:6, border:'1px solid var(--border-subtle)' }} className="dot-grid">
            <svg viewBox="0 0 460 250" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }} preserveAspectRatio="xMidYMid meet">
              {tables.map(t => {
                const s = STATE[t.state];
                return (
                  <g key={t.label}>
                    <rect x={t.x} y={t.y} width={t.w} height={t.h} rx={6} fill={s.fill} stroke={s.stroke} strokeWidth={1.4}/>
                    <text x={t.x+8} y={t.y+15} fontSize={9} fontWeight="700" fill="var(--text-primary)" letterSpacing="0.04em">{t.label}{t.vip ? ' ★' : ''}</text>
                    {t.party > 0 && <text x={t.x+8} y={t.y+t.h-8} fontSize={10} fill="var(--text-secondary)" fontFamily="Inter">{t.party} guests</text>}
                  </g>
                );
              })}
            </svg>
          </div>
        </Card>
        <Card padded style={{ overflow:'hidden' }}>
          <SectionHeader size="sm" title="Pace · tonight" subtitle="Course timing by table"/>
          <div style={{ display:'flex', flexDirection:'column', gap:8, marginTop:6 }}>
            {[
              { t:'T1',  course:'Mains',   on:true,  m:32 },
              { t:'T2',  course:'Dessert', on:true,  m:78 },
              { t:'T4',  course:'Mains',   on:true,  m:25 },
              { t:'T6',  course:'Starter', on:true,  m:8  },
              { t:'T7 ★', course:'Tasting · 4/8', on:false, m:62 },
              { t:'T10 ★', course:'Wine pairing', on:true, m:45 },
              { t:'T11', course:'Bill',    on:true,  m:92 },
            ].map((r,i) => (
              <div key={i} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 10px', background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', borderRadius:6 }}>
                <span style={{ fontSize:11, fontWeight:700, minWidth:36, color:'var(--text-primary)' }}>{r.t}</span>
                <span style={{ flex:1, fontSize:11, color:'var(--text-secondary)' }}>{r.course}</span>
                <span className="num" style={{ fontSize:11, color:'var(--text-tertiary)', minWidth:36, textAlign:'right' }}>{r.m}m</span>
                {r.on
                  ? <span style={{ width:8, height:8, borderRadius:999, background:'var(--success)' }}/>
                  : <span style={{ width:8, height:8, borderRadius:999, background:'var(--warning)' }} className="pulse-dot"/>}
              </div>
            ))}
          </div>
        </Card>
      </div>
    </ShotApp>
  );
}

function TourShotMenu() {
  const dishes = [
    { name:'Scallop · brown butter',     gp:58, pop:0.82, q:'Workhorse' },
    { name:'Reindeer · juniper',         gp:64, pop:0.78, q:'Star' },
    { name:'Cèpe ravioli',               gp:71, pop:0.65, q:'Star' },
    { name:'Black truffle agnolotti',    gp:74, pop:0.48, q:'Puzzle' },
    { name:'Halibut · beurre blanc',     gp:62, pop:0.74, q:'Star' },
    { name:'Beetroot · goat curd',       gp:72, pop:0.88, q:'Star' },
    { name:'Cured char',                 gp:68, pop:0.92, q:'Star' },
    { name:'Wild duck · cherry',         gp:54, pop:0.58, q:'Dog' },
    { name:'Langoustine bisque',         gp:66, pop:0.68, q:'Star' },
    { name:'Foraged mushroom risotto',   gp:78, pop:0.42, q:'Puzzle' },
    { name:'Lamb · ramson',              gp:56, pop:0.55, q:'Workhorse' },
    { name:'Smoked oyster',              gp:48, pop:0.38, q:'Dog' },
  ];
  const QC = { Star:'var(--success)', Puzzle:'var(--info)', Workhorse:'var(--accent-gold)', Dog:'var(--critical)' };
  return (
    <ShotApp active="engineering" title="Menu Engineering" subtitle="Last 30 days" crumbs={['Bord','Finance','Menu']} compactSidebar>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:10, marginBottom:12 }}>
        {[
          { name:'Star', count:6, hint:'Push' },
          { name:'Puzzle', count:2, hint:'Reposition' },
          { name:'Workhorse', count:2, hint:'Cost down' },
          { name:'Dog', count:2, hint:'Retire' },
        ].map(c => (
          <Card key={c.name} padded style={{ borderLeft:`3px solid ${QC[c.name]}`, padding:'10px 12px' }}>
            <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between' }}>
              <div style={{ fontSize:10, fontWeight:700, letterSpacing:'0.08em', textTransform:'uppercase', color:QC[c.name] }}>{c.name}</div>
              <span className="num" style={{ fontSize:18, fontWeight:600 }}>{c.count}</span>
            </div>
            <div style={{ fontSize:10.5, color:'var(--text-tertiary)' }}>{c.hint}</div>
          </Card>
        ))}
      </div>
      <Card padded style={{ height:'calc(100% - 70px)' }}>
        <SectionHeader size="sm" title="Popularity × Gross profit" subtitle="Each dot is a dish."/>
        <div style={{ position:'relative', height:'calc(100% - 38px)', marginTop:6, background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', borderRadius:6, overflow:'hidden' }}>
          <div style={{ position:'absolute', left:0, top:0, right:'50%', bottom:'50%', background:'var(--info-soft)', borderRight:'1px dashed var(--border-default)', borderBottom:'1px dashed var(--border-default)' }}/>
          <div style={{ position:'absolute', left:'50%', top:0, right:0, bottom:'50%', background:'var(--success-soft)', borderBottom:'1px dashed var(--border-default)' }}/>
          <div style={{ position:'absolute', left:0, top:'50%', right:'50%', bottom:0, background:'var(--critical-soft)', borderRight:'1px dashed var(--border-default)' }}/>
          <div style={{ position:'absolute', left:'50%', top:'50%', right:0, bottom:0, background:'var(--accent-gold-soft)' }}/>
          <div style={{ position:'absolute', top:6, left:8,    fontSize:9, fontWeight:700, letterSpacing:'0.08em', color:'var(--info)', textTransform:'uppercase' }}>Puzzle</div>
          <div style={{ position:'absolute', top:6, right:8,   fontSize:9, fontWeight:700, letterSpacing:'0.08em', color:'var(--success)', textTransform:'uppercase' }}>Star</div>
          <div style={{ position:'absolute', bottom:6, left:8, fontSize:9, fontWeight:700, letterSpacing:'0.08em', color:'var(--critical)', textTransform:'uppercase' }}>Dog</div>
          <div style={{ position:'absolute', bottom:6, right:8,fontSize:9, fontWeight:700, letterSpacing:'0.08em', color:'var(--accent-gold)', textTransform:'uppercase' }}>Workhorse</div>
          {dishes.map((d,i) => {
            const left = `${d.pop * 100}%`;
            const top = `${100 - ((d.gp - 45) / 40) * 100}%`;
            const r = 8 + i*0.3;
            return <div key={i} title={d.name} style={{
              position:'absolute', left, top, transform:'translate(-50%, -50%)',
              width:r*2, height:r*2, borderRadius:999, background:QC[d.q],
              opacity:0.85, border:'2px solid var(--bg-elevated)', boxShadow:'0 2px 6px rgba(0,0,0,0.3)',
            }}/>;
          })}
        </div>
      </Card>
    </ShotApp>
  );
}

// ============================================================================
// MISE — the agent
// ============================================================================
function MiseSection() {
  return (
    <section className="section" style={{ borderTop:'1px solid var(--site-hair)', background:'var(--site-bg-tint)' }}>
      <div className="wrap">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:80, alignItems:'start' }}>
          <div style={{ position:'sticky', top:96 }}>
            <Eyebrow>Mise · the agent</Eyebrow>
            <h2 className="display display-lg" style={{ marginTop:24 }}>
              Drafts.<br/>
              <em className="display-italic ink-gold">You approve.</em>
            </h2>
            <p className="copy" style={{ marginTop:24 }}>
              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>
            <p className="copy" style={{ marginTop:16 }}>
              Three tiers of autonomy. <span className="ink">You set the line.</span> Mise never crosses it.
            </p>
            <div style={{ marginTop:32 }}>
              <a href="/product/mise" className="btn-link">Read the philosophy</a>
            </div>
          </div>
          <div>
            <ProductShot path="bord.app / mise · approval queue">
              <div style={{ height:520 }}>
                <MiseShot/>
              </div>
            </ProductShot>
            <div style={{ marginTop:32, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0, border:'1px solid var(--site-hair)' }}>
              <TierCell color="var(--success)" tier="Auto" label="Routine"
                ex="Sync calendars · retry failed integrations · refresh forecasts"/>
              <TierCell color="var(--info)" tier="Notify" label="Reversible"
                ex="Confirm a booking · update menu availability · send the briefing"/>
              <TierCell color="var(--site-gold)" tier="Draft" label="Consequential"
                ex="POs · guest replies · schedule changes · price moves"/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
function TierCell({ color, tier, label, ex }) {
  return (
    <div style={{ padding:24, borderRight:'1px solid var(--site-hair)' }}>
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:10 }}>
        <span style={{ width:8, height:8, borderRadius:2, background:color, transform:'rotate(45deg)' }}/>
        <span style={{ fontSize:11, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color }}>{tier}</span>
      </div>
      <div className="ink" style={{ fontSize:14, fontWeight:600, marginBottom:6, fontFamily:'var(--font-display)' }}>{label}</div>
      <div className="ink-mute" style={{ fontSize:12.5, lineHeight:1.5 }}>{ex}</div>
    </div>
  );
}

function MiseShot() {
  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', flexDirection:'column', gap:10 }}>
        {/* Tool call chip */}
        <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> needed.
              I drafted <strong className="ink-gold">PO-00249</strong> to Havets Delikatesser AB:
              scallop 6 kg, langoustine 4 kg, turbot 3 kg — subtotal <span className="num">14 820 kr</span>, delivery Mon 07:30.
            </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>

        {/* Approval card */}
        <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)' }}>2 of 2</span>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:14 }}>
            <div>
              <div style={{ fontSize:13, fontWeight:600, marginBottom:8 }}>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>
            <div style={{ display:'flex', flexDirection:'column', gap:8, justifyContent:'space-between' }}>
              <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                <KeyValue k="Delivery" v="Mon 07:30" size="sm"/>
                <KeyValue k="Match"    v="3-way · 100%" size="sm"/>
                <KeyValue k="Reason"   v="Forecast" size="sm"/>
              </div>
              <div style={{ display:'flex', gap:6 }}>
                <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>
        </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 to 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>
    </ShotApp>
  );
}

// ============================================================================
// PRINCIPLES (numbered)
// ============================================================================
function PrinciplesSection() {
  return (
    <section className="section" style={{ borderTop:'1px solid var(--site-hair)' }}>
      <div className="wrap wrap-narrow">
        <SectionHead align="center"
          eyebrow="Five principles"
          title="What we believe about restaurants."
          lede="Software for fine dining is overdue for a different posture. These are ours."
        />
        <ol className="numlist" style={{ marginTop:32 }}>
          <Principle title="The dining room is the product."
            body="The host stand, the floor, the table — these are the places work happens. The screen behind the desk is in service of them, not the other way around."/>
          <Principle title="Margin is not a quarterly conversation."
            body="Cost is a number that lives next to the dish. Every plate carries its own profit and loss. We make that visible all the way to the printout in the kitchen."/>
          <Principle title="Names, not rows."
            body="Anja sat in the window. Sandra brought her father. Karim doesn't drink. None of this should require a click. It is the shape of hospitality."/>
          <Principle title="Drafts, not autopilot."
            body="An agent that books on your behalf is a liability. An agent that drafts the booking, the reply, the PO, the shift — and waits for your ten-second yes — is a colleague."/>
          <Principle title="Quiet, by default."
            body="Notifications cost attention. Pacing should suggest, not interrupt. We work very hard to hold the room calm — even on a Saturday at twenty past nine."/>
        </ol>
      </div>
    </section>
  );
}
function Principle({ title, body }) {
  return (
    <li>
      <div>
        <h3 className="display display-md" style={{ marginBottom:8 }}>{title}</h3>
        <p className="copy">{body}</p>
      </div>
    </li>
  );
}

// ============================================================================
// NUMBERS
// ============================================================================
function NumbersSection() {
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center' }}>
          <div>
            <Eyebrow>Numbers, not promises</Eyebrow>
            <h2 className="display display-lg" style={{ marginTop:24 }}>
              <em className="display-italic">What changes</em><br/>
              when one table replaces six.
            </h2>
            <p className="copy" style={{ marginTop:24 }}>
              Median across 47 rooms running Bord for at least 6 months.
              Not all of it is software — some of it is what software lets your team finally see.
              All of it travels with you when you leave; export anything, anytime.
            </p>
          </div>
          <div>
            <ProofBar items={[
              { value:'+2.4 pts', label:'Food gross profit',    note:'after first quarter' },
              { value:'7h / wk',  label:'Manager hours back',   note:'agent draft tier' },
              { value:'+12%',     label:'Repeat-guest share',   note:'guest CRM at the host stand' },
            ]}/>
            <div style={{ marginTop:24, display:'grid', gridTemplateColumns:'1fr 1fr', gap:24 }}>
              <div className="keyline">
                <span className="keyline-label">Time to live</span>
                <div className="display display-md">14 days</div>
                <div className="ink-mute" style={{ fontSize:13, marginTop:4 }}>Onboarding led by a real chef. We import your booking history before week one.</div>
              </div>
              <div className="keyline">
                <span className="keyline-label">SLA · service hours</span>
                <div className="display display-md">99.97%</div>
                <div className="ink-mute" style={{ fontSize:13, marginTop:4 }}>17:00–01:00 local, every day. A human on call, not a chatbot.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// CUSTOMER VOICE
// ============================================================================
function CustomerVoice() {
  return (
    <section className="section" style={{ borderTop:'1px solid var(--site-hair)', borderBottom:'1px solid var(--site-hair)' }}>
      <div className="wrap">
        <div style={{ display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:80, alignItems:'center' }}>
          <div>
            <Eyebrow>From the floor</Eyebrow>
            <Pullquote attrib="Inger Bergström · Owner, Björk & Hagel · Stockholm · 2★">
              We replaced four systems with Bord on a Tuesday. By Saturday I knew which two dishes
              were paying for the room — and which one I'd been keeping out of habit. The kitchen
              didn't have to learn anything new. They could just see.
            </Pullquote>
            <div style={{ marginTop:32 }}>
              <a href="/customers" className="btn-link">Read more from operators</a>
            </div>
          </div>
          <div>
            <div style={{ display:'flex', flexDirection:'column', gap:0, border:'1px solid var(--site-hair)' }}>
              {[
                ['Service hours saved · per manager · per week',  '7.4 h'],
                ['Median first-month GP improvement',             '+2.4 pts'],
                ['Average integrations consolidated',             '6 → 1'],
                ['Operator NPS · 2026 Q1',                        '74'],
              ].map((r,i,arr) => (
                <div key={i} style={{
                  padding:'18px 20px', display:'flex', alignItems:'baseline', justifyContent:'space-between',
                  borderBottom: i < arr.length-1 ? '1px solid var(--site-hair)' : 'none',
                  gap:14,
                }}>
                  <span className="ink-mute" style={{ fontSize:12.5, fontFamily:'var(--font-display)', fontStyle:'italic' }}>{r[0]}</span>
                  <span className="display display-sm ink-gold" style={{ fontWeight:500 }}>{r[1]}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.LandingPage = LandingPage;