// bitey.jsx — Bitey (restaurant food delivery). Lo-fi + Hi-fi.

const BT = {
  lime: '#C8FF35',
  limeDeep: '#A8E020',
  cherry: '#FF4B4B',
  cream: '#FAF6E8',
  ink: '#0E1610',
  soft: '#5A6058',
  blush: '#FFD6CC',
};

// ============================================================
// LO-FI
// ============================================================
const LoHome = () => (
  <SkPhone>
    <div style={{ paddingTop: 12 }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div>
          <div className="sk" style={{ fontSize: 10, opacity: 0.6 }}>DELIVER TO ▾</div>
          <div className="sk-h" style={{ fontSize: 16, lineHeight: 1 }}>📍 14 oak st, apt 3</div>
        </div>
        <div className="sk-circle" style={{ width: 32, height: 32 }} />
      </div>
      <SkRect h={40} style={{ marginTop: 10 }}>🔍 search restaurants or dish</SkRect>
      <div style={{ display:'flex', gap: 8, marginTop: 12, overflow:'hidden' }}>
        {['🍕','🍔','🌮','🍜','🥗','🍣'].map((e,i)=>(
          <div key={i} style={{ minWidth: 50, textAlign:'center' }}>
            <div className="sk-circle" style={{ width: 46, height: 46, fontSize: 22, display:'flex', alignItems:'center', justifyContent:'center', background: i===0?'#FFE145':'transparent' }}>{e}</div>
            <div className="sk" style={{ fontSize: 9, marginTop: 4 }}>{['pizza','burger','tacos','ramen','salad','sushi'][i]}</div>
          </div>
        ))}
      </div>
      <SkRect h={110} style={{ marginTop: 12, padding: 8, flexDirection:'column', alignItems:'stretch', background: '#FFE145' }}>
        <div className="sk-h" style={{ fontSize: 18, lineHeight: 1 }}>40% off · 1st order</div>
        <SkLines count={2} widths={['70%','50%']} />
        <div className="sk-pill" style={{ alignSelf:'flex-start', marginTop: 'auto' }}>code: BITE40</div>
      </SkRect>
      <div className="sk" style={{ fontSize: 13, marginTop: 14, marginBottom: 6 }}>top picks near you</div>
      <div style={{ display:'flex', flexDirection:'column', gap: 10 }}>
        {[
          ['Joe\'s Pizza Co.','★ 4.7 · 15min','free delivery'],
          ['Burrito Bowl','★ 4.5 · 22min','$1.99'],
          ['Ramen House','★ 4.8 · 28min','$2.49'],
        ].map(([n,r,d])=>(
          <SkRect key={n} h={86} style={{ padding: 6, flexDirection:'row', gap: 8 }}>
            <div className="sk-img" style={{ width: 76, height: 74 }} />
            <div style={{ flex:1, display:'flex', flexDirection:'column', justifyContent:'space-between', alignItems:'flex-start' }}>
              <div className="sk-h" style={{ fontSize: 16, lineHeight: 1 }}>{n}</div>
              <SkLines count={1} widths={['80%']} />
              <div className="sk" style={{ fontSize: 10, opacity: 0.6 }}>{r}</div>
              <div className="sk-pill">{d}</div>
            </div>
          </SkRect>
        ))}
      </div>
    </div>
    <div className="sk-tabbar">
      {['home','search','orders','me'].map((t,i)=>(
        <div key={t} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: 2 }}>
          <div className="sk-tab-ico" />
          <span className="sk" style={{ fontSize: 9, opacity: i===0?1:0.5 }}>{t}</span>
        </div>
      ))}
    </div>
    <SkNote top={130} right={-30} rotate={4} w={80}>category chips</SkNote>
  </SkPhone>
);

const LoRestaurant = () => (
  <SkPhone>
    <div className="sk-img" style={{ height: 160, margin: '4px -16px 0', borderRadius: 0, border: 'none', borderBottom: '1.8px solid #1d1a17' }} />
    <div style={{ padding: '12px 0' }}>
      <div style={{ display:'flex', justifyContent:'space-between' }}>
        <div className="sk-h" style={{ fontSize: 22, lineHeight: 1 }}>Joe's Pizza Co.</div>
        <span className="sk-pill">♡</span>
      </div>
      <div className="sk" style={{ fontSize: 11, opacity: 0.6, marginTop: 4 }}>★ 4.7 · pizza · italian · 0.4mi</div>
      <div style={{ display:'flex', gap: 6, marginTop: 8 }}>
        <span className="sk-pill">⏱ 15 min</span>
        <span className="sk-pill">free deliv</span>
        <span className="sk-pill">$$</span>
      </div>
      <div style={{ display:'flex', gap: 6, marginTop: 12, flexWrap:'wrap' }}>
        {['popular','pizza','sides','drinks'].map((t,i)=>(<span key={t} className="sk-pill" style={i===0?{background:'#0E1610', color:'#fbf7ef'}:{}}>{t}</span>))}
      </div>
      <div className="sk" style={{ fontSize: 13, marginTop: 12, marginBottom: 6 }}>most ordered</div>
      <div style={{ display:'flex', flexDirection:'column', gap: 10 }}>
        {[
          ['Margherita Classic','$14','tomato, mozz, basil'],
          ['Pepperoni Supreme','$17','double pep, chili oil'],
          ['Veggie Garden','$15','peppers, onion, mush'],
        ].map(([n,p,d])=>(
          <SkRect key={n} h={70} style={{ padding: 6, flexDirection:'row', gap: 8 }}>
            <div style={{ flex:1, display:'flex', flexDirection:'column', justifyContent:'space-between', alignItems:'flex-start' }}>
              <div className="sk-h" style={{ fontSize: 15, lineHeight: 1 }}>{n}</div>
              <SkLines count={1} widths={['90%']} />
              <div className="sk-h" style={{ fontSize: 14 }}>{p}</div>
            </div>
            <div className="sk-img" style={{ width: 56, height: 56 }} />
          </SkRect>
        ))}
      </div>
    </div>
    <SkNote top={260} right={-30} rotate={5} w={90}>tab nav (sticky)</SkNote>
  </SkPhone>
);

