// Bazaar — Meesho-style e-commerce partner app
// Two states: sign-in screen, signed-in home (after Vi login completes)

const BAZAAR_ACCENT = '#e91e63'; // hot pink — Meesho-style
const BAZAAR_INK = '#1a1a1e';

const BazaarLogo = ({ size = 22 }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
    <div style={{
      width: size * 1.15, height: size * 1.15, borderRadius: 8,
      background: `linear-gradient(135deg, #ff5a8a 0%, ${BAZAAR_ACCENT} 100%)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontFamily: "'DM Sans', system-ui", fontWeight: 700,
      fontSize: size * 0.62, letterSpacing: -0.5,
    }}>b</div>
    <span style={{
      fontFamily: "'DM Sans', system-ui", fontSize: size, fontWeight: 700,
      color: BAZAAR_INK, letterSpacing: -0.4,
    }}>bazaar</span>
  </div>
);

// ── Sign-in screen ─────────────────────────────────────────────
const BazaarSignIn = ({ onLoginWithVi, lang }) => {
  const t = lang === 'hi' ? {
    welcome: 'Bazaar में आपका स्वागत है',
    sub: 'ऑर्डर देखें, पसंदीदा सेव करें, तेज़ चेकआउट',
    viCta: 'Vi से जारी रखें',
    google: 'Google से जारी रखें',
    phone: 'अन्य नंबर से',
    legal: 'जारी रखकर आप Bazaar की शर्तें और गोपनीयता नीति स्वीकार करते हैं',
  } : {
    welcome: 'Welcome to Bazaar',
    sub: 'Track orders, save favourites, checkout faster',
    viCta: 'Continue with Vi',
    google: 'Continue with Google',
    phone: 'Use another number',
    legal: 'By continuing you agree to Bazaar’s Terms & Privacy Policy',
  };

  return (
    <div style={{
      height: '100%', background: '#fff', display: 'flex', flexDirection: 'column',
      fontFamily: "'DM Sans', system-ui", color: BAZAAR_INK,
    }}>
      {/* App bar */}
      <div style={{
        padding: '18px 22px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        flexShrink: 0,
      }}>
        <BazaarLogo size={20} />
        <button style={{
          background: 'transparent', border: 'none', color: '#5a5a64',
          fontFamily: 'inherit', fontSize: 13, cursor: 'pointer', padding: 0,
        }}>Skip</button>
      </div>

      {/* Hero illustration band — abstract shapes evoking shopping bags */}
      <div style={{
        margin: '8px 22px 0', height: 156, borderRadius: 18,
        background: `linear-gradient(135deg, #ffe5ec 0%, #fff5db 100%)`,
        position: 'relative', overflow: 'hidden', flexShrink: 0,
      }}>
        {/* floating product chips */}
        {[
          { l: 18, t: 22, w: 64, h: 76, r: 12, bg: '#fff', label: '₹399' },
          { l: 96, t: 14, w: 70, h: 92, r: 14, bg: '#fff', label: '₹199' },
          { l: 178, t: 30, w: 62, h: 74, r: 12, bg: '#fff', label: '₹699' },
          { l: 252, t: 18, w: 68, h: 88, r: 14, bg: '#fff', label: '₹299' },
        ].map((c, i) => (
          <div key={i} style={{
            position: 'absolute', left: c.l, top: c.t, width: c.w, height: c.h,
            borderRadius: c.r, background: c.bg,
            boxShadow: '0 6px 16px -8px rgba(20,20,30,0.18)',
            display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
            padding: 6,
          }}>
            <div style={{
              width: '100%', height: '56%',
              background: ['#ffd4dc', '#ffe7c2', '#d8f3dc', '#cfe6ff'][i],
              borderRadius: 8, marginBottom: 4,
            }} />
            <div style={{ fontSize: 9.5, fontWeight: 700, color: BAZAAR_INK }}>{c.label}</div>
          </div>
        ))}
      </div>

      {/* Welcome copy */}
      <div style={{ padding: '24px 22px 14px', flexShrink: 0 }}>
        <h1 style={{
          margin: 0, fontSize: 24, fontWeight: 700, letterSpacing: -0.6, lineHeight: 1.12,
        }}>{t.welcome}</h1>
        <p style={{
          margin: '8px 0 0', fontSize: 13.5, color: '#5a5a64', lineHeight: 1.5,
        }}>{t.sub}</p>
      </div>

      {/* CTAs */}
      <div style={{ padding: '6px 22px 0', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        {/* Primary: Continue with Vi */}
        <button onClick={onLoginWithVi} style={{
          background: '#0a0a0e', color: '#fff', border: 'none',
          borderRadius: 14, padding: '14px 18px',
          display: 'flex', alignItems: 'center', gap: 14,
          cursor: 'pointer', fontFamily: 'inherit',
        }}>
          <ViLogo height={22} mode="brand" />
          <div style={{ fontSize: 15, fontWeight: 600, textAlign: 'left' }}>{t.viCta}</div>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ marginLeft: 'auto' }}>
            <path d="M5 3 L10 8 L5 13" stroke="#fff" strokeWidth="1.8" fill="none"
              strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>

        {/* Google */}
        <button style={{
          background: '#fff', color: BAZAAR_INK, border: '1px solid #e2dfd6',
          borderRadius: 14, padding: '13px 18px',
          display: 'flex', alignItems: 'center', gap: 12,
          cursor: 'pointer', fontFamily: 'inherit', fontSize: 14, fontWeight: 600,
        }}>
          <svg width="18" height="18" viewBox="0 0 18 18">
            <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.91c1.7-1.57 2.69-3.88 2.69-6.62z"/>
            <path fill="#34A853" d="M9 18c2.43 0 4.47-.81 5.96-2.18l-2.91-2.26c-.81.54-1.84.86-3.05.86-2.34 0-4.33-1.58-5.04-3.71H.96v2.33A9 9 0 0 0 9 18z"/>
            <path fill="#FBBC05" d="M3.96 10.71A5.41 5.41 0 0 1 3.68 9c0-.6.1-1.18.28-1.71V4.96H.96A9 9 0 0 0 0 9c0 1.45.35 2.82.96 4.04l3-2.33z"/>
            <path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58A8.99 8.99 0 0 0 9 0 9 9 0 0 0 .96 4.96l3 2.33C4.67 5.16 6.66 3.58 9 3.58z"/>
          </svg>
          {t.google}
        </button>

        {/* Phone OTP */}
        <button style={{
          background: 'transparent', color: BAZAAR_INK, border: '1px solid #e2dfd6',
          borderRadius: 14, padding: '13px 18px',
          display: 'flex', alignItems: 'center', gap: 12,
          cursor: 'pointer', fontFamily: 'inherit', fontSize: 14, fontWeight: 600,
        }}>
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
            <rect x="4.5" y="1.5" width="9" height="15" rx="2" stroke={BAZAAR_INK} strokeWidth="1.4" />
            <circle cx="9" cy="13.5" r="0.8" fill={BAZAAR_INK} />
          </svg>
          {t.phone}
        </button>
      </div>

      {/* Legal */}
      <div style={{
        padding: '14px 22px 18px', fontSize: 10.5, color: '#8a8a92', lineHeight: 1.5,
        textAlign: 'center', flexShrink: 0,
      }}>
        {t.legal}
      </div>
    </div>
  );
};

