// Form.jsx — MinduBier × Copa 2026 — Multi-block form with mocks + validation

function initialFormState() {
  return {
    nome: '',
    email: '',
    telefone: '',
    cep: '',
    logradouro: '',
    numero: '',
    complemento: '',
    bairro: '',
    cidade: '',
    estado: '',
    itens: TAMANHOS.map((t) => ({ tamanho: t, quantidade: 0 })),
    tipoEntrega: ''
  };
}

function FormSection({ tweaks, onSubmitDone }) {
  const isDark = tweaks.theme === 'dark';
  const toast = useToast();
  const [form, setForm] = React.useState(initialFormState);
  const [errors, setErrors] = React.useState({});
  const [touched, setTouched] = React.useState({});

  // CEP loading state
  const [cepLoading, setCepLoading] = React.useState(false);
  const [cepLookedUp, setCepLookedUp] = React.useState(false); // got a valid CEP result

  // Frete state
  const [frete, setFrete] = React.useState(null); // { opcoes: [{ servico, valorCentavos, prazoEntregaDias }] } | { error: string }
  const [freteServico, setFreteServico] = React.useState(null); // nome do serviço escolhido (PAC/SEDEX)
  const [freteLoading, setFreteLoading] = React.useState(false);

  // Submit state
  const [submitting, setSubmitting] = React.useState(false);

  const numeroRef = React.useRef(null);

  const totalCamisas = form.itens.reduce((s, i) => s + i.quantidade, 0);
  const cepDigits = unmaskCEP(form.cep);
  const cepValid = cepLookedUp && cepDigits.length === 8;

  // Sub-block 4 visibility
  const showEntrega = cepValid && totalCamisas > 0;

  // ── CEP lookup on completion ──
  React.useEffect(() => {
    if (cepDigits.length !== 8) {
      setCepLookedUp(false);
      return;
    }
    let cancelled = false;
    setCepLoading(true);
    setErrors((e) => {const { cep: _, ...rest } = e;return rest;});
    mockConsultarCEP(form.cep).
    then((res) => {
      if (cancelled) return;
      setForm((f) => ({
        ...f,
        logradouro: res.logradouro || '',
        bairro: res.bairro || '',
        cidade: res.cidade || '',
        estado: res.estado || ''
      }));
      setCepLookedUp(true);
      setCepLoading(false);
      // Auto-focus on "número"
      setTimeout(() => numeroRef.current?.focus(), 80);
    }).
    catch((err) => {
      if (cancelled) return;
      setCepLoading(false);
      setCepLookedUp(false);
      setErrors((e) => ({ ...e, cep: 'CEP não encontrado. Confira o número e tente novamente.' }));
      toast({ kind: 'error', message: err.message + '. Verifique o CEP e tente novamente.' });
    });
    return () => {cancelled = true;};
    // eslint-disable-next-line
  }, [cepDigits]);

  // ── Recalculate frete when relevant inputs change ──
  React.useEffect(() => {
    if (form.tipoEntrega !== 'entrega') {
      return;
    }
    if (!cepValid || totalCamisas === 0) return;
    let cancelled = false;
    setFreteLoading(true);
    setFrete(null);
    mockCalcularFrete(form.cep, totalCamisas).
    then((res) => {
      if (cancelled) return;
      setFrete(res);
      // Pré-seleciona a opção mais barata (já vem ordenada do backend)
      if (res.opcoes && res.opcoes.length) setFreteServico(res.opcoes[0].servico);
      setFreteLoading(false);
    }).
    catch(() => {
      if (cancelled) return;
      setFrete({ error: 'Não conseguimos calcular agora. Você pode continuar — entraremos em contato com o valor.' });
      setFreteLoading(false);
    });
    return () => {cancelled = true;};
  }, [form.tipoEntrega, form.cep, totalCamisas, cepValid]);

  // If user deselects entrega or invalidates conditions, clear frete
  React.useEffect(() => {
    if (form.tipoEntrega !== 'entrega') { setFrete(null); setFreteServico(null); }
  }, [form.tipoEntrega]);

  // ── Field handlers ──
  function update(k, v) {setForm((f) => ({ ...f, [k]: v }));}
  function blur(k) {setTouched((t) => ({ ...t, [k]: true }));}

  function setQty(tamanho, qty) {
    const q = Math.max(0, Math.min(20, qty | 0));
    setForm((f) => ({
      ...f,
      itens: f.itens.map((i) => i.tamanho === tamanho ? { ...i, quantidade: q } : i)
    }));
  }

  // ── Subtotal / Total ──
  const freteOpcoes = (frete && frete.opcoes) || [];
  const freteSelecionado = freteOpcoes.find((o) => o.servico === freteServico) || null;
  const subtotalCamisasCent = totalCamisas * PRECO_CAMISA_CENTAVOS;
  let freteCent = 0;
  let entregaLabel = '—';
  if (form.tipoEntrega === 'entrega') {
    if (freteSelecionado) {
      freteCent = freteSelecionado.valorCentavos;
      entregaLabel = brl(freteSelecionado.valorCentavos);
    } else if (frete && frete.error) {
      entregaLabel = 'A combinar';
    } else if (freteLoading) {
      entregaLabel = 'Calculando…';
    }
  } else if (form.tipoEntrega === 'retirada') {
    entregaLabel = 'Retirada grátis';
  }
  const totalCent = subtotalCamisasCent + freteCent;

  // ── Validate (live) ──
  React.useEffect(() => {
    setErrors((prev) => {
      const next = validateCadastro({ ...form, cep: form.cep });
      // Preserve cep-not-found if present
      if (prev.cep && prev.cep.startsWith('CEP não')) next.cep = prev.cep;
      return next;
    });
  }, [form]);

  const isValid =
  Object.keys(errors).filter((k) => errors[k]).length === 0 &&
  totalCamisas > 0 &&
  !!form.tipoEntrega &&
  cepValid;

  async function handleSubmit(e) {
    e.preventDefault();
    // Touch everything to surface errors
    const allKeys = ['nome', 'email', 'telefone', 'cep', 'numero', 'tipoEntrega'];
    setTouched(allKeys.reduce((a, k) => ({ ...a, [k]: true }), {}));

    if (!isValid) {
      toast({ kind: 'error', message: 'Confira os campos destacados antes de finalizar.' });
      return;
    }
    setSubmitting(true);
    try {
      const pedido = {
        ...form,
        itens: form.itens.filter((i) => i.quantidade > 0),
        precoUnitarioCentavos: PRECO_CAMISA_CENTAVOS,
        subtotalCentavos: subtotalCamisasCent,
        freteCentavos: form.tipoEntrega === 'entrega' && freteSelecionado ? freteSelecionado.valorCentavos : 0,
        freteDescricao: form.tipoEntrega === 'entrega' ?
        freteSelecionado ? `${freteSelecionado.servico} • ${freteSelecionado.prazoEntregaDias} dias úteis` : 'A combinar' :
        'Retirada grátis na Graça, Salvador/BA',
        totalCentavos: totalCent,
      };
      const resultado = await enviarCadastro(pedido);
      pedido.protocolo = resultado.protocolo;
      onSubmitDone(pedido);
    } catch (err) {
      toast({ kind: 'error', message: 'Não foi possível enviar seu cadastro. Tente novamente em instantes.' });
    } finally {
      setSubmitting(false);
    }
  }

  // ── RENDER ──
  return (
    <section id="formulario" style={{ padding: 'clamp(60px, 8vw, 100px) 0' }}>
      <div className="container">
        <SectionHeader
          eyebrow="Pré-cadastro"
          title="Garanta a sua"
          sub="Preencha os dados abaixo — sem pagamento agora. A gente te chama no WhatsApp em até 48h pra confirmar."
          isDark={isDark} />
        

        <form onSubmit={handleSubmit} noValidate style={{
          marginTop: 40,
          display: 'grid',
          gap: 24
        }} className="form-grid">

          {/* LEFT: form blocks */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>

            {/* Block 1 */}
            <FormBlock
              num="01"
              title="Seus dados"
              icon={<Icon.Sparkles size={16} />}
              isDark={isDark}>
              
              <div className="field-row">
                <Field
                  label="Nome completo *" id="nome"
                  error={touched.nome && errors.nome}>
                  
                  <input
                    id="nome"
                    type="text"
                    autoComplete="name"
                    className="glass-input"
                    value={form.nome}
                    onChange={(e) => update('nome', e.target.value)}
                    onBlur={() => blur('nome')}
                    aria-invalid={!!(touched.nome && errors.nome)}
                    placeholder="Como você quer ser chamado(a)?" />
                  
                </Field>
              </div>
              <div className="field-row two">
                <Field label="E-mail *" id="email" error={touched.email && errors.email}>
                  <input
                    id="email" type="email" autoComplete="email"
                    className="glass-input"
                    value={form.email}
                    onChange={(e) => update('email', e.target.value)}
                    onBlur={() => blur('email')}
                    aria-invalid={!!(touched.email && errors.email)}
                    placeholder="voce@email.com" />
                  
                </Field>
                <Field label="Telefone (WhatsApp) *" id="telefone" error={touched.telefone && errors.telefone}>
                  <input
                    id="telefone" type="tel" inputMode="numeric"
                    autoComplete="tel-national"
                    className="glass-input"
                    value={maskTelefone(form.telefone)}
                    onChange={(e) => update('telefone', unmaskTelefone(e.target.value))}
                    onBlur={() => blur('telefone')}
                    aria-invalid={!!(touched.telefone && errors.telefone)}
                    placeholder="(71) 98765-4321"
                    maxLength={16} />
                  
                </Field>
              </div>
            </FormBlock>

            {/* Block 2 */}
            <FormBlock num="02" title="Endereço" icon={<Icon.MapPin size={16} />} isDark={isDark}>
              <div className="field-row">
                <Field
                  label="CEP *"
                  id="cep"
                  error={touched.cep && errors.cep}
                  hint={!cepValid && !cepLoading ? 'Buscaremos o endereço automaticamente' : null}>
                  
                  <div style={{ position: 'relative' }}>
                    <input
                      id="cep" type="text" inputMode="numeric"
                      autoComplete="postal-code"
                      className="glass-input"
                      value={maskCEP(form.cep)}
                      onChange={(e) => {
                        update('cep', unmaskCEP(e.target.value));
                        // Clear address if user retypes
                        if (cepLookedUp) {
                          setCepLookedUp(false);
                          setForm((f) => ({ ...f, logradouro: '', bairro: '', cidade: '', estado: '' }));
                        }
                      }}
                      onBlur={() => blur('cep')}
                      aria-invalid={!!(touched.cep && errors.cep)}
                      placeholder="00000-000"
                      maxLength={9}
                      style={{ paddingRight: cepLoading ? 44 : undefined }} />
                    
                    {cepLoading &&
                    <span style={{
                      position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)',
                      color: MB.copper
                    }}><Icon.Loader size={18} /></span>
                    }
                    {cepValid && !cepLoading &&
                    <span style={{
                      position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)',
                      color: MB.success
                    }}><Icon.Check size={18} /></span>
                    }
                  </div>
                </Field>
              </div>

              {/* Skeleton or fields */}
              {cepLoading ?
              <div className="field-row two">
                  <div className="field-skeleton" />
                  <div className="field-skeleton" />
                  <div className="field-skeleton" />
                  <div className="field-skeleton" />
                </div> :
              cepLookedUp ?
              <>
                  <div className="field-row">
                    <Field label="Logradouro" id="logradouro">
                      <input id="logradouro" type="text" className="glass-input" value={form.logradouro} readOnly tabIndex={-1} />
                    </Field>
                  </div>
                  <div className="field-row two">
                    <Field label="Número *" id="numero" error={touched.numero && errors.numero}>
                      <input
                      id="numero" type="text" inputMode="numeric"
                      ref={numeroRef}
                      className="glass-input"
                      value={form.numero}
                      onChange={(e) => update('numero', e.target.value)}
                      onBlur={() => blur('numero')}
                      aria-invalid={!!(touched.numero && errors.numero)}
                      placeholder="123" />
                    
                    </Field>
                    <Field label="Complemento" id="complemento" hint="Apto, bloco, ponto de referência…">
                      <input
                      id="complemento" type="text"
                      className="glass-input"
                      value={form.complemento}
                      onChange={(e) => update('complemento', e.target.value)}
                      placeholder="Opcional" />
                    
                    </Field>
                  </div>
                  <div className="field-row three">
                    <Field label="Bairro" id="bairro">
                      <input id="bairro" type="text" className="glass-input" value={form.bairro} readOnly tabIndex={-1} />
                    </Field>
                    <Field label="Cidade" id="cidade">
                      <input id="cidade" type="text" className="glass-input" value={form.cidade} readOnly tabIndex={-1} />
                    </Field>
                    <Field label="UF" id="estado">
                      <input id="estado" type="text" className="glass-input" value={form.estado} readOnly tabIndex={-1} />
                    </Field>
                  </div>
                </> :

              <div style={{
                padding: '14px 16px',
                borderRadius: 12,
                background: isDark ? 'rgba(255,255,244,0.04)' : 'rgba(50,50,49,0.04)',
                fontFamily: MB.body, fontSize: 13,
                color: isDark ? 'rgba(255,255,244,0.55)' : MB.bgDark,
                display: 'flex', gap: 8, alignItems: 'center'
              }}>
                  <Icon.MapPin size={16} /> Digite seu CEP para preenchermos o endereço.
                </div>
              }
            </FormBlock>

            {/* Block 3 */}
            <FormBlock
              num="03"
              title="Sua camisa"
              icon={<Icon.Shirt size={16} />}
              isDark={isDark}
              badge={totalCamisas > 0 ? `${totalCamisas} ${totalCamisas === 1 ? 'camisa' : 'camisas'}` : null}>
              
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {form.itens.map((it) =>
                <SizeRow
                  key={it.tamanho}
                  tamanho={it.tamanho}
                  quantidade={it.quantidade}
                  onChange={(q) => setQty(it.tamanho, q)}
                  isDark={isDark} />

                )}
              </div>
              {totalCamisas === 0 && touched.itens &&
              <div className="field-error" style={{ marginTop: 8 }}>
                  <Icon.AlertCircle size={14} /> Selecione pelo menos uma camisa
                </div>
              }
            </FormBlock>

            {/* Block 4 */}
            {showEntrega &&
            <FormBlock
              num="04"
              title="Como receber?"
              icon={<Icon.Truck size={16} />}
              isDark={isDark}
              animate>
              
                <div className="field-row two" style={{ gridTemplateColumns: '1fr 1fr' }}>
                  <DeliveryCard
                  selected={form.tipoEntrega === 'entrega'}
                  onClick={() => update('tipoEntrega', 'entrega')}
                  icon={<Icon.Truck />}
                  title="Entregar no meu endereço"
                  isDark={isDark}>
                  
                    {form.tipoEntrega === 'entrega' &&
                  <div style={{ marginTop: 10, fontSize: 13 }}>
                        {freteLoading &&
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: MB.copper }}>
                            <Icon.Loader size={14} /> Calculando frete…
                          </span>
                    }
                        {!freteLoading && frete && frete.opcoes &&
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                            {frete.opcoes.map((opt) => {
                          const sel = opt.servico === freteServico;
                          return (
                            <div
                              key={opt.servico}
                              role="radio"
                              aria-checked={sel}
                              onClick={(e) => {e.stopPropagation();setFreteServico(opt.servico);}}
                              style={{
                                display: 'flex', alignItems: 'center', gap: 10,
                                padding: '10px 12px', borderRadius: 12, cursor: 'pointer',
                                border: '1.5px solid ' + (sel ? 'var(--copa-green)' : isDark ? 'rgba(255,255,244,0.14)' : 'rgba(50,50,49,0.12)'),
                                background: sel ? isDark ? 'rgba(0,151,57,0.16)' : 'rgba(0,151,57,0.07)' : 'transparent',
                                transition: `all 200ms ${MB.ease}`
                              }}>
                                  <span style={{
                                width: 18, height: 18, borderRadius: 999, flexShrink: 0,
                                border: '2px solid ' + (sel ? 'var(--copa-green)' : 'rgba(50,50,49,0.3)'),
                                background: sel ? 'var(--copa-green)' : 'transparent',
                                display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff'
                              }}>{sel && <Icon.Check size={11} />}</span>
                                  <div style={{ flex: 1, lineHeight: 1.3 }}>
                                    <div style={{ fontWeight: 700, color: isDark ? '#fffff4' : MB.bgDarker }}>{opt.servico}</div>
                                    <div style={{ fontWeight: 500, fontSize: 12, opacity: 0.8 }}>Prazo: {opt.prazoEntregaDias} dias úteis</div>
                                  </div>
                                  <span style={{ fontWeight: 700, color: MB.copper }}>{brl(opt.valorCentavos)}</span>
                                </div>);

                        })}
                          </div>
                    }
                        {!freteLoading && frete && frete.error &&
                    <div style={{ color: MB.error, lineHeight: 1.5 }}>{frete.error}</div>
                    }
                      </div>
                  }
                  </DeliveryCard>

                  <DeliveryCard
                  selected={form.tipoEntrega === 'retirada'}
                  onClick={() => update('tipoEntrega', 'retirada')}
                  icon={<Icon.MapPin />}
                  title="Retirar na Graça, Salvador/BA"
                  isDark={isDark}>
                  
                    {form.tipoEntrega === 'retirada' &&
                  <div style={{ marginTop: 10, fontSize: 13, color: isDark ? '#fffff4' : MB.bgDarker, fontWeight: 600 }}>
                        Grátis · <span style={{ fontWeight: 500, opacity: 0.85 }}>
                          Te avisaremos quando estiver disponível para retirada
                        </span>
                      </div>
                  }
                  </DeliveryCard>
                </div>
              </FormBlock>
            }

            {/* Mobile summary (above button) */}
            <div className="mobile-only-summary">
              <OrderSummary
                form={form}
                frete={frete}
                freteLoading={freteLoading}
                totalCamisas={totalCamisas}
                subtotalCamisasCent={subtotalCamisasCent}
                entregaLabel={entregaLabel}
                totalCent={totalCent}
                isDark={isDark} />
              
            </div>

            {/* Submit — pré-venda encerrada */}
            <button
              type="submit"
              disabled
              className="btn btn-primary btn-block"
              style={{ padding: '18px 28px', fontSize: 17 }}>

              Pré-venda encerrada
            </button>

            <p style={{
              fontSize: 13,
              color: isDark ? 'rgba(255,255,244,0.6)' : MB.bgDark,
              textAlign: 'center',
              marginTop: -8,
              fontFamily: MB.body
            }}>A pré-venda foi encerrada. Obrigado a todos que garantiram a sua camisa!

            </p>
          </div>

          {/* RIGHT: Sticky summary */}
          <aside className="desktop-only-summary">
            <div style={{ position: 'sticky', top: 32 }}>
              <OrderSummary
                form={form}
                frete={frete}
                freteLoading={freteLoading}
                totalCamisas={totalCamisas}
                subtotalCamisasCent={subtotalCamisasCent}
                entregaLabel={entregaLabel}
                totalCent={totalCent}
                isDark={isDark}
                sticky />
              
            </div>
          </aside>
        </form>
      </div>

      <style>{`
        .form-grid { grid-template-columns: 1fr; }
        @media (min-width: 1024px) {
          .form-grid { grid-template-columns: 1fr 380px; gap: 36px; align-items: start; }
          .mobile-only-summary { display: none; }
        }
        @media (max-width: 1023px) {
          .desktop-only-summary { display: none; }
        }
        .field-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
        .field-row.two { grid-template-columns: 1fr; }
        .field-row.three { grid-template-columns: 1fr; }
        @media (min-width: 640px) {
          .field-row.two { grid-template-columns: 1fr 1fr; }
          .field-row.three { grid-template-columns: 2fr 2fr 80px; }
        }
      `}</style>
    </section>);

}

