// Screens 1-4: Home, Search/Browse, Product Detail, Prescription Upload

// ═════════════════════════════════════════════════════════════
// 1) HOME
// ═════════════════════════════════════════════════════════════
function ScreenHome() {
  const categories = [
    { label: 'Medicines',  hue: 'blue',  Icon: IconPill },
    { label: 'Wellness',   hue: 'mint',  Icon: IconHeart },
    { label: 'Devices',    hue: 'navy',  Icon: IconShield },
    { label: 'Lab tests',  hue: 'amber', Icon: IconScan },
    { label: 'Babycare',   hue: 'rose',  Icon: IconUser },
    { label: 'Ayurveda',   hue: 'mint',  Icon: IconStar },
  ];
  const featured = [
    { name: 'Dolo 650', sub: 'Paracetamol · Strip of 15', price: '32', mrp: '40', hue: 'blue', off: '20%' },
    { name: 'Vitamin D3', sub: 'Cholecalciferol · 60K IU', price: '149', mrp: '189', hue: 'amber', off: '21%' },
    { name: 'Pan-D', sub: 'Pantoprazole · 10 caps', price: '108', mrp: '128', hue: 'mint', off: '16%' },
  ];
  return (
    <div className="screen" style={{
      height: '100%', overflow: 'auto', background: C.ink50,
      paddingTop: 50, paddingBottom: 110,
    }}>
      <TopBar />
      <SearchBar />

      {/* Hero banner */}
      <div style={{
        margin: '18px 20px 0', borderRadius: 22, padding: '20px 22px',
        background: `linear-gradient(135deg, ${C.blue600} 0%, ${C.navy800} 100%)`,
        color: 'white', position: 'relative', overflow: 'hidden',
        boxShadow: '0 12px 30px rgba(11,31,77,0.18)',
      }}>
        <div style={{
          position: 'absolute', right: -30, top: -30, width: 150, height: 150,
          borderRadius: 100, background: 'rgba(255,255,255,0.08)',
        }}/>
        <div style={{
          position: 'absolute', right: 20, bottom: -40, width: 90, height: 90,
          borderRadius: 80, background: 'rgba(255,255,255,0.06)',
        }}/>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 1.2, opacity: 0.8 }}>FIRST ORDER · USE JAN20</div>
        <div style={{ fontSize: 24, fontWeight: 700, marginTop: 6, lineHeight: 1.1, letterSpacing: -0.03 }}>
          Flat 20% off,<br/>plus free delivery
        </div>
        <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 8 }}>
          <button style={{
            background: 'white', color: C.navy800, border: 'none',
            borderRadius: 12, padding: '8px 14px', fontWeight: 700, fontSize: 12,
          }}>Order now</button>
          <span className="mono" style={{ fontSize: 11, opacity: 0.7, letterSpacing: 1 }}>T&amp;C apply</span>
        </div>
      </div>

      <StatusBanner
        title="Refill ready for 4 items"
        sub="Metformin, Atorvastatin & 2 more"
        cta="Refill" tone="blue"
      />

      <SectionHeader title="Shop by category" action="See all" />
      <div style={{
        padding: '0 20px', display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, rowGap: 16,
      }}>
        {categories.map((c) => (
          <div key={c.label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
            <div style={{
              width: 64, height: 64, borderRadius: 18,
              background: { blue: C.blue100, mint: C.mint100, amber: C.amber100, rose: C.rose100, navy: '#E2E8FA' }[c.hue],
              color: { blue: C.blue600, mint: C.mint500, amber: C.amber500, rose: C.rose500, navy: C.navy800 }[c.hue],
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <c.Icon size={26} />
            </div>
            <div style={{ fontSize: 11, fontWeight: 600, color: C.ink700 }}>{c.label}</div>
          </div>
        ))}
      </div>

      <SectionHeader title="Best-sellers near you" action="See all" />
      <div style={{
        display: 'flex', gap: 12, overflowX: 'auto', padding: '0 20px',
      }}>
        {featured.map((p, i) => (
          <div key={i} style={{
            flex: '0 0 165px', background: 'white', borderRadius: 18, padding: 12,
            boxShadow: '0 1px 0 rgba(11,31,77,0.04), 0 6px 16px rgba(11,31,77,0.05)',
          }}>
            <div style={{ position: 'relative' }}>
              <ProductPlaceholder hue={p.hue} h={110} label={p.name} />
              <div style={{
                position: 'absolute', top: 8, left: 8,
                background: C.rose500, color: 'white', fontSize: 10, fontWeight: 700,
                padding: '3px 7px', borderRadius: 8,
              }}>-{p.off}</div>
            </div>
            <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900, marginTop: 10, letterSpacing: -0.01 }}>{p.name}</div>
            <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{p.sub}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 8 }}>
              <div>
                <span className="mono" style={{ fontSize: 15, fontWeight: 700, color: C.ink900 }}>₹{p.price}</span>
                <span className="mono" style={{ fontSize: 11, color: C.ink400, textDecoration: 'line-through', marginLeft: 5 }}>₹{p.mrp}</span>
              </div>
              <div style={{
                width: 28, height: 28, borderRadius: 14, background: C.blue50, color: C.blue600,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}><IconPlus size={16} /></div>
            </div>
          </div>
        ))}
      </div>

      <SectionHeader title="Quick reorder" action="History" />
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[
          { name: 'Cetirizine 10mg', sub: 'Last ordered 12 days ago · ×2', price: '24' },
          { name: 'Vicks VapoRub 50g', sub: 'Last ordered 28 days ago · ×1', price: '145' },
        ].map((p, i) => (
          <div key={i} style={{
            background: 'white', borderRadius: 16, padding: 12,
            display: 'flex', alignItems: 'center', gap: 12,
            boxShadow: '0 1px 0 rgba(11,31,77,0.04)',
          }}>
            <ProductPlaceholder hue={i ? 'amber' : 'blue'} w={48} h={48} radius={12} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: C.ink900 }}>{p.name}</div>
              <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{p.sub}</div>
            </div>
            <button style={{
              background: C.blue50, color: C.blue600, border: 'none', fontWeight: 700,
              borderRadius: 10, padding: '8px 12px', fontSize: 12,
            }}>Reorder</button>
          </div>
        ))}
      </div>
      <BottomNav active="home" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 2) SEARCH / BROWSE
