// === Mania De Jeans CG — Checkout flow (Cart, Checkout, WhatsApp) ===
const { useState, useEffect, useMemo } = React;

function ScreenCart({ cart, products, go, updateCartItem, removeCartItem, toast, shipping, setShipping }) {
  const items = cart.map(c => ({ ...c, product: products.find(p => p.id === c.productId) })).filter(x => x.product);
  const subtotal = items.reduce((s, it) => s + (it.product.price * it.qty), 0);
  const [cep, setCep] = useState(shipping?.toCep || "");
  const quoteItems = useMemo(() => window.MJ_buildItemsFromCart?.(cart, products) || [], [cart, products]);
  const shippingCost = window.MJ_resolveShippingAmount?.(shipping, subtotal);
  const total = subtotal + (shippingCost != null ? shippingCost : 0);

  if (items.length === 0) {
    return (
      <div className="cart-page">
        <h1>Carrinho</h1>
        <div className="cart-empty">
          <div className="icon-circle"><Icon.Cart s={28}/></div>
          <h3>Seu carrinho está vazio</h3>
          <p>Que tal dar uma olhada na nossa coleção?</p>
          <button className="btn btn-primary" onClick={() => go("catalog")}>Ver coleção <Icon.ChevronRight s={14}/></button>
        </div>
      </div>
    );
  }

  return (
    <div className="cart-page">
      <h1>Carrinho · {items.length} {items.length === 1 ? "item" : "itens"}</h1>
      <div className="cart-grid">
        <div>
          <div className="cart-items">
            {items.map((it, i) => (
              <div key={i} className="cart-row">
                <div className="img" onClick={() => go("product", { id: it.product.id })}>
                  <ProductPhoto src={it.product.fotoListing || it.product.foto1 || it.product.imageUrl || it.product.images?.[0]} seed={it.product.id} tone={it.product.colorHex} alt=""/>
                </div>
                <div className="meta">
                  <div className="name" onClick={() => go("product", { id: it.product.id })}>{it.product.name}</div>
                  <div className="det">
                    Tamanho: <span>{it.size}</span> &nbsp;·&nbsp;
                    SKU: <span>{it.product.sku}</span> &nbsp;·&nbsp;
                    Cor: <span>{it.product.color}</span>
                  </div>
                  <div className="ctrls">
                    <div className="qty-block">
                      <button className="qty-btn" onClick={() => updateCartItem(i, Math.max(1, it.qty - 1))}><Icon.Minus s={14}/></button>
                      <span className="qty-val">{it.qty}</span>
                      <button className="qty-btn" onClick={() => updateCartItem(i, it.qty + 1)}><Icon.Plus s={14}/></button>
                    </div>
                    <button className="remove" onClick={() => removeCartItem(i)}>
                      <Icon.Trash s={14} style={{verticalAlign:'middle', marginRight:4}}/> Remover
                    </button>
                  </div>
                </div>
                <div className="price-col">
                  <div className="price">{fmt(it.product.price * it.qty)}</div>
                  {it.qty > 1 && <div className="each">{fmt(it.product.price)} cada</div>}
                  {it.product.priceOld && (
                    <div style={{fontSize:11, color:'var(--success)', fontWeight:700}}>
                      Você economiza {fmt((it.product.priceOld - it.product.price) * it.qty)}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
          <div style={{marginTop:18, display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:12}}>
            <button className="btn btn-ghost" onClick={() => go("catalog")}><Icon.ChevronRight s={14} style={{transform:'rotate(180deg)'}}/> Continuar comprando</button>
            <div style={{fontSize:13, color:'var(--ink-500)', display:'flex', alignItems:'center', gap:6}}>
              <Icon.Lock s={14}/> Pedido e dados protegidos
            </div>
          </div>
        </div>

        <div className="summary">
          <h3>Resumo do pedido</h3>
          <div className="line"><span>Subtotal ({items.reduce((s, it) => s + it.qty, 0)} {items.reduce((s, it) => s + it.qty, 0) === 1 ? "peça" : "peças"})</span><span className="v">{fmt(subtotal)}</span></div>
          <div style={{ marginBottom: 14 }}>
            <ShippingQuotePanel
              cep={cep}
              onCepChange={setCep}
              items={quoteItems}
              subtotal={subtotal}
              shipping={shipping}
              setShipping={setShipping}
              toast={toast}
              variant="inline"
            />
          </div>
          <div className="line">
            <span>Frete</span>
            <span className="v">
              {shippingCost == null ? "A calcular" : fmt(shippingCost)}
            </span>
          </div>
          {shipping?.selected && (
            <div style={{ fontSize: 11, color: "var(--ink-500)", marginTop: -6, marginBottom: 8 }}>
              {shipping.selected.company} · {shipping.selected.name}
            </div>
          )}

          <div className="tot">
            <div>
              <div className="l">Total{shippingCost == null ? " (sem frete)" : ""}</div>
              <div style={{fontSize:11, color:'var(--ink-500)', marginTop:4}}>em até 3x sem juros</div>
            </div>
            <div style={{textAlign:'right'}}>
              <div className="v">{fmt(shippingCost != null ? total : subtotal)}</div>
            </div>
          </div>

          <button className="btn btn-primary btn-lg btn-block" style={{marginTop:18}} onClick={() => go("checkout")}>
            Finalizar compra <Icon.ChevronRight s={14}/>
          </button>
          <button className="btn btn-wp btn-block" style={{marginTop:8}} onClick={() => go("whatsapp")}>
            <Icon.WhatsApp s={16}/> Finalizar pelo WhatsApp
          </button>
          <div style={{textAlign:'center', fontSize:11, color:'var(--ink-500)', marginTop:14, lineHeight:1.5}}>
            <Icon.Shield s={11} style={{verticalAlign:'middle'}}/> Site seguro · Seus dados são criptografados
          </div>
        </div>
      </div>
    </div>
  );
}

// === Checkout ===
function ScreenCheckout({ cart, products, go, toast, formData, setFormData, completeOrder, shipping, setShipping }) {
  const items = cart.map(c => ({ ...c, product: products.find(p => p.id === c.productId) })).filter(x => x.product);
  const subtotal = items.reduce((s, it) => s + (it.product.price * it.qty), 0);
  const quoteItems = useMemo(() => window.MJ_buildItemsFromCart?.(cart, products) || [], [cart, products]);
  const shippingCost = window.MJ_resolveShippingAmount?.(shipping, subtotal);
  const total = subtotal + (shippingCost != null ? shippingCost : 0);
  const [pay, setPay] = useState("pix");
  const [errors, setErrors] = useState({});
  const [step, setStep] = useState(1);

  const update = (key, val) => {
    setFormData(d => ({ ...d, [key]: val }));
    setErrors(e => ({ ...e, [key]: null }));
  };

  useEffect(() => {
    const cep = formData.cep;
    if (!cep || !setShipping) return;
    const digits = window.MJ_cepDigits?.(cep);
    if (digits.length === 8 && shipping?.toCep !== window.MJ_normalizeCep?.(digits)) {
      setShipping((prev) => ({ ...(prev || {}), toCep: window.MJ_normalizeCep(digits) }));
    }
  }, [formData.cep]);

  const validateStep1 = () => {
    const e = {};
    if (!formData.name?.trim()) e.name = "Obrigatório";
    if (!formData.whatsapp?.trim()) e.whatsapp = "Obrigatório";
    if (!formData.email?.includes("@")) e.email = "E-mail inválido";
    if (!formData.cpf?.trim()) e.cpf = "Obrigatório";
    setErrors(e);
    return Object.keys(e).length === 0;
  };
  const validateStep2 = () => {
    const e = {};
    if (!formData.cep?.trim()) e.cep = "Obrigatório";
    if (!formData.address?.trim()) e.address = "Obrigatório";
    if (!formData.number?.trim()) e.number = "Obrigatório";
    if (!formData.neighborhood?.trim()) e.neighborhood = "Obrigatório";
    if (!formData.city?.trim()) e.city = "Obrigatório";
    if (!formData.state?.trim()) e.state = "UF";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  if (items.length === 0) {
    return (
      <div className="checkout-page">
        <div className="cart-empty">
          <div className="icon-circle"><Icon.Cart s={28}/></div>
          <h3>Não há itens para finalizar</h3>
          <p>Adicione produtos ao carrinho antes de continuar.</p>
          <button className="btn btn-primary" onClick={() => go("catalog")}>Ver coleção</button>
        </div>
      </div>
    );
  }

  const onContinue = () => {
    if (step === 1) {
      if (validateStep1()) setStep(2);
      else toast("Preencha os campos obrigatórios");
    } else if (step === 2) {
      if (validateStep2()) setStep(3);
      else toast("Preencha os campos obrigatórios");
    } else {
      completeOrder({
        ...formData,
        payment: pay,
        items,
        subtotal,
        shipping: shippingCost,
        shippingOption: shipping?.selected,
        total: shippingCost != null ? total : subtotal,
      });
      go("confirm");
    }
  };

  return (
    <div className="checkout-page">
      <div className="crumbs">
        <a onClick={() => go("home")}><Icon.Home s={12}/></a>
        <span className="sep">/</span>
        <a onClick={() => go("cart")}>Carrinho</a>
        <span className="sep">/</span>
        <span className="curr">Finalizar compra</span>
      </div>

      <h1 style={{fontFamily:'var(--font-display)', fontSize:32, letterSpacing:'-0.03em', margin:'0 0 4px', color:'var(--denim-900)'}}>Finalizar compra</h1>
      <p style={{color:'var(--ink-500)', fontSize:14, margin:'0 0 24px'}}>Preencha seus dados — leva menos de 2 minutos.</p>

      <div className="checkout-step">
        <div className={"pip " + (step >= 1 ? (step > 1 ? "done" : "on") : "")}>
          <span className="n">{step > 1 ? <Icon.Check s={12}/> : "1"}</span> Identificação
        </div>
        <span className="sep"/>
        <div className={"pip " + (step >= 2 ? (step > 2 ? "done" : "on") : "")}>
          <span className="n">{step > 2 ? <Icon.Check s={12}/> : "2"}</span> Entrega
        </div>
        <span className="sep"/>
        <div className={"pip " + (step >= 3 ? "on" : "")}>
          <span className="n">3</span> Pagamento
        </div>
      </div>

      <div className="checkout-grid">
        <div>
          {step === 1 && (
            <div className="form-card">
              <h3><Icon.User s={18}/> Seus dados</h3>
              <div className="form-grid">
                <div className="form-field f-6">
                  <label>Nome completo *</label>
                  <input className={errors.name && "invalid"} value={formData.name||""} onChange={(e) => update("name", e.target.value)} placeholder="Como você quer ser chamada"/>
                  {errors.name && <span className="err">{errors.name}</span>}
                </div>
                <div className="form-field f-3">
                  <label>WhatsApp *</label>
                  <input className={errors.whatsapp && "invalid"} value={formData.whatsapp||""} onChange={(e) => update("whatsapp", e.target.value)} placeholder="(00) 00000-0000"/>
                  {errors.whatsapp && <span className="err">{errors.whatsapp}</span>}
                </div>
                <div className="form-field f-3">
                  <label>CPF *</label>
                  <input className={errors.cpf && "invalid"} value={formData.cpf||""} onChange={(e) => update("cpf", e.target.value)} placeholder="000.000.000-00"/>
                  {errors.cpf && <span className="err">{errors.cpf}</span>}
                </div>
                <div className="form-field f-6">
                  <label>E-mail *</label>
                  <input className={errors.email && "invalid"} type="email" value={formData.email||""} onChange={(e) => update("email", e.target.value)} placeholder="seu@email.com"/>
                  {errors.email && <span className="err">{errors.email}</span>}
                </div>
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="form-card">
              <h3><Icon.Truck s={18}/> Endereço de entrega</h3>
              <div className="form-grid">
                <div className="form-field f-2">
                  <label>CEP *</label>
                  <input className={errors.cep && "invalid"} value={formData.cep||""} onChange={(e) => update("cep", e.target.value)} placeholder="00000-000" maxLength={9}/>
                  {errors.cep && <span className="err">{errors.cep}</span>}
                </div>
                <div className="form-field f-4">
                  <label>Endereço *</label>
                  <input className={errors.address && "invalid"} value={formData.address||""} onChange={(e) => update("address", e.target.value)} placeholder="Rua, avenida..."/>
                  {errors.address && <span className="err">{errors.address}</span>}
                </div>
                <div className="form-field f-2">
                  <label>Número *</label>
                  <input className={errors.number && "invalid"} value={formData.number||""} onChange={(e) => update("number", e.target.value)} placeholder="123"/>
                  {errors.number && <span className="err">{errors.number}</span>}
                </div>
                <div className="form-field f-4">
                  <label>Complemento</label>
                  <input value={formData.complement||""} onChange={(e) => update("complement", e.target.value)} placeholder="Apto, bloco (opcional)"/>
                </div>
                <div className="form-field f-3">
                  <label>Bairro *</label>
                  <input className={errors.neighborhood && "invalid"} value={formData.neighborhood||""} onChange={(e) => update("neighborhood", e.target.value)}/>
                  {errors.neighborhood && <span className="err">{errors.neighborhood}</span>}
                </div>
                <div className="form-field f-3">
                  <label>Cidade *</label>
                  <input className={errors.city && "invalid"} value={formData.city||""} onChange={(e) => update("city", e.target.value)}/>
                  {errors.city && <span className="err">{errors.city}</span>}
                </div>
                <div className="form-field f-2">
                  <label>UF *</label>
                  <select className={errors.state && "invalid"} value={formData.state||""} onChange={(e) => update("state", e.target.value)}>
                    <option value="">UF</option>
                    {["AC","AL","AM","AP","BA","CE","DF","ES","GO","MA","MG","MS","MT","PA","PB","PE","PI","PR","RJ","RN","RO","RR","RS","SC","SE","SP","TO"].map(s => <option key={s}>{s}</option>)}
                  </select>
                  {errors.state && <span className="err">{errors.state}</span>}
                </div>
              </div>
              <div style={{ marginTop: 16 }}>
                <ShippingQuotePanel
                  cep={formData.cep || shipping?.toCep || ""}
                  onCepChange={(v) => update("cep", v)}
                  items={quoteItems}
                  subtotal={subtotal}
                  shipping={shipping}
                  setShipping={setShipping}
                  toast={toast}
                  variant="inline"
                />
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="form-card">
              <h3><Icon.Lock s={18}/> Forma de pagamento</h3>
              <div className="pay-list">
                <div className={"pay-opt" + (pay === "pix" ? " on" : "")} onClick={() => setPay("pix")}>
                  <div className="radio"/>
                  <div>
                    <div className="pay-name">PIX</div>
                    <div className="pay-desc">Aprovação imediata · {fmt(total)}</div>
                  </div>
                  <div className="pay-icon"><Icon.Pix s={18}/></div>
                </div>
                <div className={"pay-opt" + (pay === "credit" ? " on" : "")} onClick={() => setPay("credit")}>
                  <div className="radio"/>
                  <div>
                    <div className="pay-name">Cartão de crédito</div>
                    <div className="pay-desc">Em até 3x sem juros · {fmt(total)}</div>
                  </div>
                  <div className="pay-icon">CC</div>
                </div>
                <div className={"pay-opt" + (pay === "boleto" ? " on" : "")} onClick={() => setPay("boleto")}>
                  <div className="radio"/>
                  <div>
                    <div className="pay-name">Boleto bancário</div>
                    <div className="pay-desc">Prazo de até 3 dias úteis · {fmt(total)}</div>
                  </div>
                  <div className="pay-icon">BB</div>
                </div>
                <div className={"pay-opt" + (pay === "wp" ? " on" : "")} onClick={() => setPay("wp")}>
                  <div className="radio"/>
                  <div>
                    <div className="pay-name">Pagar pelo WhatsApp</div>
                    <div className="pay-desc">Confirme com nosso atendimento</div>
                  </div>
                  <div className="pay-icon" style={{color:'var(--wp)'}}><Icon.WhatsApp s={18}/></div>
                </div>
              </div>

              {pay === "credit" && (
                <div className="form-grid" style={{marginTop:18}}>
                  <div className="form-field f-6">
                    <label>Número do cartão</label>
                    <input placeholder="0000 0000 0000 0000"/>
                  </div>
                  <div className="form-field f-4">
                    <label>Nome no cartão</label>
                    <input placeholder="Como impresso no cartão"/>
                  </div>
                  <div className="form-field f-1">
                    <label>Validade</label>
                    <input placeholder="00/00"/>
                  </div>
                  <div className="form-field f-1">
                    <label>CVV</label>
                    <input placeholder="000"/>
                  </div>
                  <div className="form-field f-6">
                    <label>Parcelamento</label>
                    <select defaultValue="1">
                      <option value="1">1x de {fmt(total)} sem juros</option>
                      <option value="2">2x de {fmt(total/2)} sem juros</option>
                      <option value="3">3x de {fmt(total/3)} sem juros</option>
                    </select>
                  </div>
                </div>
              )}

              {pay === "pix" && (
                <div style={{marginTop:18, padding:16, background:'var(--cream-50)', borderRadius:8}}>
                  <div style={{fontSize:13.5, color:'var(--ink-700)', lineHeight:1.6}}>
                    Ao finalizar, geramos o código PIX. Pagamento confirmado em segundos.
                  </div>
                </div>
              )}
            </div>
          )}

          <div style={{display:'flex', gap:10, justifyContent:'space-between', marginTop:18}}>
            {step > 1 ? (
              <button className="btn btn-ghost" onClick={() => setStep(s => s - 1)}>
                <span style={{transform:'rotate(180deg)', display:'inline-block'}}><Icon.ChevronRight s={14}/></span> Voltar
              </button>
            ) : <div/>}
            <button className="btn btn-primary btn-lg" onClick={onContinue}>
              {step === 3 ? `Confirmar pedido · ${fmt(total)}` : "Continuar"}
              <Icon.ChevronRight s={14}/>
            </button>
          </div>
        </div>

        <div className="summary">
          <h3>Resumo do pedido</h3>
          <div style={{maxHeight:200, overflowY:'auto', marginBottom:14}}>
            {items.map((it, i) => (
              <div key={i} style={{display:'flex', gap:10, padding:'8px 0', borderBottom:'1px dashed var(--denim-100)'}}>
                <div style={{width:48, aspectRatio:'3/4', borderRadius:4, overflow:'hidden', position:'relative', flexShrink:0, background:'var(--denim-100)'}}>
                  <ProductPhoto src={it.product.fotoListing || it.product.foto1 || it.product.imageUrl || it.product.images?.[0]} seed={it.product.id} tone={it.product.colorHex} alt=""/>
                </div>
                <div style={{flex:1, fontSize:12}}>
                  <div style={{fontWeight:700, color:'var(--denim-900)', marginBottom:2, lineHeight:1.3}}>{it.product.name}</div>
                  <div style={{color:'var(--ink-500)'}}>Tam {it.size} · Qtd {it.qty}</div>
                </div>
                <div style={{fontWeight:700, fontSize:13, color:'var(--denim-900)'}}>{fmt(it.product.price * it.qty)}</div>
              </div>
            ))}
          </div>
          <div className="line"><span>Subtotal</span><span className="v">{fmt(subtotal)}</span></div>
          <div className="line">
            <span>Frete</span>
            <span className="v">{shippingCost == null ? "A calcular" : fmt(shippingCost)}</span>
          </div>
          {shipping?.selected && (
            <div style={{ fontSize: 11, color: "var(--ink-500)", marginBottom: 8 }}>
              {shipping.selected.company} · {shipping.selected.name}
            </div>
          )}
          <div className="tot">
            <div>
              <div className="l">Total</div>
            </div>
            <div style={{textAlign:'right'}}>
              <div className="v">{fmt(shippingCost != null ? total : subtotal)}</div>
            </div>
          </div>
          <div style={{fontSize:11.5, color:'var(--ink-500)', marginTop:18, lineHeight:1.5}}>
            <Icon.Shield s={11} style={{verticalAlign:'middle'}}/> Compra segura · Dados protegidos
          </div>
        </div>
      </div>
    </div>
  );
}

// === WhatsApp confirmation ===
function ScreenWhatsApp({ cart, products, formData, go, clearCart, shipping }) {
  const items = cart.map(c => ({ ...c, product: products.find(p => p.id === c.productId) })).filter(x => x.product);
  const subtotal = items.reduce((s, it) => s + (it.product.price * it.qty), 0);
  const shippingCost = window.MJ_resolveShippingAmount?.(shipping, subtotal);
  const total = subtotal + (shippingCost != null ? shippingCost : 0);

  const message = useMemo(() => {
    const lines = [
      "🛍️ *Novo pedido — Mania De Jeans CG*",
      "",
    ];
    if (formData.name) lines.push(`👤 *Cliente:* ${formData.name}`);
    if (formData.whatsapp) lines.push(`📱 ${formData.whatsapp}`);
    lines.push("");
    lines.push("*Itens do pedido:*");
    items.forEach((it, i) => {
      lines.push(`${i + 1}. ${it.product.name}`);
      lines.push(`   Tam *${it.size}* · Qtd *${it.qty}* · ${fmt(it.product.price * it.qty)}`);
    });
    lines.push("");
    lines.push(`💰 *Subtotal:* ${fmt(subtotal)}`);
    if (shipping?.selected) {
      lines.push(`🚚 *Frete:* ${shipping.selected.company} · ${shipping.selected.name}`);
    }
    lines.push(`🚚 *Valor frete:* ${shippingCost == null ? "a calcular" : fmt(shippingCost)}`);
    lines.push(`✅ *Total:* *${fmt(shippingCost != null ? total : subtotal)}*`);
    if (formData.address || formData.cep) {
      lines.push("");
      lines.push("📍 *Endereço de entrega:*");
      if (formData.address) lines.push(`${formData.address}, ${formData.number || "s/n"}${formData.complement ? " - " + formData.complement : ""}`);
      if (formData.neighborhood) lines.push(formData.neighborhood);
      if (formData.city || formData.state) lines.push(`${formData.city || ""}${formData.state ? " - " + formData.state : ""}`);
      if (formData.cep) lines.push(`CEP: ${formData.cep}`);
    }
    lines.push("");
    lines.push("Aguardo a confirmação do pedido e os dados para pagamento. Obrigada! 💙");
    return lines.join("\n");
  }, [items, formData, subtotal, shipping, shippingCost, total]);

  if (items.length === 0) {
    return (
      <div className="wp-page">
        <h1>Nada no carrinho</h1>
        <p>Adicione produtos antes de gerar a mensagem.</p>
        <button className="btn btn-primary" onClick={() => go("catalog")}>Ver coleção</button>
      </div>
    );
  }

  const openWhatsApp = () => {
    const phone = window.MJ_WHATSAPP.phone;
    const url = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;
    window.open(url, "_blank");
  };

  return (
    <div className="wp-page">
      <div className="wp-icon"><Icon.WhatsApp s={42}/></div>
      <h1>Finalizar pelo WhatsApp</h1>
      <p>Sua mensagem está pronta. Clique em <strong>"Enviar pelo WhatsApp"</strong> e nossa equipe confirma o pedido e te envia o pagamento.</p>

      <div className="wp-preview">
        <div className="wp-msg">{message}<div className="wp-time">14:32 ✓✓</div></div>
      </div>

      <div style={{display:'flex', gap:10, justifyContent:'center', flexWrap:'wrap'}}>
        <button className="btn btn-wp btn-lg" onClick={openWhatsApp}>
          <Icon.WhatsApp s={18}/> Enviar pelo WhatsApp
        </button>
        <button className="btn btn-outline btn-lg" onClick={() => go("cart")}>Voltar ao carrinho</button>
      </div>

      <div style={{marginTop:36, padding:18, background:'var(--cream-50)', border:'1px solid var(--denim-100)', borderRadius:10, fontSize:13, color:'var(--ink-700)', textAlign:'left', maxWidth:520, marginLeft:'auto', marginRight:'auto'}}>
        <div style={{fontWeight:700, color:'var(--denim-900)', marginBottom:6, display:'flex', alignItems:'center', gap:8}}>
          <Icon.Pin s={14}/> Como funciona
        </div>
        <ol style={{margin:0, paddingLeft:18, lineHeight:1.7}}>
          <li>Você envia a mensagem com o resumo do pedido</li>
          <li>Nossa equipe responde em até 15 minutos confirmando estoque</li>
          <li>Enviamos o link de pagamento (PIX, cartão ou boleto)</li>
          <li>Após o pagamento, despachamos em até 24h úteis</li>
        </ol>
      </div>
    </div>
  );
}

// === Order confirmation (after checkout) ===
function ScreenConfirm({ lastOrder, go }) {
  if (!lastOrder) {
    return (
      <div className="wp-page">
        <h1>Nenhum pedido recente</h1>
        <button className="btn btn-primary" onClick={() => go("home")}>Voltar à loja</button>
      </div>
    );
  }
  return (
    <div className="wp-page">
      <div className="wp-icon" style={{background:'var(--success)'}}><Icon.Check s={42}/></div>
      <h1>Pedido confirmado!</h1>
      <p>Obrigada, <strong>{lastOrder.name?.split(" ")[0] || "cliente"}</strong>! Recebemos seu pedido <strong>#MJ{Date.now().toString().slice(-6)}</strong> e em breve enviaremos a confirmação por e-mail e WhatsApp.</p>
      <div style={{background:'var(--cream-50)', border:'1px solid var(--denim-100)', borderRadius:10, padding:22, textAlign:'left', maxWidth:520, margin:'0 auto 24px'}}>
        <div style={{fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', fontWeight:700, color:'var(--ink-500)', marginBottom:10}}>Resumo</div>
        {lastOrder.items.map((it, i) => (
          <div key={i} style={{display:'flex', justifyContent:'space-between', padding:'6px 0', fontSize:13, color:'var(--ink-700)'}}>
            <span>{it.product.name} · Tam {it.size}</span>
            <span style={{fontWeight:700, color:'var(--denim-900)'}}>{fmt(it.product.price * it.qty)}</span>
          </div>
        ))}
        <div style={{borderTop:'1px solid var(--denim-100)', marginTop:8, paddingTop:8, display:'flex', justifyContent:'space-between', fontWeight:700, color:'var(--denim-900)'}}>
          <span>Total</span><span>{fmt(lastOrder.total)}</span>
        </div>
      </div>
      <div style={{display:'flex', gap:10, justifyContent:'center', flexWrap:'wrap'}}>
        <button className="btn btn-primary" onClick={() => go("home")}>Voltar à loja</button>
        <button className="btn btn-outline" onClick={() => go("inst", { tab: "contato" })}>Falar no WhatsApp</button>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenCart, ScreenCheckout, ScreenWhatsApp, ScreenConfirm });