const LoMenuItem = () => (
  <SkPhone>
    <div className="sk-img" style={{ height: 220, margin: '4px -16px 0', borderRadius: 0, border: 'none', borderBottom: '1.8px solid #1d1a17' }} />
    <div style={{ padding: '12px 0' }}>
      <div className="sk-h" style={{ fontSize: 22, lineHeight: 1 }}>Pepperoni Supreme</div>
      <SkLines count={2} widths={['90%','60%']} />
      <div className="sk-h" style={{ fontSize: 18, marginTop: 8 }}>$17</div>

      <div className="sk" style={{ fontSize: 13, marginTop: 14 }}>size · required</div>
      <div style={{ display:'flex', flexDirection:'column', gap: 6, marginTop: 6 }}>
        {[['10" small','+$0','o'],['14" medium','+$3','●'],['18" large','+$6','o']].map(([n,p,r])=>(
          <SkRect key={n} h={36} style={{ padding: 6, flexDirection:'row', justifyContent:'space-between' }}>
            <div style={{ display:'flex', gap: 8, alignItems:'center' }}>
              <div className="sk-circle" style={{ width: 18, height: 18, fontSize: 11, display:'flex', alignItems:'center', justifyContent:'center', background: r==='●'?'#0E1610':'transparent', color: r==='●'?'#fbf7ef':'#0E1610' }}>{r==='●'?'•':''}</div>
              <span className="sk-h" style={{ fontSize: 14 }}>{n}</span>
            </div>
            <span className="sk" style={{ fontSize: 12 }}>{p}</span>
          </SkRect>
        ))}
      </div>

      <div className="sk" style={{ fontSize: 13, marginTop: 14 }}>add-ons</div>
      <div style={{ display:'flex', flexDirection:'column', gap: 6, marginTop: 6 }}>
        {[['extra cheese','+$2'],['chili oil','+$1'],['olives','+$1']].map(([n,p])=>(
          <SkRect key={n} h={32} style={{ padding: 6, flexDirection:'row', justifyContent:'space-between' }}>
            <span className="sk-h" style={{ fontSize: 13 }}>☐ {n}</span>
            <span className="sk" style={{ fontSize: 11 }}>{p}</span>
          </SkRect>
        ))}
      </div>
    </div>
    <div style={{ position:'absolute', bottom: 12, left: 16, right: 16, display:'flex', gap: 8 }}>
      <SkRect h={48} style={{ width: 100, padding: 4, flexDirection:'row', gap: 6 }}>
        <span>−</span><span className="sk-h" style={{ fontSize: 16 }}>1</span><span>+</span>
      </SkRect>
      <SkRect h={48} fill style={{ flex: 1, padding: 4 }}>add to cart · $20</SkRect>
    </div>
  </SkPhone>
);

const LoCart = () => (
  <SkPhone>
    <div style={{ paddingTop: 12 }}>
      <div className="sk-h" style={{ fontSize: 22, lineHeight: 1 }}>your cart</div>
      <div className="sk" style={{ fontSize: 11, opacity: 0.6 }}>from Joe's Pizza Co.</div>
      <div style={{ display:'flex', flexDirection:'column', gap: 8, marginTop: 12 }}>
        {[
          ['1', 'Pepperoni Supreme', 'med · extra cheese', '$20'],
          ['1', 'Caesar Salad', '', '$9'],
          ['2', 'Garlic Knots', '', '$6'],
        ].map(([q,n,m,p],i)=>(
          <SkRect key={i} h={64} style={{ padding: 6, flexDirection:'row', alignItems:'center', gap: 8 }}>
            <div className="sk-rect" style={{ padding: '4px 8px', fontFamily:"'Patrick Hand', cursive" }}>{q}×</div>
            <div style={{ flex:1, textAlign:'left' }}>
              <div className="sk-h" style={{ fontSize: 14, lineHeight: 1 }}>{n}</div>
              {m && <div className="sk" style={{ fontSize: 10, opacity: 0.6 }}>{m}</div>}
            </div>
            <div className="sk-h" style={{ fontSize: 14 }}>{p}</div>
          </SkRect>
        ))}
      </div>
      <SkRect h={36} style={{ marginTop: 12, padding: 8, justifyContent:'flex-start' }}>+ add note for restaurant</SkRect>
      <div style={{ marginTop: 14, display:'flex', flexDirection:'column', gap: 4 }}>
        <div style={{ display:'flex', justifyContent:'space-between' }} className="sk">subtotal <span>$35.00</span></div>
        <div style={{ display:'flex', justifyContent:'space-between' }} className="sk">delivery <span>free</span></div>
        <div style={{ display:'flex', justifyContent:'space-between' }} className="sk">tax <span>$2.80</span></div>
        <div className="sk-line-dashed" style={{ margin: '6px 0' }} />
        <div style={{ display:'flex', justifyContent:'space-between' }} className="sk-h" >
          <span style={{ fontSize: 16 }}>total</span><span style={{ fontSize: 18 }}>$37.80</span>
        </div>
      </div>
    </div>
    <div style={{ position:'absolute', bottom: 12, left: 16, right: 16 }}>
      <SkRect h={50} fill>checkout</SkRect>
    </div>
    <SkNote top={120} right={-20} rotate={5} w={80}>qty stepper</SkNote>
  </SkPhone>
);