// ─── FormBlock — collapsible numbered block ───────────────────────────
function FormBlock({ num, title, icon, badge, children, isDark, animate = false }) {
  return (
    <div className="glass-card" style={{
      padding: 'clamp(20px, 3vw, 28px)',
      animation: animate ? `fadeUp 400ms ${MB.ease} both` : undefined
    }}>
      <header style={{
        display: 'flex', alignItems: 'center', gap: 14,
        marginBottom: 18,
        paddingBottom: 14,
        borderBottom: '1px solid ' + (isDark ? 'rgba(255,255,244,0.08)' : 'rgba(50,50,49,0.06)')
      }}>
        <div style={{
          width: 38, height: 38,
          borderRadius: 10,
          background: isDark ? 'rgba(254,221,0,0.12)' : 'rgba(0,151,57,0.10)',
          color: isDark ? 'var(--copa-yellow)' : 'var(--copa-green-deep)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: MB.display, fontWeight: 800, fontSize: 13
        }}>{num}</div>
        <h3 style={{
          flex: 1,
          fontFamily: MB.display,
          fontWeight: 700,
          fontSize: 20,
          color: isDark ? '#fffff4' : MB.bgDarker,
          margin: 0,
          display: 'flex', alignItems: 'center', gap: 8
        }}>
          {title}
          <span style={{ color: MB.copper, display: 'inline-flex' }}>{icon}</span>
        </h3>
        {badge &&
        <span className="badge badge-copa">{badge}</span>
        }
      </header>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {children}
      </div>
    </div>);

}

