// Janaushadhi web (desktop) — shared chrome + page-level components
// Browser frame 1280×900. Inner content ~1280×816.

const Wfont = { fontFamily: 'Inter, -apple-system, system-ui, sans-serif' };

// ── Top nav ──────────────────────────────────────────────────
function WebTopNav({ active = 'home', dark = false }) {
  const items = [
    { id: 'home',     label: 'Home' },
    { id: 'medicine', label: 'Medicines' },
    { id: 'wellness', label: 'Wellness' },
    { id: 'labs',     label: 'Lab tests' },
    { id: 'doctor',   label: 'Consult doctor' },
    { id: 'offers',   label: 'Offers' },
  ];
  const fg = dark ? '#fff' : C.ink900;
  const muted = dark ? 'rgba(255,255,255,0.75)' : C.ink500;
  const bg = dark ? 'transparent' : 'white';
  return (
    <div style={{
      ...Wfont, background: bg, padding: '14px 40px', display: 'flex', alignItems: 'center', gap: 24,
      borderBottom: dark ? '1px solid rgba(255,255,255,0.10)' : `1px solid ${C.ink100}`,
    }}>
      {/* Logo */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 10,
          background: dark ? 'rgba(255,255,255,0.15)' : `linear-gradient(160deg, ${C.blue500}, ${C.navy800})`,
          color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700,
        }}>J</div>
        <div>
          <div style={{ fontSize: 16, fontWeight: 700, color: fg, letterSpacing: -0.01 }}>Janaushadhi</div>
          <div style={{ fontSize: 9, color: muted, letterSpacing: 0.6, fontWeight: 600 }}>YOUR DIGITAL PHARMACY</div>
        </div>
      </div>

      {/* Nav links */}
      <nav style={{ display: 'flex', alignItems: 'center', gap: 4, marginLeft: 8 }}>
        {items.map(it => {
          const on = it.id === active;
          return (
            <div key={it.id} style={{
              padding: '8px 14px', borderRadius: 10,
              fontSize: 14, fontWeight: 600,
              color: on ? (dark ? 'white' : C.blue600) : (dark ? muted : C.ink700),
              background: on ? (dark ? 'rgba(255,255,255,0.12)' : C.blue50) : 'transparent',
            }}>{it.label}</div>
          );
        })}
      </nav>

      {/* Search */}
      <div style={{
        flex: 1, maxWidth: 420, marginLeft: 'auto',
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '10px 14px', borderRadius: 12,
        background: dark ? 'rgba(255,255,255,0.12)' : C.ink50,
        border: dark ? '1px solid rgba(255,255,255,0.15)' : `1px solid ${C.ink100}`,
      }}>
        <IconSearch size={18} style={{ color: dark ? 'rgba(255,255,255,0.7)' : C.ink400 }} />
        <span style={{ flex: 1, fontSize: 13, color: dark ? 'rgba(255,255,255,0.7)' : C.ink400 }}>
          Search medicines, brands, lab tests
        </span>
        <span className="mono" style={{
          padding: '3px 7px', fontSize: 10, borderRadius: 6,
          background: dark ? 'rgba(255,255,255,0.15)' : 'white', color: dark ? 'white' : C.ink500,
          border: dark ? 'none' : `1px solid ${C.ink200}`, fontWeight: 600,
        }}>⌘K</span>
      </div>

      {/* Right cluster */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <div style={{
          padding: '8px 12px', borderRadius: 10, fontSize: 13, fontWeight: 600,
          color: dark ? 'white' : C.ink700,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <IconLoc size={16} /> 560038
        </div>
        <div style={{
          width: 38, height: 38, borderRadius: 10,
          background: dark ? 'rgba(255,255,255,0.10)' : 'transparent',
          color: dark ? 'white' : C.ink700,
          display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
        }}>
          <IconBell size={18} />
          <div style={{ position: 'absolute', top: 8, right: 9, width: 8, height: 8, borderRadius: 4, background: C.rose500, border: `2px solid ${dark ? C.navy800 : 'white'}` }}/>
        </div>
        <div style={{
          padding: '8px 12px', borderRadius: 10, fontSize: 13, fontWeight: 600,
          color: dark ? 'white' : C.ink700,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <IconUser size={18} /> Aarav
        </div>
        <div style={{
          padding: '8px 14px', borderRadius: 10, fontSize: 13, fontWeight: 700,
          background: C.blue600, color: 'white',
          display: 'flex', alignItems: 'center', gap: 8,
          boxShadow: '0 4px 10px rgba(27,91,255,0.25)',
        }}>
          <IconCart size={18} />
          Cart
          <span className="mono" style={{
            background: 'rgba(255,255,255,0.22)', padding: '1px 7px', borderRadius: 6, fontSize: 11,
          }}>3</span>
        </div>
      </div>
    </div>
  );
}

// ── Footer ───────────────────────────────────────────────────
function WebFooter({ minimal = false }) {
  if (minimal) {
    return (
      <div style={{ ...Wfont, padding: '14px 40px', borderTop: `1px solid ${C.ink100}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 12, color: C.ink500, background: 'white' }}>
        <div>© 2026 Janaushadhi · Licensed pharmacy DL-560038</div>
        <div style={{ display: 'flex', gap: 18 }}>
          <span>About</span><span>Help</span><span>Privacy</span><span>Terms</span>
        </div>
      </div>
    );
  }
  const cols = [
    { h: 'Shop', items: ['Medicines', 'Wellness', 'Devices', 'Babycare', 'Ayurveda'] },
    { h: 'Health', items: ['Consult doctor', 'Lab tests', 'Health records', 'Refill reminders'] },
    { h: 'Company', items: ['About us', 'Pharmacists', 'Careers', 'Press', 'Contact'] },
    { h: 'Help', items: ['FAQ', 'Returns', 'Privacy', 'Terms of service'] },
  ];
  return (
    <div style={{ ...Wfont, background: C.navy900, color: 'white', padding: '36px 40px 20px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 32, height: 32, borderRadius: 9, background: 'rgba(255,255,255,0.15)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700 }}>J</div>
            <div style={{ fontSize: 15, fontWeight: 700 }}>Janaushadhi</div>
          </div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', marginTop: 12, lineHeight: 1.55, maxWidth: 240 }}>
            Genuine medicines, delivered in minutes. Verified by licensed pharmacists.
          </div>
          <div style={{ marginTop: 16, display: 'flex', gap: 8 }}>
            {['App Store', 'Google Play'].map(s => (
              <div key={s} style={{
                padding: '8px 12px', borderRadius: 10, background: 'rgba(255,255,255,0.1)',
                fontSize: 11, color: 'white', fontWeight: 600, border: '1px solid rgba(255,255,255,0.15)',
              }}>↓ {s}</div>
            ))}
          </div>
        </div>
        {cols.map((c, i) => (
          <div key={i}>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)', fontWeight: 700, letterSpacing: 0.8 }}>{c.h.toUpperCase()}</div>
            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {c.items.map(x => <div key={x} style={{ fontSize: 13, color: 'rgba(255,255,255,0.85)' }}>{x}</div>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 28, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.10)', display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'rgba(255,255,255,0.6)' }}>
        <div>© 2026 Janaushadhi Pharma Pvt. Ltd. · DL-560038 · GSTIN 29AAACJ1234M1Z9</div>
        <div>Made with care in Bengaluru</div>
      </div>
    </div>
  );
}

Object.assign(window, { WebTopNav, WebFooter });