// ========= ModoLar — Checkout + CEP + Filtros avançados =========
/* global React, MODOLAR_DATA, Icon, Stars, fmtBRL, ProductCard */
const { useState: uSc, useEffect: uEc, useMemo: uMc } = React;

// ========== CATEGORY com filtros avançados ==========
function CategoryViewV2({ catId, navigate, onAdd, cardStyle }) {
  const cat = MODOLAR_DATA.getCategory(catId);
  const products = MODOLAR_DATA.getByCategory(catId);
  const [sort, setSort] = uSc('relevance');
  const [filters, setFilters] = uSc({
    promo: false, newOnly: false, priceRange: [0, 10000], colors: [], sizes: [], tecnologia: []
  });

  const allColors = [...new Set(products.flatMap(p => p.colors.map(c => c.name)))];
  const allSizes  = [...new Set(products.flatMap(p => p.sizes))];

  const sorted = uMc(() => {
    let list = [...products];
    if (filters.promo)  list = list.filter(p => p.discount > 0);
    if (filters.newOnly) list = list.filter(p => p.badges.some(b => /novidade|lançamento/i.test(b.label)));
    list = list.filter(p => p.price >= filters.priceRange[0] && p.price <= filters.priceRange[1]);
    if (filters.colors.length) list = list.filter(p => p.colors.some(c => filters.colors.includes(c.name)));
    if (filters.sizes.length)  list = list.filter(p => p.sizes.some(s => filters.sizes.includes(s)));
    if (sort === 'price-asc')  list.sort((a,b) => a.price - b.price);
    if (sort === 'price-desc') list.sort((a,b) => b.price - a.price);
    if (sort === 'rating')     list.sort((a,b) => b.rating - a.rating);
    if (sort === 'discount')   list.sort((a,b) => b.discount - a.discount);
    return list;
  }, [sort, filters, catId]);

  const toggleArr = (key, val) =>
    setFilters(f => ({ ...f, [key]: f[key].includes(val) ? f[key].filter(x => x !== val) : [...f[key], val] }));

  const activeCount = (filters.promo?1:0)+(filters.newOnly?1:0)+filters.colors.length+filters.sizes.length+(filters.priceRange[1]<10000?1:0);

  if (!cat) return null;

  return (
    <div className="shell" style={{paddingTop:32,paddingBottom:60}}>
      <div style={{fontSize:13,color:'var(--ink-500)',marginBottom:16}}>
        <a onClick={() => navigate({view:'home'})} style={{cursor:'pointer'}}>Início</a>
        <span style={{margin:'0 8px'}}>/</span>
        <span style={{color:'var(--ink)'}}>{cat.name}</span>
      </div>

      <div className="cat-hero fade-up">
        <div>
          <span className="section-eyebrow"><span className="capsule"/> {cat.tag}</span>
          <h1 style={{marginTop:10}}>{cat.name}</h1>
          <p style={{fontSize:18,color:'var(--ink-500)',maxWidth:440,lineHeight:1.5,marginTop:12}}>{cat.tagline}</p>
          <div className="meta">
            <span><strong>{products.length}</strong> modelos</span>
            <span><strong>Frete grátis</strong> Campinas</span>
            <span><strong>1 ano</strong> de garantia</span>
          </div>
        </div>
        <div style={{position:'relative',aspectRatio:'4/3',borderRadius:'var(--radius)',overflow:'hidden'}}>
          <img src={cat.cover} style={{width:'100%',height:'100%',objectFit:'cover'}} alt=""/>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'260px 1fr',gap:32}}>
        <aside style={{position:'sticky',top:90,alignSelf:'start',background:'#fff',padding:20,borderRadius:14,border:'1px solid var(--ink-100)',maxHeight:'calc(100vh - 110px)',overflowY:'auto'}}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:18}}>
            <h4 style={{fontSize:15}}>Filtros {activeCount>0 && <span style={{background:'var(--orange)',color:'#fff',fontSize:11,padding:'2px 7px',borderRadius:99,marginLeft:6}}>{activeCount}</span>}</h4>
            {activeCount>0 && <button style={{fontSize:12,color:'var(--orange)',fontWeight:600}} onClick={() => setFilters({promo:false,newOnly:false,priceRange:[0,10000],colors:[],sizes:[],tecnologia:[]})}>Limpar</button>}
          </div>
          <div style={{marginBottom:22}}>
            <div style={{fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',color:'var(--ink-500)',fontWeight:700,marginBottom:10}}>Ofertas</div>
            <label style={{display:'flex',alignItems:'center',gap:10,fontSize:13,marginBottom:8,cursor:'pointer'}}>
              <input type="checkbox" checked={filters.promo} onChange={e => setFilters(f=>({...f,promo:e.target.checked}))}/>Em promoção
            </label>
            <label style={{display:'flex',alignItems:'center',gap:10,fontSize:13,cursor:'pointer'}}>
              <input type="checkbox" checked={filters.newOnly} onChange={e => setFilters(f=>({...f,newOnly:e.target.checked}))}/>Novidades
            </label>
          </div>
          <div style={{marginBottom:22}}>
            <div style={{fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',color:'var(--ink-500)',fontWeight:700,marginBottom:10}}>Faixa de preço</div>
            <div style={{fontSize:13,fontWeight:600,marginBottom:8}}>Até R$ {fmtBRL(filters.priceRange[1]).replace(',00','')}</div>
            <input type="range" min="1000" max="10000" step="500" value={filters.priceRange[1]}
              onChange={e => setFilters(f=>({...f,priceRange:[0,+e.target.value]}))}
              style={{width:'100%',accentColor:'var(--orange)'}}/>
            <div style={{display:'flex',justifyContent:'space-between',fontSize:11,color:'var(--ink-500)',marginTop:4}}><span>R$ 1.000</span><span>R$ 10.000</span></div>
          </div>
          <div style={{marginBottom:22}}>
            <div style={{fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',color:'var(--ink-500)',fontWeight:700,marginBottom:10}}>Cor</div>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              {allColors.map(c => {
                const hex = products.flatMap(p=>p.colors).find(cc=>cc.name===c)?.hex;
                return (
                  <label key={c} style={{display:'flex',alignItems:'center',gap:10,fontSize:13,cursor:'pointer'}}>
                    <input type="checkbox" checked={filters.colors.includes(c)} onChange={()=>toggleArr('colors',c)}/>
                    <span className="swatch" style={{background:hex}}/>{c}
                  </label>
                );
              })}
            </div>
          </div>
          <div style={{marginBottom:22}}>
            <div style={{fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',color:'var(--ink-500)',fontWeight:700,marginBottom:10}}>Tamanho</div>
            <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
              {allSizes.map(s => (
                <button key={s} onClick={()=>toggleArr('sizes',s)}
                  style={{padding:'6px 12px',border:'1.5px solid var(--ink-200)',borderRadius:8,fontSize:12,fontWeight:500,
                    background:filters.sizes.includes(s)?'var(--orange)':'#fff',
                    color:filters.sizes.includes(s)?'#fff':'var(--ink)',
                    borderColor:filters.sizes.includes(s)?'var(--orange)':'var(--ink-200)'}}>{s}</button>
              ))}
            </div>
          </div>
        </aside>

        <div>
          <div className="filter-bar">
            <div style={{fontSize:14,color:'var(--ink-500)'}}><strong style={{color:'var(--ink)'}}>{sorted.length}</strong> produtos encontrados</div>
            <select className="sort-select" value={sort} onChange={e=>setSort(e.target.value)}>
              <option value="relevance">Mais relevantes</option>
              <option value="price-asc">Menor preço</option>
              <option value="price-desc">Maior preço</option>
              <option value="rating">Melhor avaliados</option>
              <option value="discount">Maior desconto</option>
            </select>
          </div>
          {sorted.length === 0 ? (
            <div style={{padding:60,textAlign:'center',background:'#fff',borderRadius:14}}>
              <h3 style={{fontSize:22}}>Nenhum produto encontrado</h3>
              <p style={{color:'var(--ink-500)',marginTop:10}}>Tente ajustar os filtros</p>
            </div>
          ) : (
            <div className="products-grid" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
              {sorted.map(p => (
                <ProductCard key={p.id} product={p} cardStyle={cardStyle}
                  onClick={()=>navigate({view:'product',productId:p.id})} onAdd={onAdd}/>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ========== CEP ==========
function validateCEP(cep) {
  const clean = cep.replace(/\D/g,'');
  if (clean.length !== 8) return { valid: false, msg: 'CEP incompleto' };
  const prefix = parseInt(clean.slice(0,5));
  if (prefix >= 13000 && prefix <= 13139) return { valid:true, region:'campinas', freight:0, days:'1-3 dias úteis', label:'Campinas — frete grátis' };
  if (prefix >= 13140 && prefix <= 13999) return { valid:true, region:'ram', freight:150, days:'3-5 dias úteis', label:'Região metropolitana — R$ 150' };
  if (prefix >= 1000  && prefix <= 19999) return { valid:true, region:'sp',  freight:350, days:'5-8 dias úteis', label:'Interior de SP — R$ 350' };
  return { valid: false, msg: 'Não atendemos essa região ainda 😢' };
}

function CEPField({ cep, setCep, result, onCheck }) {
  const fmtCep = v => v.replace(/\D/g,'').replace(/(\d{5})(\d)/,'$1-$2').slice(0,9);
  return (
    <div style={{background:'#fff',border:'1px solid var(--ink-200)',borderRadius:12,padding:16}}>
      <div style={{fontSize:13,fontWeight:600,marginBottom:10,display:'flex',alignItems:'center',gap:8}}>
        <Icon.Truck size={16}/> Consultar frete e prazo
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr auto',gap:8}}>
        <input value={cep} onChange={e=>setCep(fmtCep(e.target.value))} onKeyDown={e=>e.key==='Enter'&&onCheck()}
          placeholder="00000-000"
          style={{padding:'10px 12px',border:'1.5px solid var(--ink-200)',borderRadius:10,fontSize:14,fontFamily:'inherit',outline:'none'}}/>
        <button className="btn btn-dark" style={{padding:'10px 16px'}} onClick={onCheck}>Consultar</button>
      </div>
      {result && (
        <div style={{marginTop:12,padding:12,background:result.valid?(result.region==='campinas'?'var(--orange-50)':'#F0FDF4'):'#FEF2F2',borderRadius:10,fontSize:13}}>
          {result.valid ? (
            <>
              <div style={{fontWeight:600,color:result.region==='campinas'?'var(--orange-600)':'#166534',display:'flex',alignItems:'center',gap:6}}>
                <Icon.Check size={14}/>{result.label}
              </div>
              <div style={{color:'var(--ink-500)',marginTop:4}}>Prazo: {result.days}</div>
            </>
          ) : <div style={{color:'#991B1B'}}>{result.msg}</div>}
        </div>
      )}
      <a style={{fontSize:11,color:'var(--ink-500)',marginTop:8,display:'block',cursor:'pointer'}} target="_blank" rel="noopener" href="https://buscacepinter.correios.com.br/">Não sei meu CEP</a>
    </div>
  );
}

// ========== CHECKOUT ==========
function CheckoutView({ cart, phone, navigate, clearCart, applyCoupon, coupon }) {
  const [data, setData] = uSc({name:'',phone:'',cep:'',address:'',number:'',complement:'',neighborhood:'',note:'',paymentMethod:'pix'});
  const [cepResult, setCepResult] = uSc(null);
  const [couponInput, setCouponInput] = uSc('');
  const [couponMsg, setCouponMsg] = uSc(null);
  const [submitted, setSubmitted] = uSc(false);
  const [sending, setSending] = uSc(false);

  const subtotal = cart.reduce((s,it) => s + it.price * it._qty, 0);
  const freight  = cepResult?.valid ? cepResult.freight : 0;
  const discount = coupon ? coupon.amount : 0;
  const total    = subtotal + freight - discount;

  const checkCep = () => setCepResult(validateCEP(data.cep));

  const applyCoup = async () => {
    const c = couponInput.trim().toUpperCase();
    if (!c) return;
    try {
      const r = await fetch('/api/validate-coupon', {
        method: 'POST', headers: {'Content-Type':'application/json'},
        body: JSON.stringify({ code: c, subtotal })
      }).then(r => r.json());
      if (r.valid) {
        applyCoupon({ code: r.code, amount: r.amount, type: r.type });
        setCouponMsg({ ok: true, msg: r.msg });
      } else {
        setCouponMsg({ ok: false, msg: r.msg });
        applyCoupon(null);
      }
    } catch {
      setCouponMsg({ ok: false, msg: 'Erro ao validar cupom' });
    }
  };

  const canAdvance1 = data.name && data.phone.replace(/\D/g,'').length >= 10;
  const canAdvance2 = cepResult?.valid && data.address && data.number;

  const sendPedido = async () => {
    setSending(true);
    try {
      await fetch('/api/orders', {
        method: 'POST', headers: {'Content-Type':'application/json'},
        body: JSON.stringify({
          customerName: data.name,
          customerPhone: data.phone.replace(/\D/g,''),
          address: data.address, addressNumber: data.number,
          complement: data.complement, neighborhood: data.neighborhood,
          cep: data.cep, freight, subtotal, discount, total,
          couponCode: coupon?.code, paymentMethod: data.paymentMethod, note: data.note,
          items: cart.map(it => ({ ...it }))
        })
      });
    } catch { /* continua mesmo se API falhar */ }

    let msg = `*Novo pedido ModoLar* 🧡\n\n*Cliente:* ${data.name}\n*Telefone:* ${data.phone}\n*Endereço:* ${data.address}, ${data.number}${data.complement?` — ${data.complement}`:''}\n*Bairro:* ${data.neighborhood}\n*CEP:* ${data.cep}\n\n*Itens:*\n`;
    cart.forEach((it,i) => {
      msg += `${i+1}. ${it.shortName} — ${it._color}${it._size?` / ${it._size}`:''} — ${it._qty}x — R$ ${fmtBRL(it.price*it._qty)}\n`;
    });
    msg += `\n*Subtotal:* R$ ${fmtBRL(subtotal)}\n`;
    if (coupon) msg += `*Cupom ${coupon.code}:* −R$ ${fmtBRL(coupon.amount)}\n`;
    msg += `*Frete:* ${freight===0?'GRÁTIS':`R$ ${fmtBRL(freight)}`}\n`;
    msg += `*TOTAL: R$ ${fmtBRL(total)}*\n\n`;
    if (data.note) msg += `*Observações:* ${data.note}\n\n`;
    msg += `Pagamento na entrega. Aguardo confirmação!`;
    const whatsappPhone = (window._MODOLAR_PHONE || phone).replace(/\D/g,'');
    window.open(`https://wa.me/55${whatsappPhone}?text=${encodeURIComponent(msg)}`, '_blank');
    setSubmitted(true);
    setSending(false);
    setTimeout(() => { clearCart(); navigate({view:'home'}); }, 4000);
  };

  if (submitted) {
    return (
      <div className="shell" style={{padding:'80px 0',textAlign:'center'}}>
        <div style={{width:80,height:80,margin:'0 auto 24px',background:'var(--wa)',borderRadius:99,display:'grid',placeItems:'center',color:'#fff'}}>
          <Icon.Check size={40}/>
        </div>
        <h1 style={{fontSize:36}}>Pedido enviado!</h1>
        <p style={{fontSize:17,color:'var(--ink-500)',marginTop:12,maxWidth:480,marginInline:'auto'}}>
          Seu pedido foi enviado ao WhatsApp. Nossa equipe vai confirmar em poucos minutos.
        </p>
        <button className="btn btn-orange btn-lg" style={{marginTop:32}} onClick={()=>navigate({view:'home'})}>Voltar ao início</button>
      </div>
    );
  }

  return (
    <div className="shell" style={{padding:'32px 0 60px'}}>
      <div style={{fontSize:13,color:'var(--ink-500)',marginBottom:20}}>
        <a onClick={()=>navigate({view:'home'})} style={{cursor:'pointer'}}>Início</a>
        <span style={{margin:'0 8px'}}>/</span>
        <span style={{color:'var(--ink)'}}>Finalizar pedido</span>
      </div>
      <h1 style={{fontSize:36,marginBottom:6}}>Finalizar pedido</h1>
      <p style={{fontSize:15,color:'var(--ink-500)',marginBottom:32}}>Preencha os dados — o pedido vai ser enviado ao nosso WhatsApp com tudo pronto.</p>

      <div style={{display:'grid',gridTemplateColumns:'1.3fr 1fr',gap:32,alignItems:'start'}}>
        <div style={{display:'flex',flexDirection:'column',gap:16}}>
          <div style={{display:'flex',gap:8,marginBottom:8}}>
            {[1,2,3].map(s => (
              <div key={s} style={{flex:1,height:6,borderRadius:99,background:(canAdvance1&&s>=1)||(canAdvance2&&s>=2)||(s>=3)?'var(--orange)':'var(--ink-200)',transition:'background .2s'}}/>
            ))}
          </div>

          <div style={{background:'#fff',borderRadius:14,padding:24,border:'1px solid var(--ink-100)'}}>
            <h3 style={{fontSize:18,marginBottom:4}}>1. Seus dados</h3>
            <p style={{fontSize:13,color:'var(--ink-500)',marginBottom:18}}>Pra gente te contatar no WhatsApp</p>
            <div style={{display:'flex',flexDirection:'column',gap:14}}>
              <label className="field">
                <span style={{fontSize:12,fontWeight:600,marginBottom:4,display:'block'}}>Nome completo *</span>
                <input value={data.name} onChange={e=>setData({...data,name:e.target.value})}
                  style={{padding:'11px 13px',border:'1.5px solid var(--ink-200)',borderRadius:10,width:'100%',fontFamily:'inherit',fontSize:14,outline:'none'}}/>
              </label>
              <label className="field">
                <span style={{fontSize:12,fontWeight:600,marginBottom:4,display:'block'}}>WhatsApp *</span>
                <input value={data.phone} onChange={e=>setData({...data,phone:e.target.value.replace(/\D/g,'').replace(/(\d{2})(\d)/,'($1) $2').replace(/(\d{5})(\d)/,'$1-$2').slice(0,15)})}
                  placeholder="(19) 99999-9999"
                  style={{padding:'11px 13px',border:'1.5px solid var(--ink-200)',borderRadius:10,width:'100%',fontFamily:'inherit',fontSize:14,outline:'none'}}/>
              </label>
            </div>
          </div>

          <div style={{background:'#fff',borderRadius:14,padding:24,border:'1px solid var(--ink-100)'}}>
            <h3 style={{fontSize:18,marginBottom:4}}>2. Endereço de entrega</h3>
            <p style={{fontSize:13,color:'var(--ink-500)',marginBottom:18}}>Entregamos toda Campinas e região metropolitana</p>
            <div style={{marginBottom:14}}>
              <CEPField cep={data.cep} setCep={v=>setData({...data,cep:v})} result={cepResult} onCheck={checkCep}/>
            </div>
            {cepResult?.valid && (
              <div style={{display:'grid',gridTemplateColumns:'1fr 140px',gap:10,marginTop:14}}>
                <label className="field" style={{gridColumn:'1/-1'}}>
                  <span style={{fontSize:12,fontWeight:600,marginBottom:4,display:'block'}}>Rua *</span>
                  <input value={data.address} onChange={e=>setData({...data,address:e.target.value})}
                    style={{padding:'11px 13px',border:'1.5px solid var(--ink-200)',borderRadius:10,width:'100%',fontFamily:'inherit',fontSize:14,outline:'none'}}/>
                </label>
                <label className="field">
                  <span style={{fontSize:12,fontWeight:600,marginBottom:4,display:'block'}}>Número *</span>
                  <input value={data.number} onChange={e=>setData({...data,number:e.target.value})}
                    style={{padding:'11px 13px',border:'1.5px solid var(--ink-200)',borderRadius:10,width:'100%',fontFamily:'inherit',fontSize:14,outline:'none'}}/>
                </label>
                <label className="field">
                  <span style={{fontSize:12,fontWeight:600,marginBottom:4,display:'block'}}>Complemento</span>
                  <input value={data.complement} onChange={e=>setData({...data,complement:e.target.value})}
                    style={{padding:'11px 13px',border:'1.5px solid var(--ink-200)',borderRadius:10,width:'100%',fontFamily:'inherit',fontSize:14,outline:'none'}}/>
                </label>
                <label className="field" style={{gridColumn:'1/-1'}}>
                  <span style={{fontSize:12,fontWeight:600,marginBottom:4,display:'block'}}>Bairro</span>
                  <input value={data.neighborhood} onChange={e=>setData({...data,neighborhood:e.target.value})}
                    style={{padding:'11px 13px',border:'1.5px solid var(--ink-200)',borderRadius:10,width:'100%',fontFamily:'inherit',fontSize:14,outline:'none'}}/>
                </label>
              </div>
            )}
          </div>

          <div style={{background:'#fff',borderRadius:14,padding:24,border:'1px solid var(--ink-100)'}}>
            <h3 style={{fontSize:18,marginBottom:4}}>3. Pagamento na entrega</h3>
            <p style={{fontSize:13,color:'var(--ink-500)',marginBottom:18}}>Escolha como vai pagar quando receber</p>
            <div style={{display:'flex',flexDirection:'column',gap:10}}>
              {[{id:'pix',name:'PIX na entrega',desc:'Pague direto ao entregador • +1% desconto',icon:'💸'},
                {id:'card',name:'Cartão na entrega',desc:'Crédito em até 12x sem juros • Maquininha no local',icon:'💳'},
                {id:'cash',name:'Dinheiro',desc:'Avise se precisa de troco',icon:'💵'}
              ].map(opt => (
                <label key={opt.id} style={{display:'flex',alignItems:'center',gap:14,padding:14,border:`1.5px solid ${data.paymentMethod===opt.id?'var(--orange)':'var(--ink-200)'}`,borderRadius:12,cursor:'pointer',background:data.paymentMethod===opt.id?'var(--orange-50)':'#fff'}}>
                  <input type="radio" name="payment" checked={data.paymentMethod===opt.id} onChange={()=>setData({...data,paymentMethod:opt.id})}/>
                  <span style={{fontSize:22}}>{opt.icon}</span>
                  <div>
                    <div style={{fontWeight:600,fontSize:14}}>{opt.name}</div>
                    <div style={{fontSize:12,color:'var(--ink-500)',marginTop:2}}>{opt.desc}</div>
                  </div>
                </label>
              ))}
            </div>
            <label className="field" style={{marginTop:16}}>
              <span style={{fontSize:12,fontWeight:600,marginBottom:4,display:'block'}}>Observações (opcional)</span>
              <textarea value={data.note} onChange={e=>setData({...data,note:e.target.value})} rows={3}
                placeholder="Ex: 'Portaria fecha às 22h', 'Troco para R$ 500'..."
                style={{padding:'11px 13px',border:'1.5px solid var(--ink-200)',borderRadius:10,width:'100%',fontFamily:'inherit',fontSize:14,outline:'none',resize:'vertical'}}/>
            </label>
          </div>
        </div>

        <aside style={{position:'sticky',top:90,background:'#fff',borderRadius:14,border:'1px solid var(--ink-100)',overflow:'hidden'}}>
          <div style={{padding:20,borderBottom:'1px solid var(--ink-100)'}}>
            <h3 style={{fontSize:18}}>Resumo do pedido</h3>
          </div>
          <div style={{padding:16,maxHeight:260,overflowY:'auto'}}>
            {cart.map((it,i) => (
              <div key={i} style={{display:'grid',gridTemplateColumns:'52px 1fr auto',gap:10,alignItems:'center',padding:'8px 0',borderBottom:i<cart.length-1?'1px solid var(--ink-100)':'none'}}>
                <img src={it.images[0]} style={{width:52,height:52,objectFit:'cover',borderRadius:8}}/>
                <div>
                  <div style={{fontSize:13,fontWeight:600}}>{it.shortName}</div>
                  <div style={{fontSize:11,color:'var(--ink-500)'}}>{it._color} • {it._qty}x</div>
                </div>
                <div style={{fontSize:13,fontWeight:700,fontFamily:'Space Grotesk'}}>R$ {fmtBRL(it.price*it._qty).replace(',00','')}</div>
              </div>
            ))}
          </div>
          <div style={{padding:16,borderTop:'1px solid var(--ink-100)'}}>
            <div style={{fontSize:12,fontWeight:600,marginBottom:6}}>Cupom de desconto</div>
            <div style={{display:'grid',gridTemplateColumns:'1fr auto',gap:6}}>
              <input value={couponInput} onChange={e=>setCouponInput(e.target.value.toUpperCase())} placeholder="Ex: ESTREIA10"
                style={{padding:'9px 11px',border:'1.5px solid var(--ink-200)',borderRadius:8,fontSize:13,fontFamily:'inherit',outline:'none'}}/>
              <button className="btn btn-ghost" style={{padding:'9px 14px',fontSize:13}} onClick={applyCoup}>Aplicar</button>
            </div>
            {couponMsg && <div style={{fontSize:12,color:couponMsg.ok?'var(--wa-600)':'var(--red)',marginTop:6,fontWeight:600}}>{couponMsg.msg}</div>}
          </div>
          <div style={{padding:20,borderTop:'1px solid var(--ink-100)',background:'#FAFAF7',display:'flex',flexDirection:'column',gap:8,fontSize:14}}>
            <div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--ink-500)'}}>Subtotal</span><span>R$ {fmtBRL(subtotal)}</span></div>
            {coupon && <div style={{display:'flex',justifyContent:'space-between',color:'var(--wa-600)'}}><span>Cupom {coupon.code}</span><span>−R$ {fmtBRL(coupon.amount)}</span></div>}
            <div style={{display:'flex',justifyContent:'space-between'}}>
              <span style={{color:'var(--ink-500)'}}>Frete</span>
              <span style={{color:freight===0?'var(--wa-600)':'var(--ink)',fontWeight:freight===0?700:400}}>
                {cepResult?.valid?(freight===0?'GRÁTIS':`R$ ${fmtBRL(freight)}`):'—'}
              </span>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',paddingTop:10,borderTop:'1px solid var(--ink-200)',fontSize:18,fontWeight:700}}>
              <span>Total</span>
              <span style={{fontFamily:'Space Grotesk',color:'var(--orange)'}}>R$ {fmtBRL(total)}</span>
            </div>
            <div style={{fontSize:12,color:'var(--ink-500)',textAlign:'right'}}>ou 12x de R$ {fmtBRL(total/12)} sem juros</div>
          </div>
          <div style={{padding:20,borderTop:'1px solid var(--ink-100)'}}>
            <button
              onClick={sendPedido}
              disabled={!canAdvance1||!canAdvance2||sending}
              style={{
                width:'100%',justifyContent:'center',padding:16,
                opacity:(canAdvance1&&canAdvance2&&!sending)?1:0.5,
                pointerEvents:(canAdvance1&&canAdvance2&&!sending)?'all':'none',
                background:'var(--wa)',color:'#fff',borderRadius:12,fontWeight:700,fontSize:15,
                display:'flex',alignItems:'center',gap:10,border:'none',cursor:'pointer'
              }}>
              <Icon.WhatsApp size={18}/> {sending?'Enviando...':'Enviar pedido pelo WhatsApp'}
            </button>
            <p style={{fontSize:11,color:'var(--ink-500)',textAlign:'center',marginTop:10,lineHeight:1.5}}>
              Ao enviar, você concorda com nossas <a style={{textDecoration:'underline'}}>políticas de entrega</a>.<br/>
              Nossa equipe vai confirmar disponibilidade e data.
            </p>
          </div>
        </aside>
      </div>
    </div>
  );
}

Object.assign(window, { CategoryViewV2, CheckoutView, validateCEP });