// Web screens — Homepage, PLP (Search/Browse), PDP (Product Detail)

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

// ═════════════════════════════════════════════════════════════
// W1) HOMEPAGE
// ═════════════════════════════════════════════════════════════
function WebHome() {
  return (
    <div className="screen" style={{ ...Wstyles, height: '100%', overflow: 'auto', background: 'white' }}>
      <WebTopNav active="home" />

      {/* Hero */}
      <div style={{
        background: `linear-gradient(135deg, ${C.navy800} 0%, ${C.blue600} 100%)`,
        color: 'white', padding: '40px 40px 36px', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', right: -80, top: -80, width: 360, height: 360, borderRadius: 200, background: 'rgba(255,255,255,0.06)' }}/>
        <div style={{ position: 'absolute', right: 220, top: 100, width: 140, height: 140, borderRadius: 100, background: 'rgba(255,255,255,0.05)' }}/>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.2)', fontSize: 12, fontWeight: 600 }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: C.mint500 }}/> Express delivery available in your area
            </div>
            <div style={{ fontSize: 48, fontWeight: 700, lineHeight: 1.05, marginTop: 16, letterSpacing: -0.03 }}>
              Genuine medicines,<br/>delivered in <span style={{ color: C.blue300 }}>28 minutes.</span>
            </div>
            <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.78)', marginTop: 12, maxWidth: 460, lineHeight: 1.55 }}>
              Upload your prescription and our licensed pharmacists verify in under 5 minutes. Cold-chain compliant. Free delivery over ₹199.
            </div>
            {/* Search */}
            <div style={{
              marginTop: 22, display: 'flex', alignItems: 'center', gap: 0,
              background: 'white', borderRadius: 14, padding: 8, maxWidth: 520,
              boxShadow: '0 16px 40px rgba(0,0,0,0.20)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px' }}>
                <IconSearch size={20} style={{ color: C.ink400 }}/>
                <span style={{ fontSize: 14, color: C.ink900, fontWeight: 500, padding: '8px 0' }}>paracetamol</span>
                <div style={{ marginLeft: 10, padding: '3px 8px', borderRadius: 6, background: C.blue50, color: C.blue600, fontSize: 10, fontWeight: 700, letterSpacing: 0.5 }}>RX OK</div>
              </div>
              <div style={{ flex: 1 }}/>
              <button style={{ background: C.blue600, color: 'white', border: 'none', borderRadius: 10, padding: '10px 18px', fontWeight: 700, fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                Search <IconChevR size={16}/>
              </button>
            </div>
            <div style={{ display: 'flex', gap: 24, marginTop: 24 }}>
              {[
                { v: '4.8★', l: 'on 220k+ reviews' },
                { v: '12M+', l: 'orders fulfilled' },
                { v: '2,400+', l: 'cities served' },
              ].map((s, i) => (
                <div key={i}>
                  <div className="mono" style={{ fontSize: 22, fontWeight: 700 }}>{s.v}</div>
                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.65)', marginTop: 2 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
          {/* Hero card cluster */}
          <div style={{ position: 'relative', height: 340 }}>
            <div style={{
              position: 'absolute', top: 30, right: 20, width: 260, height: 260, borderRadius: 36,
              background: `repeating-linear-gradient(135deg, ${C.blue100} 0 14px, ${C.blue300} 14px 28px)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 30px 60px rgba(0,0,0,0.25)', transform: 'rotate(-6deg)',
            }}>
              <div style={{ width: 110, height: 110, borderRadius: 55, background: 'white', color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <IconPill size={56} />
              </div>
            </div>
            <div style={{
              position: 'absolute', top: 14, left: 0, width: 200, padding: 14, borderRadius: 16, background: 'white', color: C.ink900,
              boxShadow: '0 16px 36px rgba(0,0,0,0.18)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: C.mint100, color: C.mint500, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconCheck size={20}/></div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 700 }}>Rx verified</div>
                  <div style={{ fontSize: 10, color: C.ink500 }}>by Dr. P. Mehta</div>
                </div>
              </div>
            </div>
            <div style={{
              position: 'absolute', bottom: 14, left: 30, width: 220, padding: 14, borderRadius: 16, background: 'white', color: C.ink900,
              boxShadow: '0 16px 36px rgba(0,0,0,0.18)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: C.blue50, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconTruck size={20}/></div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 700 }}>Out for delivery</div>
                  <div style={{ fontSize: 10, color: C.ink500 }}>Arriving in 14 min</div>
                </div>
              </div>
              <div style={{ marginTop: 10, height: 4, borderRadius: 2, background: C.ink100, overflow: 'hidden' }}>
                <div style={{ width: '64%', height: '100%', background: C.blue600 }}/>
              </div>
            </div>
            <div style={{
              position: 'absolute', top: 130, right: 280, padding: '8px 12px', borderRadius: 12, background: C.amber500, color: '#7A4500',
              fontSize: 12, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6,
              boxShadow: '0 8px 16px rgba(0,0,0,0.18)',
            }}>
              <IconStar size={14}/> 20% off code: JAN20
            </div>
          </div>
        </div>
      </div>

      {/* Trust strip */}
      <div style={{ background: 'white', padding: '16px 40px', display: 'flex', justifyContent: 'space-around', borderBottom: `1px solid ${C.ink100}` }}>
        {[
          { Icon: IconShield, t: '100% genuine',   s: 'Sourced from approved distributors' },
          { Icon: IconRx,     t: 'Verified by pharmacists', s: 'In-house licensed team · 24×7' },
          { Icon: IconTruck,  t: 'Free express delivery',   s: 'For orders over ₹199' },
          { Icon: IconHeart,  t: 'Cold-chain compliant',   s: 'Insulin, biologics tracked end-to-end' },
        ].map((t, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: C.blue50, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><t.Icon size={22}/></div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900 }}>{t.t}</div>
              <div style={{ fontSize: 11, color: C.ink500 }}>{t.s}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Categories strip */}
      <div style={{ padding: '32px 40px 0' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 22, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>Shop by category</div>
          <span style={{ fontSize: 13, color: C.blue600, fontWeight: 600 }}>See all 24 →</span>
        </div>
        <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 14 }}>
          {[
            { l: 'Medicines',  Icon: IconPill,   hue: 'blue' },
            { l: 'Wellness',   Icon: IconHeart,  hue: 'mint' },
            { l: 'Devices',    Icon: IconShield, hue: 'navy' },
            { l: 'Lab tests',  Icon: IconScan,   hue: 'amber' },
            { l: 'Babycare',   Icon: IconUser,   hue: 'rose' },
            { l: 'Ayurveda',   Icon: IconStar,   hue: 'mint' },
            { l: 'Diabetes',   Icon: IconRx,     hue: 'blue' },
            { l: 'Skin',       Icon: IconHeart,  hue: 'rose' },
          ].map((c) => (
            <div key={c.l} style={{
              background: 'white', borderRadius: 14, padding: 14, textAlign: 'center',
              border: `1px solid ${C.ink100}`, transition: 'all .2s',
            }}>
              <div style={{
                width: 52, height: 52, borderRadius: 14, margin: '0 auto',
                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: 12, fontWeight: 600, color: C.ink700, marginTop: 8 }}>{c.l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Best sellers */}
      <div style={{ padding: '28px 40px 32px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 22, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>Best-sellers this week</div>
          <span style={{ fontSize: 13, color: C.blue600, fontWeight: 600 }}>View all →</span>
        </div>
        <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
          {[
            { name: 'Dolo 650', sub: 'Paracetamol · 15 tabs', price: '32', mrp: '40', hue: 'blue', off: '20', rx: false, rating: '4.8' },
            { name: 'Vitamin D3 60K', sub: 'Cholecalciferol · 4 caps', price: '149', mrp: '189', hue: 'amber', off: '21', rx: false, rating: '4.7' },
            { name: 'Pan-D', sub: 'Pantoprazole · 10 caps', price: '108', mrp: '128', hue: 'mint', off: '16', rx: true, rating: '4.6' },
            { name: 'Metformin SR', sub: 'Glycomet · 30 tabs', price: '78', mrp: '95', hue: 'blue', off: '18', rx: true, rating: '4.5' },
            { name: 'Cetirizine 10', sub: 'Anti-allergy · 10 tabs', price: '24', mrp: '32', hue: 'mint', off: '25', rx: true, rating: '4.7' },
          ].map((p, i) => (
            <div key={i} style={{ background: 'white', borderRadius: 16, padding: 12, border: `1px solid ${C.ink100}` }}>
              <div style={{ position: 'relative' }}>
                <ProductPlaceholder hue={p.hue} h={130} 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>
                {p.rx && (
                  <div style={{ position: 'absolute', top: 8, right: 8, padding: '3px 7px', borderRadius: 8, background: 'white', color: C.blue600, fontSize: 10, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 3 }}>
                    <IconRx size={11}/> Rx
                  </div>
                )}
              </div>
              <div style={{ fontSize: 14, fontWeight: 700, color: C.ink900, marginTop: 10 }}>{p.name}</div>
              <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{p.sub}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 6 }}>
                <IconStar size={12} style={{ color: C.amber500 }}/>
                <span style={{ fontSize: 11, fontWeight: 600 }}>{p.rating}</span>
                <span style={{ fontSize: 11, color: C.mint500, fontWeight: 600, marginLeft: 6 }}>● In stock</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
                <div>
                  <span className="mono" style={{ fontSize: 16, fontWeight: 700 }}>₹{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', borderRadius: 10, padding: '7px 14px', fontWeight: 700, fontSize: 12, boxShadow: '0 4px 10px rgba(27,91,255,0.20)' }}>Add</button>
              </div>
            </div>
          ))}
        </div>
      </div>

      <WebFooter />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// W2) PLP — SEARCH / BROWSE WITH FILTERS
// ═════════════════════════════════════════════════════════════
function WebPLP() {
  const products = Array.from({ length: 9 }).map((_, i) => {
    const data = [
      { name: 'Crocin Advance', sub: 'Paracetamol 500mg · 15 tabs', price: 38, mrp: 45, hue: 'blue', rx: false, stock: 'In stock', rating: '4.7' },
      { name: 'Metformin SR 500', sub: 'Glycomet-SR · 30 tabs', price: 78, mrp: 95, hue: 'mint', rx: true, stock: 'In stock', rating: '4.5' },
      { name: 'Azithromycin 500', sub: 'Azithral · 5 tabs', price: 92, mrp: 118, hue: 'amber', rx: true, stock: 'Low stock', rating: '4.6' },
      { name: 'Calpol 250', sub: 'Susp · 60ml bottle', price: 52, mrp: 62, hue: 'rose', rx: false, stock: 'In stock', rating: '4.8' },
      { name: 'Atorvastatin 10', sub: 'Atorlip · 10 tabs', price: 86, mrp: 110, hue: 'blue', rx: true, stock: 'In stock', rating: '4.4' },
      { name: 'Cetirizine 10', sub: 'Cetzine · 10 tabs', price: 24, mrp: 32, hue: 'mint', rx: false, stock: 'In stock', rating: '4.7' },
      { name: 'Vitamin B-Complex', sub: '60 caps', price: 245, mrp: 320, hue: 'amber', rx: false, stock: 'In stock', rating: '4.5' },
      { name: 'Pan-D', sub: 'Pantoprazole · 10 caps', price: 108, mrp: 128, hue: 'mint', rx: true, stock: 'In stock', rating: '4.6' },
      { name: 'Dolo 650', sub: 'Paracetamol · 15 tabs', price: 32, mrp: 40, hue: 'blue', rx: false, stock: 'In stock', rating: '4.8' },
    ];
    return data[i];
  });
  return (
    <div className="screen" style={{ ...Wstyles, height: '100%', overflow: 'auto', background: C.ink50 }}>
      <WebTopNav active="medicine" />

      {/* Breadcrumb + title bar */}
      <div style={{ padding: '20px 40px 0' }}>
        <div style={{ fontSize: 12, color: C.ink500 }}>
          Home <span style={{ margin: '0 6px' }}>›</span> Medicines <span style={{ margin: '0 6px' }}>›</span> <span style={{ color: C.ink900, fontWeight: 600 }}>Pain relief</span>
        </div>
        <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 26, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>Search results for "paracetamol"</div>
            <div style={{ fontSize: 13, color: C.ink500, marginTop: 4 }}><span style={{ color: C.ink900, fontWeight: 700 }}>284</span> medicines · delivered by 6:40 PM today</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontSize: 13, color: C.ink500 }}>Sort by</span>
            <div style={{
              padding: '8px 14px', borderRadius: 10, background: 'white', border: `1px solid ${C.ink200}`,
              fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 8,
            }}>Relevance <IconChevD size={14}/></div>
            {/* View toggle */}
            <div style={{ display: 'flex', background: 'white', borderRadius: 10, border: `1px solid ${C.ink200}`, padding: 4 }}>
              <div style={{ width: 32, height: 28, borderRadius: 7, background: C.navy800, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/><rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/></svg>
              </div>
              <div style={{ width: 32, height: 28, color: C.ink400, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor"><rect x="1" y="2" width="14" height="2" rx="1"/><rect x="1" y="7" width="14" height="2" rx="1"/><rect x="1" y="12" width="14" height="2" rx="1"/></svg>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Two-column layout */}
      <div style={{ padding: '20px 40px 32px', display: 'grid', gridTemplateColumns: '260px 1fr', gap: 24 }}>
        {/* Sidebar filters */}
        <div>
          <div style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 15, fontWeight: 700 }}>Filters</div>
              <span style={{ fontSize: 12, color: C.blue600, fontWeight: 700 }}>Reset</span>
            </div>

            {/* Active filters */}
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 12 }}>
              {['Tablets', 'In stock'].map(c => (
                <div key={c} style={{ padding: '4px 8px 4px 10px', borderRadius: 8, background: C.blue50, color: C.blue600, fontSize: 11, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4 }}>
                  {c} <IconClose size={12}/>
                </div>
              ))}
            </div>

            {/* Category */}
            <div style={{ marginTop: 18, fontSize: 12, fontWeight: 700, color: C.ink900, letterSpacing: 0.2 }}>CATEGORY</div>
            <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[
                { l: 'Tablets', c: 142, on: true },
                { l: 'Syrups', c: 38, on: false },
                { l: 'Injections', c: 22, on: false },
                { l: 'Drops', c: 14, on: false },
              ].map((b, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '4px 0' }}>
                  <div style={{ width: 18, height: 18, borderRadius: 4, background: b.on ? C.blue600 : 'white', border: b.on ? 'none' : `1.5px solid ${C.ink200}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white' }}>
                    {b.on && <IconCheck size={12}/>}
                  </div>
                  <span style={{ flex: 1, fontSize: 13, color: C.ink900 }}>{b.l}</span>
                  <span className="mono" style={{ fontSize: 11, color: C.ink400 }}>{b.c}</span>
                </div>
              ))}
            </div>

            {/* Brand */}
            <div style={{ marginTop: 18, fontSize: 12, fontWeight: 700, color: C.ink900, letterSpacing: 0.2 }}>BRAND</div>
            <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 6 }}>
              {['Cipla', 'Sun Pharma', 'Dr. Reddy\u2019s', 'GSK', 'Pfizer'].map((b, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '4px 0' }}>
                  <div style={{ width: 18, height: 18, borderRadius: 4, background: i < 2 ? C.blue600 : 'white', border: i < 2 ? 'none' : `1.5px solid ${C.ink200}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white' }}>
                    {i < 2 && <IconCheck size={12}/>}
                  </div>
                  <span style={{ flex: 1, fontSize: 13, color: C.ink900 }}>{b}</span>
                </div>
              ))}
            </div>

            {/* Price */}
            <div style={{ marginTop: 18, display: 'flex', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: C.ink900, letterSpacing: 0.2 }}>PRICE</div>
              <div className="mono" style={{ fontSize: 11, color: C.ink700, fontWeight: 600 }}>₹40–₹650</div>
            </div>
            <div style={{ marginTop: 12, height: 4, background: C.ink100, borderRadius: 2, position: 'relative' }}>
              <div style={{ position: 'absolute', left: '8%', right: '32%', top: 0, bottom: 0, background: C.blue600, borderRadius: 2 }}/>
              <div style={{ position: 'absolute', left: '8%', top: '50%', width: 14, height: 14, borderRadius: 7, background: 'white', border: `2.5px solid ${C.blue600}`, transform: 'translate(-50%, -50%)' }}/>
              <div style={{ position: 'absolute', left: '68%', top: '50%', width: 14, height: 14, borderRadius: 7, background: 'white', border: `2.5px solid ${C.blue600}`, transform: 'translate(-50%, -50%)' }}/>
            </div>

            {/* Generics toggle */}
            <div style={{ marginTop: 22, display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 36, height: 22, borderRadius: 11, background: C.blue600, position: 'relative', flexShrink: 0 }}>
                <div style={{ position: 'absolute', top: 2, left: 16, width: 18, height: 18, borderRadius: 9, background: 'white' }}/>
              </div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 700 }}>Show generics</div>
                <div style={{ fontSize: 11, color: C.ink500 }}>Cheaper substitutes</div>
              </div>
            </div>
          </div>
        </div>

        {/* Product grid */}
        <div>
          {/* Quick filter chips above grid */}
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 14 }}>
            {[
              { l: 'All', on: false },
              { l: '500mg', on: true },
              { l: '650mg', on: false },
              { l: 'Suspension', on: false },
              { l: 'Free delivery', on: false },
              { l: 'Available today', on: true },
            ].map(c => (
              <div key={c.l} style={{
                padding: '7px 14px', borderRadius: 10, fontSize: 12, fontWeight: 600,
                background: c.on ? C.navy800 : 'white', color: c.on ? 'white' : C.ink700,
                border: c.on ? 'none' : `1px solid ${C.ink200}`,
              }}>{c.l}</div>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {products.map((p, i) => (
              <div key={i} style={{ background: 'white', borderRadius: 16, padding: 12, border: `1px solid ${C.ink100}` }}>
                <div style={{ position: 'relative' }}>
                  <ProductPlaceholder hue={p.hue} h={120} label={p.name} />
                  {p.rx && (
                    <div style={{ position: 'absolute', top: 8, left: 8, padding: '3px 7px', borderRadius: 8, background: 'white', color: C.blue600, fontSize: 10, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 3 }}>
                      <IconRx size={11}/> Rx
                    </div>
                  )}
                  <div style={{ position: 'absolute', top: 8, right: 8, width: 26, height: 26, borderRadius: 13, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.ink300 }}>
                    <IconHeart size={14}/>
                  </div>
                </div>
                <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900, marginTop: 10 }}>{p.name}</div>
                <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{p.sub}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 6 }}>
                  <IconStar size={11} style={{ color: C.amber500 }}/>
                  <span style={{ fontSize: 11, fontWeight: 600 }}>{p.rating}</span>
                  <span style={{ fontSize: 11, color: p.stock === 'Low stock' ? C.amber500 : C.mint500, fontWeight: 600, marginLeft: 6 }}>● {p.stock}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
                  <div>
                    <span className="mono" style={{ fontSize: 15, fontWeight: 700 }}>₹{p.price}</span>
                    <span className="mono" style={{ fontSize: 10, color: C.ink400, textDecoration: 'line-through', marginLeft: 4 }}>₹{p.mrp}</span>
                  </div>
                  <button style={{ background: C.blue50, color: C.blue600, border: 'none', borderRadius: 9, padding: '6px 12px', fontWeight: 700, fontSize: 11 }}>Add +</button>
                </div>
              </div>
            ))}
          </div>

          {/* Pagination */}
          <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 22 }}>
            {['‹', '1', '2', '3', '…', '32', '›'].map((p, i) => (
              <div key={i} style={{
                minWidth: 32, height: 32, borderRadius: 8, padding: '0 10px',
                background: p === '1' ? C.blue600 : 'white',
                color: p === '1' ? 'white' : C.ink700,
                border: p === '1' ? 'none' : `1px solid ${C.ink200}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 600,
              }}>{p}</div>
            ))}
          </div>
        </div>
      </div>
      <WebFooter minimal />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// W3) PDP — PRODUCT DETAIL
// ═════════════════════════════════════════════════════════════
function WebPDP() {
  return (
    <div className="screen" style={{ ...Wstyles, height: '100%', overflow: 'auto', background: 'white' }}>
      <WebTopNav active="medicine" />

      {/* Breadcrumb */}
      <div style={{ padding: '16px 40px 0', fontSize: 12, color: C.ink500 }}>
        Home <span style={{ margin: '0 6px' }}>›</span> Medicines <span style={{ margin: '0 6px' }}>›</span> Diabetes <span style={{ margin: '0 6px' }}>›</span> <span style={{ color: C.ink900, fontWeight: 600 }}>Metformin SR 500mg</span>
      </div>

      {/* Main grid */}
      <div style={{ padding: '20px 40px 28px', display: 'grid', gridTemplateColumns: '1fr 1.2fr 380px', gap: 28 }}>
        {/* Image gallery */}
        <div>
          <div style={{
            aspectRatio: '1', borderRadius: 18, padding: 24,
            background: `linear-gradient(180deg, ${C.blue50} 0%, ${C.blue100} 100%)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
            border: `1px solid ${C.ink100}`,
          }}>
            <div style={{
              width: '70%', aspectRatio: '1', borderRadius: 32,
              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: 100, height: 100, borderRadius: 50, background: 'white', color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <IconPill size={50}/>
              </div>
            </div>
            <div style={{ position: 'absolute', top: 16, left: 16, padding: '4px 10px', borderRadius: 999, background: 'white', fontSize: 11, fontWeight: 700, color: C.rose500 }}>18% OFF</div>
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            {[0,1,2,3].map(i => (
              <div key={i} style={{
                flex: 1, aspectRatio: '1', borderRadius: 12,
                background: `repeating-linear-gradient(135deg, ${C.blue50} 0 8px, ${C.blue100} 8px 16px)`,
                border: i === 0 ? `2px solid ${C.blue600}` : `1px solid ${C.ink100}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', color: C.blue600,
              }}><IconPill size={22}/></div>
            ))}
          </div>
        </div>

        {/* Info column */}
        <div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            <span className="pill" style={{ background: C.blue50, color: C.blue600 }}><IconRx size={12}/> Prescription required</span>
            <span className="pill" style={{ background: C.mint100, color: '#0F5A48' }}>● In stock at your pincode</span>
            <span className="pill" style={{ background: C.amber100, color: '#7A4500' }}>★ Best-seller</span>
          </div>
          <div style={{ fontSize: 32, fontWeight: 700, color: C.ink900, marginTop: 14, letterSpacing: -0.025, lineHeight: 1.1 }}>Metformin SR 500mg Tablet</div>
          <div style={{ fontSize: 14, color: C.ink500, marginTop: 6 }}>Glycomet-SR · USV Ltd · Strip of 30 tablets · SKU 248-12</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              <IconStar size={14} style={{ color: C.amber500 }}/>
              <span style={{ fontSize: 14, fontWeight: 700 }}>4.7</span>
              <span style={{ fontSize: 12, color: C.ink500 }}>(2,341 reviews)</span>
            </div>
            <div style={{ width: 1, height: 14, background: C.ink200 }}/>
            <span style={{ fontSize: 13, color: C.blue600, fontWeight: 600 }}>View 4 alternates</span>
          </div>

          {/* Composition table */}
          <div style={{ marginTop: 22, fontSize: 15, fontWeight: 700, color: C.ink900 }}>Composition & form</div>
          <div style={{ marginTop: 10, padding: 14, background: C.ink50, borderRadius: 14 }}>
            {[
              ['ACTIVE INGREDIENT', 'Metformin Hydrochloride 500mg (Sustained Release)'],
              ['FORM', 'Tablet'],
              ['PACK', '30 tablets per strip'],
              ['STORAGE', 'Below 30°C · Keep dry'],
            ].map(([k, v], i, a) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', gap: 16, padding: '7px 0', borderBottom: i < a.length - 1 ? `1px solid ${C.ink100}` : 'none' }}>
                <span className="mono" style={{ fontSize: 11, color: C.ink500, fontWeight: 600, letterSpacing: 0.4 }}>{k}</span>
                <span style={{ fontSize: 12, color: C.ink900, fontWeight: 600, textAlign: 'right' }}>{v}</span>
              </div>
            ))}
          </div>

          {/* Tabs */}
          <div style={{ marginTop: 22, display: 'flex', gap: 22, borderBottom: `1px solid ${C.ink100}` }}>
            {['Uses', 'Dosage', 'Side effects', 'Precautions', '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: 14, fontSize: 13, color: C.ink700, lineHeight: 1.6 }}>
            Used to control high blood sugar in adults with type 2 diabetes. Works by reducing glucose production in the liver and improving the body's response to insulin. Often prescribed alongside dietary changes and exercise.
          </div>
          <div style={{ marginTop: 12, padding: 12, borderRadius: 12, background: C.amber100, color: '#7A4500', fontSize: 12, display: 'flex', alignItems: 'flex-start', gap: 10 }}>
            <IconShield size={18}/>
            <div style={{ lineHeight: 1.5 }}><span style={{ fontWeight: 700 }}>Important:</span> Take with or after meals. Inform your doctor of kidney issues, contrast dye procedures, or excessive alcohol use before starting.</div>
          </div>
        </div>

        {/* Buy box */}
        <div>
          <div style={{ background: 'white', border: `1px solid ${C.ink100}`, borderRadius: 18, padding: 20, position: 'sticky', top: 20, boxShadow: '0 8px 20px rgba(11,31,77,0.06)' }}>
            {/* Price */}
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
              <span className="mono" style={{ fontSize: 34, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>₹78</span>
              <span className="mono" style={{ fontSize: 14, color: C.ink400, textDecoration: 'line-through' }}>₹95</span>
              <span className="pill" style={{ background: C.rose500, color: 'white' }}>18% OFF</span>
            </div>
            <div style={{ fontSize: 11, color: C.mint500, fontWeight: 700, marginTop: 4 }}>You save ₹17 · Inclusive of taxes</div>

            {/* Delivery */}
            <div style={{ marginTop: 18, padding: 12, borderRadius: 12, background: C.blue25, display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 38, height: 38, borderRadius: 10, background: 'white', color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <IconTruck size={20}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700 }}>Delivery by today, 6:40 PM</div>
                <div style={{ fontSize: 11, color: C.ink500 }}>To 560038 · Free over ₹199</div>
              </div>
              <span style={{ fontSize: 11, fontWeight: 700, color: C.blue600 }}>Change</span>
            </div>

            {/* Quantity */}
            <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ fontSize: 13, color: C.ink700, fontWeight: 600 }}>Quantity</span>
              <div style={{ display: 'flex', alignItems: 'center', background: C.ink50, borderRadius: 10 }}>
                <div style={{ width: 32, height: 32, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconMinus size={16}/></div>
                <div className="mono" style={{ width: 28, textAlign: 'center', fontWeight: 700 }}>2</div>
                <div style={{ width: 32, height: 32, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconPlus size={16}/></div>
              </div>
              <span style={{ fontSize: 11, color: C.ink500 }}>strips</span>
            </div>

            {/* Buttons */}
            <button style={{ marginTop: 16, width: '100%', 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)' }}>
              Add to cart · ₹156
            </button>
            <button style={{ marginTop: 8, width: '100%', background: C.blue50, color: C.blue600, border: 'none', borderRadius: 12, padding: '12px 0', fontWeight: 700, fontSize: 14, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
              <IconRx size={16}/> Upload prescription
            </button>

            {/* Subscribe save */}
            <div style={{ marginTop: 14, padding: 12, borderRadius: 12, border: `1px dashed ${C.mint500}`, background: '#F6FBF9' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ width: 16, height: 16, borderRadius: 4, border: `1.5px solid ${C.mint500}` }}/>
                <span style={{ fontSize: 12, fontWeight: 700, color: '#0F5A48' }}>Subscribe & save 10% extra</span>
              </div>
              <div style={{ fontSize: 11, color: '#0F5A48', opacity: 0.75, marginTop: 4, paddingLeft: 24 }}>Auto-refill every 30 days · Cancel anytime</div>
            </div>

            {/* Trust row */}
            <div style={{ marginTop: 14, display: 'flex', gap: 12, fontSize: 11, color: C.ink500 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><IconShield size={14} style={{ color: C.blue600 }}/> Genuine</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><IconCheck size={14} style={{ color: C.mint500 }}/> Pharmacist verified</span>
            </div>
          </div>
        </div>
      </div>

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

Object.assign(window, { WebHome, WebPLP, WebPDP });