// ═════════════════════════════════════════════════════════════
function ScreenSearch() {
  const filters = ['All', 'Tablets', 'Syrups', 'Diabetes', 'Heart', 'Generics'];
  const products = [
    { name: 'Crocin Advance', sub: 'Paracetamol 500mg · 15 tabs', price: '38', mrp: '45', hue: 'blue', stock: 'In stock', rx: false, rating: '4.7' },
    { name: 'Metformin SR', sub: 'Glycomet · 500mg · 30 tabs', price: '78', mrp: '95', hue: 'mint', stock: 'In stock', rx: true, rating: '4.5' },
    { name: 'Azithromycin', sub: 'Azithral 500 · 5 tabs', price: '92', mrp: '118', hue: 'amber', stock: 'Low stock', rx: true, rating: '4.6' },
    { name: 'Calpol 250mg', sub: 'Susp · 60ml bottle', price: '52', mrp: '62', hue: 'rose', stock: 'In stock', rx: false, rating: '4.8' },
  ];
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: C.ink50, paddingTop: 50, paddingBottom: 110 }}>
      {/* Sticky search */}
      <div style={{ padding: '6px 20px 4px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 38, height: 38, borderRadius: 19, background: 'white', color: C.ink900,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 2px 6px rgba(11,31,77,0.06)',
        }}><IconChevL size={20} /></div>
        <div style={{
          flex: 1, padding: '10px 14px', background: 'white', borderRadius: 14,
          display: 'flex', alignItems: 'center', gap: 8,
          boxShadow: '0 2px 6px rgba(11,31,77,0.06)',
        }}>
          <IconSearch size={18} style={{ color: C.ink500 }} />
          <span style={{ flex: 1, fontSize: 14, fontWeight: 600, color: C.ink900 }}>paracetamol</span>
          <IconClose size={16} style={{ color: C.ink400 }} />
        </div>
      </div>
      {/* Filter chips */}
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '12px 20px 4px' }}>
        <div style={{
          background: 'white', color: C.ink900, padding: '8px 12px', borderRadius: 12,
          fontSize: 12, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0,
          boxShadow: '0 2px 6px rgba(11,31,77,0.05)',
        }}>
          <IconFilter size={14} /> Filters
          <div style={{ background: C.blue600, color: 'white', borderRadius: 8, fontSize: 10, padding: '1px 6px', fontWeight: 700 }}>2</div>
        </div>
        {filters.map((f, i) => (
          <div key={f} style={{
            padding: '8px 14px', borderRadius: 12,
            background: i === 1 ? C.navy800 : 'white',
            color: i === 1 ? 'white' : C.ink700,
            fontSize: 12, fontWeight: 600, flexShrink: 0,
            boxShadow: i === 1 ? 'none' : '0 1px 3px rgba(11,31,77,0.05)',
          }}>{f}</div>
        ))}
      </div>
      <div style={{ padding: '14px 20px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 13, color: C.ink500 }}>
          <span style={{ color: C.ink900, fontWeight: 700 }}>284</span> results · <span style={{ fontWeight: 600 }}>Sort: Relevance</span>
        </div>
        <IconChevD size={16} style={{ color: C.ink500 }} />
      </div>

      {/* Product list */}
      <div style={{ padding: '14px 20px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {products.map((p, i) => (
          <div key={i} style={{
            background: 'white', borderRadius: 18, padding: 12, display: 'flex', gap: 12,
            boxShadow: '0 1px 0 rgba(11,31,77,0.04), 0 6px 16px rgba(11,31,77,0.05)',
          }}>
            <ProductPlaceholder hue={p.hue} w={84} h={84} radius={14} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: C.ink900, lineHeight: 1.2, letterSpacing: -0.01 }}>{p.name}</div>
                <IconHeart size={18} style={{ color: C.ink300 }} />
              </div>
              <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{p.sub}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 6 }}>
                {p.rx && (
                  <span className="pill" style={{ background: C.blue50, color: C.blue600, padding: '3px 8px', fontSize: 10 }}>
                    <IconRx size={11} /> Rx
                  </span>
                )}
                <span className="pill" style={{
                  background: p.stock === 'Low stock' ? C.amber100 : C.mint100,
                  color: p.stock === 'Low stock' ? '#7A4500' : '#0F5A48', padding: '3px 8px', fontSize: 10,
                }}>● {p.stock}</span>
                <span style={{ display: 'flex', alignItems: 'center', gap: 2, fontSize: 11, color: C.ink500, fontWeight: 600 }}>
                  <IconStar size={11} style={{ color: C.amber500 }} /> {p.rating}
                </span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 8 }}>
                <div>
                  <span className="mono" style={{ fontSize: 16, fontWeight: 700, color: C.ink900 }}>₹{p.price}</span>
                  <span className="mono" style={{ fontSize: 11, color: C.ink400, textDecoration: 'line-through', marginLeft: 5 }}>₹{p.mrp}</span>
                </div>
                <button style={{
                  background: C.blue600, color: 'white', border: 'none', fontWeight: 700,
                  borderRadius: 12, padding: '7px 14px', fontSize: 12, letterSpacing: -0.01,
                  boxShadow: '0 4px 10px rgba(27,91,255,0.25)',
                }}>Add +</button>
              </div>
            </div>
          </div>
        ))}
      </div>
      <BottomNav active="home" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 3) PRODUCT DETAIL