// ─── Field wrapper ────────────────────────────────────────────────────
function Field({ label, id, error, hint, children }) {
  return (
    <div className="field">
      <label htmlFor={id}>{label}</label>
      {children}
      {error ?
      <span className="field-error" id={`${id}-err`} role="alert">
            <Icon.AlertCircle size={14} /> {error}
          </span> :
      hint ?
      <span style={{
        fontFamily: MB.body, fontSize: 12,
        color: 'rgba(50,50,49,0.55)'
      }}>{hint}</span> :
      null}
    </div>);

}

// ─── SizeRow ──────────────────────────────────────────────────────────
function SizeRow({ tamanho, quantidade, onChange, isDark }) {
  const hasQty = quantidade > 0;
  const subtotal = quantidade * PRECO_CAMISA_CENTAVOS;
  return (
    <div className={'size-row-card' + (hasQty ? ' has-qty' : '')} style={{
      display: 'grid',
      gridTemplateColumns: '64px 1fr auto',
      alignItems: 'center',
      gap: 14,
      padding: '12px 16px',
      borderRadius: 14,
      background: hasQty ?
      isDark ? 'rgba(0,151,57,0.14)' : 'rgba(0,151,57,0.08)' :
      isDark ? 'rgba(255,255,244,0.03)' : 'rgba(50,50,49,0.04)',
      border: '1px solid ' + (hasQty ?
      isDark ? 'rgba(0,151,57,0.4)' : 'rgba(0,151,57,0.25)' :
      isDark ? 'rgba(255,255,244,0.06)' : 'rgba(50,50,49,0.06)'),
      transition: `background 250ms ${MB.ease}, border-color 250ms ${MB.ease}`
    }}>
      <div style={{
        width: 48, height: 48,
        borderRadius: 999,
        background: hasQty ?
        'linear-gradient(135deg, var(--copa-green), var(--copa-green-deep))' :
        isDark ? 'rgba(255,255,244,0.08)' : 'rgba(50,50,49,0.08)',
        color: hasQty ? '#fff' : isDark ? '#fffff4' : MB.bgDarker,
        fontFamily: MB.display,
        fontWeight: 800,
        fontSize: 16,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: `all 300ms ${MB.ease}`
      }}>{tamanho}</div>

      <div style={{ fontFamily: MB.body, textAlign: 'center' }}>
        <div style={{
          fontFamily: MB.display, fontWeight: 700, fontSize: 15,
          color: isDark ? '#fffff4' : MB.bgDarker
        }}>Tamanho {tamanho}</div>
        <div style={{
          fontSize: 13,
          color: isDark ? 'rgba(255,255,244,0.65)' : MB.bgDark,
          fontVariantNumeric: 'tabular-nums',
          marginTop: 2
        }}>
          {hasQty ?
          <><strong style={{ color: isDark ? '#fffff4' : MB.bgDarker }}>{quantidade} × {brl(PRECO_CAMISA_CENTAVOS)}</strong> = <span style={{ color: MB.copper, fontWeight: 700 }}>{brl(subtotal)}</span></> :
          <>{brl(PRECO_CAMISA_CENTAVOS)} cada</>}
        </div>
      </div>

      <Stepper value={quantidade} onChange={onChange} isDark={isDark} />
    </div>);

}