const LoCheckout = () => (
  <SkPhone>
    <div style={{ paddingTop: 12 }}>
      <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
        <span className="sk" style={{ fontSize: 18 }}>←</span>
        <div className="sk-h" style={{ fontSize: 18 }}>checkout</div>
      </div>
      <div className="sk" style={{ fontSize: 12, opacity: 0.6, marginTop: 10 }}>deliver to</div>
      <SkRect h={56} style={{ marginTop: 6, padding: 8, justifyContent:'space-between', flexDirection:'row', alignItems:'center' }}>
        <div style={{ textAlign:'left' }}>
          <div className="sk-h" style={{ fontSize: 14, lineHeight: 1 }}>📍 home</div>
          <div className="sk" style={{ fontSize: 10, opacity: 0.6 }}>14 oak st, apt 3</div>
        </div>
        <span className="sk-pill">change</span>
      </SkRect>

      <div className="sk" style={{ fontSize: 12, opacity: 0.6, marginTop: 12 }}>delivery time</div>
      <div style={{ display:'flex', gap: 6, marginTop: 6 }}>
        <SkRect h={50} style={{ flex: 1, padding: 4, flexDirection:'column' }} fill>
          <div className="sk" style={{ fontSize: 10 }}>standard</div>
          <div className="sk-h" style={{ fontSize: 13 }}>15 min</div>
        </SkRect>
        <SkRect h={50} style={{ flex: 1, padding: 4, flexDirection:'column' }}>
          <div className="sk" style={{ fontSize: 10, opacity: 0.6 }}>schedule</div>
          <div className="sk-h" style={{ fontSize: 13 }}>later</div>
        </SkRect>
      </div>

      <div className="sk" style={{ fontSize: 12, opacity: 0.6, marginTop: 12 }}>pay with</div>
      <SkRect h={50} style={{ marginTop: 6, padding: 8, justifyContent:'space-between', flexDirection:'row' }}>
        <div className="sk-h" style={{ fontSize: 14 }}>💳 •••• 4242</div>
        <span className="sk-pill">edit</span>
      </SkRect>

      <div className="sk" style={{ fontSize: 12, opacity: 0.6, marginTop: 12 }}>add tip</div>
      <div style={{ display:'flex', gap: 6, marginTop: 6 }}>
        {[['15%'],['20%','x'],['25%'],['$']].map(([t,a],i)=>(
          <SkRect key={i} h={40} style={{ flex: 1 }} fill={a==='x'}>{t}</SkRect>
        ))}
      </div>

      <div className="sk" style={{ marginTop: 14, fontSize: 12 }}>order total <span style={{ float:'right', fontSize: 16 }} className="sk-h">$40.80</span></div>
    </div>
    <div style={{ position:'absolute', bottom: 12, left: 16, right: 16 }}>
      <SkRect h={50} fill>place order →</SkRect>
    </div>
    <SkNote top={200} left={-30} rotate={-5} w={90}>delivery options</SkNote>
  </SkPhone>
);

const LoTracking = () => (
  <SkPhone>
    <div style={{ paddingTop: 12 }}>
      <div className="sk-h" style={{ fontSize: 22, lineHeight: 1 }}>order on the way</div>
      <div className="sk-h" style={{ fontSize: 36, lineHeight: 1, marginTop: 6 }}>~ 9 min</div>
      <SkRect h={130} style={{ marginTop: 10, padding: 8, flexDirection:'column', alignItems:'stretch' }}>
        <div className="sk" style={{ fontSize: 10, opacity: 0.6 }}>(map preview)</div>
        <svg viewBox="0 0 200 80" style={{ width:'100%', height: '100%' }}>
          <rect width="200" height="80" fill="none" />
          <path d="M10,60 Q60,30 100,40 T180,20" stroke="#1d1a17" strokeWidth="2" fill="none" strokeDasharray="3 3" />
          <circle cx="10" cy="60" r="5" fill="#1d1a17" />
          <circle cx="180" cy="20" r="5" fill="none" stroke="#1d1a17" strokeWidth="2" />
          <text x="100" y="35" fontSize="10" fontFamily="Patrick Hand">🛵</text>
        </svg>
      </SkRect>

      <div style={{ marginTop: 14, position:'relative', paddingLeft: 22 }}>
        <div style={{ position:'absolute', left: 9, top: 0, bottom: 0, width: 1.5, background: '#1d1a17' }} />
        {[
          ['order placed','9:14',true],
          ['preparing','9:18',true],
          ['picked up','9:32',true],
          ['on the way','—',false],
          ['delivered','—',false],
        ].map(([n,t,d],i)=>(
          <div key={i} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 10, position:'relative' }}>
            <div style={{ position:'absolute', left: -22, width: 14, height: 14, borderRadius: 999, background: d?'#1d1a17':'#fbf7ef', border: '1.8px solid #1d1a17' }} />
            <span className={d?'sk-h':'sk'} style={{ fontSize: 14, opacity: d?1:0.5 }}>{n}</span>
            <span className="sk" style={{ fontSize: 11, opacity: 0.6 }}>{t}</span>
          </div>
        ))}
      </div>
    </div>
    <div style={{ position:'absolute', bottom: 12, left: 16, right: 16, display:'flex', gap: 8 }}>
      <SkRect h={44} style={{ flex: 1 }}>💬 chat</SkRect>
      <SkRect h={44} style={{ flex: 1 }}>📞 call</SkRect>
    </div>
    <SkNote top={70} right={-30} rotate={5} w={80}>ETA hero</SkNote>
  </SkPhone>
);

const LoRate = () => (
  <SkPhone>
    <div style={{ paddingTop: 30, display:'flex', flexDirection:'column', alignItems:'center', height: '100%' }}>
      <div style={{ fontSize: 56 }}>🍕</div>
      <div className="sk-h" style={{ fontSize: 28, lineHeight: 1, marginTop: 8, textAlign:'center' }}>enjoy your meal!</div>
      <div className="sk" style={{ fontSize: 12, opacity: 0.6, marginTop: 6 }}>from Joe's Pizza Co.</div>

      <div className="sk" style={{ fontSize: 13, marginTop: 24 }}>how was the food?</div>
      <div style={{ display:'flex', gap: 6, marginTop: 8 }}>
        {[1,2,3,4,5].map(i=>(
          <span key={i} className="sk-h" style={{ fontSize: 30, color: i<=4?'#FFB800':'#1d1a17', opacity: i<=4?1:0.3 }}>★</span>
        ))}
      </div>
      <div className="sk" style={{ fontSize: 13, marginTop: 18 }}>how was the courier?</div>
      <div style={{ display:'flex', gap: 8, marginTop: 8 }}>
        {['👎','👍'].map(e=>(<div key={e} className="sk-circle" style={{ width:50, height:50, fontSize: 24, display:'flex', alignItems:'center', justifyContent:'center', background: e==='👍'?'#FFE145':'transparent' }}>{e}</div>))}
      </div>
      <SkRect h={70} style={{ width:'100%', marginTop: 18, padding: 8, alignItems:'flex-start', justifyContent:'flex-start' }}>
        <span className="sk" style={{ fontSize: 12, opacity: 0.6 }}>leave a review (optional)…</span>
      </SkRect>
      <div style={{ flex:1 }} />
      <SkRect h={46} fill style={{ width: '100%' }}>submit & re-order</SkRect>
      <SkRect h={36} style={{ borderStyle:'none', background:'transparent', width: '100%' }}>skip</SkRect>
    </div>
    <SkNote top={210} left={-40} rotate={-6} w={110}>5-star + courier tip</SkNote>
  </SkPhone>
);

