// Android Material 3 screens — batch 3: Onboarding, Login/OTP, Categories, Empty cart, Order success, Order history

const Aroboto3 = { fontFamily: 'Roboto, "Roboto Flex", system-ui, sans-serif' };

// ═════════════════════════════════════════════════════════════
// MA-09) ONBOARDING
// ═════════════════════════════════════════════════════════════
function MdScreenOnboarding() {
  return (
    <div className="screen" style={{ ...Aroboto3, height: '100%', overflow: 'hidden', background: M.surface, display: 'flex', flexDirection: 'column', paddingBottom: 24 }}>
      <div style={{ padding: '12px 16px 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: M.primary, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700 }}>J</div>
          <div style={{ fontSize: 15, fontWeight: 600, color: M.onSurface }}>Janaushadhi</div>
        </div>
        <span style={{ fontSize: 14, color: M.primary, fontWeight: 600 }}>Skip</span>
      </div>

      {/* Illustration */}
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
        <div style={{
          width: 300, height: 320, borderRadius: 28, position: 'relative', overflow: 'hidden',
          background: `linear-gradient(160deg, ${M.primaryContainer} 0%, #C5D7FF 100%)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{ position: 'absolute', top: -30, left: -30, width: 130, height: 130, borderRadius: 65, background: 'rgba(255,255,255,0.5)' }}/>
          <div style={{ position: 'absolute', bottom: -40, right: -20, width: 110, height: 110, borderRadius: 55, background: 'rgba(91,158,255,0.3)' }}/>
          <div style={{ width: 150, height: 150, borderRadius: 32, background: 'white', color: M.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 20px 40px rgba(11,31,77,0.18)', transform: 'rotate(-8deg)' }}>
            <IconPill size={72}/>
          </div>
          <div style={{ position: 'absolute', top: 40, right: 36, width: 48, height: 48, borderRadius: 16, background: 'white', color: M.tertiary, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 6px 14px rgba(11,31,77,0.1)' }}>
            <IconTruck size={24}/>
          </div>
          <div style={{ position: 'absolute', bottom: 60, left: 30, padding: '6px 12px', borderRadius: 12, background: 'white', color: M.onSurface, fontSize: 12, fontWeight: 700, boxShadow: '0 6px 14px rgba(11,31,77,0.1)' }}>28 min ⚡</div>
        </div>
      </div>

      {/* Copy */}
      <div style={{ padding: '0 28px' }}>
        <div style={{ fontSize: 28, fontWeight: 600, color: M.onSurface, lineHeight: 1.15, letterSpacing: -0.5 }}>
          Genuine medicines,<br/>delivered in minutes
        </div>
        <div style={{ fontSize: 14, color: M.onSurfaceVariant, marginTop: 10, lineHeight: 1.5 }}>
          Express delivery from licensed pharmacies near you, verified by our in-house pharmacists.
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 22 }}>
          {[0,1,2].map(i => (
            <div key={i} style={{ width: i === 0 ? 24 : 8, height: 8, borderRadius: 4, background: i === 0 ? M.primary : M.outlineVar }}/>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 18 }}>
          <MdButton variant="filled" full style={{ flex: 1, height: 52, borderRadius: 26 }}>Get started</MdButton>
          <div style={{ width: 52, height: 52, borderRadius: 26, background: M.primaryContainer, color: M.onPrimaryContainer, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconChevR size={22}/>
          </div>
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// MA-10) LOGIN / OTP
// ═════════════════════════════════════════════════════════════
function MdScreenLogin() {
  return (
    <div className="screen" style={{ ...Aroboto3, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 24 }}>
      <MdAppBar title="" trailing={[]} />
      <div style={{ padding: '0 24px' }}>
        <div style={{ fontSize: 28, fontWeight: 600, color: M.onSurface, letterSpacing: -0.5, lineHeight: 1.15 }}>Verify your number</div>
        <div style={{ fontSize: 14, color: M.onSurfaceVariant, marginTop: 8 }}>
          Enter the 6-digit code sent to <span style={{ color: M.onSurface, fontWeight: 600 }}>+91 98••• 12•••</span>
        </div>

        {/* OTP filled-style boxes */}
        <div style={{ display: 'flex', gap: 10, marginTop: 28 }}>
          {['8','3','9','2','',''].map((d, i) => (
            <div key={i} style={{
              flex: 1, aspectRatio: '0.85', borderRadius: 12,
              background: d ? M.primaryContainer : M.surfaceContainerHigh,
              borderBottom: i === 4 ? `3px solid ${M.primary}` : `3px solid transparent`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 24, fontWeight: 700, color: M.onSurface,
              fontFamily: 'JetBrains Mono, monospace',
            }}>{d}</div>
          ))}
        </div>

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

        <div style={{ marginTop: 22, padding: 14, borderRadius: 12, background: M.surfaceContainer, display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: 18, background: M.primaryContainer, color: M.onPrimaryContainer, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconShield size={18}/>
          </div>
          <div style={{ flex: 1, fontSize: 12, color: M.onSurfaceVariant, lineHeight: 1.45 }}>Reading the code from your SMS automatically.</div>
        </div>

        <div style={{ marginTop: 24 }}>
          <MdButton variant="filled" full style={{ height: 52, borderRadius: 26 }}>Verify & continue</MdButton>
        </div>
      </div>

      {/* Numeric keypad */}
      <div style={{ marginTop: 30, padding: '12px 12px 0', borderTop: `1px solid ${M.outlineVar}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
          {['1','2','3','4','5','6','7','8','9','','0','⌫'].map((k, i) => (
            <div key={i} style={{
              height: 48, borderRadius: 12, background: k && k !== '⌫' ? M.surfaceContainerHigh : 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 22, fontWeight: 500, color: M.onSurface,
              fontFamily: 'JetBrains Mono, monospace',
            }}>{k}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// MA-11) CATEGORIES
// ═════════════════════════════════════════════════════════════
function MdScreenCategories() {
  const cats = [
    { l: 'Pain relief', c: 142, hue: 'blue', Icon: IconPill },
    { l: 'Diabetes', c: 86, hue: 'mint', Icon: IconHeart },
    { l: 'Heart & BP', c: 64, hue: 'rose', Icon: IconRx },
    { l: 'Cold & flu', c: 58, hue: 'amber', Icon: IconShield },
    { l: 'Digestive', c: 47, hue: 'mint', Icon: IconPill },
    { l: 'Vitamins', c: 124, hue: 'amber', Icon: IconStar },
    { l: 'Skin care', c: 92, hue: 'rose', Icon: IconHeart },
    { l: 'Hair care', c: 68, hue: 'navy', Icon: IconUser },
    { l: 'Baby & mom', c: 81, hue: 'rose', Icon: IconUser },
    { l: 'Wellness', c: 54, hue: 'blue', Icon: IconShield },
    { l: 'Ayurveda', c: 102, hue: 'mint', Icon: IconStar },
    { l: 'Devices', c: 38, hue: 'navy', Icon: IconScan },
  ];
  const palettes = {
    blue: { bg: M.primaryContainer, fg: M.onPrimaryContainer },
    mint: { bg: '#D6F5EA', fg: '#0F5A48' },
    amber: { bg: '#FFEFD1', fg: '#7A4500' },
    rose: { bg: '#FFE4E4', fg: '#7A1C1F' },
    navy: { bg: '#E2EAFA', fg: '#0B1F4D' },
  };
  return (
    <div className="screen" style={{ ...Aroboto3, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 130 }}>
      <MdAppBar title="Categories" subtitle="Browse all medicines & wellness" trailing={['search']} />
      <div style={{ padding: '0 16px' }}>
        <MdSearchBar value="Search within categories" leading="search" />
      </div>

      {/* Banner */}
      <div style={{ margin: '16px 16px 0', borderRadius: 16, padding: 16, background: 'linear-gradient(135deg, #D6F5EA, #B3EAD7)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: '#0F5A48', letterSpacing: 0.5 }}>NEW · 2,400+ ITEMS</div>
          <div style={{ fontSize: 18, fontWeight: 600, color: '#0F5A48', marginTop: 2 }}>Ayurveda store</div>
        </div>
        <div style={{ width: 56, height: 56, borderRadius: 16, background: 'white', color: M.tertiary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconStar size={26}/></div>
      </div>

      <MdSection title="All categories" action="A–Z" />
      <div style={{ padding: '0 16px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
        {cats.map(c => {
          const p = palettes[c.hue];
          return (
            <div key={c.l} style={{ background: M.surfaceContainerLow, borderRadius: 16, padding: '16px 10px', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 52, height: 52, borderRadius: 16, background: p.bg, color: p.fg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <c.Icon size={24}/>
              </div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 600, color: M.onSurface, lineHeight: 1.2 }}>{c.l}</div>
                <div className="mono" style={{ fontSize: 10, color: M.onSurfaceVariant, marginTop: 2 }}>{c.c} items</div>
              </div>
            </div>
          );
        })}
      </div>
      <MdBottomNav active="browse" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// MA-12) EMPTY CART
// ═════════════════════════════════════════════════════════════
function MdScreenCartEmpty() {
  return (
    <div className="screen" style={{ ...Aroboto3, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 130 }}>
      <MdAppBar title="Your cart" subtitle="Nothing here yet" trailing={[]} />
      <div style={{ padding: '32px 16px 0', textAlign: 'center' }}>
        <div style={{ width: 160, height: 160, borderRadius: 80, margin: '0 auto', background: `linear-gradient(160deg, ${M.primaryContainer}, #C5D7FF)`, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <IconCart size={64} style={{ color: M.primary }}/>
          <div style={{ position: 'absolute', top: 22, right: 20, width: 36, height: 36, borderRadius: 18, background: 'white', color: M.error, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 10px rgba(11,31,77,0.1)' }}><IconClose size={18}/></div>
        </div>
        <div style={{ fontSize: 22, fontWeight: 600, color: M.onSurface, marginTop: 24 }}>Your cart is empty</div>
        <div style={{ fontSize: 14, color: M.onSurfaceVariant, marginTop: 6, lineHeight: 1.5, maxWidth: 300, margin: '6px auto 0' }}>
          Add medicines, wellness essentials, or book a lab test to get started.
        </div>
        <div style={{ marginTop: 22 }}>
          <MdButton variant="filled" style={{ height: 48, borderRadius: 24, padding: '0 28px' }}>Start shopping</MdButton>
        </div>
      </div>

      <MdSection title="You might need" action={null} />
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 1, borderRadius: 16, overflow: 'hidden' }}>
        {[
          { name: 'Refill: Metformin SR', sub: '3 days left in your strip', Icon: IconRx, bg: M.primaryContainer, fg: M.onPrimaryContainer },
          { name: 'Reorder: Cetirizine 10mg', sub: 'Last bought 12 days ago', Icon: IconPill, bg: '#D6F5EA', fg: '#0F5A48' },
          { name: 'Book HbA1c test', sub: 'Due based on your records', Icon: IconScan, bg: '#FFEFD1', fg: '#7A4500' },
        ].map((s, i) => (
          <div key={i} style={{ background: M.surfaceContainerLow, padding: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: s.bg, color: s.fg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><s.Icon size={20}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 500, color: M.onSurface }}>{s.name}</div>
              <div style={{ fontSize: 12, color: M.onSurfaceVariant }}>{s.sub}</div>
            </div>
            <IconChevR size={20} style={{ color: M.onSurfaceVariant }}/>
          </div>
        ))}
      </div>
      <MdBottomNav active="cart" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// MA-13) ORDER SUCCESS
// ═════════════════════════════════════════════════════════════
function MdScreenOrderSuccess() {
  return (
    <div className="screen" style={{ ...Aroboto3, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 24 }}>
      <div style={{ padding: '40px 16px 0', textAlign: 'center' }}>
        <div style={{ width: 110, height: 110, borderRadius: 55, margin: '0 auto', background: `linear-gradient(160deg, ${M.tertiary}, #189A78)`, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 20px 40px rgba(34,194,154,0.32)', position: 'relative' }}>
          <IconCheck size={56}/>
          {[0,60,120,180,240,300].map(a => (
            <div key={a} style={{ position: 'absolute', width: 8, height: 8, borderRadius: 4, background: M.tertiary, opacity: 0.4, transform: `rotate(${a}deg) translateY(-72px)`, transformOrigin: '50% 50%' }}/>
          ))}
        </div>
        <div style={{ fontSize: 24, fontWeight: 600, color: M.onSurface, marginTop: 20 }}>Order placed!</div>
        <div style={{ fontSize: 13, color: M.onSurfaceVariant, marginTop: 6 }}>Confirmation sent to +91 98••• 12•••</div>
      </div>

      <div style={{ padding: '24px 16px 0' }}>
        <div style={{ background: M.primaryContainer, borderRadius: 16, padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 11, color: M.onSurfaceVariant, fontWeight: 600, letterSpacing: 0.4 }}>ORDER ID</div>
              <div className="mono" style={{ fontSize: 15, fontWeight: 700, color: M.onSurface }}>#JN-2841-09</div>
            </div>
            <MdChip selected style={{ background: M.tertiary, color: 'white', border: 'none' }}>● Confirmed</MdChip>
          </div>
          <div style={{ height: 1, background: 'rgba(11,31,77,0.1)', margin: '12px 0' }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 38, height: 38, borderRadius: 12, background: 'white', color: M.primary, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconClock size={20}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: M.onSurface }}>Arrives by 6:40 PM today</div>
              <div style={{ fontSize: 11, color: M.onSurfaceVariant }}>3 items · ₹248 paid via UPI</div>
            </div>
          </div>
        </div>
      </div>

      {/* Rewards */}
      <div style={{ margin: '20px 16px 0', padding: 14, borderRadius: 16, background: 'linear-gradient(135deg, #FFEFD1, #FFF6E0)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 40, height: 40, borderRadius: 12, background: '#F5A524', color: '#7A4500', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconStar size={22}/></div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 600, 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>

      <div style={{ padding: '24px 16px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <MdButton variant="filled" full style={{ height: 48, borderRadius: 24 }} icon={IconTruck}>Track this order</MdButton>
        <MdButton variant="tonal" full style={{ height: 48, borderRadius: 24 }}>Continue shopping</MdButton>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// MA-14) ORDER HISTORY
// ═════════════════════════════════════════════════════════════
function MdScreenOrderHistory() {
  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' },
  ];
  const tones = { blue: { bg: M.primaryContainer, fg: M.onPrimaryContainer }, mint: { bg: '#D6F5EA', fg: '#0F5A48' }, rose: { bg: '#FFE4E4', fg: '#7A1C1F' } };
  return (
    <div className="screen" style={{ ...Aroboto3, height: '100%', overflow: 'auto', background: M.surface, paddingBottom: 130 }}>
      <MdAppBar title="Your orders" subtitle="24 orders · ₹14,820 lifetime" trailing={['search']} />
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '0 16px 4px' }}>
        <MdChip selected>All</MdChip>
        <MdChip>Active</MdChip>
        <MdChip>Delivered</MdChip>
        <MdChip>Cancelled</MdChip>
        <MdChip>Refunded</MdChip>
      </div>

      <div style={{ padding: '14px 16px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {orders.map((o, i) => {
          const t = tones[o.tone];
          return (
            <div key={i} style={{ background: M.surfaceContainerLow, borderRadius: 16, padding: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                  <div className="mono" style={{ fontSize: 13, fontWeight: 700, color: M.onSurface }}>{o.id}</div>
                  <div style={{ fontSize: 11, color: M.onSurfaceVariant, marginTop: 2 }}>{o.date}</div>
                </div>
                <MdChip selected style={{ background: t.bg, color: t.fg, border: 'none', height: 28 }}>● {o.status}</MdChip>
              </div>
              <div style={{ height: 1, background: M.outlineVar, 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: M.surfaceContainerHigh, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700, color: M.onSurfaceVariant }}>+{o.items - 2}</div>}
                <div style={{ flex: 1, textAlign: 'right' }}>
                  <span className="mono" style={{ fontSize: 16, fontWeight: 700, color: M.onSurface }}>₹{o.total}</span>
                  <div style={{ fontSize: 11, color: M.onSurfaceVariant }}>{o.items} items</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                {o.status === 'Delivered' ? (
                  <>
                    <MdButton variant="tonal" full style={{ flex: 1, height: 36 }}>Reorder</MdButton>
                    <MdButton variant="outlined" full style={{ flex: 1, height: 36 }}>Invoice</MdButton>
                  </>
                ) : o.status === 'Packing' ? (
                  <MdButton variant="filled" full style={{ height: 36 }}>Track order</MdButton>
                ) : (
                  <MdButton variant="outlined" full style={{ height: 36 }}>View details</MdButton>
                )}
              </div>
            </div>
          );
        })}
      </div>
      <MdBottomNav active="orders" />
    </div>
  );
}

Object.assign(window, { MdScreenOnboarding, MdScreenLogin, MdScreenCategories, MdScreenCartEmpty, MdScreenOrderSuccess, MdScreenOrderHistory });