function Stepper({ value, onChange, isDark }) {
  return (
    <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: 0,
      background: isDark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,244,0.85)',
      borderRadius: 999,
      border: '1px solid ' + (isDark ? 'rgba(255,255,244,0.14)' : 'rgba(50,50,49,0.10)'),
      overflow: 'hidden',
      boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.04)'
    }}>
      <StepperBtn onClick={() => onChange(value - 1)} disabled={value <= 0} aria-label="Diminuir">
        <Icon.Minus size={16} />
      </StepperBtn>
      <input
        type="number"
        min={0} max={20}
        value={value}
        onChange={(e) => onChange(parseInt(e.target.value || '0', 10))}
        aria-label="Quantidade"
        style={{
          width: 40,
          background: 'transparent',
          border: 'none',
          outline: 'none',
          textAlign: 'center',
          fontFamily: MB.display,
          fontWeight: 700,
          fontSize: 15,
          color: isDark ? '#fffff4' : MB.bgDarker,
          MozAppearance: 'textfield',
          padding: '8px 0'
        }} />
      
      <StepperBtn onClick={() => onChange(value + 1)} disabled={value >= 20} aria-label="Aumentar">
        <Icon.Plus size={16} />
      </StepperBtn>
    </div>);

}
function StepperBtn({ children, ...p }) {
  return <button type="button" className="qty-btn" {...p} style={{
    width: 38, height: 38, border: 'none',
    background: 'transparent',
    color: 'inherit',
    cursor: p.disabled ? 'not-allowed' : 'pointer',
    opacity: p.disabled ? 0.35 : 1,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    transition: 'background 200ms'
  }}>{children}</button>;
}