// ============================================================
// HI-FI
// ============================================================
const BtShell = ({ children, dark = false, bg }) => (
  <div style={{
    width: 360, height: 740, borderRadius: 44, overflow: 'hidden',
    background: bg || BT.cream, position: 'relative',
    boxShadow: '0 30px 60px rgba(14,22,16,0.18), 0 0 0 1.5px rgba(14,22,16,0.4)',
    fontFamily: "'Space Grotesk', system-ui, sans-serif", color: BT.ink,
  }}>
    <div style={{ position:'absolute', top: 10, left: '50%', transform:'translateX(-50%)', width: 100, height: 28, borderRadius: 20, background:'#000', zIndex: 50 }} />
    <div style={{ position:'absolute', top: 12, left: 18, right: 18, display:'flex', justifyContent:'space-between', alignItems:'center', zIndex: 40, fontSize: 13, fontWeight: 600, color: dark ? '#fff' : BT.ink }}>
      <span>9:41</span><span style={{ width: 100 }} /><span>● ●●● 100%</span>
    </div>
    <div style={{ position:'absolute', bottom: 8, left: '50%', transform:'translateX(-50%)', width: 120, height: 4, borderRadius: 4, background: dark?'rgba(255,255,255,0.6)':'rgba(0,0,0,0.3)', zIndex: 60 }} />
    <div style={{ paddingTop: 50, height: 'calc(100% - 50px)', overflow:'auto' }}>{children}</div>
  </div>
);

