// Cart, Checkout, Account, ThankYou

function ThankYouPage({ vp, goto, orderId }) {
  const isMobile = vp === 'mobile';
  return (
    <div style={{ minHeight: '80vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: isMobile ? '48px 20px' : '96px 48px' }}>
      <div style={{ textAlign: 'center', maxWidth: 560, animation: 'fadeInUp 0.6s cubic-bezier(0.22,1,0.36,1)' }}>
        {/* Animated checkmark */}
        <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'var(--primary)', color: 'var(--primary-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 32px', animation: 'imageReveal 0.5s cubic-bezier(0.22,1,0.36,1) 0.2s both' }}>
          <window.Icon name="check" size={36} stroke={2}/>
        </div>

        <div className="mono" style={{ color: 'var(--accent)', marginBottom: 12, letterSpacing: '0.12em' }}>
          {orderId ? `Order #${orderId} confirmed` : 'Order confirmed'}
        </div>

        <h1 className="h-display" style={{ fontSize: isMobile ? 36 : 56, marginBottom: 20 }}>
          Thank you<span style={{ color: 'var(--gold)' }}>.</span>
        </h1>

        <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6, marginBottom: 12, textWrap: 'pretty' }}>
          Your order has been placed and is being prepared with care. We'll send a confirmation to your email shortly.
        </p>

        <p style={{ fontSize: 14, color: 'var(--muted)', marginBottom: 40, lineHeight: 1.5 }}>
          Orders typically ship within 24 hours. Free delivery across India.
        </p>

        {/* Delivery info */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 12, marginBottom: 40, textAlign: 'left' }}>
          {[
            ['Ships in 24h', 'Cold-chain dispatch from Mumbai'],
            ['Delivery in 3–5 days', 'Pan India, free shipping'],
            ['Questions?', '+91 98678 00415 · WhatsApp'],
            ['Track order', 'Check your email for updates'],
          ].map(([t, s]) => (
            <div key={t} style={{ padding: '14px 16px', background: 'var(--surface)', borderRadius: 10, border: '1px solid var(--line-soft)' }}>
              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 3 }}>{t}</div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>{s}</div>
            </div>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn-primary" onClick={() => goto('Shop')}>
            Continue shopping <window.Icon name="arrR" size={14}/>
          </button>
          <a href="https://wa.me/919867800415" target="_blank" rel="noopener noreferrer" className="btn btn-ghost"
            style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
            WhatsApp us
          </a>
        </div>
      </div>
    </div>
  );
}