// ─── Delivery card (radio) ─────────────────────────────────────────────
function DeliveryCard({ selected, onClick, icon, title, children, isDark }) {
  return (
    <button
      type="button"
      onClick={onClick}
      role="radio"
      aria-checked={selected}
      className={'delivery-card' + (selected ? ' selected' : '')}
      style={{
        textAlign: 'left',
        padding: 18,
        borderRadius: 16,
        border: '2px solid ' + (selected ?
        'var(--copa-green)' :
        isDark ? 'rgba(255,255,244,0.14)' : 'rgba(50,50,49,0.12)'),
        background: selected ?
        isDark ? 'rgba(0,151,57,0.18)' : 'rgba(0,151,57,0.06)' :
        isDark ? 'rgba(255,255,244,0.04)' : 'rgba(255,255,244,0.55)',
        cursor: 'pointer',
        transition: `all 250ms ${MB.ease}`,
        boxShadow: selected ? '0 0 0 4px rgba(0,151,57,0.10)' : 'none',
        color: isDark ? '#fffff4' : MB.bgDarker,
        fontFamily: MB.body,
        width: '100%',
        display: 'flex', flexDirection: 'column', gap: 8
      }}>
      
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          width: 38, height: 38,
          borderRadius: 10,
          background: selected ? 'var(--copa-green)' : isDark ? 'rgba(255,255,244,0.08)' : 'rgba(50,50,49,0.08)',
          color: selected ? '#fff' : isDark ? '#fffff4' : MB.bgDarker,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0, transition: `all 250ms ${MB.ease}`
        }}>{icon}</div>
        <div style={{
          flex: 1,
          fontFamily: MB.display,
          fontWeight: 700,
          fontSize: 15,
          lineHeight: 1.3
        }}>{title}</div>
        <div style={{
          width: 22, height: 22, borderRadius: 999,
          border: '2px solid ' + (selected ? 'var(--copa-green)' : 'rgba(50,50,49,0.25)'),
          background: selected ? 'var(--copa-green)' : 'transparent',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
          color: '#fff'
        }}>{selected && <Icon.Check size={12} />}</div>
      </div>
      {children}
    </button>);

}

