/* ============================================================
   LF CONCEITO — VITRINE parte 3: checkout, login, conta
   ============================================================ */

function CheckoutPage(){
  const { cart, cartTotal, nav, clearCart, saveOrder, validateCoupon, products, storeConfig } = window.useStore();
  const cfg = storeConfig || {};
  const P = products || PRODUCTS;
  const pixDiscountPct = cfg.pix_discount_pct!=null ? parseFloat(cfg.pix_discount_pct) : 5;
  const installmentsMax = cfg.installments_max!=null ? parseInt(cfg.installments_max) : 12;
  let whatsPhone = (cfg.store_whatsapp||"5585921495164").replace(/\D/g,"");
  if(whatsPhone.length<=11) whatsPhone = "55"+whatsPhone;
  const payMethods = [
    ["Pix","pix",pixDiscountPct+"% de desconto","payment_pix"],
    ["Cartão","cart","até "+installmentsMax+"×","payment_card"],
  ].filter(([,,,k])=>cfgBool(cfg[k]));
  const [step,setStep] = useState(1);
  const [pay,setPay] = useState("Pix");
  useEffect(()=>{
    if(!payMethods.find(([m])=>m===pay) && payMethods[0]) setPay(payMethods[0][0]);
  },[]);
  const [coupon,setCoupon] = useState("");
  const [applied,setApplied] = useState(null);
  const [couponErr,setCouponErr] = useState("");
  const [done,setDone] = useState(false);
  const [orderCode,setOrderCode] = useState("");
  const [loading,setLoading] = useState(false);

  // Form fields
  const [nome,setNome] = useState("");
  const [email,setEmail] = useState("");
  const [fone,setFone] = useState("");
  const [rua,setRua] = useState("");
  const [num,setNum] = useState("");
  const [bairro,setBairro] = useState("");

  const baseFreight = 0; // toda compra com entrega tem frete gratis
  const discount = applied ? (applied.type==="percent"? cartTotal*applied.value/100 : applied.value) : 0;
  const pixDisc = pay==="Pix" ? (cartTotal-discount)*(pixDiscountPct/100) : 0;
  const total = Math.max(0, cartTotal-discount-pixDisc+baseFreight);

  const applyCoupon = async ()=>{
    setCouponErr("");
    if(!coupon){ setCouponErr("Digite um cupom"); return; }
    const r = await validateCoupon(coupon, cartTotal);
    if(r.valid){ setApplied(r.coupon); }
    else { setCouponErr(r.message); setApplied(null); }
  };

  const [pixData,setPixData] = useState(null);
  const [finalTotal,setFinalTotal] = useState(0);
  const [timeLeft,setTimeLeft] = useState(10*60);
  const [expired,setExpired] = useState(false);
  const [paid,setPaid] = useState(false);

  // Polling: verifica se pagamento foi confirmado a cada 5 segundos
  useEffect(()=>{
    if(!done || pay !== "Pix" || !pixData || paid) return;
    const poll = setInterval(async()=>{
      try {
        const status = await window.DB.fetchOrderStatus(orderCode);
        if(status === "Pago"){ setPaid(true); clearInterval(poll); }
      } catch(e) {}
    }, 5000);
    return ()=>clearInterval(poll);
  },[done, paid, orderCode]);

  // Timer de expiração
  // Ref para garantir orderCode atualizado dentro do setInterval
  const orderCodeRef = React.useRef(orderCode);
  useEffect(()=>{ orderCodeRef.current = orderCode; },[orderCode]);

  useEffect(()=>{
    if(!done || pay !== "Pix" || !pixData || paid || expired) return;
    const interval = setInterval(()=>{
      setTimeLeft(t => {
        if(t <= 1){
          clearInterval(interval);
          setExpired(true);
          const code = orderCodeRef.current;
          if(code && window.DB && window.DB.cancelOrder) {
            window.DB.cancelOrder(code).then(()=>{
              if(window.refreshProducts) window.refreshProducts();
            }).catch(e => console.error("cancelOrder erro:", e));
          }
          return 0;
        }
        return t - 1;
      });
    }, 1000);
    return ()=>clearInterval(interval);
  },[done, paid, expired]);

  const confirmOrder = async ()=>{
    if(!nome||!fone){ alert("Preencha nome e celular"); return; }
    setLoading(true);
    try {
      const ANON_KEY = window._ANON_KEY || "";
      let authToken = ANON_KEY;
      try {
        const { data: { session } } = await window._sb.auth.getSession();
        if (session?.access_token) authToken = session.access_token;
      } catch(e) {}

      // 1. Criar pedido server-side
      const items = cart.map(it=>({
        id: it.id, qty: it.qty, size: it.size,
        color: it.color, tone: P.find(x=>x.id===it.id)?.tone||"",
        kind: P.find(x=>x.id===it.id)?.kind||"",
      }));

      const orderRes = await fetch("https://gwbiccrzoeppvfzpaqji.supabase.co/functions/v1/create-order", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Authorization": `Bearer ${authToken}`, "apikey": ANON_KEY },
        body: JSON.stringify({
          customer: nome, customer_email: email, customer_phone: fone,
          address: `${rua}${num ? ", "+num : ""}${bairro ? " — "+bairro : ""}`.trim(),
          payment: pay, coupon_code: applied?.code || null, items,
        }),
      });
      const orderData = await orderRes.json();
      if (!orderRes.ok) throw new Error(orderData.error || "Erro ao criar pedido");

      setOrderCode(orderData.code);

      // 2. Processar pagamento via Mercado Pago
      const mpMethod = pay === "Pix" ? "pix" : "checkout_pro";
      const mpRes = await fetch("https://gwbiccrzoeppvfzpaqji.supabase.co/functions/v1/mp-payment", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Authorization": `Bearer ${authToken}`, "apikey": ANON_KEY },
        body: JSON.stringify({
          order_id: orderData.order_id,
          payment_method: mpMethod,
          payer: { email: email || "cliente@lfconceito.com" },
        }),
      });
      const mpData = await mpRes.json();

      if (!mpRes.ok) throw new Error(mpData.error || "Erro no pagamento");

      setFinalTotal(orderData.total || total);
      clearCart();
      // Recarregar produtos para refletir estoque atualizado
      if(window.refreshProducts) window.refreshProducts();

      if (mpMethod === "pix") {
        // Mostrar QR Code Pix
        setPixData({
          qr_code: mpData.qr_code,
          qr_code_base64: mpData.qr_code_base64,
        });
        setDone(true);
      } else {
        // Redirecionar para Checkout Pro do Mercado Pago
        if (mpData.init_point) {
          window.location.href = mpData.init_point;
        } else {
          setDone(true);
        }
      }
    } catch(e){
      alert("Erro ao finalizar: "+e.message);
    } finally { setLoading(false); }
  };

  if(cart.length===0&&!done) return (
    <div className="wrap co-empty">
      <Icon name="bag" size={44}/>
      <h2 className="serif">Sua sacola está vazia</h2>
      <Btn variant="gold" onClick={()=>nav("#/c/tenis")} style={{marginTop:20}}>Ver produtos</Btn>
    </div>
  );

  if(done) {
    const mins = String(Math.floor(timeLeft/60)).padStart(2,"0");
    const secs = String(timeLeft%60).padStart(2,"0");

    return (
    <div className="wrap co-done fade-in">
      <div className="co-done-ic"><Icon name="check" size={38}/></div>
      <div className="eyebrow">Pedido confirmado</div>
      <h1 className="serif">Obrigado pela compra!</h1>
      <p>Seu pedido <b className="mono gold-text">#{orderCode}</b> foi recebido.</p>

      {pay==="Pix" && pixData && (
        <div style={{background:"var(--ink-3)",border:"1px solid var(--line-2)",borderRadius:12,
          padding:"24px",margin:"20px 0",textAlign:"center"}}>
          <div className="label-caps" style={{marginBottom:12,color:"var(--gold-2)"}}>Pague com Pix</div>

          {paid ? (
            <div style={{padding:"20px 0"}}>
              <div style={{fontSize:48}}>✅</div>
              <p style={{color:"var(--green)",fontWeight:800,fontSize:18,margin:"12px 0 4px"}}>Pagamento confirmado!</p>
              <p style={{color:"var(--muted)",fontSize:14,margin:0}}>
                Seu pedido <b className="mono gold-text">#{orderCode}</b> foi pago com sucesso.
              </p>
              <p style={{color:"var(--muted)",fontSize:13,marginTop:8}}>
                Em breve entraremos em contato pelo WhatsApp. 🛍️
              </p>
            </div>
          ) : expired ? (
            <div style={{padding:"20px 0"}}>
              <div style={{fontSize:36}}>⏰</div>
              <p style={{color:"var(--red)",fontWeight:700,margin:"8px 0 4px"}}>Tempo expirado</p>
              <p style={{color:"var(--muted)",fontSize:13,margin:0}}>
                O QR Code expirou. Seu pedido foi cancelado automaticamente.
              </p>
              <Btn variant="gold" style={{marginTop:16}} onClick={()=>nav("#/")}>
                Voltar à loja
              </Btn>
            </div>
          ) : (
            <>
              <div style={{display:"inline-flex",alignItems:"center",gap:8,background:"var(--ink-2)",
                borderRadius:8,padding:"6px 16px",marginBottom:16}}>
                <span style={{fontSize:13,color:"var(--muted)"}}>Tempo para pagar:</span>
                <span style={{
                  fontSize:20,fontWeight:900,fontFamily:"monospace",
                  color: timeLeft <= 60 ? "var(--red)" : timeLeft <= 180 ? "#f59e0b" : "var(--green)"
                }}>{mins}:{secs}</span>
              </div>

              {pixData.qr_code_base64 && (
                <img src={`data:image/png;base64,${pixData.qr_code_base64}`}
                  alt="QR Code Pix" style={{width:200,height:200,margin:"0 auto 16px",display:"block"}}/>
              )}
              {pixData.qr_code && (
                <>
                  <div style={{fontSize:11,color:"var(--muted)",marginBottom:8}}>Ou copie o código:</div>
                  <div className="mono" style={{fontSize:11,wordBreak:"break-all",padding:"8px 12px",
                    background:"var(--ink-2)",borderRadius:6,marginBottom:12}}>{pixData.qr_code}</div>
                  <Btn variant="gold" onClick={()=>navigator.clipboard?.writeText(pixData.qr_code)}>
                    Copiar código Pix
                  </Btn>
                </>
              )}
              <p style={{fontSize:13,color:"var(--muted)",marginTop:12}}>
                ⚡ Aprovação imediata após o pagamento
              </p>
            </>
          )}
        </div>
      )}

      {pay==="Pix" && !pixData && (
        <div style={{background:"var(--ink-3)",border:"1px solid var(--line-2)",borderRadius:6,
          padding:"16px 24px",margin:"16px 0",textAlign:"center"}}>
          <div className="label-caps" style={{marginBottom:6}}>Chave Pix</div>
          <div className="mono" style={{fontSize:16,fontWeight:700}}>{cfg.pix_key||"lfconceito2030@gmail.com"}</div>
          <div className="cell-dim" style={{marginTop:4}}>Titular: {cfg.pix_name||"Luis Fernando"} · {cfg.store_name||"LF Conceito"}</div>
          <Btn variant="ghost" style={{marginTop:12}}
            onClick={()=>navigator.clipboard?.writeText(cfg.pix_key||"lfconceito2030@gmail.com")}>
            Copiar chave
          </Btn>
        </div>
      )}

      <div className="co-done-box">
        <div className="co-done-row"><span>Total</span><b className="mono">{fmt(finalTotal)}</b></div>
        <div className="co-done-row"><span>Pagamento</span><b>{pay}</b></div>

      </div>
      <div style={{display:"flex",gap:12,justifyContent:"center",flexWrap:"wrap",marginTop:20}}>
        <Btn variant="gold" size="lg" onClick={()=>nav("#/")}>Voltar à loja</Btn>
        <a href={"https://wa.me/"+whatsPhone+"?text=Olá!%20Fiz%20o%20pedido%20"+orderCode+"%20e%20quero%20confirmar."}
          target="_blank" rel="noopener noreferrer">
          <Btn variant="ghost">Confirmar pelo WhatsApp</Btn>
        </a>
      </div>
    </div>
  );
  }

  return (
    <div className="wrap co fade-in">
      <div className="co-head">
        <h1 className="serif">Finalizar compra</h1>
        <div className="co-steps">
          {["Identificação","Entrega","Pagamento"].map((s,i)=>
            <div key={s} className={"co-step "+(step>=i+1?"on":"")}>
              <span className="co-step-n">{step>i+1?<Icon name="check" size={13}/>:i+1}</span>{s}
            </div>)}
        </div>
      </div>
      <div className="co-grid">
        <div className="co-main">
          {/* Step 1 */}
          <section className={"co-sec "+(step===1?"open":"")}>
            <button className="co-sec-head" onClick={()=>setStep(1)}>
              <span className="co-sec-n">1</span> Identificação
            </button>
            {step===1&&<div className="co-sec-body fade-in">
              <div className="ff"><label>Nome completo *</label>
                <input value={nome} onChange={e=>setNome(e.target.value)} placeholder="Seu nome"/></div>
              <div className="ff-row">
                <div className="ff"><label>E-mail</label>
                  <input value={email} onChange={e=>setEmail(e.target.value)} placeholder="voce@email.com" type="email"/></div>
                <div className="ff"><label>Celular / WhatsApp *</label>
                  <input value={fone} onChange={e=>setFone(e.target.value)} placeholder="(85) 9 0000-0000"/></div>
              </div>
              <Btn variant="gold" onClick={()=>{if(!nome||!fone){alert("Nome e celular são obrigatórios");return;}setStep(2);}} iconR="arrowR">
                Continuar
              </Btn>
            </div>}
          </section>

          {/* Step 2 */}
          <section className={"co-sec "+(step===2?"open":"")}>
            <button className="co-sec-head" onClick={()=>step>1&&setStep(2)}>
              <span className="co-sec-n">2</span> Entrega
            </button>
            {step===2&&<div className="co-sec-body fade-in">
              <div className="ff-row">
                <div className="ff"><label>Endereço</label>
                  <input value={rua} onChange={e=>setRua(e.target.value)} placeholder="Rua, avenida..."/></div>
                <div className="ff"><label>Número</label>
                  <input value={num} onChange={e=>setNum(e.target.value)} placeholder="123"/></div>
              </div>
              <div className="ff"><label>Bairro</label>
                <input value={bairro} onChange={e=>setBairro(e.target.value)} placeholder="Bairro"/></div>
              <div className="co-ship">
                <label className="co-ship-i on">
                  <span><b>Entrega expressa</b><small>Frete grátis para toda a região</small></span>
                  <b className="mono">Grátis</b>
                </label>
              </div>
              <Btn variant="gold" onClick={()=>setStep(3)} iconR="arrowR">Ir para pagamento</Btn>
            </div>}
          </section>

          {/* Step 3 */}
          <section className={"co-sec "+(step===3?"open":"")}>
            <button className="co-sec-head" onClick={()=>step>2&&setStep(3)}>
              <span className="co-sec-n">3</span> Pagamento
            </button>
            {step===3&&<div className="co-sec-body fade-in">
              <div className="co-pays">
                {payMethods.map(([m,ic,d])=>
                  <button key={m} className={"co-pay "+(pay===m?"on":"")} onClick={()=>setPay(m)}>
                    <Icon name={ic} size={20}/><b>{m}</b><small>{d}</small>
                  </button>)}
              </div>
              {pay==="Cartão"&&<div className="co-card fade-in">
                <div className="ff"><label>Número do cartão</label><input placeholder="0000 0000 0000 0000"/></div>
                <div className="ff-row">
                  <div className="ff"><label>Validade</label><input placeholder="MM/AA"/></div>
                  <div className="ff"><label>CVV</label><input placeholder="123"/></div>
                </div>
                <div className="ff"><label>Parcelas</label>
                  <select>
                    <option>1× de {fmt(total)}</option>
                    {installmentsMax>=6 && <option>6× de {fmt(total/6)}</option>}
                    {installmentsMax>=12 && <option>{installmentsMax}× de {fmt(total/installmentsMax)}</option>}
                  </select>
                </div>
              </div>}
              {pay==="Pix"&&<div className="co-pix fade-in">
                <div className="co-pix-qr"><Icon name="pix" size={34}/></div>
                <p>Ao confirmar, exibimos a chave Pix para pagamento. Aprovação imediata.</p>
              </div>}
              <Btn variant="gold" size="lg" full icon="shield" onClick={confirmOrder} disabled={loading}>
                {loading?"Processando...":"Pagar "+fmt(total)}
              </Btn>
              <p className="co-secure"><Icon name="shield" size={13}/> Ambiente criptografado · seus dados estão protegidos</p>
            </div>}
          </section>
        </div>

        {/* Resumo */}
        <aside className="co-summary">
          <h3 className="serif">Resumo</h3>
          <div className="co-sum-items">
            {cart.map((it,i)=>{
              const p=P.find(x=>x.id===it.id);
              if(!p) return null;
              return (
                <div key={i} className="co-sum-item">
                  <div className="co-sum-img">
                    {p.image_url
                      ? <img src={p.image_url} alt={p.name} style={{width:"100%",height:"100%",objectFit:"cover"}}/>
                      : <ProductImage p={p} ratio="100%" showMeta={false}/>}
                    <span className="co-sum-q">{it.qty}</span>
                  </div>
                  <div className="co-sum-info"><b>{p.name}</b><small>{it.color} · {it.size}</small></div>
                  <span className="mono">{fmt(p.price*it.qty)}</span>
                </div>
              );
            })}
          </div>
          <div className="co-coupon">
            <input value={coupon} onChange={e=>setCoupon(e.target.value.toUpperCase())}
              placeholder="Cupom de desconto" onKeyDown={e=>e.key==="Enter"&&applyCoupon()}/>
            <button onClick={applyCoupon}>Aplicar</button>
          </div>
          {couponErr&&<span className="co-coupon-err">{couponErr}</span>}
          {applied&&<span className="co-coupon-ok"><Icon name="check" size={13}/> {applied.code} aplicado</span>}
          <div className="co-sum-rows">
            <div className="co-row"><span>Subtotal</span><span className="mono">{fmt(cartTotal)}</span></div>
            {discount>0&&<div className="co-row co-disc"><span>Cupom</span><span className="mono">-{fmt(discount)}</span></div>}
            {pixDisc>0&&<div className="co-row co-disc"><span>Desconto Pix ({pixDiscountPct}%)</span><span className="mono">-{fmt(pixDisc)}</span></div>}
            <div className="co-row"><span>Frete</span><span className="mono">{baseFreight===0?"Grátis":fmt(baseFreight)}</span></div>
            <div className="co-row co-total"><span>Total</span><span className="mono gold-text">{fmt(total)}</span></div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function LoginPage(){
  const { nav, signIn, signUp, session, storeConfig } = window.useStore();
  let whatsPhone = ((storeConfig||{}).store_whatsapp||"5585921495164").replace(/\D/g,"");
  if(whatsPhone.length<=11) whatsPhone = "55"+whatsPhone;
  const [mode,setMode] = useState("login");
  const [nome,setNome] = useState("");
  const [email,setEmail] = useState("");
  const [senha,setSenha] = useState("");
  const [showPass,setShowPass] = useState(false);
  const [loading,setLoading] = useState(false);
  const [err,setErr] = useState("");
  const [loginAttempts,setLoginAttempts] = useState(0);
  const [blockedUntil,setBlockedUntil] = useState(null);
  const [turnstileToken,setTurnstileToken] = useState(null);
  const turnstileRef = React.useRef(null);

  // Renderiza Turnstile
  useEffect(()=>{
    if(window.turnstile && turnstileRef.current){
      const id = window.turnstile.render("#turnstile-widget",{
        sitekey: window._TURNSTILE_SITE_KEY,
        theme: "light",
        callback: (token)=>setTurnstileToken(token),
        "expired-callback": ()=>setTurnstileToken(null),
        "error-callback": ()=>setTurnstileToken(null),
      });
      return ()=>{ try{ window.turnstile.remove(id); }catch(e){} };
    }
  },[mode]);

  // Se já logado, redirecionar
  useEffect(()=>{
    if(session){
      const next = window.location.hash.includes("next=admin") ? "#/admin" : "#/conta";
      nav(next);
    }
  },[session]);

  const handle = async e=>{
    e.preventDefault();
    setErr("");
    // Rate limiting: bloqueia após 5 tentativas erradas por 30s
    if(blockedUntil && Date.now() < blockedUntil){
      const secs = Math.ceil((blockedUntil - Date.now()) / 1000);
      setErr(`Muitas tentativas. Aguarde ${secs}s para tentar novamente.`);
      return;
    }
    if(mode==="reg"&&!nome){ setErr("Informe seu nome"); return; }
    if(!email){ setErr("Informe o e-mail"); return; }
    if(senha.length<6){ setErr("Senha deve ter no mínimo 6 caracteres"); return; }
    setLoading(true);
    try{
      if(mode==="login"){
        await signIn(email, senha, turnstileToken);
        setLoginAttempts(0); // reset após sucesso
      } else {
        await signUp(email, senha, nome, turnstileToken);
        setErr("");
        setMode("login");
        setErr("Conta criada! Faça login para continuar.");
      }
    }catch(e){
      const msg = e.message || "";
      if(msg.includes("Invalid login")){
        const attempts = loginAttempts + 1;
        setLoginAttempts(attempts);
        if(attempts >= 5){
          setBlockedUntil(Date.now() + 30000);
          setErr("Muitas tentativas. Aguarde 30 segundos.");
          setLoginAttempts(0);
        } else {
          setErr(`E-mail ou senha incorretos. (${attempts}/5 tentativas)`);
        }
      }
      else if(msg.includes("already registered")) setErr("E-mail já cadastrado. Faça login.");
      else if(msg.includes("Password should")) setErr("Senha fraca. Use pelo menos 6 caracteres.");
      else setErr(msg || "Erro ao autenticar. Tente novamente.");
    }finally{
      setLoading(false);
      // Reset turnstile após tentativa
      setTurnstileToken(null);
      if(window.turnstile) window.turnstile.reset();
    }
  };

  return (
    <div className="wrap auth fade-in">
      <div className="auth-card">
        <div className="auth-logo">
          <span className="serif gold-text">LF</span>
          <span className="sh-logo-sub">CONCEITO</span>
        </div>
        <div className="auth-tabs">
          <button className={mode==="login"?"on":""} onClick={()=>setMode("login")}>Entrar</button>
          <button className={mode==="reg"?"on":""} onClick={()=>setMode("reg")}>Criar conta</button>
        </div>
        <form className="auth-form" onSubmit={handle}>
          {mode==="reg"&&<div className="ff"><label>Nome completo</label>
            <input value={nome} onChange={e=>setNome(e.target.value)} placeholder="Seu nome"/></div>}
          <div className="ff"><label>E-mail</label>
            <input value={email} onChange={e=>setEmail(e.target.value)} placeholder="voce@email.com" type="email"/></div>
          <div className="ff"><label>Senha</label>
            <div className="auth-pass-wrap">
              <input value={senha} onChange={e=>setSenha(e.target.value)} type={showPass?"text":"password"} placeholder="••••••••"/>
              <button type="button" className="auth-pass-toggle" onClick={()=>setShowPass(!showPass)} tabIndex={-1}>
                <Icon name={showPass?"eyeOff":"eye"} size={18}/>
              </button>
            </div>
          </div>
          {mode==="login"&&<a className="auth-forgot" onClick={()=>alert("Entre em contato pelo WhatsApp para redefinir sua senha.")}>
            Esqueci minha senha
          </a>}
          {err&&<div style={{color:"var(--red)",fontSize:13,marginBottom:8}}>{err}</div>}
          <div ref={turnstileRef} style={{marginBottom:8}}>
            {window.turnstile && <div id="turnstile-widget"></div>}
          </div>
          <Btn variant="gold" size="lg" full type="submit" disabled={loading}>
            {loading?"Aguarde...":(mode==="login"?"Entrar":"Criar minha conta")}
          </Btn>
        </form>
        <div className="auth-sep"><span>ou</span></div>
        <a href={"https://wa.me/"+whatsPhone+"?text=Olá!%20Quero%20criar%20uma%20conta%20na%20LF%20Conceito."}
          target="_blank" rel="noopener noreferrer">
          <button className="auth-social" type="button"><Icon name="whats" size={17}/> Continuar com WhatsApp</button>
        </a>
        <p className="auth-foot">Ao continuar você aceita os <a onClick={()=>nav("#/info/termos")}>Termos</a> e a <a onClick={()=>nav("#/info/privacidade")}>Política de Privacidade</a>.</p>
      </div>
      <div className="auth-aside">
        <div className="eyebrow">Vantagens LF</div>
        <h2 className="serif">Sua conta, seu <span className="gold-text">estilo</span></h2>
        <ul className="auth-perks">
          {[["truck","Acompanhe seus pedidos em tempo real"],
            ["tag","Cupons e drops exclusivos para membros"],
            ["heart","Salve seus favoritos e tamanhos"],
            ["shield","Checkout rápido e seguro"]].map(([ic,t])=>
            <li key={t}><Icon name={ic} size={18}/> {t}</li>)}
        </ul>
      </div>
    </div>
  );
}

function AccountPage(){
  const { nav, session, userName, signOut, fetchOrders, favorites } = window.useStore();
  const user = userName;
  const [orders,setOrders] = useState([]);
  const [loading,setLoading] = useState(true);
  const [selOrder,setSelOrder] = useState(null);
  useEffect(()=>{
    if(!session){ nav("#/login"); return; }
    fetchOrders().then(o=>{ setOrders(o||[]); setLoading(false); }).catch(()=>setLoading(false));
  },[user]);
  if(!user) return null;
  return (
    <div className="wrap account fade-in">
      <div className="account-head">
        <div>
          <div className="eyebrow">Minha conta</div>
          <h1 className="serif">Olá, {user.split(" ")[0]}</h1>
        </div>
        <Btn variant="ghost" icon="logout" onClick={()=>{signOut();nav("#/");}}>Sair</Btn>
      </div>
      <div className="account-cards">
        {[["bag","Pedidos",orders.length+" no total","#/conta"],
          ["heart","Favoritos",(favorites||[]).length+" salvos","#/favoritos"]].map(([ic,t,s,href])=>
          <div key={t} className="account-card" onClick={()=>nav(href)} style={{cursor:"pointer"}}>
            <Icon name={ic} size={20}/><b>{t}</b><span>{s}</span>
          </div>)}
      </div>
      <h3 className="serif account-sub">Últimos pedidos</h3>
      {loading
        ? <div style={{color:"var(--muted)",padding:24}}>Carregando pedidos...</div>
        : orders.length===0
          ? <div style={{color:"var(--muted)",padding:24}}>Nenhum pedido ainda.</div>
          : <div className="account-orders">
              {orders.slice(0,5).map(o=>
                <div key={o.code||o.id} className="account-order">
                  <div className="account-order-l">
                    <b className="mono">#{o.code}</b>
                    <span>{new Date(o.date||o.created_at).toLocaleDateString("pt-BR")} · {(o.items||[]).length} itens</span>
                  </div>
                  <span className={"badge st-"+(o.status||"pendente").toLowerCase()}>{o.status}</span>
                  <b className="mono">{fmt(o.total)}</b>
                  <button className="account-order-btn" onClick={()=>setSelOrder(o)}><Icon name="eye" size={16}/></button>
                </div>)}
            </div>}
      {selOrder && <ClientOrderDrawer o={selOrder} close={()=>setSelOrder(null)}/>}
    </div>
  );
}

function ClientOrderDrawer({ o, close }){
  return (
    <div className="drawer open">
      <div className="drawer-ov" onClick={close}></div>
      <div className="drawer-panel ad-drawer">
        <div className="drawer-head">
          <div>
            <div className="label-caps">Pedido</div>
            <h3 className="serif mono">#{o.code}</h3>
          </div>
          <button className="sh-ic" onClick={close}><Icon name="x" size={20}/></button>
        </div>
        <div className="ad-drawer-body">
          <div className="od-status">
            <span className={"badge st-"+(o.status||"pendente").toLowerCase()}>{o.status}</span>
          </div>
          <div className="od-block">
            <h4 className="label-caps">Detalhes</h4>
            <p><span className="cell-dim">{o.payment} · {new Date(o.date||o.created_at).toLocaleString("pt-BR")}</span></p>
          </div>
          {(o.items||[]).length>0&&(
            <div className="od-block">
              <h4 className="label-caps">Itens</h4>
              {(o.items||[]).map((it,i)=>
                <div key={i} className="od-item">
                  <div className="od-item-img"><ProductImage p={it} ratio="100%" showMeta={false}/></div>
                  <div className="od-item-info">
                    <b>{it.name}</b>
                    <small>Tam {it.size} · {it.qty}×</small>
                  </div>
                  <span className="mono">{fmt(it.price*it.qty)}</span>
                </div>)}
            </div>)}
          <div className="od-totals">
            <div className="co-row"><span>Subtotal</span><span className="mono">{fmt(o.subtotal)}</span></div>
            <div className="co-row"><span>Frete</span><span className="mono">{o.freight===0?"Grátis":fmt(o.freight)}</span></div>
            <div className="co-row co-total"><span>Total</span><span className="mono gold-text">{fmt(o.total)}</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function FavoritesPage(){
  const { nav, products, favorites, session } = window.useStore();
  useEffect(()=>{ if(!session){ nav("#/login"); } },[session]);
  const P = products||[];
  const favProducts = P.filter(p=>(favorites||[]).includes(p.id));
  return (
    <div className="wrap fade-in" style={{padding:"36px 0 80px"}}>
      <div className="bc"><a onClick={()=>nav("#/conta")}>Minha conta</a> / <span>Favoritos</span></div>
      <h1 className="serif" style={{fontSize:32,marginBottom:24}}>Meus favoritos</h1>
      {favProducts.length===0
        ? <div style={{textAlign:"center",padding:"60px 0",color:"var(--muted)"}}>
            <Icon name="heart" size={36} style={{marginBottom:12,opacity:.4}}/>
            <p>Você ainda não favoritou nenhum produto.</p>
            <Btn variant="gold" onClick={()=>nav("#/")} style={{marginTop:16}}>Ver produtos</Btn>
          </div>
        : <div className="pgrid">
            {favProducts.map(p=><ProductCard key={p.id} p={p}/>)}
          </div>}
    </div>
  );
}

function InfoPage({ slug }){
  const { nav, storeConfig } = window.useStore();
  const cfg = storeConfig || {};
  const pixDiscountPct = cfg.pix_discount_pct!=null ? parseFloat(cfg.pix_discount_pct) : 5;
  const installmentsMax = cfg.installments_max!=null ? parseInt(cfg.installments_max) : 12;
  const dispatchTime = cfg.dispatch_time || "48h úteis";

  const PAGES = {
    trocas: {
      title: "Trocas & Devoluções",
      intro: "Queremos que você ame suas peças LF Conceito. Se algo não der certo, facilitamos a troca ou devolução.",
      sections: [
        ["Prazo", "Você tem até 3 dias corridos após o recebimento para solicitar troca ou devolução."],
        ["Condições do produto", "A peça deve estar sem uso, com etiquetas originais e na embalagem em que foi enviada. Produtos usados, lavados ou danificados não são elegíveis para devolução."],
        ["Como solicitar", "Entre em contato com a gente pelo WhatsApp."],
      ],
    },
    pagamento: {
      title: "Formas de Pagamento",
      intro: "Todos os pagamentos são processados de forma segura através do Mercado Pago.",
      sections: [
        ["Pix", pixDiscountPct>0
          ? `Pagamento via Pix com ${pixDiscountPct}% de desconto sobre o valor da compra. Aprovação imediata — seu pedido é confirmado na hora.`
          : "Pagamento via Pix com aprovação imediata — seu pedido é confirmado na hora."],
        ["Cartão de crédito", "Parcelamento no cartão de crédito conforme as opções disponíveis no momento da compra. Os juros seguem as condições da sua bandeira/banco, definidas pelo Mercado Pago."],
        ["Segurança", "Não armazenamos dados do seu cartão. Todo o processamento é feito pelo Mercado Pago, uma das maiores plataformas de pagamento da América Latina, com criptografia de ponta a ponta."],
      ],
    },
    sobre: {
      title: "Sobre a LF Conceito",
      intro: "Streetwear autoral, desenhado em Fortaleza, Ceará, para quem veste atitude.",
      sections: [
        ["Nossa origem", "A LF Conceito nasceu da vontade de criar peças com identidade própria — streetwear de luxo que mistura conforto, atitude e acabamento premium, sem depender de licenças ou referências externas."],
        ["Nosso compromisso", "Cada peça é pensada com cuidado: tecidos selecionados, costura reforçada e detalhes que fazem a diferença no caimento e na durabilidade."],
        ["Para onde vamos", "Estamos sempre trabalhando em novos drops e coleções limitadas. Siga a gente no Instagram para não perder nenhum lançamento."],
      ],
    },
    privacidade: {
      title: "Política de Privacidade",
      intro: "Sua privacidade é importante para nós. Esta página explica quais dados coletamos e como usamos, em conformidade com a LGPD (Lei Geral de Proteção de Dados).",
      sections: [
        ["Quais dados coletamos", "Coletamos nome, e-mail, telefone, endereço de entrega e informações do pedido. Dados de pagamento (cartão, Pix) são processados diretamente pelo Mercado Pago e não ficam armazenados em nossos sistemas."],
        ["Como usamos seus dados", "Usamos essas informações para processar e entregar seus pedidos, te manter atualizado sobre o status da compra e, quando autorizado, enviar novidades e promoções."],
        ["Compartilhamento", "Compartilhamos dados apenas com parceiros essenciais para a operação: o gateway de pagamento (Mercado Pago)."],
        ["Seus direitos", "Você pode solicitar acesso, correção ou exclusão dos seus dados pessoais a qualquer momento, entrando em contato pelo e-mail lfconceito2030@gmail.com."],
        ["Cookies", "Utilizamos cookies essenciais para o funcionamento do site, como manter seus itens no carrinho durante a navegação."],
      ],
    },
    termos: {
      title: "Termos de Uso",
      intro: "Ao acessar e usar o site da LF Conceito, você concorda com os termos descritos abaixo.",
      sections: [
        ["Cadastro e conta", "Você é responsável por manter a confidencialidade dos seus dados de acesso e por todas as atividades realizadas na sua conta."],
        ["Produtos e preços", "Preços, disponibilidade de estoque e condições promocionais podem ser alterados sem aviso prévio. Fazemos o possível para manter as informações sempre atualizadas."],
        ["Pedidos e pagamento", "Pedidos são confirmados após aprovação do pagamento pelo Mercado Pago."],
        ["Propriedade intelectual", "Todo o conteúdo do site — marca, logotipo, fotos, textos e design — pertence à LF Conceito e não pode ser reproduzido sem autorização."],
      ],
    },
  };

  const page = PAGES[slug];
  if(!page) return (
    <div className="wrap" style={{padding:"80px 0",textAlign:"center"}}>
      <h2 className="serif">Página não encontrada</h2>
      <Btn variant="gold" onClick={()=>nav("#/")} style={{marginTop:20}}>Voltar à loja</Btn>
    </div>
  );

  return (
    <div className="fade-in">
      <div className="cat-hero">
        <div className="wrap">
          <div className="bc">
            <a onClick={()=>nav("#/")}>Início</a> / <span>{page.title}</span>
          </div>
          <h1 className="serif cat-title" style={{fontSize:38}}>{page.title}</h1>
          <p>{page.intro}</p>
        </div>
      </div>
      <div className="wrap" style={{padding:"36px 0 80px",maxWidth:760}}>
        {page.sections.map(([h,p])=>
          <div key={h} className="info-sec">
            <h3>{h}</h3>
            <p>{p}</p>
          </div>)}
        <Btn variant="ghost" icon="arrowR" onClick={()=>nav("#/")} style={{marginTop:20}}>Voltar à loja</Btn>
      </div>
    </div>
  );
}

Object.assign(window, { CheckoutPage, LoginPage, AccountPage, InfoPage, FavoritesPage });