const HiHome = () => (
  <BtShell>
    <div style={{ padding: '8px 20px 100px' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div>
          <div style={{ fontSize: 10, fontWeight: 700, color: BT.soft }}>DELIVER TO ▾</div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18, lineHeight: 1 }}>14 Oak St, Apt 3</div>
        </div>
        <div style={{ width: 44, height: 44, borderRadius: 999, background: BT.lime, border: `2px solid ${BT.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 20 }}>🦊</div>
      </div>

      <div style={{ marginTop: 14, background:'#fff', border:`2px solid ${BT.ink}`, borderRadius: 999, padding:'14px 18px', display:'flex', alignItems:'center', gap: 10, fontWeight: 600, fontSize: 14, color: BT.soft }}>
        <span>🔍</span> craving pizza, tacos, ramen…
      </div>

      <div style={{ display:'flex', gap: 12, marginTop: 16, overflow:'visible' }}>
        {[['🍕','pizza',true],['🍔','burger'],['🌮','tacos'],['🍜','ramen'],['🥗','salad'],['🍣','sushi']].map(([e,l,a])=>(
          <div key={l} style={{ minWidth: 58, textAlign:'center' }}>
            <div style={{ width: 58, height: 58, borderRadius: 18, background: a?BT.lime:'#fff', border:`2px solid ${BT.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 28 }}>{e}</div>
            <div style={{ fontSize: 11, fontWeight: 700, marginTop: 6 }}>{l}</div>
          </div>
        ))}
      </div>

      {/* Promo */}
      <div style={{ marginTop: 18, background: BT.cherry, color:'#fff', borderRadius: 22, padding: 18, position:'relative', overflow:'hidden', border:`2px solid ${BT.ink}` }}>
        <div style={{ position:'absolute', right: -10, top: -20, fontSize: 130, transform:'rotate(-12deg)' }}>🍕</div>
        <div style={{ display:'inline-block', background: BT.lime, color: BT.ink, fontSize: 10, fontWeight: 800, padding:'3px 8px', borderRadius: 6 }}>FIRST ORDER</div>
        <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 32, lineHeight: 0.95, marginTop: 6 }}>40% OFF<br/>any order</div>
        <div style={{ marginTop: 12, background:'rgba(255,255,255,0.2)', display:'inline-block', borderRadius: 8, padding:'6px 10px', fontWeight: 800, fontSize: 12, fontFamily:'DM Mono' }}>code: BITE40</div>
      </div>

      <div style={{ marginTop: 22, display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
        <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 22 }}>top picks 🔥</div>
        <div style={{ fontSize: 12, color: BT.soft, fontWeight: 700 }}>see all →</div>
      </div>

      <div style={{ display:'flex', flexDirection:'column', gap: 12, marginTop: 12 }}>
        {[
          ['Joe\'s Pizza Co.','★ 4.7','15 min','free', BT.lime, '🍕'],
          ['Burrito Bowl','★ 4.5','22 min','$1.99', BT.blush, '🌯'],
          ['Ramen House','★ 4.8','28 min','$2.49', '#FFE145', '🍜'],
        ].map(([n,r,t,d,bg,e])=>(
          <div key={n} style={{ display:'flex', gap: 12, alignItems:'center', background:'#fff', border:`2px solid ${BT.ink}`, borderRadius: 18, padding: 10 }}>
            <div style={{ width: 70, height: 70, borderRadius: 14, background: bg, border:`2px solid ${BT.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 36 }}>{e}</div>
            <div style={{ flex:1 }}>
              <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 17 }}>{n}</div>
              <div style={{ display:'flex', gap: 6, marginTop: 4 }}>
                <span style={{ fontSize: 11, fontWeight: 700 }}>{r}</span>
                <span style={{ fontSize: 11, fontWeight: 600, color: BT.soft }}>· ⏱ {t}</span>
              </div>
              <div style={{ display:'inline-block', marginTop: 4, background: d==='free'?BT.lime:'#fff', border:`1.5px solid ${BT.ink}`, fontSize: 10, fontWeight: 800, padding:'2px 6px', borderRadius: 6 }}>
                {d==='free'?'FREE DELIVERY':d}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
    <div style={{ position:'absolute', bottom: 0, left: 0, right: 0, height: 80, background:'#fff', borderTop:`2px solid ${BT.ink}`, display:'flex', alignItems:'center', justifyContent:'space-around', paddingBottom: 18 }}>
      {[['🏠','home',true],['🔍','search'],['🧾','orders'],['👤','me']].map(([i,l,a],idx)=>(
        <div key={idx} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: 2, opacity: a?1:0.5 }}>
          <div style={{ fontSize: 22 }}>{i}</div>
          <div style={{ fontSize: 10, fontWeight: 700 }}>{l}</div>
        </div>
      ))}
    </div>
  </BtShell>
);

const HiRestaurant = () => (
  <BtShell>
    <div style={{ position:'relative', height: 240, background: `linear-gradient(135deg, ${BT.lime}, ${BT.limeDeep})`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 130, marginTop: -50, paddingTop: 50 }}>
      🍕
      <div style={{ position:'absolute', top: 60, left: 16, width: 36, height: 36, borderRadius: 999, background:'rgba(255,255,255,0.95)', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 18 }}>←</div>
      <div style={{ position:'absolute', top: 60, right: 16, width: 36, height: 36, borderRadius: 999, background:'rgba(255,255,255,0.95)', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 16 }}>♡</div>
    </div>
    <div style={{ padding: '16px 20px 100px' }}>
      <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 28, lineHeight: 1 }}>Joe's Pizza Co.</div>
      <div style={{ fontSize: 12, color: BT.soft, fontWeight: 600, marginTop: 6 }}>pizza · italian · 0.4mi away</div>
      <div style={{ display:'flex', gap: 6, marginTop: 10 }}>
        <span style={{ background: BT.ink, color:'#fff', borderRadius: 999, padding:'5px 10px', fontSize: 11, fontWeight: 800 }}>★ 4.7</span>
        <span style={{ background:'#fff', color: BT.ink, border:`2px solid ${BT.ink}`, borderRadius: 999, padding:'4px 10px', fontSize: 11, fontWeight: 700 }}>⏱ 15 min</span>
        <span style={{ background: BT.lime, color: BT.ink, border:`2px solid ${BT.ink}`, borderRadius: 999, padding:'4px 10px', fontSize: 11, fontWeight: 800 }}>FREE</span>
      </div>

      <div style={{ display:'flex', gap: 8, marginTop: 16, overflow:'visible', flexWrap:'wrap' }}>
        {[['popular',true],['pizza'],['sides'],['drinks']].map(([t,a])=>(
          <span key={t} style={{ background: a?BT.ink:'#fff', color: a?'#fff':BT.ink, border:`2px solid ${BT.ink}`, borderRadius: 999, padding:'7px 14px', fontWeight: 700, fontSize: 12 }}>{t}</span>
        ))}
      </div>

      <div style={{ marginTop: 18, fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18 }}>most ordered</div>
      <div style={{ display:'flex', flexDirection:'column', gap: 12, marginTop: 10 }}>
        {[
          ['Margherita Classic','tomato, mozzarella, basil','$14', '🍕', BT.cream],
          ['Pepperoni Supreme','double pep, chili oil drizzle','$17', '🍕', BT.blush],
          ['Veggie Garden','peppers, onion, mushroom','$15', '🥦', BT.lime],
        ].map(([n,d,p,e,bg])=>(
          <div key={n} style={{ display:'flex', gap: 12, alignItems:'center', background:'#fff', border:`2px solid ${BT.ink}`, borderRadius: 18, padding: 10 }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 16 }}>{n}</div>
              <div style={{ fontSize: 11, color: BT.soft, fontWeight: 500, marginTop: 4 }}>{d}</div>
              <div style={{ display:'inline-block', marginTop: 6, fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 16 }}>{p}</div>
            </div>
            <div style={{ position:'relative', width: 72, height: 72, borderRadius: 14, background: bg, border:`2px solid ${BT.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 36 }}>
              {e}
              <div style={{ position:'absolute', bottom: -8, right: -8, width: 30, height: 30, borderRadius: 999, background: BT.ink, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight: 800, fontSize: 18, border: `2px solid #fff` }}>+</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </BtShell>
);

const HiMenuItem = () => (
  <BtShell>
    <div style={{ position:'relative', height: 280, background: `linear-gradient(160deg, ${BT.cherry}, #B82828)`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 160, marginTop: -50, paddingTop: 50 }}>
      🍕
      <div style={{ position:'absolute', top: 60, left: 16, width: 36, height: 36, borderRadius: 999, background:'rgba(255,255,255,0.95)', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 18 }}>←</div>
    </div>
    <div style={{ padding: '16px 20px 110px' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 26, lineHeight: 1 }}>Pepperoni Supreme</div>
          <div style={{ fontSize: 12, color: BT.soft, fontWeight: 500, marginTop: 6 }}>Double pepperoni, mozzarella, chili oil drizzle, fresh basil.</div>
        </div>
        <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 24 }}>$17</div>
      </div>

      <div style={{ marginTop: 18, fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 16 }}>size · <span style={{ color: BT.cherry, fontSize: 11, fontWeight: 800 }}>REQUIRED</span></div>
      <div style={{ display:'flex', flexDirection:'column', gap: 8, marginTop: 8 }}>
        {[['10" small','+$0',false],['14" medium','+$3',true],['18" large','+$6',false]].map(([n,p,a])=>(
          <div key={n} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', background: a?BT.ink:'#fff', color: a?'#fff':BT.ink, border:`2px solid ${BT.ink}`, borderRadius: 14, padding: '12px 14px' }}>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <div style={{ width: 20, height: 20, borderRadius: 999, border:`2px solid ${a?'#fff':BT.ink}`, background: a?'#fff':'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}>
                {a && <div style={{ width: 8, height: 8, background: BT.ink, borderRadius: 999 }} />}
              </div>
              <span style={{ fontWeight: 800, fontSize: 14 }}>{n}</span>
            </div>
            <span style={{ fontWeight: 700, fontSize: 13, opacity: 0.8 }}>{p}</span>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 18, fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 16 }}>add-ons</div>
      <div style={{ display:'flex', flexDirection:'column', gap: 8, marginTop: 8 }}>
        {[['🧀 Extra cheese','+$2', true],['🌶 Chili oil','+$1', false],['🫒 Olives','+$1', false]].map(([n,p,a])=>(
          <div key={n} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', background:'#fff', border:`2px solid ${BT.ink}`, borderRadius: 14, padding: '10px 14px' }}>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <div style={{ width: 22, height: 22, borderRadius: 6, border:`2px solid ${BT.ink}`, background: a?BT.lime:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight: 800 }}>{a && '✓'}</div>
              <span style={{ fontWeight: 700, fontSize: 14 }}>{n}</span>
            </div>
            <span style={{ fontWeight: 700, fontSize: 13, color: BT.soft }}>{p}</span>
          </div>
        ))}
      </div>
    </div>
    <div style={{ position:'absolute', bottom: 0, left: 0, right: 0, padding: '14px 20px 26px', background:'#fff', borderTop:`2px solid ${BT.ink}`, display:'flex', gap: 10 }}>
      <div style={{ display:'flex', alignItems:'center', gap: 4, background: BT.cream, border:`2px solid ${BT.ink}`, borderRadius: 999, padding: '6px 12px' }}>
        <span style={{ width: 28, height: 28, display:'flex', alignItems:'center', justifyContent:'center', fontWeight: 800, fontSize: 18 }}>−</span>
        <span style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18, minWidth: 16, textAlign:'center' }}>1</span>
        <span style={{ width: 28, height: 28, display:'flex', alignItems:'center', justifyContent:'center', fontWeight: 800, fontSize: 18 }}>+</span>
      </div>
      <button style={{ flex: 1, background: BT.lime, color: BT.ink, border:`2px solid ${BT.ink}`, borderRadius: 999, padding: '14px 16px', fontWeight: 800, fontSize: 14, fontFamily:'inherit' }}>add to cart · $20</button>
    </div>
  </BtShell>
);