// ─── ORDER SUMMARY ─────────────────────────────────────────────────────
function OrderSummary({ form, frete, freteLoading, totalCamisas, subtotalCamisasCent, entregaLabel, totalCent, isDark, sticky = false }) {
  const itensComQty = form.itens.filter((i) => i.quantidade > 0);
  return (
    <div className="glass-card" style={{
      padding: 'clamp(20px, 3vw, 28px)',
      background: isDark ?
      'linear-gradient(180deg, rgba(20,38,28,0.85) 0%, rgba(13,27,20,0.95) 100%)' :
      'linear-gradient(180deg, rgba(255,255,244,0.85) 0%, rgba(255,255,244,0.95) 100%)'
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        paddingBottom: 14,
        borderBottom: '1px solid ' + (isDark ? 'rgba(255,255,244,0.08)' : 'rgba(50,50,49,0.06)'),
        marginBottom: 14
      }}>
        <Icon.Package size={18} style={{ color: MB.copper }} />
        <h4 style={{
          fontFamily: MB.display, fontWeight: 700, fontSize: 16,
          color: isDark ? '#fffff4' : MB.bgDarker,
          textTransform: 'uppercase', letterSpacing: '0.06em',
          margin: 0
        }}>Resumo do pedido</h4>
      </div>

      {itensComQty.length === 0 ?
      <p style={{
        fontSize: 14,
        color: isDark ? 'rgba(255,255,244,0.65)' : MB.bgDark,
        fontFamily: MB.body
      }}>
          Adicione pelo menos uma camisa para ver o resumo.
        </p> :

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {itensComQty.map((i) =>
        <div key={i.tamanho} className="summary-row" style={{
          display: 'flex', justifyContent: 'space-between',
          fontFamily: MB.body, fontSize: 14,
          color: isDark ? 'rgba(244,241,228,0.75)' : MB.bgDark
        }}>
              <span>Camisa {i.tamanho} × {i.quantidade}</span>
              <span style={{ fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: isDark ? '#fffff4' : MB.bgDarker }}>
                {brl(i.quantidade * PRECO_CAMISA_CENTAVOS)}
              </span>
            </div>
        )}

          <div style={{
          display: 'flex', justifyContent: 'space-between',
          marginTop: 8, paddingTop: 12,
          borderTop: '1px dashed ' + (isDark ? 'rgba(255,255,244,0.10)' : 'rgba(50,50,49,0.10)'),
          fontFamily: MB.body, fontSize: 14,
          color: isDark ? 'rgba(244,241,228,0.75)' : MB.bgDark
        }}>
            <span>Subtotal</span>
            <span style={{ fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: isDark ? '#fffff4' : MB.bgDarker }}>
              {brl(subtotalCamisasCent)}
            </span>
          </div>

          <div style={{
          display: 'flex', justifyContent: 'space-between',
          fontFamily: MB.body, fontSize: 14,
          color: isDark ? 'rgba(244,241,228,0.75)' : MB.bgDark
        }}>
            <span>Frete</span>
            <span style={{ fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: isDark ? '#fffff4' : MB.bgDarker }}>
              {entregaLabel}
            </span>
          </div>

          <div style={{
          display: 'flex', justifyContent: 'space-between',
          alignItems: 'baseline',
          marginTop: 10, paddingTop: 14,
          borderTop: '2px solid ' + (isDark ? 'rgba(254,221,0,0.20)' : 'rgba(50,50,49,0.12)')
        }}>
            <span style={{
            fontFamily: MB.display, fontWeight: 700, fontSize: 14,
            textTransform: 'uppercase', letterSpacing: '0.08em',
            color: isDark ? '#fffff4' : MB.bgDarker
          }}>Total</span>
            <span style={{
            fontFamily: MB.display, fontWeight: 800, fontSize: 28,
            fontVariantNumeric: 'tabular-nums',
            letterSpacing: '-0.02em',
            color: MB.copper
          }}>{brl(totalCent)}</span>
          </div>

          {totalCamisas > 0 &&
        <div style={{
          marginTop: 10, fontSize: 12,
          fontFamily: MB.body,
          color: isDark ? 'rgba(255,255,244,0.55)' : MB.bgDark,
          lineHeight: 1.55,
          padding: '10px 12px',
          borderRadius: 10,
          background: isDark ? 'rgba(254,221,0,0.06)' : 'rgba(254,221,0,0.18)'
        }}>
              💛 Você está reservando <strong>{totalCamisas} {totalCamisas === 1 ? 'camisa' : 'camisas'}</strong> da edição Copa 2026. Sem pagamento agora.
            </div>
        }
        </div>
      }
    </div>);

}

Object.assign(window, { FormSection, FormBlock, Field, SizeRow, Stepper, DeliveryCard, OrderSummary, initialFormState });