// Screens 9-14: Auth & onboarding, Empty/Success states, Order history

// ═════════════════════════════════════════════════════════════
// 9) ONBOARDING (3 slides paginated)
// ═════════════════════════════════════════════════════════════
function ScreenOnboarding() {
  return (
    <div className="screen" style={{ height: '100%', overflow: 'hidden', background: 'white', paddingTop: 60, paddingBottom: 50, display: 'flex', flexDirection: 'column' }}>
      {/* Skip + brand */}
      <div style={{ padding: '8px 20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{
            width: 32, height: 32, borderRadius: 10,
            background: `linear-gradient(160deg, ${C.blue500}, ${C.navy800})`,
            color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700,
          }}>J</div>
          <div style={{ fontSize: 14, fontWeight: 700, color: C.ink900, letterSpacing: -0.01 }}>Janaushadhi</div>
        </div>
        <span style={{ fontSize: 13, color: C.ink500, fontWeight: 600 }}>Skip</span>
      </div>

      {/* Illustration area */}
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
        <div style={{
          width: 280, height: 320, borderRadius: 36,
          background: `linear-gradient(160deg, ${C.blue50} 0%, ${C.blue100} 100%)`,
          position: 'relative', overflow: 'hidden',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          {/* Decorative shapes */}
          <div style={{ position: 'absolute', top: -30, left: -30, width: 120, height: 120, borderRadius: 60, background: 'rgba(255,255,255,0.5)' }}/>
          <div style={{ position: 'absolute', bottom: -40, right: -20, width: 100, height: 100, borderRadius: 50, background: 'rgba(91,158,255,0.25)' }}/>
          {/* Floating pill */}
          <div style={{
            width: 140, height: 140, borderRadius: 28, background: 'white',
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.blue600,
            boxShadow: '0 20px 40px rgba(11,31,77,0.18)', transform: 'rotate(-8deg)',
          }}><IconPill size={70} /></div>
          {/* Small badges around */}
          <div style={{
            position: 'absolute', top: 36, right: 36, width: 44, height: 44, borderRadius: 14,
            background: 'white', color: C.mint500, display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 6px 14px rgba(11,31,77,0.10)',
          }}><IconTruck size={22} /></div>
          <div style={{
            position: 'absolute', bottom: 48, left: 30, width: 38, height: 38, borderRadius: 12,
            background: 'white', color: C.amber500, display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 6px 14px rgba(11,31,77,0.10)',
          }}><IconClock size={20} /></div>
          <div style={{
            position: 'absolute', bottom: 80, right: 20, padding: '6px 10px', borderRadius: 10,
            background: 'white', color: C.ink900, fontSize: 11, fontWeight: 700,
            boxShadow: '0 6px 14px rgba(11,31,77,0.10)',
          }}>28 min ⚡</div>
        </div>
      </div>

      {/* Copy + pagination */}
      <div style={{ padding: '0 28px' }}>
        <div style={{ fontSize: 26, fontWeight: 700, color: C.ink900, lineHeight: 1.15, letterSpacing: -0.03 }}>
          Genuine medicines,<br/>delivered in minutes
        </div>
        <div style={{ fontSize: 14, color: C.ink500, marginTop: 10, lineHeight: 1.5 }}>
          Express delivery from licensed pharmacies near you. All medicines verified by our in-house pharmacists.
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 24 }}>
          {[0,1,2].map(i => (
            <div key={i} style={{
              width: i === 0 ? 24 : 6, height: 6, borderRadius: 3,
              background: i === 0 ? C.blue600 : C.ink200,
            }}/>
          ))}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 18 }}>
          <button style={{ flex: 1, background: C.blue600, color: 'white', border: 'none', borderRadius: 16, padding: '15px 0', fontWeight: 700, fontSize: 15, boxShadow: '0 10px 20px rgba(27,91,255,0.30)' }}>
            Get started
          </button>
          <div style={{ width: 56, height: 56, borderRadius: 28, background: C.blue50, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconChevR size={22} />
          </div>
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 10) LOGIN / OTP
// ═════════════════════════════════════════════════════════════
function ScreenLogin() {
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: 'white', paddingTop: 60, paddingBottom: 30 }}>
      <div style={{ padding: '8px 20px 0' }}>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: C.ink50, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <IconChevL size={20} />
        </div>
      </div>
      <div style={{ padding: '24px 24px 0' }}>
        <div style={{ fontSize: 26, fontWeight: 700, color: C.ink900, letterSpacing: -0.03, lineHeight: 1.15 }}>
          Verify your<br/>number
        </div>
        <div style={{ fontSize: 14, color: C.ink500, marginTop: 8 }}>
          We sent a 6-digit code to <span style={{ color: C.ink900, fontWeight: 600 }}>+91 98••• 12•••</span> <span style={{ color: C.blue600, fontWeight: 600 }}>· Change</span>
        </div>

        {/* OTP boxes */}
        <div style={{ display: 'flex', gap: 10, marginTop: 28 }}>
          {['8','3','9','2','',''].map((d, i) => (
            <div key={i} style={{
              flex: 1, aspectRatio: '1', borderRadius: 14,
              background: d ? C.blue50 : 'white',
              border: i === 4 ? `2px solid ${C.blue600}` : `2px solid ${d ? 'transparent' : C.ink100}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 24, fontWeight: 700, color: C.ink900,
              fontFamily: 'JetBrains Mono, ui-monospace, monospace',
              position: 'relative',
            }}>
              {d}
              {i === 4 && <div style={{ position: 'absolute', width: 2, height: 24, background: C.blue600, animation: 'blink 1s infinite' }}/>}
            </div>
          ))}
        </div>

        {/* Resend timer */}
        <div style={{ marginTop: 18, fontSize: 13, color: C.ink500, display: 'flex', alignItems: 'center', gap: 6 }}>
          <IconClock size={14} /> Resend code in <span className="mono" style={{ color: C.ink900, fontWeight: 700 }}>00:24</span>
        </div>

        {/* Auto-read note */}
        <div style={{
          marginTop: 22, padding: 14, borderRadius: 14, background: C.blue25,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{ width: 36, height: 36, borderRadius: 12, background: 'white', color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconShield size={18} />
          </div>
          <div style={{ flex: 1, fontSize: 12, color: C.navy800, lineHeight: 1.45 }}>
            We're reading the code from your SMS automatically.
          </div>
        </div>

        {/* Continue button */}
        <button style={{
          marginTop: 24, width: '100%', background: C.blue600, color: 'white', border: 'none',
          borderRadius: 16, padding: '15px 0', fontWeight: 700, fontSize: 15,
          boxShadow: '0 10px 20px rgba(27,91,255,0.30)',
        }}>Verify & continue</button>

        <div style={{ marginTop: 16, fontSize: 11, color: C.ink400, textAlign: 'center', lineHeight: 1.55 }}>
          By continuing, you agree to our <span style={{ color: C.blue600, fontWeight: 600 }}>Terms</span> & <span style={{ color: C.blue600, fontWeight: 600 }}>Privacy policy</span>
        </div>
      </div>

      {/* Keypad mock */}
      <div style={{ marginTop: 36, padding: '12px 8px 0', borderTop: `1px solid ${C.ink100}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, padding: '0 8px' }}>
          {['1','2','3','4','5','6','7','8','9','','0','⌫'].map((k, i) => (
            <div key={i} style={{
              height: 44, borderRadius: 10, background: k && k !== '⌫' ? C.ink50 : (k === '⌫' ? 'transparent' : 'transparent'),
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 22, fontWeight: 500, color: C.ink900,
              fontFamily: 'JetBrains Mono, ui-monospace, monospace',
            }}>{k}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 11) EMPTY CART
// ═════════════════════════════════════════════════════════════
function ScreenCartEmpty() {
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: C.ink50, paddingTop: 50, paddingBottom: 110 }}>
      <div style={{ padding: '8px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 6px rgba(11,31,77,0.06)' }}>
          <IconChevL size={20} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>Your cart</div>
          <div style={{ fontSize: 12, color: C.ink500 }}>Nothing here yet</div>
        </div>
      </div>

      {/* Empty illustration */}
      <div style={{ padding: '40px 20px 0', textAlign: 'center' }}>
        <div style={{
          width: 160, height: 160, borderRadius: 80, margin: '0 auto',
          background: `linear-gradient(160deg, ${C.blue50}, ${C.blue100})`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          position: 'relative',
        }}>
          <IconCart size={64} style={{ color: C.blue600 }} />
          <div style={{
            position: 'absolute', top: 20, right: 18,
            width: 36, height: 36, borderRadius: 18, background: 'white',
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.rose500,
            boxShadow: '0 4px 10px rgba(11,31,77,0.10)',
          }}>
            <IconClose size={18} />
          </div>
        </div>
        <div style={{ fontSize: 20, fontWeight: 700, color: C.ink900, marginTop: 24, letterSpacing: -0.02 }}>Your cart is empty</div>
        <div style={{ fontSize: 13, color: C.ink500, marginTop: 6, lineHeight: 1.5, maxWidth: 280, margin: '6px auto 0' }}>
          Add medicines, wellness essentials, or book a lab test to get started.
        </div>
        <button style={{
          marginTop: 24, background: C.blue600, color: 'white', border: 'none',
          borderRadius: 14, padding: '13px 28px', fontWeight: 700, fontSize: 14,
          boxShadow: '0 8px 18px rgba(27,91,255,0.28)',
        }}>Start shopping</button>
      </div>

      {/* Suggestions */}
      <SectionHeader title="You might need" action={null} />
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[
          { name: 'Refill: Metformin SR', sub: '3 days left in your strip', Icon: IconRx, hue: 'blue' },
          { name: 'Reorder: Cetirizine 10mg', sub: 'Last bought 12 days ago', Icon: IconPill, hue: 'mint' },
          { name: 'Book HbA1c test', sub: 'Due based on your records', Icon: IconScan, hue: 'amber' },
        ].map((s, i) => (
          <div key={i} style={{
            background: 'white', borderRadius: 14, padding: 12,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 12,
              background: { blue: C.blue50, mint: C.mint100, amber: C.amber100 }[s.hue],
              color: { blue: C.blue600, mint: C.mint500, amber: C.amber500 }[s.hue],
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><s.Icon size={20} /></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>{s.name}</div>
              <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{s.sub}</div>
            </div>
            <IconChevR size={18} style={{ color: C.ink300 }}/>
          </div>
        ))}
      </div>
      <BottomNav active="cart" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 12) ORDER SUCCESS / CONFIRMATION
// ═════════════════════════════════════════════════════════════
function ScreenOrderSuccess() {
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: 'white', paddingTop: 60, paddingBottom: 30 }}>
      {/* Hero check */}
      <div style={{ padding: '20px 20px 0', textAlign: 'center' }}>
        <div style={{
          width: 110, height: 110, borderRadius: 55, margin: '0 auto',
          background: `linear-gradient(160deg, ${C.mint500}, #189A78)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'white', boxShadow: '0 20px 40px rgba(34,194,154,0.32)',
          position: 'relative',
        }}>
          <IconCheck size={56} />
          {/* burst dots */}
          {[0,60,120,180,240,300].map(a => (
            <div key={a} style={{
              position: 'absolute', width: 8, height: 8, borderRadius: 4,
              background: C.mint500, opacity: 0.4,
              transform: `rotate(${a}deg) translateY(-72px)`, transformOrigin: '50% 50%',
            }}/>
          ))}
        </div>
        <div style={{ fontSize: 22, fontWeight: 700, color: C.ink900, marginTop: 20, letterSpacing: -0.02 }}>Order placed!</div>
        <div style={{ fontSize: 13, color: C.ink500, marginTop: 6 }}>
          We've sent confirmation to <span style={{ color: C.ink900, fontWeight: 600 }}>+91 98••• 12•••</span>
        </div>
      </div>

      {/* Order summary card */}
      <div style={{ padding: '24px 20px 0' }}>
        <div style={{
          background: C.blue25, borderRadius: 18, padding: 16, border: `1px solid ${C.blue100}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 11, color: C.ink500, fontWeight: 600, letterSpacing: 0.4 }}>ORDER ID</div>
              <div className="mono" style={{ fontSize: 15, fontWeight: 700, color: C.ink900 }}>#JN-2841-09</div>
            </div>
            <div className="pill" style={{ background: C.mint500, color: 'white' }}>● Confirmed</div>
          </div>
          <div style={{ height: 1, background: C.blue100, margin: '12px 0' }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 38, height: 38, borderRadius: 12, background: 'white', color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <IconClock size={20} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>Arrives by 6:40 PM today</div>
              <div style={{ fontSize: 11, color: C.ink500 }}>3 items · ₹248 paid via UPI</div>
            </div>
          </div>
        </div>
      </div>

      {/* Delivery progress mini */}
      <SectionHeader title="What happens next" action={null} />
      <div style={{ padding: '0 20px' }}>
        {[
          { label: 'Pharmacist verifies your Rx', time: 'in ~5 min', done: true },
          { label: 'Order packed at Indiranagar store', time: 'by 6:00 PM', done: false, active: true },
          { label: 'Delivered to your door', time: 'by 6:40 PM', done: false },
        ].map((s, i, a) => (
          <div key={i} style={{ display: 'flex', gap: 12, paddingBottom: i < a.length - 1 ? 14 : 0 }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <div style={{
                width: 22, height: 22, borderRadius: 11,
                background: s.done ? C.blue600 : 'white',
                border: s.done ? 'none' : `2px solid ${C.ink200}`,
                color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: s.active ? `0 0 0 6px ${C.blue100}` : 'none',
              }}>{s.done && <IconCheck size={12} />}</div>
              {i < a.length - 1 && <div style={{ flex: 1, width: 2, background: s.done ? C.blue600 : C.ink200, marginTop: 2 }}/>}
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: s.done || s.active ? 700 : 600, color: C.ink900 }}>{s.label}</div>
              <div className="mono" style={{ fontSize: 11, color: s.active ? C.blue600 : C.ink500, marginTop: 2 }}>{s.time}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Rewards earned */}
      <div style={{
        margin: '24px 20px 0', padding: 14, borderRadius: 16,
        background: `linear-gradient(135deg, ${C.amber100}, #FFF6E0)`,
        display: 'flex', alignItems: 'center', gap: 12,
        border: `1px solid ${C.amber500}33`,
      }}>
        <div style={{ width: 40, height: 40, borderRadius: 12, background: C.amber500, color: '#7A4500', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <IconStar size={22} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: '#7A4500' }}>You earned 24 JANA+ points</div>
          <div style={{ fontSize: 11, color: '#7A4500', opacity: 0.75 }}>Use them on your next order</div>
        </div>
      </div>

      {/* CTA buttons */}
      <div style={{ padding: '24px 20px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <button style={{
          background: C.blue600, color: 'white', border: 'none', borderRadius: 16,
          padding: '14px 0', fontWeight: 700, fontSize: 14, boxShadow: '0 10px 20px rgba(27,91,255,0.30)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}><IconTruck size={18} /> Track this order</button>
        <button style={{ background: C.blue50, color: C.blue600, border: 'none', borderRadius: 16, padding: '14px 0', fontWeight: 700, fontSize: 14 }}>
          Continue shopping
        </button>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 13) ORDER HISTORY (list)
// ═════════════════════════════════════════════════════════════
function ScreenOrderHistory() {
  const orders = [
    { id: '#JN-2841-09', date: 'Today, 5:42 PM', status: 'Packing', tone: 'blue', items: 3, total: 248, hue: 'blue' },
    { id: '#JN-2812-06', date: 'May 24', status: 'Delivered', tone: 'mint', items: 2, total: 412, hue: 'mint' },
    { id: '#JN-2784-13', date: 'May 18', status: 'Delivered', tone: 'mint', items: 5, total: 1284, hue: 'amber' },
    { id: '#JN-2750-02', date: 'May 12', status: 'Refunded', tone: 'rose', items: 1, total: 95, hue: 'rose' },
    { id: '#JN-2701-08', date: 'May 04', status: 'Delivered', tone: 'mint', items: 4, total: 562, hue: 'blue' },
  ];
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: C.ink50, paddingTop: 50, paddingBottom: 110 }}>
      <div style={{ padding: '8px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 6px rgba(11,31,77,0.06)' }}>
          <IconChevL size={20} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>Your orders</div>
          <div style={{ fontSize: 12, color: C.ink500 }}>24 orders · ₹14,820 lifetime</div>
        </div>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 6px rgba(11,31,77,0.06)' }}>
          <IconSearch size={18} />
        </div>
      </div>

      {/* Filter chips */}
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '14px 20px 4px' }}>
        {['All', 'Active', 'Delivered', 'Cancelled', 'Refunded'].map((f, i) => (
          <div key={f} style={{
            padding: '8px 14px', borderRadius: 12,
            background: i === 0 ? C.navy800 : 'white',
            color: i === 0 ? 'white' : C.ink700,
            fontSize: 12, fontWeight: 600, flexShrink: 0,
            boxShadow: i === 0 ? 'none' : '0 1px 3px rgba(11,31,77,0.05)',
          }}>{f}</div>
        ))}
      </div>

      {/* Orders */}
      <div style={{ padding: '14px 20px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {orders.map((o, i) => {
          const toneColors = {
            blue:  { bg: C.blue50, fg: C.blue600 },
            mint:  { bg: C.mint100, fg: '#0F5A48' },
            rose:  { bg: C.rose100, fg: '#7A1C1F' },
          };
          const t = toneColors[o.tone];
          return (
            <div key={i} style={{
              background: 'white', borderRadius: 18, padding: 14,
              boxShadow: '0 1px 0 rgba(11,31,77,0.04)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                  <div className="mono" style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>{o.id}</div>
                  <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{o.date}</div>
                </div>
                <div className="pill" style={{ background: t.bg, color: t.fg }}>● {o.status}</div>
              </div>
              <div style={{ height: 1, background: C.ink100, margin: '12px 0' }}/>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <ProductPlaceholder hue={o.hue} w={42} h={42} radius={10} />
                <ProductPlaceholder hue={i % 2 ? 'mint' : 'amber'} w={42} h={42} radius={10} />
                {o.items > 2 && (
                  <div style={{
                    width: 42, height: 42, borderRadius: 10, background: C.ink50,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 13, fontWeight: 700, color: C.ink700,
                  }}>+{o.items - 2}</div>
                )}
                <div style={{ flex: 1, textAlign: 'right' }}>
                  <span className="mono" style={{ fontSize: 16, fontWeight: 700, color: C.ink900 }}>₹{o.total}</span>
                  <div style={{ fontSize: 11, color: C.ink500 }}>{o.items} items</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                {o.status === 'Delivered' ? (
                  <>
                    <button style={{ flex: 1, background: C.blue50, color: C.blue600, border: 'none', borderRadius: 12, padding: '10px 0', fontSize: 12, fontWeight: 700 }}>Reorder</button>
                    <button style={{ flex: 1, background: 'white', color: C.ink700, border: `1px solid ${C.ink200}`, borderRadius: 12, padding: '10px 0', fontSize: 12, fontWeight: 700 }}>Invoice</button>
                  </>
                ) : o.status === 'Packing' ? (
                  <button style={{ flex: 1, background: C.blue600, color: 'white', border: 'none', borderRadius: 12, padding: '10px 0', fontSize: 12, fontWeight: 700 }}>Track order</button>
                ) : (
                  <button style={{ flex: 1, background: 'white', color: C.ink700, border: `1px solid ${C.ink200}`, borderRadius: 12, padding: '10px 0', fontSize: 12, fontWeight: 700 }}>View details</button>
                )}
              </div>
            </div>
          );
        })}
      </div>
      <BottomNav active="orders" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 14) ORDER DETAIL (single past order)
// ═════════════════════════════════════════════════════════════
function ScreenOrderDetail() {
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: C.ink50, paddingTop: 50, paddingBottom: 100 }}>
      <div style={{ padding: '8px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 6px rgba(11,31,77,0.06)' }}>
          <IconChevL size={20} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>Order detail</div>
          <div className="mono" style={{ fontSize: 12, color: C.ink500 }}>#JN-2812-06 · May 24</div>
        </div>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 6px rgba(11,31,77,0.06)' }}>
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="18" cy="12" r="1.5"/></svg>
        </div>
      </div>

      {/* Delivered banner */}
      <div style={{
        margin: '14px 20px 0', padding: 14, borderRadius: 16,
        background: `linear-gradient(135deg, ${C.mint100}, #B3EAD7)`,
        display: 'flex', alignItems: 'center', gap: 12,
        border: `1px solid ${C.mint500}33`,
      }}>
        <div style={{ width: 40, height: 40, borderRadius: 12, background: C.mint500, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <IconCheck size={22} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: '#0F5A48' }}>Delivered on May 24, 6:18 PM</div>
          <div style={{ fontSize: 11, color: '#0F5A48', opacity: 0.75 }}>Handed over to Aarav</div>
        </div>
        <span style={{ fontSize: 12, fontWeight: 700, color: '#0F5A48' }}>Rate</span>
      </div>

      {/* Items */}
      <SectionHeader title="2 items" action={null} />
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[
          { name: 'Pan-D Capsules', sub: 'Pantoprazole · 10 caps · ×2', price: 216, hue: 'mint' },
          { name: 'Vitamin D3 60K', sub: '4 capsules · ×1', price: 196, hue: 'amber' },
        ].map((p, i) => (
          <div key={i} style={{ background: 'white', borderRadius: 16, padding: 12, display: 'flex', gap: 12 }}>
            <ProductPlaceholder hue={p.hue} w={56} h={56} radius={12} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>{p.name}</div>
              <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{p.sub}</div>
              <div style={{ marginTop: 6, fontSize: 12, color: C.blue600, fontWeight: 600 }}>Buy again →</div>
            </div>
            <span className="mono" style={{ fontSize: 14, fontWeight: 700, color: C.ink900 }}>₹{p.price}</span>
          </div>
        ))}
      </div>

      {/* Delivery + payment cards */}
      <SectionHeader title="Delivered to" action={null} />
      <div style={{ padding: '0 20px' }}>
        <div style={{ background: 'white', borderRadius: 16, padding: 14, display: 'flex', gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: 12, background: C.blue50, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconHome size={20}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>Home</div>
            <div style={{ fontSize: 12, color: C.ink500, marginTop: 2, lineHeight: 1.45 }}>Apt 4B, Maple Residency, 100ft Road, Indiranagar 560038</div>
          </div>
        </div>
      </div>

      <SectionHeader title="Bill details" action={null} />
      <div style={{ padding: '0 20px' }}>
        <div style={{ background: 'white', borderRadius: 16, padding: 14 }}>
          {[
            ['Items (2)', '₹412'],
            ['Discount', '−₹60', C.mint500],
            ['Delivery', 'FREE', C.mint500],
            ['Tax', 'Incl.'],
          ].map(([k, v, col], i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', fontSize: 13 }}>
              <span style={{ color: C.ink500 }}>{k}</span>
              <span className="mono" style={{ color: col || C.ink700, fontWeight: 600 }}>{v}</span>
            </div>
          ))}
          <div style={{ height: 1, background: C.ink100, margin: '8px 0' }}/>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ fontSize: 14, fontWeight: 700, color: C.ink900 }}>Total paid</span>
            <span className="mono" style={{ fontSize: 16, fontWeight: 700, color: C.ink900 }}>₹352</span>
          </div>
          <div style={{ marginTop: 8, fontSize: 11, color: C.ink500 }}>Paid via UPI · aarav@oksbi · 24 May, 5:48 PM</div>
        </div>
      </div>

      {/* Help row */}
      <div style={{ padding: '18px 20px 0', display: 'flex', gap: 10 }}>
        <button style={{ flex: 1, background: 'white', color: C.ink700, border: `1px solid ${C.ink200}`, borderRadius: 14, padding: '12px 0', fontSize: 13, fontWeight: 700 }}>Need help?</button>
        <button style={{ flex: 1, background: C.blue600, color: 'white', border: 'none', borderRadius: 14, padding: '12px 0', fontSize: 13, fontWeight: 700, boxShadow: '0 6px 14px rgba(27,91,255,0.24)' }}>Reorder all</button>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenOnboarding, ScreenLogin, ScreenCartEmpty, ScreenOrderSuccess, ScreenOrderHistory, ScreenOrderDetail });