const HiCart = () => (
  <BtShell>
    <div style={{ padding: '8px 20px 130px' }}>
      <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
        <div style={{ width: 36, height: 36, borderRadius: 999, background:'#fff', border:`2px solid ${BT.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 18 }}>←</div>
        <div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 22, lineHeight: 1 }}>your bag</div>
          <div style={{ fontSize: 11, color: BT.soft, fontWeight: 600, marginTop: 2 }}>Joe's Pizza Co. · 3 items</div>
        </div>
      </div>

      <div style={{ marginTop: 16, display:'flex', flexDirection:'column', gap: 10 }}>
        {[
          ['Pepperoni Supreme','medium · extra cheese','$20', '🍕', BT.blush],
          ['Caesar Salad','no croutons','$9', '🥗', BT.lime],
          ['Garlic Knots','×2','$6', '🥐', '#FFE145'],
        ].map(([n,m,p,e,bg],i)=>(
          <div key={i} style={{ display:'flex', gap: 12, alignItems:'center', background:'#fff', border:`2px solid ${BT.ink}`, borderRadius: 16, padding: 10 }}>
            <div style={{ width: 56, height: 56, borderRadius: 12, background: bg, border:`2px solid ${BT.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 28 }}>{e}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 15 }}>{n}</div>
              <div style={{ fontSize: 11, color: BT.soft, fontWeight: 500 }}>{m}</div>
            </div>
            <div style={{ textAlign:'right' }}>
              <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 15 }}>{p}</div>
              <div style={{ fontSize: 11, color: BT.soft, fontWeight: 700, marginTop: 2 }}>edit</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 16, background: BT.cream, border:`2px dashed ${BT.ink}`, borderRadius: 14, padding: '12px 14px', fontSize: 12, fontWeight: 600, color: BT.soft }}>
        + add a note for the restaurant
      </div>

      <div style={{ marginTop: 20, background:'#fff', border:`2px solid ${BT.ink}`, borderRadius: 18, padding: 16 }}>
        {[['Subtotal','$35.00',false],['Delivery','FREE',false],['Tax','$2.80',false]].map(([l,v],i)=>(
          <div key={i} style={{ display:'flex', justifyContent:'space-between', fontSize: 13, marginTop: i===0?0:8, fontWeight: 600, color: BT.soft }}>
            <span>{l}</span><span style={{ color: v==='FREE'?BT.cherry:BT.ink, fontWeight: 800 }}>{v}</span>
          </div>
        ))}
        <div style={{ borderTop:`2px dashed rgba(0,0,0,0.15)`, marginTop: 10, paddingTop: 10, display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
          <span style={{ fontWeight: 800, fontSize: 14 }}>TOTAL</span>
          <span style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 24 }}>$37.80</span>
        </div>
      </div>
    </div>
    <div style={{ position:'absolute', bottom: 0, left: 0, right: 0, padding: '14px 20px 26px', background:'#fff', borderTop:`2px solid ${BT.ink}` }}>
      <button style={{ width:'100%', background: BT.cherry, color:'#fff', border:0, borderRadius: 999, padding: '18px 0', fontWeight: 800, fontSize: 16, fontFamily:'inherit' }}>checkout · $37.80 →</button>
    </div>
  </BtShell>
);

const HiCheckout = () => (
  <BtShell>
    <div style={{ padding: '8px 20px 130px' }}>
      <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
        <div style={{ width: 36, height: 36, borderRadius: 999, background:'#fff', border:`2px solid ${BT.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 18 }}>←</div>
        <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 22 }}>checkout</div>
      </div>

      <div style={{ marginTop: 16, fontSize: 11, fontWeight: 800, color: BT.soft }}>DELIVER TO</div>
      <div style={{ marginTop: 6, background:'#fff', border:`2px solid ${BT.ink}`, borderRadius: 14, padding: 12, display:'flex', alignItems:'center', gap: 10 }}>
        <div style={{ width: 40, height: 40, borderRadius: 12, background: BT.lime, border:`2px solid ${BT.ink}`, display:'flex', alignItems:'center', justifyContent:'center' }}>🏠</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 800, fontSize: 14 }}>Home</div>
          <div style={{ fontSize: 11, color: BT.soft, fontWeight: 600 }}>14 Oak St, Apt 3</div>
        </div>
        <span style={{ fontSize: 12, fontWeight: 800 }}>change ›</span>
      </div>

      <div style={{ marginTop: 16, fontSize: 11, fontWeight: 800, color: BT.soft }}>WHEN</div>
      <div style={{ display:'flex', gap: 8, marginTop: 6 }}>
        <div style={{ flex: 1, background: BT.ink, color:'#fff', border:`2px solid ${BT.ink}`, borderRadius: 14, padding: 14 }}>
          <div style={{ fontSize: 11, fontWeight: 700, opacity: 0.7 }}>STANDARD</div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18 }}>15 min</div>
        </div>
        <div style={{ flex: 1, background:'#fff', border:`2px solid ${BT.ink}`, borderRadius: 14, padding: 14 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: BT.soft }}>SCHEDULE</div>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 18 }}>later</div>
        </div>
      </div>

      <div style={{ marginTop: 16, fontSize: 11, fontWeight: 800, color: BT.soft }}>PAY WITH</div>
      <div style={{ marginTop: 6, background:'#fff', border:`2px solid ${BT.ink}`, borderRadius: 14, padding: 12, display:'flex', alignItems:'center', gap: 10 }}>
        <div style={{ width: 40, height: 30, borderRadius: 6, background: BT.cherry, border:`2px solid ${BT.ink}` }} />
        <div style={{ flex: 1, fontWeight: 800, fontSize: 14 }}>•••• •••• •••• 4242</div>
        <span style={{ fontSize: 12, fontWeight: 800 }}>edit ›</span>
      </div>

      <div style={{ marginTop: 16, fontSize: 11, fontWeight: 800, color: BT.soft }}>TIP YOUR COURIER 💛</div>
      <div style={{ display:'flex', gap: 6, marginTop: 6 }}>
        {[['15%','$5.25'],['20%','$7.00',true],['25%','$8.75'],['custom','—']].map(([t,v,a])=>(
          <div key={t} style={{ flex: 1, background: a?BT.lime:'#fff', border:`2px solid ${BT.ink}`, borderRadius: 12, padding: '10px 0', textAlign:'center' }}>
            <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 14 }}>{t}</div>
            <div style={{ fontSize: 10, fontWeight: 700, color: BT.soft, marginTop: 2 }}>{v}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 20, background: BT.ink, color:'#fff', borderRadius: 18, padding: 16, display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
        <span style={{ fontSize: 12, fontWeight: 700, opacity: 0.7 }}>ORDER TOTAL</span>
        <span style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 28 }}>$44.80</span>
      </div>
    </div>
    <div style={{ position:'absolute', bottom: 0, left: 0, right: 0, padding: '14px 20px 26px', background:'#fff', borderTop:`2px solid ${BT.ink}` }}>
      <button style={{ width:'100%', background: BT.cherry, color:'#fff', border:0, borderRadius: 999, padding: '18px 0', fontWeight: 800, fontSize: 16, fontFamily:'inherit' }}>place order →</button>
    </div>
  </BtShell>
);

const HiTracking = () => (
  <BtShell>
    <div style={{ padding: '8px 20px 30px' }}>
      <div style={{ fontSize: 11, fontWeight: 800, color: BT.soft }}>YOUR ORDER · ARRIVING</div>
      <div style={{ display:'flex', alignItems:'baseline', gap: 8, marginTop: 4 }}>
        <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 56, lineHeight: 1 }}>9 min</div>
        <div style={{ fontSize: 14, fontWeight: 700, color: BT.soft }}>· 9:48 pm</div>
      </div>

      {/* Map */}
      <div style={{ marginTop: 14, height: 200, background: BT.lime, border:`2px solid ${BT.ink}`, borderRadius: 22, position:'relative', overflow:'hidden' }}>
        <svg viewBox="0 0 320 180" style={{ position:'absolute', inset: 0, width:'100%', height:'100%' }}>
          {/* roads */}
          <path d="M-20,40 L340,60" stroke={BT.ink} strokeOpacity="0.15" strokeWidth="14" />
          <path d="M80,-20 L120,200" stroke={BT.ink} strokeOpacity="0.15" strokeWidth="14" />
          <path d="M-20,140 L340,130" stroke={BT.ink} strokeOpacity="0.15" strokeWidth="10" />
          <path d="M240,-20 L210,200" stroke={BT.ink} strokeOpacity="0.15" strokeWidth="10" />
          {/* route */}
          <path d="M40,150 Q100,120 130,100 T220,60" stroke={BT.ink} strokeWidth="3" fill="none" strokeDasharray="6 4" strokeLinecap="round" />
          {/* origin */}
          <circle cx="40" cy="150" r="8" fill="#fff" stroke={BT.ink} strokeWidth="2.5" />
          {/* dest */}
          <circle cx="220" cy="60" r="10" fill={BT.cherry} stroke={BT.ink} strokeWidth="2.5" />
        </svg>
        <div style={{ position:'absolute', left: '40%', top: '45%', fontSize: 28, transform:'rotate(-20deg)' }}>🛵</div>
      </div>

      <div style={{ marginTop: 18, background:'#fff', border:`2px solid ${BT.ink}`, borderRadius: 18, padding: 14, display:'flex', gap: 12, alignItems:'center' }}>
        <div style={{ width: 50, height: 50, borderRadius: 999, background: BT.blush, border:`2px solid ${BT.ink}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 24 }}>👨‍🍳</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 15 }}>Marco is on the way!</div>
          <div style={{ fontSize: 11, color: BT.soft, fontWeight: 600 }}>★ 4.9 · honda scooter · 1.2mi</div>
        </div>
        <div style={{ display:'flex', gap: 6 }}>
          <div style={{ width: 38, height: 38, borderRadius: 999, background: BT.lime, border:`2px solid ${BT.ink}`, display:'flex', alignItems:'center', justifyContent:'center' }}>💬</div>
          <div style={{ width: 38, height: 38, borderRadius: 999, background: BT.ink, color:'#fff', border:`2px solid ${BT.ink}`, display:'flex', alignItems:'center', justifyContent:'center' }}>📞</div>
        </div>
      </div>

      <div style={{ marginTop: 16, position:'relative', paddingLeft: 28 }}>
        <div style={{ position:'absolute', left: 11, top: 12, bottom: 12, width: 3, background: `linear-gradient(to bottom, ${BT.cherry} 60%, rgba(0,0,0,0.1) 60%)`, borderRadius: 999 }} />
        {[
          ['order placed','9:14',true],
          ['preparing','9:18',true],
          ['picked up','9:32',true],
          ['on the way','...',false, true],
          ['delivered','—',false],
        ].map(([n,t,d,active],i)=>(
          <div key={i} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 12, position:'relative' }}>
            <div style={{ position:'absolute', left: -28, width: 22, height: 22, borderRadius: 999, background: active?BT.cherry: d?BT.cherry:'#fff', border:`2px solid ${BT.ink}`, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight: 800, fontSize: 10 }}>{d?'✓':''}</div>
            <span style={{ fontWeight: 800, fontSize: 14, opacity: d||active?1:0.4 }}>{n}</span>
            <span style={{ fontSize: 11, fontWeight: 700, color: BT.soft }}>{t}</span>
          </div>
        ))}
      </div>
    </div>
  </BtShell>
);

