// Web screens — batch 5: Categories, Order history, Order detail, Notifications

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

// ═════════════════════════════════════════════════════════════
// W13) CATEGORIES (full directory)
// ═════════════════════════════════════════════════════════════
function WebCategories() {
  const groups = [
    { h: 'Medicines', cats: [
      { l: 'Pain relief', c: 142, hue: 'blue', Icon: IconPill },
      { l: 'Diabetes care', c: 86, hue: 'mint', Icon: IconHeart },
      { l: 'Heart & BP', c: 64, hue: 'rose', Icon: IconRx },
      { l: 'Cold & flu', c: 58, hue: 'amber', Icon: IconShield },
      { l: 'Digestive', c: 47, hue: 'mint', Icon: IconPill },
      { l: 'Allergy', c: 39, hue: 'blue', Icon: IconShield },
    ]},
    { h: 'Wellness & nutrition', cats: [
      { l: 'Vitamins', c: 124, hue: 'amber', Icon: IconStar },
      { l: 'Skin care', c: 92, hue: 'rose', Icon: IconHeart },
      { l: 'Hair care', c: 68, hue: 'navy', Icon: IconUser },
      { l: 'Ayurveda', c: 102, hue: 'mint', Icon: IconStar },
      { l: 'Protein & fitness', c: 56, hue: 'blue', Icon: IconHeart },
      { l: 'Sexual wellness', c: 54, hue: 'navy', Icon: IconShield },
    ]},
    { h: 'Care & devices', cats: [
      { l: 'Baby & mom', c: 81, hue: 'rose', Icon: IconUser },
      { l: 'Elderly care', c: 44, hue: 'blue', Icon: IconShield },
      { l: 'Devices', c: 38, hue: 'navy', Icon: IconScan },
      { l: 'First aid', c: 29, hue: 'amber', Icon: IconShield },
    ]},
  ];
  const palettes = {
    blue: { bg: C.blue100, fg: C.blue600 }, mint: { bg: C.mint100, fg: C.mint500 },
    amber: { bg: C.amber100, fg: C.amber500 }, rose: { bg: C.rose100, fg: C.rose500 }, navy: { bg: '#E2E8FA', fg: C.navy800 },
  };
  return (
    <div className="screen" style={{ ...Wstyles5, height: '100%', overflow: 'auto', background: C.ink50 }}>
      <WebTopNav active="medicine" />
      <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 }}>All categories</span>
      </div>
      <div style={{ padding: '12px 40px 0', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.02 }}>Shop by category</div>
        <div style={{ fontSize: 13, color: C.ink500 }}>Over <span style={{ color: C.ink900, fontWeight: 700 }}>24,000</span> products across 24 categories</div>
      </div>

      {/* Featured banner */}
      <div style={{ padding: '20px 40px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {[
            { t: 'Ayurveda store', s: '2,400+ curated herbal products', tag: 'NEW', g: `linear-gradient(135deg, ${C.mint100}, #B3EAD7)`, fg: '#0F5A48', Icon: IconStar },
            { t: 'Diabetes care hub', s: 'Monitors, strips, medicines & diets', tag: 'POPULAR', g: `linear-gradient(135deg, ${C.blue100}, #C5D7FF)`, fg: C.navy800, Icon: IconRx },
          ].map((b, i) => (
            <div key={i} style={{ borderRadius: 18, padding: 20, background: b.g, display: 'flex', alignItems: 'center', gap: 16 }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: b.fg, letterSpacing: 0.5 }}>{b.tag}</div>
                <div style={{ fontSize: 20, fontWeight: 700, color: b.fg, marginTop: 2 }}>{b.t}</div>
                <div style={{ fontSize: 12, color: b.fg, opacity: 0.78, marginTop: 2 }}>{b.s}</div>
                <button style={{ marginTop: 12, background: 'white', color: b.fg, border: 'none', borderRadius: 10, padding: '8px 16px', fontSize: 12, fontWeight: 700 }}>Explore →</button>
              </div>
              <div style={{ width: 72, height: 72, borderRadius: 20, background: 'white', color: b.fg, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 8px 16px rgba(11,31,77,0.12)' }}><b.Icon size={34}/></div>
            </div>
          ))}
        </div>
      </div>

      {/* Category groups */}
      <div style={{ padding: '8px 40px 28px' }}>
        {groups.map((g, gi) => (
          <div key={gi} style={{ marginTop: 28 }}>
            <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: -0.01, marginBottom: 14 }}>{g.h}</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14 }}>
              {g.cats.map(c => {
                const p = palettes[c.hue];
                return (
                  <div key={c.l} style={{ background: 'white', borderRadius: 16, padding: 16, textAlign: 'center', border: `1px solid ${C.ink100}`, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
                    <div style={{ width: 56, height: 56, borderRadius: 16, background: p.bg, color: p.fg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><c.Icon size={26}/></div>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 700, lineHeight: 1.2 }}>{c.l}</div>
                      <div className="mono" style={{ fontSize: 10, color: C.ink500, marginTop: 3 }}>{c.c} items</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
      <WebFooter />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// W14) ORDER HISTORY + DETAIL (split master-detail)
// ═════════════════════════════════════════════════════════════
function WebOrderHistory() {
  const orders = [
    { id: '#JN-2841-09', date: 'Today, 5:42 PM', status: 'Packing', tone: 'blue', items: 3, total: 248, active: true },
    { id: '#JN-2812-06', date: 'May 24', status: 'Delivered', tone: 'mint', items: 2, total: 352 },
    { id: '#JN-2784-13', date: 'May 18', status: 'Delivered', tone: 'mint', items: 5, total: 1284 },
    { id: '#JN-2750-02', date: 'May 12', status: 'Refunded', tone: 'rose', items: 1, total: 95 },
    { id: '#JN-2701-08', date: 'May 04', status: 'Delivered', tone: 'mint', items: 4, total: 562 },
  ];
  const tones = { blue: { bg: C.blue50, fg: C.blue600 }, mint: { bg: C.mint100, fg: '#0F5A48' }, rose: { bg: C.rose100, fg: '#7A1C1F' } };
  return (
    <div className="screen" style={{ ...Wstyles5, 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> <span style={{ color: C.ink900, fontWeight: 600 }}>My orders</span>
      </div>
      <div style={{ padding: '12px 40px 0', fontSize: 28, fontWeight: 700, letterSpacing: -0.02 }}>My orders</div>

      <div style={{ padding: '20px 40px 28px', display: 'grid', gridTemplateColumns: '380px 1fr', gap: 24 }}>
        {/* List */}
        <div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
            {['All', 'Active', 'Delivered', 'Refunded'].map((f, i) => (
              <div key={f} style={{ padding: '7px 14px', borderRadius: 10, background: i === 0 ? C.navy800 : 'white', color: i === 0 ? 'white' : C.ink700, fontSize: 12, fontWeight: 600, border: i === 0 ? 'none' : `1px solid ${C.ink200}` }}>{f}</div>
            ))}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {orders.map((o, i) => {
              const t = tones[o.tone];
              return (
                <div key={i} style={{ background: 'white', borderRadius: 14, padding: 14, border: o.active ? `2px solid ${C.blue600}` : `1px solid ${C.ink100}`, cursor: 'pointer' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <div className="mono" style={{ fontSize: 13, fontWeight: 700 }}>{o.id}</div>
                    <div className="pill" style={{ background: t.bg, color: t.fg, fontSize: 10 }}>● {o.status}</div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
                    <div style={{ fontSize: 11, color: C.ink500 }}>{o.date} · {o.items} items</div>
                    <span className="mono" style={{ fontSize: 14, fontWeight: 700 }}>₹{o.total}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Detail */}
        <div style={{ background: 'white', borderRadius: 18, border: `1px solid ${C.ink100}`, overflow: 'hidden' }}>
          {/* Header */}
          <div style={{ padding: 22, borderBottom: `1px solid ${C.ink100}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div className="mono" style={{ fontSize: 18, fontWeight: 700 }}>#JN-2841-09</div>
              <div style={{ fontSize: 12, color: C.ink500, marginTop: 2 }}>Placed today at 5:42 PM · 3 items</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={{ background: 'white', color: C.ink700, border: `1px solid ${C.ink200}`, borderRadius: 10, padding: '9px 14px', fontSize: 12, fontWeight: 700 }}>Invoice</button>
              <button style={{ background: C.blue600, color: 'white', border: 'none', borderRadius: 10, padding: '9px 16px', fontSize: 12, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 6 }}><IconTruck size={14}/> Track live</button>
            </div>
          </div>

          {/* Status timeline horizontal */}
          <div style={{ padding: '20px 22px', background: C.blue25 }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              {[
                { l: 'Confirmed', done: true },
                { l: 'Verified', done: true },
                { l: 'Packed', done: true, active: true },
                { l: 'Shipped', done: false },
                { l: 'Delivered', done: false },
              ].map((s, i, a) => (
                <React.Fragment key={i}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                    <div style={{ width: 20, height: 20, borderRadius: 10, 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={11}/>}</div>
                    <span style={{ fontSize: 10, fontWeight: s.active ? 700 : 500, color: s.done ? C.ink900 : C.ink400 }}>{s.l}</span>
                  </div>
                  {i < a.length - 1 && <div style={{ flex: 1, height: 2, background: s.done ? C.blue600 : C.ink200, marginBottom: 18 }}/>}
                </React.Fragment>
              ))}
            </div>
          </div>

          {/* Items */}
          <div style={{ padding: 22 }}>
            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 12 }}>Items in this order</div>
            {[
              { name: 'Metformin SR 500mg', sub: 'Strip of 30 · ×2', price: 156, hue: 'blue' },
              { name: 'Vitamin D3 60K IU', sub: '4 capsules · ×1', price: 149, hue: 'amber' },
              { name: 'Cetirizine 10mg', sub: 'Strip of 10 · ×1', price: 24, hue: 'mint' },
            ].map((p, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '10px 0', borderBottom: i < 2 ? `1px solid ${C.ink100}` : 'none' }}>
                <ProductPlaceholder hue={p.hue} w={52} h={52} radius={10} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 700 }}>{p.name}</div>
                  <div style={{ fontSize: 11, color: C.ink500 }}>{p.sub}</div>
                  <div style={{ fontSize: 11, color: C.blue600, fontWeight: 600, marginTop: 2 }}>Buy again →</div>
                </div>
                <span className="mono" style={{ fontSize: 14, fontWeight: 700 }}>₹{p.price}</span>
              </div>
            ))}

            {/* Bill + address grid */}
            <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <div style={{ background: C.ink50, borderRadius: 12, padding: 14 }}>
                <div style={{ fontSize: 12, fontWeight: 700, marginBottom: 8 }}>Delivery address</div>
                <div style={{ fontSize: 12, color: C.ink600, lineHeight: 1.5, color: C.ink700 }}>
                  <span style={{ fontWeight: 700 }}>Home</span><br/>Apt 4B, Maple Residency, 100ft Road, Indiranagar, Bengaluru 560038
                </div>
              </div>
              <div style={{ background: C.ink50, borderRadius: 12, padding: 14 }}>
                <div style={{ fontSize: 12, fontWeight: 700, marginBottom: 8 }}>Bill summary</div>
                {[['Items', '₹329'], ['Discount', '−₹81', C.mint500], ['Delivery', 'FREE', C.mint500]].map(([k, v, col], i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', fontSize: 12 }}>
                    <span style={{ color: C.ink500 }}>{k}</span>
                    <span className="mono" style={{ color: col || C.ink700, fontWeight: 600 }}>{v}</span>
                  </div>
                ))}
                <div style={{ height: 1, background: C.ink200, margin: '6px 0' }}/>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{ fontSize: 13, fontWeight: 700 }}>Total paid</span>
                  <span className="mono" style={{ fontSize: 15, fontWeight: 700 }}>₹248</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <WebFooter minimal />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// W15) NOTIFICATIONS / ACTIVITY
// ═════════════════════════════════════════════════════════════
function WebNotifications() {
  const notifs = [
    { group: 'Today', items: [
      { title: 'Your order is being packed', sub: '#JN-2841-09 · 3 items · estimated delivery 6:40 PM', time: '5:55 PM', unread: true, Icon: IconBox, hue: 'blue' },
      { title: 'Prescription verified by Dr. P. Mehta', sub: '"Looks good. Refill safe to dispense."', time: '5:48 PM', unread: true, Icon: IconRx, hue: 'mint' },
      { title: 'Reminder: Time for Pan-D', sub: '1 capsule, 30 min before dinner', time: '6:30 PM', unread: false, Icon: IconClock, hue: 'amber' },
    ]},
    { group: 'Yesterday', items: [
      { title: '20% off on all vitamins this week', sub: 'Use code VIT20 at checkout · ends Sunday midnight', time: '11:24 AM', unread: false, Icon: IconStar, hue: 'amber' },
      { title: 'Time to refill Metformin SR 500mg', sub: 'Based on your last order, you have ~3 days of stock left', time: '9:00 AM', unread: false, Icon: IconRx, hue: 'blue' },
    ]},
    { group: 'This week', items: [
      { title: 'Dr. Priya replied to your follow-up', sub: '"Continue current dosage and review in 2 weeks."', time: 'Mon, 3:12 PM', unread: false, Icon: IconUser, hue: 'rose' },
      { title: 'Your lab report is ready', sub: 'HbA1c · CBC · download from Lab reports', time: 'Sun, 8:40 AM', unread: false, Icon: IconScan, hue: 'mint' },
    ]},
  ];
  const palettes = { blue: { bg: C.blue50, fg: C.blue600 }, mint: { bg: C.mint100, fg: C.mint500 }, amber: { bg: C.amber100, fg: C.amber500 }, rose: { bg: C.rose100, fg: C.rose500 } };
  return (
    <div className="screen" style={{ ...Wstyles5, height: '100%', overflow: 'auto', background: C.ink50 }}>
      <WebTopNav active="" />
      <div style={{ padding: '24px 40px 28px', maxWidth: 820, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.02 }}>Notifications</div>
            <div style={{ fontSize: 13, color: C.ink500, marginTop: 4 }}>2 unread · order updates, reminders & offers</div>
          </div>
          <span style={{ fontSize: 13, color: C.blue600, fontWeight: 600 }}>Mark all as read</span>
        </div>

        {/* Filter row */}
        <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
          {['All', 'Orders', 'Reminders', 'Offers', 'Health'].map((f, i) => (
            <div key={f} style={{ padding: '7px 14px', borderRadius: 10, background: i === 0 ? C.navy800 : 'white', color: i === 0 ? 'white' : C.ink700, fontSize: 12, fontWeight: 600, border: i === 0 ? 'none' : `1px solid ${C.ink200}` }}>{f}</div>
          ))}
        </div>

        {/* Groups */}
        <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 22 }}>
          {notifs.map((g, gi) => (
            <div key={gi}>
              <div style={{ fontSize: 11, fontWeight: 700, color: C.ink500, letterSpacing: 0.5, marginBottom: 10 }}>{g.group.toUpperCase()}</div>
              <div style={{ background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, overflow: 'hidden' }}>
                {g.items.map((n, ni, a) => {
                  const p = palettes[n.hue];
                  return (
                    <div key={ni} style={{ display: 'flex', alignItems: 'flex-start', gap: 14, padding: 16, borderBottom: ni < a.length - 1 ? `1px solid ${C.ink100}` : 'none', background: n.unread ? C.blue25 : 'white', position: 'relative' }}>
                      <div style={{ width: 44, height: 44, borderRadius: 12, background: p.bg, color: p.fg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><n.Icon size={22}/></div>
                      <div style={{ flex: 1 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <span style={{ fontSize: 14, fontWeight: n.unread ? 700 : 600 }}>{n.title}</span>
                          {n.unread && <span style={{ width: 8, height: 8, borderRadius: 4, background: C.blue600 }}/>}
                        </div>
                        <div style={{ fontSize: 12, color: C.ink500, marginTop: 3, lineHeight: 1.45 }}>{n.sub}</div>
                      </div>
                      <div className="mono" style={{ fontSize: 11, color: C.ink400, flexShrink: 0 }}>{n.time}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </div>
      <WebFooter minimal />
    </div>
  );
}

Object.assign(window, { WebCategories, WebOrderHistory, WebNotifications });