// ═════════════════════════════════════════════════════════════
function ScreenProduct() {
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: 'white', paddingTop: 0, paddingBottom: 100 }}>
      {/* Image area with overlay header */}
      <div style={{
        height: 330, background: `linear-gradient(180deg, ${C.blue50} 0%, ${C.blue100} 100%)`,
        position: 'relative', paddingTop: 50,
      }}>
        <div style={{ position: 'absolute', top: 56, left: 20, right: 20, display: 'flex', justifyContent: 'space-between' }}>
          <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.10)' }}>
            <IconChevL size={20} />
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <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.10)' }}>
              <IconHeart size={20} style={{ color: C.rose500 }} />
            </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.10)' }}>
              <IconCart size={20} />
            </div>
          </div>
        </div>
        {/* Big pill graphic */}
        <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{
            width: 200, height: 200, borderRadius: 30,
            background: `repeating-linear-gradient(135deg, ${C.blue50} 0 14px, ${C.blue100} 14px 28px)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 18px 40px rgba(11,31,77,0.16)',
          }}>
            <div style={{
              width: 90, height: 90, borderRadius: 45, background: 'white', color: C.blue600,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><IconPill size={42} /></div>
          </div>
        </div>
        {/* dot indicators */}
        <div style={{ position: 'absolute', bottom: 18, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 6 }}>
          {[0,1,2,3].map(i => (
            <div key={i} style={{
              width: i === 0 ? 18 : 6, height: 6, borderRadius: 3,
              background: i === 0 ? C.blue600 : 'rgba(11,31,77,0.2)',
            }}/>
          ))}
        </div>
      </div>

      {/* Title block */}
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span className="pill" style={{ background: C.blue50, color: C.blue600 }}>
            <IconRx size={12} /> Prescription
          </span>
          <span className="pill" style={{ background: C.mint100, color: '#0F5A48' }}>● In stock</span>
        </div>
        <div style={{ fontSize: 22, fontWeight: 700, color: C.ink900, marginTop: 10, letterSpacing: -0.02 }}>Metformin SR 500mg</div>
        <div style={{ fontSize: 13, color: C.ink500, marginTop: 4 }}>Glycomet-SR · USV Ltd · Strip of 30 tablets</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 10 }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 13, fontWeight: 600, color: C.ink700 }}>
            <IconStar size={14} style={{ color: C.amber500 }} /> 4.7 <span style={{ color: C.ink400, fontWeight: 500 }}>(2,341)</span>
          </span>
          <div style={{ width: 1, height: 12, background: C.ink200 }} />
          <span style={{ fontSize: 13, fontWeight: 600, color: C.blue600 }}>View alternates</span>
        </div>

        {/* Price */}
        <div style={{
          marginTop: 16, padding: 16, background: C.blue25, borderRadius: 18,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span className="mono" style={{ fontSize: 26, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>₹78</span>
              <span className="mono" style={{ fontSize: 13, color: C.ink400, textDecoration: 'line-through' }}>₹95</span>
              <span className="pill" style={{ background: C.rose500, color: 'white', padding: '2px 8px' }}>18% OFF</span>
            </div>
            <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>Inclusive of all taxes</div>
          </div>
          {/* Stepper */}
          <div style={{
            display: 'flex', alignItems: 'center', background: 'white', borderRadius: 12,
            boxShadow: '0 2px 6px rgba(11,31,77,0.08)',
          }}>
            <div style={{ width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.blue600 }}>
              <IconMinus size={18} />
            </div>
            <div className="mono" style={{ width: 28, textAlign: 'center', fontWeight: 700, color: C.ink900 }}>2</div>
            <div style={{ width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.blue600 }}>
              <IconPlus size={18} />
            </div>
          </div>
        </div>

        {/* Delivery promise */}
        <div style={{ marginTop: 16, padding: 14, border: `1px solid ${C.ink100}`, borderRadius: 16, display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 38, height: 38, borderRadius: 12, background: C.mint100, color: C.mint500, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IconTruck size={20} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>Express delivery in 28 min</div>
            <div style={{ fontSize: 11, color: C.ink500 }}>Free for orders above ₹199 · 560038</div>
          </div>
          <span style={{ fontSize: 12, fontWeight: 700, color: C.blue600 }}>Change</span>
        </div>

        {/* Composition table */}
        <div style={{ marginTop: 20, fontSize: 15, fontWeight: 700, color: C.ink900, letterSpacing: -0.01 }}>Composition</div>
        <div style={{ marginTop: 10, padding: '12px 14px', background: C.ink50, borderRadius: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 0' }}>
            <span className="mono" style={{ fontSize: 12, color: C.ink700, fontWeight: 600 }}>METFORMIN HCL</span>
            <span className="mono" style={{ fontSize: 12, color: C.ink900, fontWeight: 700 }}>500 mg</span>
          </div>
          <div style={{ height: 1, background: C.ink200, opacity: 0.6 }}/>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 0' }}>
            <span className="mono" style={{ fontSize: 12, color: C.ink700, fontWeight: 600 }}>FORM</span>
            <span className="mono" style={{ fontSize: 12, color: C.ink900, fontWeight: 700 }}>Tablet (SR)</span>
          </div>
        </div>

        {/* Tabs */}
        <div style={{ marginTop: 18, display: 'flex', gap: 18, borderBottom: `1px solid ${C.ink100}` }}>
          {['Uses', 'How to take', 'Side effects', 'FAQs'].map((t, i) => (
            <div key={t} style={{
              padding: '10px 0', fontSize: 13, fontWeight: 700,
              color: i === 0 ? C.blue600 : C.ink400,
              borderBottom: i === 0 ? `2px solid ${C.blue600}` : '2px solid transparent',
              marginBottom: -1,
            }}>{t}</div>
          ))}
        </div>
        <div style={{ marginTop: 12, fontSize: 13, color: C.ink700, lineHeight: 1.55 }}>
          Used to control high blood sugar in adults with type 2 diabetes. Works by reducing glucose production in the liver and improving insulin sensitivity. Often used alongside diet and exercise.
        </div>
      </div>

      {/* Sticky CTA */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, padding: '14px 20px 28px',
        background: 'linear-gradient(to top, white 70%, rgba(255,255,255,0))',
        display: 'flex', gap: 10, alignItems: 'center',
      }}>
        <button style={{
          flex: 1, background: C.blue50, color: C.blue600, border: 'none',
          borderRadius: 16, padding: '14px 0', fontWeight: 700, fontSize: 14,
        }}>Upload Rx</button>
        <button style={{
          flex: 1.6, 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)',
        }}>Add to cart · ₹156</button>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 4) PRESCRIPTION UPLOAD
// ═════════════════════════════════════════════════════════════
function ScreenRx() {
  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 }}>Upload prescription</div>
          <div style={{ fontSize: 12, color: C.ink500 }}>Our pharmacist verifies in under 5 min</div>
        </div>
      </div>

      {/* Step indicator */}
      <div style={{ padding: '16px 20px 0', display: 'flex', alignItems: 'center', gap: 8 }}>
        {['Upload', 'Verify', 'Order'].map((s, i) => (
          <React.Fragment key={s}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <div style={{
                width: 22, height: 22, borderRadius: 11,
                background: i === 0 ? C.blue600 : 'white',
                color: i === 0 ? 'white' : C.ink400,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 700, boxShadow: i === 0 ? 'none' : '0 0 0 1px ' + C.ink200,
              }}>{i + 1}</div>
              <span style={{ fontSize: 12, fontWeight: 700, color: i === 0 ? C.ink900 : C.ink400 }}>{s}</span>
            </div>
            {i < 2 && <div style={{ flex: 1, height: 2, background: C.ink200, borderRadius: 1 }}/>}
          </React.Fragment>
        ))}
      </div>

      {/* Drop zone */}
      <div style={{
        margin: '20px 20px 0', borderRadius: 20, padding: 20,
        background: 'white', border: `2px dashed ${C.blue300}`,
        textAlign: 'center',
      }}>
        <div style={{
          width: 64, height: 64, borderRadius: 32, background: C.blue50, color: C.blue600,
          margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><IconUpload size={28} /></div>
        <div style={{ fontSize: 15, fontWeight: 700, color: C.ink900, marginTop: 12, letterSpacing: -0.01 }}>
          Drop your prescription here
        </div>
        <div style={{ fontSize: 12, color: C.ink500, marginTop: 4, lineHeight: 1.45 }}>
          JPG, PNG or PDF, up to 10MB.<br/>Make sure all 4 corners are visible.
        </div>
        <div style={{ marginTop: 14, display: 'flex', gap: 10 }}>
          <button style={{
            flex: 1, background: C.blue600, color: 'white', border: 'none',
            borderRadius: 14, padding: '12px 0', fontWeight: 700, fontSize: 13,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}><IconCamera size={16} /> Take photo</button>
          <button style={{
            flex: 1, background: C.blue50, color: C.blue600, border: 'none',
            borderRadius: 14, padding: '12px 0', fontWeight: 700, fontSize: 13,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}><IconUpload size={16} /> From files</button>
        </div>
      </div>

      {/* Attached Rx */}
      <SectionHeader title="Attached" action={null} />
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{
          background: 'white', borderRadius: 16, padding: 12,
          display: 'flex', alignItems: 'center', gap: 12,
          boxShadow: '0 1px 0 rgba(11,31,77,0.04)',
        }}>
          <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>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>Dr_Mehta_Rx.jpg</div>
            <div style={{ fontSize: 11, color: C.ink500 }}>1.8 MB · Uploaded 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={{ color: C.mint500 }}><IconCheck size={22} /></div>
        </div>
      </div>

      {/* Patient block */}
      <SectionHeader title="Who is this for?" action={null} />
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          { name: 'Aarav Kumar', sub: 'Self · 32 yrs · M', active: true },
          { name: 'Meera Kumar', sub: 'Mother · 58 yrs · F', active: false },
          { name: '+ Add family member', sub: '', active: false, add: true },
        ].map((p, i) => (
          <div key={i} style={{
            background: 'white', borderRadius: 14, padding: '12px 14px',
            display: 'flex', alignItems: 'center', gap: 12,
            border: p.active ? `2px solid ${C.blue600}` : '2px solid transparent',
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 18,
              background: p.add ? C.blue50 : (i === 0 ? C.blue100 : C.mint100),
              color: p.add ? C.blue600 : (i === 0 ? C.blue600 : C.mint500),
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 700, fontSize: 13,
            }}>{p.add ? <IconPlus size={18} /> : p.name.split(' ').map(s => s[0]).join('')}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: p.add ? C.blue600 : C.ink900 }}>{p.name}</div>
              {p.sub && <div style={{ fontSize: 11, color: C.ink500 }}>{p.sub}</div>}
            </div>
            {p.active && (
              <div style={{ width: 18, height: 18, borderRadius: 9, background: C.blue600, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <IconCheck size={12} />
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Note */}
      <div style={{
        margin: '16px 20px 0', padding: 12, borderRadius: 14,
        background: C.amber100, display: 'flex', alignItems: 'flex-start', gap: 10,
      }}>
        <div style={{ color: C.amber500, marginTop: 2 }}><IconShield size={18} /></div>
        <div style={{ fontSize: 12, color: '#7A4500', lineHeight: 1.45 }}>
          Your prescription is end-to-end encrypted and shared only with our licensed pharmacist.
        </div>
      </div>

      {/* CTA */}
      <div style={{ padding: '18px 20px 0' }}>
        <button className="btn-primary" style={{ background: C.blue600, color: 'white', border: 'none', borderRadius: 16, padding: '15px 0', fontWeight: 700, fontSize: 15, width: '100%', boxShadow: '0 10px 20px rgba(27,91,255,0.30)' }}>
          Continue to order
        </button>
      </div>
      <BottomNav active="rx" />
    </div>
  );
}

Object.assign(window, { ScreenHome, ScreenSearch, ScreenProduct, ScreenRx });