function CartPage({ vp, goto, items, updateQty, removeItem }) {
  const isMobile = vp === 'mobile';
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const shipping = subtotal > 999 ? 0 : 80;
  const [promo, setPromo] = React.useState('');

  return (
    <div className="container" style={{ padding: isMobile ? '32px 20px 64px' : '56px 48px 96px' }}>
      <div className="mono" style={{ color: 'var(--muted)', marginBottom: 16 }}>Home / Your basket</div>
      <h1 className="h-display" style={{ fontSize: isMobile ? 44 : 72, marginBottom: 48 }}>Your basket</h1>

      {items.length === 0 ? (
        <div style={{ padding: '80px 0', textAlign: 'center' }}>
          <div className="ph" style={{ width: 120, height: 120, borderRadius: 999, margin: '0 auto 24px' }}>empty</div>
          <h3 style={{ fontSize: 24, fontWeight: 500, marginBottom: 12 }}>Nothing here yet.</h3>
          <p style={{ color: 'var(--muted)', marginBottom: 24 }}>Take a look at what's in season.</p>
          <button className="btn btn-primary" onClick={() => goto('Shop')}>Browse pastes</button>
        </div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.5fr 1fr', gap: 48 }}>
          <div>
            {items.map(it => (
              <div key={it.id} style={{ display: 'flex', gap: 20, padding: '24px 0', borderBottom: '1px solid var(--line-soft)' }}>
                {it.img
                  ? <img src={it.img} alt={it.name} style={{ width: isMobile ? 100 : 140, height: isMobile ? 120 : 170, objectFit: 'cover', borderRadius: 8, flexShrink: 0, display: 'block' }}/>
                  : <div className="ph product" style={{ width: isMobile ? 100 : 140, height: isMobile ? 120 : 170, flexShrink: 0, borderRadius: 8 }}>{it.name}</div>
                }
                <div style={{ flex: 1 }}>
                  <div className="between" style={{ marginBottom: 6 }}>
                    <h3 style={{ fontSize: isMobile ? 18 : 22, fontWeight: 500, letterSpacing: '-0.02em' }}>{it.name}</h3>
                    <button onClick={() => removeItem(it.id)} className="mono" style={{ color: 'var(--muted)' }}>remove</button>
                  </div>
                  <div className="mono" style={{ color: 'var(--muted)', marginBottom: 12 }}>{it.weight}{it.sub ? ' · subscription' : ''}</div>
                  <p style={{ color: 'var(--ink-2)', fontSize: 14, marginBottom: 16 }}>{it.tagline}</p>
                  <div className="between" style={{ marginTop: 'auto' }}>
                    <div style={{ display: 'inline-flex', alignItems: 'center', border: '1px solid var(--line)', borderRadius: 999 }}>
                      <button onClick={() => updateQty(it.id, Math.max(1, it.qty - 1))} style={{ padding: '8px 12px' }}><window.Icon name="minus" size={12}/></button>
                      <span style={{ padding: '0 12px', fontFamily: 'var(--font-mono)', fontSize: 13 }}>{it.qty}</span>
                      <button onClick={() => updateQty(it.id, it.qty + 1)} style={{ padding: '8px 12px' }}><window.Icon name="plus" size={12}/></button>
                    </div>
                    <div style={{ fontSize: 20, fontWeight: 500 }}>₹{(it.price * it.qty).toLocaleString('en-IN')}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <aside>
            <div style={{ position: 'sticky', top: 100, padding: 28, background: 'var(--surface)', borderRadius: 12, border: '1px solid var(--line-soft)' }}>
              <h3 className="mono" style={{ color: 'var(--muted)', marginBottom: 20 }}>Order summary</h3>
              <div className="between" style={{ marginBottom: 8, fontSize: 14 }}><span style={{ color: 'var(--muted)' }}>Subtotal</span><span>₹{subtotal.toLocaleString('en-IN')}</span></div>
              <div className="between" style={{ marginBottom: 8, fontSize: 14 }}><span style={{ color: 'var(--muted)' }}>Shipping</span><span>{shipping ? `₹${shipping}` : 'Free'}</span></div>
              <div className="between" style={{ marginBottom: 16, fontSize: 14 }}><span style={{ color: 'var(--muted)' }}>Tax (incl.)</span><span>₹{Math.round(subtotal * 0.05)}</span></div>
              <div className="divider" style={{ margin: '16px 0' }}/>
              <div className="between" style={{ marginBottom: 20 }}>
                <span style={{ fontSize: 16, fontWeight: 500 }}>Total</span>
                <span style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em' }}>₹{(subtotal + shipping).toLocaleString('en-IN')}</span>
              </div>

              <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
                <input value={promo} onChange={e => setPromo(e.target.value)} placeholder="Promo code" className="field" style={{ padding: '10px 14px' }}/>
                <button className="btn btn-ghost btn-sm">Apply</button>
              </div>

              <button className="btn btn-primary" style={{ width: '100%' }} onClick={() => goto('Checkout')}>Proceed to checkout <window.Icon name="arrR" size={14}/></button>

              <div style={{ marginTop: 20, padding: 14, background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--line-soft)' }}>
                <div className="mono" style={{ color: 'var(--accent)', marginBottom: 4 }}>Free shipping unlocked</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>Plus a complimentary amla shot in every order over ₹1,500.</div>
              </div>
            </div>
          </aside>
        </div>
      )}
    </div>
  );
};

// ============ CHECKOUT ============
function CheckoutPage({ vp, goto, items, clearCart, addToCart }) {
  const isMobile = vp === 'mobile';
  const [step, setStep] = React.useState(1);
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const shipping = subtotal > 999 ? 0 : 80;
  const total = subtotal + shipping;
  const [placed, setPlaced] = React.useState(false);
  const [placing, setPlacing] = React.useState(false);
  const [orderError, setOrderError] = React.useState('');
  const [newsletter, setNewsletter] = React.useState(true);
  const [nudgeDismissed, setNudgeDismissed] = React.useState(false);
  const [nudgeClosing, setNudgeClosing] = React.useState(false);
  const dismissNudge = () => { setNudgeClosing(true); setTimeout(() => setNudgeDismissed(true), 300); };
  const [paymentMethod, setPaymentMethod] = React.useState('ccavenue');
  const [form, setForm] = React.useState({ email:'', firstName:'', lastName:'', phone:'', address:'', city:'', state:'', pincode:'' });
  const setF = (k, v) => setForm(f => ({ ...f, [k]: v }));

  // Smart nudge
  const cartIds = items.map(i => i.id);
  const viewed = JSON.parse(localStorage.getItem('nkh_viewed') || '[]');
  const nudgeProduct = viewed.map(id => window.PRODUCTS.find(p => p.id === id)).find(p => p && !cartIds.includes(p.id));

  const placeOrder = async () => {
    setPlacing(true);
    setOrderError('');
    try {
      const res = await fetch('https://nkherbal.com/wp-json/nk/v1/create-order', {
        method: 'POST',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          items: items.map(it => {
            // Always get fresh wcId from PRODUCTS array (old cart items may not have it)
            const fresh = (window.PRODUCTS || []).find(p => p.id === it.id);
            return { wcId: it.wcId || (fresh && fresh.wcId) || 0, qty: it.qty, name: it.name };
          }),
          email: form.email, firstName: form.firstName, lastName: form.lastName,
          phone: form.phone, address: form.address, city: form.city,
          state: form.state, pincode: form.pincode,
          payment_method: paymentMethod,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.message || 'Order failed. Please try again.');
      if (data.redirect_url) {
        clearCart();
        window.location.href = data.redirect_url;
      } else {
        clearCart();
        setPlaced(true);
      }
    } catch(e) {
      setOrderError(e.message || 'Something went wrong. Please try again.');
    }
    setPlacing(false);
  };

  if (placed) {
    return (
      <div className="container" style={{ padding: isMobile ? '48px 20px' : '96px 48px', textAlign: 'center', maxWidth: 640 }}>
        <div style={{ width: 88, height: 88, borderRadius: 999, background: 'var(--primary)', color: 'var(--primary-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 32px' }}>
          <window.Icon name="check" size={36} stroke={2}/>
        </div>
        <div className="mono" style={{ color: 'var(--accent)', marginBottom: 16 }}>Order #NKH-25412 confirmed</div>
        <h1 className="h-display" style={{ fontSize: isMobile ? 44 : 72, marginBottom: 24 }}>Thank you.</h1>
        <p style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.5, marginBottom: 32 }}>Your jar is being packed in Kasaragod. We'll send a tracking link to your inbox within 24 hours, and a handwritten note will travel with it.</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn-primary" onClick={() => goto('Account')}>Track order</button>
          <button className="btn btn-ghost" onClick={() => goto('Home')}>Continue browsing</button>
        </div>
      </div>
    );
  }

  return (
    <div className="container" style={{ padding: isMobile ? '24px 20px 48px' : '40px 48px 80px' }}>
      <div className="between" style={{ marginBottom: 32 }}>
        <button onClick={() => goto('Cart')} className="mono" style={{ color: 'var(--muted)' }}>← back to basket</button>
        <window.Logo small/>
      </div>

      {/* Smart nudge */}
      {nudgeProduct && !nudgeDismissed && (
        <div style={{ marginBottom: 28, padding: '16px 20px', background: 'var(--surface)', border: '1px solid var(--line-soft)', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 14, animation: nudgeClosing ? 'slideOutRight 0.3s cubic-bezier(0.22,1,0.36,1) forwards' : 'fadeInUp 0.4s cubic-bezier(0.22,1,0.36,1)' }}>
          {nudgeProduct.img
            ? <img src={nudgeProduct.img} alt={nudgeProduct.name} style={{ width: 48, height: 60, objectFit: 'cover', borderRadius: 6, flexShrink: 0 }}/>
            : <div className="ph product" style={{ width: 48, height: 60, borderRadius: 6, flexShrink: 0, fontSize: 8 }}>{nudgeProduct.name}</div>
          }
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', marginBottom: 3 }}>Still interested?</div>
            <div style={{ fontSize: 14, fontWeight: 500 }}>You were looking at {nudgeProduct.name}</div>
            <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>₹{nudgeProduct.price.toLocaleString('en-IN')} · {nudgeProduct.weight}</div>
          </div>
          <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
            <button className="btn btn-primary btn-sm" onClick={() => { addToCart && addToCart(nudgeProduct); dismissNudge(); }}>Add to order</button>
            <button onClick={dismissNudge} className="round-btn" style={{ width: 32, height: 32, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid var(--line)' }}>
              <window.Icon name="close" size={12}/>
            </button>
          </div>
        </div>
      )}

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr', gap: isMobile ? 32 : 64 }}>
        <div>
          <h1 className="h-display" style={{ fontSize: isMobile ? 36 : 56, marginBottom: 32 }}>Checkout</h1>

          {/* Stepper */}
          <div style={{ display: 'flex', gap: 16, marginBottom: 40, flexWrap: 'wrap' }}>
            {[['1','Contact'], ['2','Delivery'], ['3','Payment']].map(([n, l]) => (
              <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 10, opacity: step >= +n ? 1 : 0.4 }}>
                <div style={{ width: 28, height: 28, borderRadius: 999, background: step >= +n ? 'var(--ink)' : 'transparent', color: step >= +n ? 'var(--bg)' : 'var(--ink)', border: '1px solid var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontFamily: 'var(--font-mono)' }}>{step > +n ? '✓' : n}</div>
                <span style={{ fontSize: 14, fontWeight: step === +n ? 500 : 400 }}>{l}</span>
              </div>
            ))}
          </div>

          {step === 1 && (
            <div className="col gap-4">
              <h3 style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 8 }}>Where should we send it?</h3>
              <div className="field-row"><label>Email</label><input className="field" placeholder="your@email.com" value={form.email} onChange={e => setF('email', e.target.value)}/></div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div className="field-row"><label>First name</label><input className="field" value={form.firstName} onChange={e => setF('firstName', e.target.value)}/></div>
                <div className="field-row"><label>Last name</label><input className="field" value={form.lastName} onChange={e => setF('lastName', e.target.value)}/></div>
              </div>
              <div className="field-row"><label>Phone</label><input className="field" placeholder="+91" value={form.phone} onChange={e => setF('phone', e.target.value)}/></div>
              <button type="button" onClick={() => setNewsletter(c => !c)} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, color: 'var(--ink-2)', marginTop: 8, textAlign: 'left' }}>
                    <span style={{ width: 16, height: 16, borderRadius: 4, border: `1.5px solid ${newsletter ? '#b8945e' : 'var(--line)'}`, background: newsletter ? '#b8945e' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'all 0.18s cubic-bezier(0.22,1,0.36,1)', color: '#fff' }}>
                      {newsletter && <window.Icon name="check" size={10}/>}
                    </span>
                    Send me the monthly journal (one email, never noise)
                  </button>
              <button className="btn btn-primary" style={{ alignSelf: 'flex-start', marginTop: 16 }} onClick={() => setStep(2)}>Continue to delivery <window.Icon name="arrR" size={14}/></button>
            </div>
          )}

          {step === 2 && (
            <div className="col gap-4">
              <h3 style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 8 }}>Delivery address</h3>
              <div className="field-row"><label>Address</label><input className="field" placeholder="House no., street" value={form.address} onChange={e => setF('address', e.target.value)}/></div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
                <div className="field-row"><label>City</label><input className="field" value={form.city} onChange={e => setF('city', e.target.value)}/></div>
                <div className="field-row"><label>State</label><input className="field" value={form.state} onChange={e => setF('state', e.target.value)}/></div>
                <div className="field-row"><label>PIN</label><input className="field" value={form.pincode} onChange={e => setF('pincode', e.target.value)}/></div>
              </div>
              <div style={{ marginTop: 16 }}>
                <div className="mono" style={{ color: 'var(--muted)', marginBottom: 10 }}>Shipping speed</div>
                {[['standard', 'Standard', '3-5 days', shipping ? '₹80' : 'Free'], ['express', 'Express', '1-2 days', '₹220'], ['white', 'White-glove', 'Same-day Mumbai/Blr', '₹450']].map(([k, l, d, p]) => (
                  <label key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: 16, border: '1px solid var(--line)', borderRadius: 8, marginBottom: 8, cursor: 'pointer' }}>
                    <span style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                      <input type="radio" name="ship" defaultChecked={k === 'standard'} style={{ accentColor: 'var(--ink)' }}/>
                      <span>
                        <div style={{ fontSize: 14, fontWeight: 500 }}>{l}</div>
                        <div className="mono" style={{ color: 'var(--muted)', marginTop: 2 }}>{d}</div>
                      </span>
                    </span>
                    <span style={{ fontWeight: 500 }}>{p}</span>
                  </label>
                ))}
              </div>
              <div style={{ display: 'flex', gap: 12 }}>
                <button onClick={() => setStep(1)} className="btn btn-ghost">← Back</button>
                <button onClick={() => setStep(3)} className="btn btn-primary" style={{ flex: 1 }}>Continue to payment <window.Icon name="arrR" size={14}/></button>
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="col gap-4">
              <h3 style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 8 }}>How would you like to pay?</h3>
              {[['ccavenue', 'Card / UPI / Net Banking', 'Powered by CC Avenue — cards, UPI, net banking & wallets']].map(([k, l, d]) => (
                <button key={k} type="button" onClick={() => setPaymentMethod(k)}
                  style={{ display: 'flex', gap: 12, alignItems: 'center', padding: 18, border: `1.5px solid ${paymentMethod === k ? 'var(--ink)' : 'var(--line)'}`, borderRadius: 8, background: paymentMethod === k ? 'var(--surface)' : 'transparent', textAlign: 'left', transition: 'all 0.18s' }}>
                  <div style={{ width: 18, height: 18, borderRadius: '50%', border: `1.5px solid ${paymentMethod === k ? 'var(--ink)' : 'var(--line)'}`, background: paymentMethod === k ? 'var(--ink)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    {paymentMethod === k && <div style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--bg)' }}/>}
                  </div>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 500 }}>{l}</div>
                    <div className="mono" style={{ color: 'var(--muted)', marginTop: 4 }}>{d}</div>
                  </div>
                </button>
              ))}
              {orderError && (
                <div style={{ padding: '12px 16px', background: '#fff0f0', border: '1px solid #f5c6c6', borderRadius: 8, color: '#c00', fontSize: 14 }}>{orderError}</div>
              )}
              <div style={{ display: 'flex', gap: 12, marginTop: 8 }}>
                <button onClick={() => setStep(2)} className="btn btn-ghost">← Back</button>
                <button onClick={placeOrder} disabled={placing} className="btn btn-primary" style={{ flex: 1, opacity: placing ? 0.7 : 1 }}>
                  {placing ? 'Placing order…' : `Place order — ₹${total.toLocaleString('en-IN')}`} {!placing && <window.Icon name="arrR" size={14}/>}
                </button>
              </div>
            </div>
          )}
        </div>

        {/* Right summary */}
        <aside>
          <div style={{ position: 'sticky', top: 100, padding: 24, background: 'var(--surface)', borderRadius: 12, border: '1px solid var(--line-soft)' }}>
            <h3 className="mono" style={{ color: 'var(--muted)', marginBottom: 20 }}>Order summary · {items.length} {items.length === 1 ? 'item' : 'items'}</h3>
            <div style={{ marginBottom: 20 }}>
              {items.map(it => (
                <div key={it.id} style={{ display: 'flex', gap: 12, padding: '12px 0', borderBottom: '1px dashed var(--line-soft)' }}>
                  {it.img
                    ? <img src={it.img} alt={it.name} style={{ width: 60, height: 75, objectFit: 'cover', borderRadius: 6, flexShrink: 0, display: 'block' }}/>
                    : <div className="ph product" style={{ width: 60, height: 75, flexShrink: 0, fontSize: 9 }}>{it.name}</div>
                  }
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{it.name}</div>
                    <div className="mono" style={{ color: 'var(--muted)', marginTop: 3 }}>{it.weight} · qty {it.qty}</div>
                  </div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>₹{(it.price * it.qty).toLocaleString('en-IN')}</div>
                </div>
              ))}
            </div>
            <div className="between" style={{ marginBottom: 6, fontSize: 13 }}><span style={{ color: 'var(--muted)' }}>Subtotal</span><span>₹{subtotal.toLocaleString('en-IN')}</span></div>
            <div className="between" style={{ marginBottom: 12, fontSize: 13 }}><span style={{ color: 'var(--muted)' }}>Shipping</span><span>{shipping ? `₹${shipping}` : 'Free'}</span></div>
            <div className="divider" style={{ margin: '12px 0' }}/>
            <div className="between"><span style={{ fontSize: 15, fontWeight: 500 }}>Total</span><span style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>₹{total.toLocaleString('en-IN')}</span></div>
          </div>
        </aside>
      </div>
    </div>
  );
};