// ── Signed-in home ─────────────────────────────────────────────
const BazaarHome = ({ phone, name, lang }) => {
  const t = lang === 'hi' ? {
    hi: 'नमस्ते', orders: 'ऑर्डर', wishlist: 'विशलिस्ट',
    forYou: 'आपके लिए', search: 'खोजें',
  } : {
    hi: 'Hi', orders: 'Orders', wishlist: 'Wishlist',
    forYou: 'For you', search: 'Search Bazaar',
  };

  const products = [
    { name: 'Cotton kurti', price: 399, oldPrice: 799, bg: '#ffe5ec', rating: '4.3' },
    { name: 'Steel water bottle', price: 199, oldPrice: 449, bg: '#cfe6ff', rating: '4.5' },
    { name: 'Wireless earbuds', price: 699, oldPrice: 1499, bg: '#e8e3ff', rating: '4.1' },
    { name: 'Floor mat', price: 299, oldPrice: 599, bg: '#d8f3dc', rating: '4.4' },
  ];

  return (
    <div style={{
      height: '100%', background: '#faf9f6', overflow: 'auto',
      fontFamily: "'DM Sans', system-ui", color: BAZAAR_INK,
    }}>
      {/* App bar */}
      <div style={{
        padding: '14px 18px 10px', background: '#fff',
        borderBottom: '1px solid #eeece4',
        position: 'sticky', top: 0, zIndex: 2,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <BazaarLogo size={18} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
              <path d="M3 5h12M3 9h12M3 13h12" stroke={BAZAAR_INK} strokeWidth="1.6" strokeLinecap="round"/>
            </svg>
            <div style={{
              width: 26, height: 26, borderRadius: '50%',
              background: 'linear-gradient(135deg, #ff8aa0, #ff5a8a)',
              color: '#fff', fontSize: 11, fontWeight: 700,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>{(name || 'P')[0]}</div>
          </div>
        </div>
        {/* Search */}
        <div style={{
          marginTop: 10, background: '#f4f2ea', borderRadius: 12,
          padding: '9px 12px', display: 'flex', alignItems: 'center', gap: 8,
          fontSize: 13, color: '#8a8a92',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <circle cx="6" cy="6" r="4.5" stroke="#8a8a92" strokeWidth="1.4"/>
            <path d="M9.5 9.5 L12 12" stroke="#8a8a92" strokeWidth="1.4" strokeLinecap="round"/>
          </svg>
          {t.search}
        </div>
      </div>

      {/* Welcome banner */}
      <div style={{ padding: '14px 18px 0' }}>
        <div style={{
          background: 'linear-gradient(135deg, #fff7e6 0%, #ffe5ec 100%)',
          borderRadius: 16, padding: '16px 18px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div>
            <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: -0.3 }}>
              {t.hi}, {name || 'Priya'} 👋
            </div>
            <div style={{
              marginTop: 4, fontSize: 12, color: VI.soft,
              fontFamily: "'JetBrains Mono', monospace", letterSpacing: 0.2,
            }}>
              {phone}
            </div>
          </div>
          <div style={{
            width: 48, height: 48, borderRadius: 12,
            background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 4px 12px -4px rgba(0,0,0,0.08)',
          }}>
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              <path d="M3 6 L19 6 L17.5 17 H4.5 L3 6Z M3 6 L2 3 H0" stroke={BAZAAR_ACCENT}
                strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
              <circle cx="8" cy="20" r="1.2" fill={BAZAAR_ACCENT}/>
              <circle cx="15" cy="20" r="1.2" fill={BAZAAR_ACCENT}/>
            </svg>
          </div>
        </div>
      </div>

      {/* Quick links */}
      <div style={{ padding: '14px 18px 4px', display: 'flex', gap: 10 }}>
        {[
          { label: t.orders, icon: '📦' },
          { label: t.wishlist, icon: '♡' },
          { label: 'Coupons', icon: '%' },
          { label: 'Help', icon: '?' },
        ].map((q, i) => (
          <div key={i} style={{
            flex: 1, background: '#fff', borderRadius: 12, padding: '10px 4px',
            textAlign: 'center', border: '1px solid #eeece4',
          }}>
            <div style={{ fontSize: 16, marginBottom: 2 }}>{q.icon}</div>
            <div style={{ fontSize: 10.5, fontWeight: 500, color: '#3a3b42' }}>{q.label}</div>
          </div>
        ))}
      </div>

      {/* For you */}
      <div style={{ padding: '16px 18px 22px' }}>
        <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 10, letterSpacing: -0.2 }}>
          {t.forYou}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {products.map((p, i) => (
            <div key={i} style={{
              background: '#fff', borderRadius: 12, overflow: 'hidden',
              border: '1px solid #eeece4',
            }}>
              <div style={{ height: 92, background: p.bg }} />
              <div style={{ padding: '8px 10px 10px' }}>
                <div style={{ fontSize: 11.5, fontWeight: 500, color: '#3a3b42' }}>{p.name}</div>
                <div style={{ marginTop: 4, display: 'flex', alignItems: 'baseline', gap: 5 }}>
                  <span style={{ fontSize: 13, fontWeight: 700 }}>₹{p.price}</span>
                  <span style={{ fontSize: 10, color: '#8a8a92', textDecoration: 'line-through' }}>
                    ₹{p.oldPrice}
                  </span>
                </div>
                <div style={{
                  marginTop: 4, display: 'inline-flex', alignItems: 'center', gap: 3,
                  background: '#0f8a5f', color: '#fff', padding: '1px 5px',
                  borderRadius: 4, fontSize: 9.5, fontWeight: 700,
                }}>
                  {p.rating} ★
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { BazaarSignIn, BazaarHome, BazaarLogo, BAZAAR_ACCENT });