// Obrigado.jsx — Confirmation screen (in-page state, not a separate route)

function ObrigadoScreen({ pedido, onVoltar, tweaks }) {
  const isDark = tweaks.theme === 'dark';

  if (!pedido) {
    return (
      <section style={{
        minHeight: '70vh',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 40,
      }}>
        <div className="glass-card" style={{ padding: 40, maxWidth: 480, textAlign: 'center' }}>
          <Icon.AlertCircle size={32} style={{ color: MB.copper }} />
          <h2 style={{ marginTop: 16, fontFamily: MB.display, fontSize: 28, color: isDark ? '#fffff4' : MB.bgDarker }}>
            Hmm, não encontramos o seu pedido
          </h2>
          <p style={{
            marginTop: 12, fontFamily: MB.body, lineHeight: 1.7,
            color: isDark ? 'rgba(255,255,244,0.75)' : MB.bgDark,
          }}>
            Talvez a sessão tenha expirado. Que tal começar de novo? Sua reserva é rapidinha.
          </p>
          <button onClick={onVoltar} className="btn btn-primary" style={{ marginTop: 24 }}>
            Voltar ao início <Icon.ArrowRight size={18} />
          </button>
        </div>
      </section>
    );
  }

  return (
    <section style={{
      padding: 'clamp(60px, 10vw, 120px) 0',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Confetti backdrop */}
      <Confetti />

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{
          maxWidth: 780, margin: '0 auto',
          display: 'flex', flexDirection: 'column', gap: 28,
        }}>

          {/* Hero card */}
          <div className="glass-card fade-up" style={{
            padding: 'clamp(28px, 4vw, 48px)',
            textAlign: 'center',
            position: 'relative',
            overflow: 'hidden',
          }}>
            <div style={{
              display: 'inline-flex',
              width: 84, height: 84, borderRadius: 999,
              background: 'linear-gradient(135deg, var(--copa-green), var(--copa-green-deep))',
              color: '#fff',
              alignItems: 'center', justifyContent: 'center',
              marginBottom: 20,
              boxShadow: '0 12px 32px rgba(0,151,57,0.40)',
              animation: `pop 600ms ${MB.ease} both`,
            }}>
              <Icon.Check size={42} />
            </div>
            <h1 style={{
              fontFamily: MB.display, fontWeight: 800,
              fontSize: 'clamp(34px, 5vw, 52px)',
              lineHeight: 1.0,
              letterSpacing: '-0.02em',
              color: isDark ? '#fffff4' : MB.bgDarker,
            }}>
              Cadastro recebido! 🍻
            </h1>
            <p style={{
              marginTop: 14,
              fontFamily: MB.body,
              fontSize: 17,
              lineHeight: 1.65,
              color: isDark ? 'rgba(255,255,244,0.78)' : MB.bgDark,
              maxWidth: 540, marginInline: 'auto',
            }}>
              Sua reserva está garantida. Em até <strong>48 horas</strong> entraremos em contato pelo WhatsApp em <strong>{maskTelefone(pedido.telefone)}</strong> com as instruções de pagamento.
            </p>

            <div style={{
              marginTop: 22,
              display: 'inline-flex',
              alignItems: 'center', gap: 8,
              padding: '10px 18px',
              borderRadius: 999,
              background: isDark ? 'rgba(254,221,0,0.10)' : 'rgba(0,151,57,0.10)',
              color: isDark ? 'var(--copa-yellow)' : 'var(--copa-green-deep)',
              fontFamily: MB.display, fontWeight: 700, fontSize: 13,
              letterSpacing: '0.06em',
              border: '1px solid ' + (isDark ? 'rgba(254,221,0,0.20)' : 'rgba(0,151,57,0.20)'),
            }}>
              Protocolo {pedido.protocolo}
            </div>
          </div>

          {/* Order summary card */}
          <div className="glass-card fade-up-delay-1" style={{ padding: 'clamp(24px, 3vw, 36px)' }}>
            <h3 style={{
              fontFamily: MB.display, fontWeight: 700, fontSize: 14,
              textTransform: 'uppercase', letterSpacing: '0.08em',
              color: isDark ? 'rgba(255,255,244,0.65)' : MB.bgDark,
              margin: 0, marginBottom: 18,
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <Icon.Package size={16} /> Resumo da sua reserva
            </h3>

            {/* Customer + address */}
            <div className="ob-info-grid" style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
              gap: 16,
              marginBottom: 24,
              paddingBottom: 24,
              borderBottom: '1px dashed ' + (isDark ? 'rgba(255,255,244,0.12)' : 'rgba(50,50,49,0.12)'),
            }}>
              <InfoBlock label="Cliente" isDark={isDark}>
                <div style={{ fontWeight: 700 }}>{pedido.nome}</div>
                <div>{pedido.email}</div>
                <div>{maskTelefone(pedido.telefone)}</div>
              </InfoBlock>
              <InfoBlock label={pedido.tipoEntrega === 'entrega' ? 'Entrega' : 'Retirada'} isDark={isDark}>
                {pedido.tipoEntrega === 'entrega' ? (
                  <>
                    <div style={{ fontWeight: 700 }}>
                      {pedido.logradouro}, {pedido.numero}
                      {pedido.complemento ? ` — ${pedido.complemento}` : ''}
                    </div>
                    <div>{pedido.bairro} · {pedido.cidade}/{pedido.estado}</div>
                    <div>CEP {maskCEP(pedido.cep)}</div>
                    <div style={{ marginTop: 4, color: MB.copper, fontWeight: 600 }}>
                      {pedido.freteDescricao}
                    </div>
                  </>
                ) : (
                  <>
                    <div style={{ fontWeight: 700 }}>Cervejaria MinduBier</div>
                    <div>Bairro da Graça · Salvador/BA</div>
                    <div style={{ marginTop: 4, color: MB.copaGreenDeep, fontWeight: 600 }}>
                      Te avisamos quando estiver disponível
                    </div>
                  </>
                )}
              </InfoBlock>
            </div>

            {/* Items */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {pedido.itens.map((i) => (
                <div key={i.tamanho} className="summary-row" style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  fontFamily: MB.body, fontSize: 15,
                  padding: '10px 0',
                  color: isDark ? 'rgba(244,241,228,0.78)' : MB.bgDark,
                }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <span style={{
                      display: 'inline-flex',
                      width: 38, height: 38, borderRadius: 999,
                      background: isDark ? 'rgba(254,221,0,0.15)' : 'rgba(0,151,57,0.10)',
                      color: isDark ? 'var(--copa-yellow)' : 'var(--copa-green-deep)',
                      alignItems: 'center', justifyContent: 'center',
                      fontFamily: MB.display, fontWeight: 800, fontSize: 13,
                    }}>{i.tamanho}</span>
                    <span style={{ color: isDark ? '#fffff4' : MB.bgDarker, fontWeight: 600 }}>
                      Camisa {i.tamanho} × {i.quantidade}
                    </span>
                  </span>
                  <span style={{ fontVariantNumeric: 'tabular-nums', fontWeight: 700, color: isDark ? '#fffff4' : MB.bgDarker }}>
                    {brl(i.quantidade * PRECO_CAMISA_CENTAVOS)}
                  </span>
                </div>
              ))}
            </div>

            {/* Totals */}
            <div style={{
              marginTop: 18, paddingTop: 18,
              borderTop: '1px solid ' + (isDark ? 'rgba(255,255,244,0.10)' : 'rgba(50,50,49,0.10)'),
              display: 'flex', flexDirection: 'column', gap: 6,
            }}>
              <SummaryLine
                label="Subtotal" value={brl(pedido.subtotalCentavos)} isDark={isDark}
              />
              <SummaryLine
                label="Frete"
                value={pedido.freteCentavos > 0 ? brl(pedido.freteCentavos) : (pedido.tipoEntrega === 'retirada' ? 'Grátis' : 'A combinar')}
                isDark={isDark}
              />
              <div style={{
                marginTop: 8, paddingTop: 14,
                borderTop: '2px solid ' + (isDark ? 'rgba(254,221,0,0.25)' : 'rgba(50,50,49,0.15)'),
                display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
              }}>
                <span style={{
                  fontFamily: MB.display, fontWeight: 700, fontSize: 14,
                  textTransform: 'uppercase', letterSpacing: '0.08em',
                  color: isDark ? '#fffff4' : MB.bgDarker,
                }}>Total previsto</span>
                <span style={{
                  fontFamily: MB.display, fontWeight: 800,
                  fontSize: 'clamp(28px, 4vw, 38px)',
                  fontVariantNumeric: 'tabular-nums',
                  letterSpacing: '-0.02em',
                  color: MB.copper,
                }}>{brl(pedido.totalCentavos)}</span>
              </div>
            </div>
          </div>

          {/* Next steps */}
          <div className="fade-up-delay-2" style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
            gap: 14,
          }}>
            <NextStep n="1" title="WhatsApp em 48h" body="Te chamamos pra confirmar." isDark={isDark} />
            <NextStep n="2" title="Pagamento" body="Combinamos pelo WhatsApp." isDark={isDark} />
            <NextStep n="3" title="Entrega" body={pedido.tipoEntrega === 'entrega' ? 'PAC pelos Correios.' : 'Te avisamos na retirada.'} isDark={isDark} />
          </div>

          {/* Actions */}
          <div className="fade-up-delay-3" style={{
            display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap',
            marginTop: 8,
          }}>
            <a
              href={`https://wa.me/55${unmaskTelefone('71981069026')}?text=${encodeURIComponent('Oi MinduBier, fiz minha pré-reserva da camisa Copa 2026 — protocolo ' + pedido.protocolo)}`}
              target="_blank" rel="noopener noreferrer"
              className="btn btn-copper"
            >
              <Icon.Whatsapp size={18} /> Chamar no WhatsApp
            </a>
            <button onClick={onVoltar} className="btn btn-ghost">
              <Icon.ChevronLeft size={18} /> Voltar ao início
            </button>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes pop {
          from { transform: scale(0.3); opacity: 0; }
          60%  { transform: scale(1.1); opacity: 1; }
          to   { transform: scale(1); opacity: 1; }
        }
      `}</style>
    </section>
  );
}

function InfoBlock({ label, children, isDark }) {
  return (
    <div>
      <div className="label" style={{
        marginBottom: 6,
        color: isDark ? 'rgba(255,255,244,0.55)' : MB.bgDark,
      }}>{label}</div>
      <div style={{
        fontFamily: MB.body, fontSize: 14, lineHeight: 1.55,
        color: isDark ? 'rgba(244,241,228,0.85)' : MB.bgDarker,
      }}>{children}</div>
    </div>
  );
}

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

function NextStep({ n, title, body, isDark }) {
  return (
    <div style={{
      padding: 18,
      borderRadius: 14,
      background: isDark ? 'rgba(255,255,244,0.04)' : 'rgba(255,255,244,0.6)',
      border: '1px solid ' + (isDark ? 'rgba(255,255,244,0.08)' : 'rgba(50,50,49,0.06)'),
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 999,
        background: 'linear-gradient(135deg, var(--copa-green), var(--copa-green-deep))',
        color: '#fff', fontFamily: MB.display, fontWeight: 800,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 14, marginBottom: 10,
      }}>{n}</div>
      <div style={{
        fontFamily: MB.display, fontWeight: 700, fontSize: 15,
        color: isDark ? '#fffff4' : MB.bgDarker,
      }}>{title}</div>
      <div style={{
        marginTop: 4, fontFamily: MB.body, fontSize: 13,
        color: isDark ? 'rgba(255,255,244,0.65)' : MB.bgDark,
        lineHeight: 1.55,
      }}>{body}</div>
    </div>
  );
}

// Confetti — pure-CSS keyframes, lightweight
function Confetti() {
  const pieces = React.useMemo(() => {
    const colors = ['#009739', '#fedd00', '#c5762a', '#efa31f', '#ffffff'];
    return Array.from({ length: 36 }).map((_, i) => ({
      id: i,
      left: Math.random() * 100,
      delay: Math.random() * 4,
      duration: 6 + Math.random() * 4,
      size: 6 + Math.random() * 8,
      color: colors[i % colors.length],
      rotate: Math.random() * 360,
    }));
  }, []);
  return (
    <div aria-hidden="true" style={{
      position: 'absolute', inset: 0,
      overflow: 'hidden', pointerEvents: 'none',
      zIndex: 0,
    }}>
      {pieces.map((p) => (
        <span key={p.id} style={{
          position: 'absolute',
          top: -20,
          left: p.left + '%',
          width: p.size, height: p.size * 0.4,
          background: p.color,
          borderRadius: 2,
          animation: `fall ${p.duration}s ${p.delay}s linear infinite`,
          transform: `rotate(${p.rotate}deg)`,
          opacity: 0.85,
        }} />
      ))}
      <style>{`
        @keyframes fall {
          0%   { transform: translateY(-30px) rotate(0deg); opacity: 0; }
          10%  { opacity: 0.9; }
          100% { transform: translateY(110vh) rotate(720deg); opacity: 0.9; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { ObrigadoScreen });