// Web screens — Order success, Tracking, Order detail, Lab tests, Doctor consult, Rx upload

const Wstyles3 = { fontFamily: 'Inter, -apple-system, system-ui, sans-serif', color: C.ink900 };

// ═════════════════════════════════════════════════════════════
// W7) ORDER PLACED (post-payment confirmation)
// ═════════════════════════════════════════════════════════════
function WebOrderSuccess() {
  return (
    <div className="screen" style={{ ...Wstyles3, height: '100%', overflow: 'auto', background: C.ink50 }}>
      <WebTopNav active="" />

      <div style={{ padding: '36px 40px 28px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 28, maxWidth: 1180, margin: '0 auto' }}>
        {/* Left — success */}
        <div style={{ background: 'white', borderRadius: 20, padding: 36, border: `1px solid ${C.ink100}`, position: 'relative', overflow: 'hidden' }}>
          {/* Confetti dots */}
          {[
            { c: C.mint500, x: 30, y: 30, s: 6 },
            { c: C.blue600, x: '85%', y: 50, s: 8 },
            { c: C.amber500, x: '50%', y: 20, s: 5 },
            { c: C.rose500, x: '15%', y: 80, s: 7 },
            { c: C.blue400, x: '70%', y: 100, s: 4 },
          ].map((d, i) => (
            <div key={i} style={{ position: 'absolute', top: d.y, left: d.x, width: d.s, height: d.s, borderRadius: d.s, background: d.c, opacity: 0.7 }}/>
          ))}
          {/* Hero check */}
          <div style={{
            width: 96, height: 96, borderRadius: 48, margin: '0 auto',
            background: `linear-gradient(160deg, ${C.mint500}, #189A78)`,
            color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 20px 40px rgba(34,194,154,0.32)',
          }}><IconCheck size={48} /></div>

          <div style={{ textAlign: 'center', marginTop: 22 }}>
            <div style={{ fontSize: 30, fontWeight: 700, letterSpacing: -0.025 }}>Order placed successfully!</div>
            <div style={{ fontSize: 14, color: C.ink500, marginTop: 8 }}>
              We've sent a confirmation to <span style={{ color: C.ink900, fontWeight: 600 }}>aarav@gmail.com</span> and via WhatsApp.
            </div>
          </div>

          {/* Order summary card */}
          <div style={{ marginTop: 28, padding: 18, borderRadius: 14, background: C.blue25, border: `1px solid ${C.blue100}`, display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, background: 'white', color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <IconBox size={22}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, color: C.ink500, fontWeight: 700, letterSpacing: 0.4 }}>ORDER ID</div>
              <div className="mono" style={{ fontSize: 16, fontWeight: 700 }}>#JN-2841-09</div>
            </div>
            <div className="pill" style={{ background: C.mint500, color: 'white' }}>● Confirmed</div>
          </div>

          {/* What happens next */}
          <div style={{ marginTop: 22, fontSize: 14, fontWeight: 700 }}>What happens next</div>
          <div style={{ marginTop: 14 }}>
            {[
              { l: 'Your prescription is being verified by Dr. P. Mehta', t: 'in ~5 min', done: true },
              { l: 'Order packed at our Indiranagar store', t: 'by 6:00 PM', active: true },
              { l: 'Out for delivery — rider assigned', t: 'by 6:15 PM', done: false },
              { l: 'Delivered to your door', t: 'by 6:40 PM', done: false },
            ].map((s, i, a) => (
              <div key={i} style={{ display: 'flex', gap: 14, 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 : (s.active ? 'white' : 'white'),
                    border: s.done ? 'none' : (s.active ? `2px solid ${C.blue600}` : `2px solid ${C.ink200}`),
                    boxShadow: s.active ? `0 0 0 6px ${C.blue100}` : 'none',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white',
                  }}>{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, marginBottom: -2 }}/>}
                </div>
                <div style={{ paddingBottom: 8 }}>
                  <div style={{ fontSize: 13, fontWeight: s.done || s.active ? 700 : 600, color: s.done || s.active ? C.ink900 : C.ink500 }}>{s.l}</div>
                  <div className="mono" style={{ fontSize: 11, color: s.active ? C.blue600 : C.ink500, marginTop: 2 }}>{s.t}</div>
                </div>
              </div>
            ))}
          </div>

          {/* CTAs */}
          <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
            <button style={{ flex: 1, background: C.blue600, color: 'white', border: 'none', borderRadius: 12, padding: '13px 0', fontWeight: 700, fontSize: 14, boxShadow: '0 8px 18px rgba(27,91,255,0.28)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
              <IconTruck size={16}/> Track order
            </button>
            <button style={{ flex: 1, background: C.blue50, color: C.blue600, border: 'none', borderRadius: 12, padding: '13px 0', fontWeight: 700, fontSize: 14 }}>
              Continue shopping
            </button>
          </div>
        </div>

        {/* Right — Items + delivery + rewards */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {/* Items */}
          <div style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
            <div style={{ fontSize: 14, fontWeight: 700 }}>3 items</div>
            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { name: 'Metformin SR 500mg', qty: 2, price: 156, hue: 'blue' },
                { name: 'Vitamin D3 60K IU', qty: 1, price: 149, hue: 'amber' },
                { name: 'Cetirizine 10mg', qty: 1, price: 24, hue: 'mint' },
              ].map((p, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <ProductPlaceholder hue={p.hue} w={44} h={44} radius={10} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{p.name}</div>
                    <div style={{ fontSize: 11, color: C.ink500 }}>Qty {p.qty}</div>
                  </div>
                  <span className="mono" style={{ fontSize: 13, fontWeight: 700 }}>₹{p.price}</span>
                </div>
              ))}
            </div>
            <div style={{ height: 1, background: C.ink100, margin: '14px 0' }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 13, fontWeight: 700 }}>Total paid</span>
              <span className="mono" style={{ fontSize: 17, fontWeight: 700 }}>₹248</span>
            </div>
            <div style={{ fontSize: 11, color: C.ink500, marginTop: 4 }}>UPI · aarav@oksbi · Today, 5:42 PM</div>
          </div>

          {/* Delivery address */}
          <div style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
            <div style={{ fontSize: 14, fontWeight: 700 }}>Delivering to</div>
            <div style={{ marginTop: 10, display: 'flex', gap: 12 }}>
              <div style={{ width: 38, height: 38, borderRadius: 12, background: C.blue50, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconHome size={20}/></div>
              <div style={{ flex: 1, fontSize: 12, color: C.ink700, lineHeight: 1.5 }}>
                <span style={{ fontWeight: 700, color: C.ink900 }}>Home</span><br/>
                Apt 4B, Maple Residency, 100ft Road, Indiranagar, Bengaluru 560038<br/>
                <span style={{ color: C.ink500 }}>+91 98••• 12•••</span>
              </div>
            </div>
          </div>

          {/* Rewards */}
          <div style={{ background: `linear-gradient(135deg, ${C.amber100}, #FFF6E0)`, borderRadius: 16, padding: 18, border: `1px solid ${C.amber500}33`, display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 44, height: 44, 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>
        </div>
      </div>

      <WebFooter minimal />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// W8) LIVE ORDER TRACKING
// ═════════════════════════════════════════════════════════════
function WebTracking() {
  const steps = [
    { label: 'Order confirmed', time: '5:42 PM', done: true },
    { label: 'Pharmacist verified Rx', time: '5:48 PM', done: true },
    { label: 'Packed at Indiranagar store', time: '5:55 PM', done: true, active: true },
    { label: 'Out for delivery', time: 'Est 6:10 PM', done: false },
    { label: 'Delivered', time: 'Est 6:40 PM', done: false },
  ];
  return (
    <div className="screen" style={{ ...Wstyles3, height: '100%', overflow: 'auto', background: C.ink50 }}>
      <WebTopNav active="" />
      <div style={{ padding: '20px 40px 0', fontSize: 12, color: C.ink500 }}>
        Account <span style={{ margin: '0 6px' }}>›</span> Orders <span style={{ margin: '0 6px' }}>›</span> <span style={{ color: C.ink900, fontWeight: 600 }}>#JN-2841-09</span>
      </div>

      <div style={{ padding: '14px 40px 0', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.02 }}>Tracking <span className="mono" style={{ color: C.ink500, fontWeight: 600, fontSize: 18 }}>#JN-2841-09</span></div>
          <div style={{ fontSize: 13, color: C.ink500, marginTop: 4 }}>Placed today at 5:42 PM · 3 items · ₹248</div>
        </div>
        <div className="pill" style={{ background: C.blue50, color: C.blue600 }}>● Packing now</div>
      </div>

      <div style={{ padding: '20px 40px 28px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24 }}>
        {/* Map */}
        <div style={{ borderRadius: 18, overflow: 'hidden', border: `1px solid ${C.ink100}`, position: 'relative', height: 540 }}>
          <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, ${C.blue100} 0%, ${C.blue50} 100%)` }}/>
          <svg viewBox="0 0 720 540" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} preserveAspectRatio="none">
            {/* Roads */}
            <path d="M-20,440 Q200,360 360,400 T740,260" stroke="white" strokeWidth="18" fill="none" strokeLinecap="round" opacity="0.9"/>
            <path d="M-20,440 Q200,360 360,400 T740,260" stroke={C.blue300} strokeWidth="2" strokeDasharray="8 8" fill="none" strokeLinecap="round"/>
            <path d="M120,60 L200,160 L180,300 L360,400" stroke="white" strokeWidth="14" fill="none" strokeLinecap="round" opacity="0.7"/>
            <path d="M480,40 L580,140 L560,260 L680,360" stroke="white" strokeWidth="12" fill="none" strokeLinecap="round" opacity="0.55"/>
            <path d="M40,200 L150,260" stroke="white" strokeWidth="9" fill="none" opacity="0.45"/>
            <path d="M580,420 L670,500" stroke="white" strokeWidth="9" fill="none" opacity="0.45"/>
            {/* Buildings */}
            {[
              [50,80,70,55],[160,40,55,55],[250,80,60,55],[420,150,80,55],[560,80,70,55],
              [80,300,75,55],[270,260,65,55],[480,300,70,55],[630,180,65,55],[50,460,60,55],
              [500,460,80,55],[640,420,55,55],
            ].map(([x,y,w,h], i) => <rect key={i} x={x} y={y} width={w} height={h} rx="6" fill="white" opacity="0.5"/>)}
          </svg>
          {/* Pickup */}
          <div style={{ position: 'absolute', left: 80, top: 410, display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 16, height: 16, borderRadius: 8, background: C.mint500, border: '3px solid white', boxShadow: '0 2px 4px rgba(0,0,0,0.2)' }}/>
            <div className="mono" style={{ fontSize: 11, fontWeight: 700, background: 'rgba(255,255,255,0.9)', padding: '3px 7px', borderRadius: 5 }}>STORE</div>
          </div>
          {/* Rider */}
          <div style={{ position: 'absolute', left: 340, top: 370 }}>
            <div style={{ position: 'absolute', inset: -10, borderRadius: '50%', border: `2px solid ${C.blue600}`, opacity: 0.25, width: 70, height: 70 }}/>
            <div style={{ width: 52, height: 52, borderRadius: 26, background: 'white', color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center', border: `3px solid ${C.blue600}`, boxShadow: '0 8px 18px rgba(11,31,77,0.20)' }}>
              <IconTruck size={26}/>
            </div>
          </div>
          {/* Destination */}
          <div style={{ position: 'absolute', right: 60, top: 240, display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 36, height: 36, borderRadius: 18, background: C.rose500, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '3px solid white', boxShadow: '0 4px 10px rgba(0,0,0,0.18)' }}>
              <IconHome size={18}/>
            </div>
            <div className="mono" style={{ fontSize: 11, fontWeight: 700, background: 'rgba(255,255,255,0.9)', padding: '3px 7px', borderRadius: 5 }}>HOME</div>
          </div>
          {/* ETA pill */}
          <div style={{ position: 'absolute', top: 16, right: 16, padding: '10px 14px', borderRadius: 12, background: 'white', display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 700, boxShadow: '0 4px 14px rgba(0,0,0,0.15)' }}>
            <IconClock size={16} style={{ color: C.blue600 }}/> ETA 28 min · 2.4 km
          </div>
        </div>

        {/* Side panel */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {/* Rider card */}
          <div style={{ padding: 16, borderRadius: 16, background: `linear-gradient(135deg, ${C.navy800}, ${C.blue600})`, color: 'white', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 50, height: 50, borderRadius: 25, background: 'rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 16 }}>RK</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 700 }}>Rohit will deliver</div>
              <div style={{ fontSize: 11, opacity: 0.85 }}>4.9 ★ · 320 deliveries · DL 87••</div>
            </div>
            <div style={{ width: 40, height: 40, borderRadius: 20, background: 'white', color: C.navy800, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M4 5.5a2 2 0 0 1 2-2h2l2 4-2 1.5a11 11 0 0 0 5 5l1.5-2 4 2v2a2 2 0 0 1-2 2A14 14 0 0 1 4 5.5z"/></svg>
            </div>
            <div style={{ width: 40, height: 40, borderRadius: 20, background: 'rgba(255,255,255,0.18)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <IconBell size={18}/>
            </div>
          </div>

          {/* Timeline */}
          <div style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 14 }}>Status</div>
            {steps.map((s, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, paddingBottom: i < steps.length - 1 ? 12 : 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 5px ${C.blue100}` : 'none',
                  }}>{s.done && <IconCheck size={12}/>}</div>
                  {i < steps.length - 1 && <div style={{ flex: 1, width: 2, background: s.done ? C.blue600 : C.ink200, marginTop: 2 }}/>}
                </div>
                <div style={{ flex: 1, paddingBottom: 4 }}>
                  <div style={{ fontSize: 13, fontWeight: s.active ? 700 : 600, color: s.done ? C.ink900 : C.ink400 }}>{s.label}</div>
                  <div className="mono" style={{ fontSize: 11, color: s.done ? C.blue600 : C.ink400, marginTop: 2 }}>{s.time}</div>
                </div>
                {s.active && <span className="pill" style={{ background: C.blue50, color: C.blue600, fontSize: 10, height: 24 }}>● Now</span>}
              </div>
            ))}
          </div>

          {/* Help */}
          <div style={{ display: 'flex', gap: 10 }}>
            <button style={{ flex: 1, background: 'white', color: C.ink700, border: `1px solid ${C.ink200}`, borderRadius: 12, padding: '12px 0', fontSize: 13, fontWeight: 700 }}>Need help?</button>
            <button style={{ flex: 1, background: C.blue50, color: C.blue600, border: 'none', borderRadius: 12, padding: '12px 0', fontSize: 13, fontWeight: 700 }}>View order</button>
          </div>
        </div>
      </div>
      <WebFooter minimal />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// W9) RX UPLOAD
// ═════════════════════════════════════════════════════════════
function WebRxUpload() {
  return (
    <div className="screen" style={{ ...Wstyles3, height: '100%', overflow: 'auto', background: C.ink50 }}>
      <WebTopNav active="" />
      <div style={{ padding: '20px 40px 0', fontSize: 12, color: C.ink500 }}>
        Home <span style={{ margin: '0 6px' }}>›</span> <span style={{ color: C.ink900, fontWeight: 600 }}>Upload prescription</span>
      </div>

      <div style={{ padding: '20px 40px 28px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 28, maxWidth: 1180, margin: '0 auto' }}>
        {/* Left — upload */}
        <div>
          <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.02 }}>Upload your prescription</div>
          <div style={{ fontSize: 14, color: C.ink500, marginTop: 6, maxWidth: 540 }}>
            Our licensed pharmacists will verify it in under 5 minutes. We accept handwritten prescriptions, e-prescriptions, and photos from your phone.
          </div>

          {/* Step indicator */}
          <div style={{ marginTop: 22, display: 'flex', alignItems: 'center', gap: 16 }}>
            {['Upload', 'Verify', 'Order'].map((s, i, a) => (
              <React.Fragment key={s}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 14,
                    background: i === 0 ? C.blue600 : 'white',
                    color: i === 0 ? 'white' : C.ink400,
                    border: i === 0 ? 'none' : `2px solid ${C.ink200}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700,
                  }}>{i + 1}</div>
                  <span style={{ fontSize: 13, fontWeight: 700, color: i === 0 ? C.ink900 : C.ink400 }}>{s}</span>
                </div>
                {i < a.length - 1 && <div style={{ flex: 1, height: 2, background: C.ink200, borderRadius: 1, maxWidth: 80 }}/>}
              </React.Fragment>
            ))}
          </div>

          {/* Drop zone */}
          <div style={{
            marginTop: 22, borderRadius: 18, padding: 36, textAlign: 'center',
            background: 'white', border: `2px dashed ${C.blue300}`,
          }}>
            <div style={{
              width: 80, height: 80, borderRadius: 40, background: C.blue50, color: C.blue600,
              margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><IconUpload size={36}/></div>
            <div style={{ fontSize: 18, fontWeight: 700, marginTop: 16 }}>Drag and drop your prescription</div>
            <div style={{ fontSize: 13, color: C.ink500, marginTop: 4, lineHeight: 1.55 }}>
              JPG, PNG, or PDF — up to 10 MB.<br/>Make sure doctor's name, your name, date, and medicine list are clearly visible.
            </div>
            <div style={{ marginTop: 18, display: 'flex', gap: 10, justifyContent: 'center' }}>
              <button style={{ background: C.blue600, color: 'white', border: 'none', borderRadius: 12, padding: '12px 22px', fontWeight: 700, fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 8, boxShadow: '0 6px 14px rgba(27,91,255,0.25)' }}>
                <IconCamera size={16}/> Choose file
              </button>
              <button style={{ background: 'white', color: C.blue600, border: `1.5px solid ${C.blue300}`, borderRadius: 12, padding: '12px 22px', fontWeight: 700, fontSize: 13 }}>
                Email it to us
              </button>
            </div>
          </div>

          {/* Attached file */}
          <div style={{ marginTop: 14, fontSize: 13, fontWeight: 700 }}>Attached</div>
          <div style={{ marginTop: 8, background: 'white', borderRadius: 14, padding: 14, border: `1px solid ${C.ink100}`, display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 56, height: 70, borderRadius: 8,
              background: `repeating-linear-gradient(0deg, ${C.ink100} 0 10px, white 10px 12px)`,
              border: `1px solid ${C.ink200}`, position: 'relative',
            }}>
              <div style={{ position: 'absolute', top: 6, left: 6, right: 6, height: 4, background: C.ink300, borderRadius: 2 }}/>
              <div style={{ position: 'absolute', top: 14, left: 6, right: 16, height: 3, background: C.ink200, borderRadius: 2 }}/>
              <div style={{ position: 'absolute', top: 22, left: 6, right: 20, height: 3, background: C.ink200, borderRadius: 2 }}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>Dr_Mehta_Rx.jpg</div>
              <div style={{ fontSize: 11, color: C.ink500 }}>1.8 MB · Just now</div>
              <div style={{ marginTop: 6, height: 4, background: C.ink100, borderRadius: 2, overflow: 'hidden' }}>
                <div style={{ width: '100%', height: '100%', background: C.mint500 }}/>
              </div>
            </div>
            <div style={{ width: 32, height: 32, borderRadius: 16, background: C.mint500, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <IconCheck size={18}/>
            </div>
            <IconClose size={18} style={{ color: C.ink400 }}/>
          </div>

          {/* Patient & continue */}
          <div style={{ marginTop: 22, background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
            <div style={{ fontSize: 13, fontWeight: 700 }}>Who is this for?</div>
            <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
              {[
                { name: 'Aarav Kumar', sub: 'Self · 32 yrs', active: true, init: 'AK', hue: 'blue' },
                { name: 'Meera Kumar', sub: 'Mother · 58', active: false, init: 'MK', hue: 'mint' },
                { name: 'Add member', sub: '+', active: false, add: true },
              ].map((p, i) => (
                <div key={i} style={{
                  padding: 12, borderRadius: 12, display: 'flex', alignItems: 'center', gap: 10,
                  background: p.active ? C.blue50 : (p.add ? 'transparent' : 'white'),
                  border: p.active ? `2px solid ${C.blue600}` : (p.add ? `2px dashed ${C.blue300}` : `2px solid ${C.ink100}`),
                }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 18,
                    background: p.add ? C.blue50 : { blue: C.blue100, mint: C.mint100 }[p.hue],
                    color: p.add ? C.blue600 : { blue: C.blue600, mint: C.mint500 }[p.hue],
                    display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 13,
                  }}>{p.add ? <IconPlus size={18}/> : p.init}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 700, color: p.add ? C.blue600 : C.ink900 }}>{p.name}</div>
                    <div style={{ fontSize: 10, color: C.ink500 }}>{p.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <button style={{ marginTop: 18, width: '100%', background: C.blue600, color: 'white', border: 'none', borderRadius: 14, padding: '14px 0', fontWeight: 700, fontSize: 15, boxShadow: '0 10px 20px rgba(27,91,255,0.30)' }}>
            Continue to order
          </button>
        </div>

        {/* Right — info */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ padding: 18, borderRadius: 16, background: C.amber100, color: '#7A4500', border: `1px solid ${C.amber500}33`, display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <IconShield size={22}/>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700 }}>Encrypted & private</div>
              <div style={{ fontSize: 12, lineHeight: 1.5, marginTop: 4 }}>Your prescription is end-to-end encrypted. Only our licensed pharmacist can view it.</div>
            </div>
          </div>

          <div style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>What makes a valid prescription?</div>
            {[
              { ok: true, l: 'Doctor\u2019s name, signature & registration number' },
              { ok: true, l: 'Patient\u2019s name and age' },
              { ok: true, l: 'Issue date (within last 90 days)' },
              { ok: true, l: 'Medicine names with dosage & duration' },
              { ok: false, l: 'No blurry photos or cropped corners' },
            ].map((t, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '6px 0' }}>
                <div style={{
                  width: 18, height: 18, borderRadius: 9, marginTop: 2,
                  background: t.ok ? C.mint500 : C.rose500,
                  color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{t.ok ? <IconCheck size={11}/> : <IconClose size={11}/>}</div>
                <span style={{ fontSize: 12, color: C.ink700, lineHeight: 1.5 }}>{t.l}</span>
              </div>
            ))}
          </div>

          <div style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
            <div style={{ fontSize: 14, fontWeight: 700 }}>No prescription?</div>
            <div style={{ fontSize: 12, color: C.ink500, marginTop: 4, lineHeight: 1.5 }}>Talk to one of our partner doctors online and get an e-prescription in minutes.</div>
            <button style={{ marginTop: 12, background: C.blue50, color: C.blue600, border: 'none', borderRadius: 10, padding: '10px 14px', fontWeight: 700, fontSize: 12, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <IconUser size={14}/> Consult a doctor →
            </button>
          </div>
        </div>
      </div>
      <WebFooter minimal />
    </div>
  );
}

Object.assign(window, { WebOrderSuccess, WebTracking, WebRxUpload });