// ============ ACCOUNT ============
function AccountPage({ vp, goto }) {
  const isMobile = vp === 'mobile';
  const [tab, setTab] = React.useState('orders');

  const orders = [
    { id: 'NKH-25412', date: '12 May 2026', status: 'In transit', items: ['Classic Chyawanprash', 'Nidra Paste'], total: 1880, tracker: 3 },
    { id: 'NKH-24987', date: '03 Apr 2026', status: 'Delivered', items: ['Gold Chyawanprash'], total: 2890, tracker: 4 },
    { id: 'NKH-24551', date: '17 Feb 2026', status: 'Delivered', items: ['Kids Chyawanprash', 'Saundarya Paste'], total: 1880, tracker: 4 },
  ];

  return (
    <div className="container" style={{ padding: isMobile ? '32px 20px 64px' : '56px 48px 96px' }}>
      <div className="between" style={{ marginBottom: 32, flexWrap: 'wrap', gap: 12 }}>
        <div>
          <div className="mono" style={{ color: 'var(--muted)', marginBottom: 12 }}>Account</div>
          <h1 className="h-display" style={{ fontSize: isMobile ? 44 : 64 }}>Hello, Anita.</h1>
          <p style={{ color: 'var(--ink-2)', marginTop: 8 }}>Member since November 2023 · 12 orders · 3 subscriptions</p>
        </div>
        <button className="btn btn-ghost">Sign out</button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '220px 1fr', gap: 32 }}>
        <aside>
          <nav className="col gap-2">
            {[['orders','Orders'], ['subs','Subscriptions'], ['address','Addresses'], ['wish','Wishlist'], ['profile','Profile'], ['help','Help & support']].map(([id, l]) => (
              <button key={id} onClick={() => setTab(id)} style={{ textAlign: 'left', padding: '12px 16px', borderRadius: 8, background: tab === id ? 'var(--surface)' : 'transparent', border: '1px solid', borderColor: tab === id ? 'var(--line)' : 'transparent', fontSize: 14, fontWeight: tab === id ? 500 : 400 }}>{l}</button>
            ))}
          </nav>
        </aside>

        <div>
          {tab === 'orders' && (
            <div>
              <h2 style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 24 }}>Your orders</h2>
              <div className="col gap-4">
                {orders.map(o => (
                  <div key={o.id} style={{ padding: 24, background: 'var(--surface)', border: '1px solid var(--line-soft)', borderRadius: 12 }}>
                    <div className="between" style={{ marginBottom: 16, flexWrap: 'wrap', gap: 8 }}>
                      <div>
                        <div style={{ fontSize: 16, fontWeight: 500 }}>{o.id}</div>
                        <div className="mono" style={{ color: 'var(--muted)', marginTop: 3 }}>placed {o.date}</div>
                      </div>
                      <span className={`badge ${o.status === 'In transit' ? 'accent' : 'solid'}`}>{o.status}</span>
                    </div>

                    {/* tracker */}
                    {o.status === 'In transit' && (
                      <div style={{ padding: 16, background: 'var(--bg)', borderRadius: 8, marginBottom: 16 }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', position: 'relative', marginBottom: 12 }}>
                          <div style={{ position: 'absolute', top: 7, left: 0, right: 0, height: 2, background: 'var(--line)' }}/>
                          <div style={{ position: 'absolute', top: 7, left: 0, width: `${(o.tracker - 1)/3*100}%`, height: 2, background: 'var(--primary)', transition: 'width 0.4s' }}/>
                          {['Placed', 'Packed', 'Shipped', 'Delivered'].map((s, i) => (
                            <div key={s} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', zIndex: 1, flex: 1 }}>
                              <div style={{ width: 16, height: 16, borderRadius: 999, background: i < o.tracker ? 'var(--primary)' : 'var(--bg)', border: '2px solid', borderColor: i < o.tracker ? 'var(--primary)' : 'var(--line)' }}/>
                              <div className="mono" style={{ fontSize: 9, color: i < o.tracker ? 'var(--ink)' : 'var(--muted)', marginTop: 8 }}>{s}</div>
                            </div>
                          ))}
                        </div>
                        <div className="mono" style={{ color: 'var(--muted)', marginTop: 8, textAlign: 'center', fontSize: 10 }}>tracking · BD8743219IN · expected 15 May</div>
                      </div>
                    )}

                    <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
                      {o.items.map((n, i) => <div key={i} className="ph product" style={{ width: 56, height: 70, fontSize: 8 }}>{n.split(' ')[0]}</div>)}
                      <div style={{ flex: 1, minWidth: 120, fontSize: 13, color: 'var(--ink-2)' }}>{o.items.join(' · ')}</div>
                      <div style={{ fontSize: 16, fontWeight: 500 }}>₹{o.total.toLocaleString('en-IN')}</div>
                    </div>
                    <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
                      <button className="btn btn-ghost btn-sm">View details</button>
                      <button className="btn btn-ghost btn-sm">Reorder</button>
                      {o.status === 'Delivered' && <button className="btn btn-ghost btn-sm">Write a review</button>}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {tab === 'subs' && (
            <div>
              <h2 style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 8 }}>Subscriptions</h2>
              <p style={{ color: 'var(--ink-2)', marginBottom: 24 }}>Skip, swap, or pause anytime.</p>
              {[{ p: 'Classic Chyawanprash', next: '01 Jun 2026', cycle: 'Every 60 days', save: '15%' }].map(s => (
                <div key={s.p} style={{ padding: 24, background: 'var(--surface)', borderRadius: 12, border: '1px solid var(--line-soft)', display: 'flex', gap: 20, alignItems: 'center' }}>
                  <div className="ph product" style={{ width: 80, height: 100 }}>{s.p.split(' ')[0]}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 18, fontWeight: 500 }}>{s.p}</div>
                    <div className="mono" style={{ color: 'var(--muted)', marginTop: 6 }}>{s.cycle} · save {s.save}</div>
                    <div className="mono" style={{ color: 'var(--accent)', marginTop: 4 }}>next jar ships {s.next}</div>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    <button className="btn btn-ghost btn-sm">Skip</button>
                    <button className="btn btn-ghost btn-sm">Pause</button>
                  </div>
                </div>
              ))}
            </div>
          )}

          {tab === 'address' && (
            <div>
              <h2 style={{ fontSize: 24, fontWeight: 500, marginBottom: 24, letterSpacing: '-0.02em' }}>Saved addresses</h2>
              <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 16 }}>
                {[['Home','Anita R.','42, MG Road, Indiranagar','Bengaluru 560038'], ['Office','Anita R.','Block C, WeWork Galaxy','Bengaluru 560008']].map(([t, n, a, c]) => (
                  <div key={t} style={{ padding: 24, border: '1px solid var(--line)', borderRadius: 12 }}>
                    <div className="between" style={{ marginBottom: 12 }}>
                      <span className="badge">{t}</span>
                      <button className="mono" style={{ color: 'var(--muted)' }}>edit</button>
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 8 }}>{n}</div>
                    <div style={{ color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.5 }}>{a}<br/>{c}</div>
                  </div>
                ))}
                <button style={{ padding: 24, border: '1px dashed var(--line)', borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--muted)', fontSize: 14 }}>
                  <window.Icon name="plus" size={14}/> Add address
                </button>
              </div>
            </div>
          )}

          {tab === 'wish' && (
            <div>
              <h2 style={{ fontSize: 24, fontWeight: 500, marginBottom: 24, letterSpacing: '-0.02em' }}>Saved for later</h2>
              <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(3, 1fr)', gap: 20 }}>
                {window.PRODUCTS.slice(0, 3).map(p => (
                  <div key={p.id}>
                    <div className="ph product" style={{ aspectRatio: '4/5', borderRadius: 8, marginBottom: 12 }}>{p.name}</div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{p.name}</div>
                    <div style={{ fontSize: 13, marginTop: 4 }}>₹{p.price}</div>
                    <button className="btn btn-ghost btn-sm" style={{ marginTop: 8, width: '100%' }} onClick={() => goto('Product', p.id)}>View</button>
                  </div>
                ))}
              </div>
            </div>
          )}

          {tab === 'profile' && (
            <div>
              <h2 style={{ fontSize: 24, fontWeight: 500, marginBottom: 24, letterSpacing: '-0.02em' }}>Profile & preferences</h2>
              <div className="col gap-4" style={{ maxWidth: 480 }}>
                <div className="field-row"><label>Name</label><input className="field" defaultValue="Anita Ramaswamy"/></div>
                <div className="field-row"><label>Email</label><input className="field" defaultValue="anita@example.com"/></div>
                <div className="field-row"><label>Phone</label><input className="field" defaultValue="+91 98765 43210"/></div>
                <div className="field-row"><label>Dosha (optional)</label><select className="field"><option>Vata-Pitta</option><option>Pitta</option><option>Kapha</option><option>Tri-doshic</option></select></div>
                <button className="btn btn-primary" style={{ alignSelf: 'flex-start' }}>Save changes</button>
              </div>
            </div>
          )}

          {tab === 'help' && (
            <div>
              <h2 style={{ fontSize: 24, fontWeight: 500, marginBottom: 24, letterSpacing: '-0.02em' }}>Help & support</h2>
              <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 16 }}>
                {[['Chat with us', 'Avg. reply 4 mins'], ['Call', '+91 80 4567 8901'], ['Email', 'care@nkherbal.com'], ['Vaidya consult', 'Book a free 15-min call']].map(([t, d]) => (
                  <button key={t} style={{ textAlign: 'left', padding: 24, background: 'var(--surface)', borderRadius: 12, border: '1px solid var(--line-soft)' }}>
                    <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 6 }}>{t}</div>
                    <div className="mono" style={{ color: 'var(--muted)' }}>{d}</div>
                  </button>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

window.CartPage = CartPage;
window.CheckoutPage = CheckoutPage;
window.AccountPage = AccountPage;
window.ThankYouPage = ThankYouPage;
