// Removida a constante BUMPS, pois agora eles devem ser configurados dentro da Hotmart.
const BASE = 5.9;

function CheckoutPage({ onBack, lead, onTermos, onPrivacidade }) {
  const { useState } = React;
  // Estado para o Checkbox Obrigatório (Checklist Item 1)
  const [legalAccepted, setLegalAccepted] = useState(false);
  const [redirecting, setRedirecting] = useState(false);

  const totalStr = `$${BASE.toFixed(2).replace('.', ',')}`;

  const goToHotmart = (e) => {
    e.preventDefault();
    if (!legalAccepted) return;
    
    setRedirecting(true);

    // 1. A URL base limpa com o seu código de produto
    const hotmartBaseUrl = "https://pay.hotmart.com/L106669479L";
    
    // 2. Parâmetros dinâmicos para a Hotmart
    const params = new URLSearchParams({
      off: 'xkvbt23j', // Código da sua oferta específica
      name: lead?.nome || '',
      email: lead?.email || '',
      phonenumber: lead?.telefone ? lead.telefone.replace(/\D/g, '') : '',
      checkoutMode: 10 // Oculta a etapa de digitação de email na Hotmart, se possível
    });

    // 3. Monta o link final e redireciona
    window.location.href = `${hotmartBaseUrl}?${params.toString()}`;
  };

  return (
    <div className="flow-page" data-screen-label="03 Checkout">
      <nav className="flow-nav">
        <div className="container">
          <button className="flow-back" onClick={onBack}>← Voltar</button>
          <div className="steps">
            <span className="step done"><b>1</b>Cadastro</span>
            <span className="step-divider"></span>
            <span className="step done"><b>2</b>Seus dados</span>
            <span className="step-divider"></span>
            <span className="step on"><b>3</b>Revisão</span>
          </div>
        </div>
      </nav>

      <div className="flow-body">
        <aside className="flow-summary">
          <div className="eyebrow">passo 03 de 03</div>
          <h1>Revisão <em>final</em>.</h1>
          <p>Confirme os termos abaixo para ser direcionado ao ambiente seguro da Hotmart.</p>

          <div className="summary-card">
            <div className="summary-row head">
              <span>Resumo do pedido</span>
            </div>
            <div className="summary-row">
              <span>Documentação Básica · Vol. 01</span>
              <span>$5,90</span>
            </div>
            <div className="summary-row total">
              <span>Total</span>
              <span>{totalStr}</span>
            </div>
          </div>
        </aside>

        <div>
          <form className="form-card" onSubmit={goToHotmart} noValidate>
            <h2>Termos e Finalização</h2>
            <p className="sub">Precisamos do seu de acordo para prosseguir.</p>

            {/* Checkbox Obrigatório (Checklist Item 1) */}
            <label className={`legal-checkbox ${legalAccepted ? 'accepted' : ''}`} style={{
              display: 'flex', alignItems: 'flex-start', gap: '12px', padding: '16px', 
              background: '#f9f9f9', border: '1px solid #e0e0e0', borderRadius: '8px', 
              marginBottom: '24px', cursor: 'pointer'
            }}>
              <input 
                type="checkbox" 
                checked={legalAccepted}
                onChange={(e) => setLegalAccepted(e.target.checked)}
                style={{ marginTop: '4px', width: '20px', height: '20px' }}
              />
              <span style={{ fontSize: '14px', lineHeight: '1.4', color: '#333' }}>
                Li e entendi que este produto é exclusivamente educacional, não constitui aconselhamento jurídico, não determina minha elegibilidade para qualquer processo e não garante nenhum resultado.
              </span>
            </label>

            <button type="submit" className="btn btn-black btn-arrow form-cta" disabled={!legalAccepted || redirecting}>
              {redirecting ? "Redirecionando..." : "Ir para pagamento seguro"}
            </button>

            {/* Disclaimer no Checkout e Links (Checklist Itens 3, 4 e 6) */}
            <div className="checkout-secure" style={{ marginTop: '16px', textAlign: 'center' }}>
              <p style={{ fontSize: '12px', color: '#666', marginBottom: '8px' }}>
                <strong>Aviso:</strong> Produto exclusivamente educacional. Ao avançar, você concorda com nossos <a href="#" onClick={(e) => { e.preventDefault(); onTermos(); }} style={{ color: '#000', textDecoration: 'underline' }}>Termos de Uso</a> e <a href="#" onClick={(e) => { e.preventDefault(); onPrivacidade(); }} style={{ color: '#000', textDecoration: 'underline' }}>Política de Privacidade</a>.
              </p>
              Pagamento processado de forma segura pela Hotmart.
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

window.CheckoutPage = CheckoutPage;