const HiRate = () => (
  <BtShell bg={BT.lime}>
    <div style={{ padding: '8px 20px 40px', height: '100%', display:'flex', flexDirection:'column', alignItems:'center' }}>
      <div style={{ fontSize: 80, marginTop: 16 }}>🍕</div>
      <div style={{ fontFamily:"'Bricolage Grotesque'", fontWeight: 800, fontSize: 44, lineHeight: 0.95, textAlign:'center', marginTop: 8 }}>
        enjoy<br/>your meal!
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, opacity: 0.7, marginTop: 8 }}>from Joe's Pizza Co. · #BT-2138</div>

      <div style={{ width:'100%', marginTop: 22, background: '#fff', border:`2px solid ${BT.ink}`, borderRadius: 22, padding: 18, textAlign:'center' }}>
        <div style={{ fontSize: 12, fontWeight: 800 }}>HOW WAS THE FOOD?</div>
        <div style={{ display:'flex', gap: 6, marginTop: 10, justifyContent:'center' }}>
          {[1,2,3,4,5].map(i=>(
            <div key={i} style={{ fontSize: 36, color: i<=4?'#FFB800':'rgba(0,0,0,0.15)', textShadow: i<=4?'0 2px 0 rgba(0,0,0,0.1)':'none' }}>★</div>
          ))}
        </div>
      </div>

      <div style={{ width:'100%', marginTop: 14, background:'#fff', border:`2px solid ${BT.ink}`, borderRadius: 22, padding: 18, textAlign:'center' }}>
        <div style={{ fontSize: 12, fontWeight: 800 }}>RATE MARCO 👨‍🍳</div>
        <div style={{ display:'flex', gap: 10, marginTop: 10, justifyContent:'center' }}>
          {[['👎','meh', false],['👍','good', true]].map(([e,l,a])=>(
            <div key={l} style={{ background: a?BT.ink:'#fff', color: a?'#fff':BT.ink, border:`2px solid ${BT.ink}`, borderRadius: 16, padding: '10px 18px' }}>
              <div style={{ fontSize: 28 }}>{e}</div>
              <div style={{ fontSize: 11, fontWeight: 800, marginTop: 2 }}>{l}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 12, fontSize: 12, fontWeight: 700, color: BT.soft }}>add a tip? <span style={{ color: BT.cherry, fontWeight: 800 }}>+$2  +$5</span></div>
      </div>

      <div style={{ flex: 1 }} />
      <button style={{ marginTop: 16, width: '100%', background: BT.ink, color:'#fff', border:0, borderRadius: 999, padding: '18px 0', fontWeight: 800, fontSize: 15, fontFamily:'inherit' }}>submit & re-order 🔁</button>
      <button style={{ background:'transparent', color: BT.ink, border:0, padding: 10, fontWeight: 700, fontSize: 13 }}>skip</button>
    </div>
  </BtShell>
);

// ============================================================
// PAGE
// ============================================================
const BT_SCREENS = [
  ['home','01 · Home', LoHome, HiHome],
  ['rest','02 · Restaurant', LoRestaurant, HiRestaurant],
  ['item','03 · Customize', LoMenuItem, HiMenuItem],
  ['cart','04 · Cart', LoCart, HiCart],
  ['checkout','05 · Checkout', LoCheckout, HiCheckout],
  ['track','06 · Tracking', LoTracking, HiTracking],
  ['rate','07 · Rate', LoRate, HiRate],
];

function BiteyApp() {
  return (
    <DesignCanvas>
      <DCSection id="lofi" title="LO-FI · Bitey" subtitle="Sketchy wireframes — quick exploration of flow">
        {BT_SCREENS.map(([id, label, Lo]) => (
          <DCArtboard key={id} id={'lo-'+id} label={label} width={340} height={700}>
            <div data-screen-label={'Lo · ' + label} style={{ width:'100%', height:'100%', background:'#fbf7ef', display:'flex', alignItems:'center', justifyContent:'center', padding: 8, fontFamily:"'Patrick Hand', cursive" }}>
              <Lo />
            </div>
          </DCArtboard>
        ))}
      </DCSection>
      <DCSection id="hifi" title="HI-FI · Bitey" subtitle="Lime + cherry · sticker UI · bold chunky type">
        {BT_SCREENS.map(([id, label, , Hi]) => (
          <DCArtboard key={id} id={'hi-'+id} label={label} width={380} height={780}>
            <div data-screen-label={'Hi · ' + label} style={{ width:'100%', height:'100%', display:'flex', alignItems:'center', justifyContent:'center', padding: 10 }}>
              <Hi />
            </div>
          </DCArtboard>
        ))}
      </DCSection>
    </DesignCanvas>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<BiteyApp />);