function Landing({ onCheckout, onTermos, onPrivacidade }) {
  const { useState } = React;
  const [openFaq, setOpenFaq] = useState(0);

  return (
    <>
      {/* NAV */}
      <nav className="nav" data-screen-label="01 Landing">
        <div className="container">
          <div className="nav-brand">
            <img src="/assets/logo-bare-arms-cream.png" alt="Bare Arms" />
            <div className="nav-brand-meta">Research<br/>& Solutions</div>
          </div>
          <button className="nav-cta" onClick={onCheckout}>quero o checklist · $5,90</button>
        </div>
      </nav>

      {/* HERO */}
      <section className="hero" style={{ paddingTop: '30px' }}>
        <div className="container hero-inner">
          <div className="hero-grid">
            <div>
              <div className="eyebrow light">para o brasileiro nos EUA · armas e caça · vol. 01</div>
              
              {/* Título mais curto e sem <br/> para permitir que se espalhe */}
             {/* Título espalhado ao máximo */}
              <h1 className="hero-h" style={{ maxWidth: '100%' }}>
                Arma nos EUA começa na <em>papelada</em>, não na loja.
              </h1>
              
              {/* Parágrafo com maxWidth maior para espalhar horizontalmente na página */}
              <p className="hero-p" style={{ maxWidth: '700px' }}>
                Todo processo ligado a arma de fogo aqui pede identidade, endereço e status imigratório - e trata imigrante de um jeito diferente de americano. A maioria trava antes de entender isso. Veja os <strong>5 documentos</strong> que você precisa ter em ordem antes de dar qualquer passo.
              </p>
              
              <div className="hero-cta-row">
                <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-start', gap: '12px' }}>
                  <button className="btn btn-tan btn-arrow" style={{ width: '100%' }} onClick={onCheckout}>
                    Quero o checklist · $5,90
                  </button>
                  <span style={{ fontSize: '13px', color: 'rgba(255,255,255,0.7)', lineHeight: '1.4', margin: '0' }}>
                    Isto é o passo zero. Não é autorização de compra — a gente explica exatamente o porquê aqui embaixo.
                  </span>
                </div>
              </div>

              <div className="hero-trust">
                <span className="trust-pill">acesso imediato</span>
                <span className="trust-pill">em português</span>
                <span className="trust-pill">PDF imprimível</span>
              </div>
            </div>
          </div>

          <div className="hero-strip">
            <div className="hero-strip-item">
              <b>05</b><span>documentos essenciais</span>
            </div>
            <div className="hero-strip-item">
              <b>07</b><span>erros comuns a evitar</span>
            </div>
            <div className="hero-strip-item">
              <b>PT</b><span>tudo em português</span>
            </div>
          </div>
        </div>
      </section>

      {/* TENTATIVAS */}
      <section className="tentativas" data-screen-label="01b Tentativas">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">o que já te aconteceu</div>
              <h2 className="h2">Você já tentou entender isso<br/><em>sozinho</em>.</h2>
            </div>
            <p>
              E não achou resposta. Porque quase tudo que existe sobre arma nos EUA
              foi escrito para americano - e americano não tem visto, não tem I-94, não tem status
              pra perder. A sua situação é outra. A gente organizou a parte que é sua.
            </p>
          </div>

          <div className="tentativas-grid">
            <div className="tent">
              <span className="tent-num">tentativa 01</span>
              <h3 className="tent-t">Procurou no Google</h3>
              <p className="tent-d">Achou site americano falando de processo americano. Nada sobre o que muda quando você tem visto.</p>
            </div>
            <div className="tent">
              <span className="tent-num">tentativa 02</span>
              <h3 className="tent-t">Perguntou pra um americano</h3>
              <p className="tent-d">"É simples, é só ir na loja com sua ID." Simples pra ele. Ele tem um status que você não tem.</p>
            </div>
            <div className="tent">
              <span className="tent-num">tentativa 03</span>
              <h3 className="tent-t">Perguntou pra um brasileiro daqui</h3>
              <p className="tent-d">Ou ouviu "pode sim, tranquilo" ou ouviu "nem pensa, você vai ser deportado". Nenhuma das duas te ajudou.</p>
            </div>
            <div className="tent">
              <span className="tent-num">tentativa 04</span>
              <h3 className="tent-t">Pensou em pagar uma consulta</h3>
              <p className="tent-d">Caro demais só pra descobrir quais papéis você precisa separar antes de começar.</p>
            </div>
          </div>

          <div className="bridge">
            <p className="bridge-text">Antes de qualquer processo, existe uma <em>lista</em>.</p>
            <button className="btn btn-tan btn-arrow" onClick={onCheckout}>Ver o checklist</button>
          </div>
        </div>
      </section>

      {/* PRODUTO */}
      <section className="produto" id="produto" data-screen-label="01c Produto">
        <div className="container">
          <div className="produto-grid">
            
            {/* blurred / redacted document */}
            <div className="doc-frame">
              <div className="doc-frame-inner">
                <div className="doc-fake-header">
                  <div className="doc-fake-brand">
                    Bare Arms
                    <small>Research & Solutions</small>
                  </div>
                  <div className="doc-fake-meta">
                    MATERIAL EDUCACIONAL<br/>
                    CHECKLIST · VOL. 01<br/>
                    ORLANDO · 2026
                  </div>
                </div>
                <h3 className="doc-fake-title">Documentação Básica</h3>
                <div className="doc-fake-row">
                  <em>01</em>
                  <div><b>Passaporte</b><span>Válido e não vencido. Guarde os antigos com carimbos de visto.</span></div>
                </div>
                <div className="doc-fake-row">
                  <em>02</em>
                  <div><b>Documentação do Visto</b><span>Conheça sua classificação atual. Guarde todas as páginas.</span></div>
                </div>
                <div className="doc-fake-row">
                  <em>03</em>
                  <div><b>Registro I-94</b><span>Acesse e salve o registro atual em i94.cbp.dhs.gov.</span></div>
                </div>
                <div className="doc-fake-row">
                  <em>04</em>
                  <div><b>ID Estadual</b><span>Carteira de motorista ou identidade emitida pelo estado.</span></div>
                </div>
                <div className="doc-fake-row">
                  <em>05</em>
                  <div><b>Comprovante de Endereço</b><span>Conta recente, extrato bancário ou contrato de locação.</span></div>
                </div>
              </div>
              <div className="doc-overlay">
                <div className="doc-stamp">
                  Prévia
                  <small>versão bloqueada</small>
                </div>
                <span className="doc-overlay-cta">desbloqueie por $5,90</span>
              </div>
            </div>

            <div>
              <div className="eyebrow light">material educacional · pt-br</div>
              <h2 className="prod-h">O <em>checklist</em>.</h2>
              <p className="prod-p">
                5 documentos essenciais. Zero achismo. Tudo em português, linguagem
                direta, sem juridiquês.
              </p>
              <ul className="prod-list">
                <li>
                  <span>Os 5 documentos essenciais, um a um, com o que verificar em cada.</span>
                </li>
                <li>
                  <span>7 erros de documentação que travam imigrante — e como evitar cada um.</span>
                </li>
                <li>
                  <span>Checklist de autoauditoria pra conferir tudo antes de precisar.</span>
                </li>
              </ul>
              <button className="btn btn-tan btn-arrow" style={{ marginBottom: '40px' }} onClick={onCheckout}>
                Quero o checklist · $5,90
              </button>

              {/* BLOCO DE HONESTIDADE */}
              <div style={{
                border: '1px solid #e0e0e0', borderRadius: '12px', padding: '24px',
                backgroundColor: '#fafafa', color: '#333'
              }}>
                <div className="eyebrow" style={{ color: '#000', marginBottom: '12px' }}>leia antes de comprar</div>
                <h3 style={{ fontSize: '20px', fontWeight: '800', fontFamily: 'var(--font-display)', textTransform: 'uppercase', marginBottom: '16px', letterSpacing: '-0.02em', lineHeight: '1.2' }}>
                  Isso aqui não te autoriza a comprar nada.
                </h3>
                <p style={{ fontSize: '14px', lineHeight: '1.6', marginBottom: '12px' }}>
                  Vou ser direto porque isso importa mais que a venda. Ter estes 5 documentos em ordem é o passo zero — é o que te tira do zero absoluto e te coloca em condição de sequer iniciar alguma coisa. Depois deste passo existe um processo de verdade: verificação federal, formulário próprio, regras estaduais, e requisitos que mudam conforme a sua categoria de visto.
                </p>
                <p style={{ fontSize: '14px', lineHeight: '1.6', marginBottom: '12px' }}>
                  E tem uma coisa que quase ninguém te conta: a lei federal não trata todo imigrante da mesma forma. O que vale pra quem tem green card não vale pra quem tem F-1. Para algumas categorias existem exigências adicionais que simplesmente não existem para um cidadão americano.
                </p>
                <p style={{ fontSize: '14px', lineHeight: '1.6', marginBottom: '24px' }}>
                  Este checklist não resolve essa parte. O que ele faz é garantir que você não seja parado logo no primeiro filtro por causa de um papel vencido, um nome divergente ou um registro que você nem sabia que precisava salvar.
                </p>
                
                <div style={{ padding: '16px', backgroundColor: '#fff', border: '1px solid #eee', borderRadius: '8px' }}>
                  <div style={{ fontSize: '13px', fontWeight: '700', marginBottom: '4px' }}>Passo 1: seus documentos em ordem.</div>
                  <div style={{ fontSize: '13px', color: '#666', marginBottom: '12px' }}>É este material.</div>
                  <div style={{ fontSize: '13px', fontWeight: '700', marginBottom: '4px' }}>Passo 2: entender o que a lei federal diz sobre a sua categoria de visto.</div>
                  <div style={{ fontSize: '13px', color: '#666', marginBottom: '8px' }}>É o Vol. 02.</div>
                  <a href="#" style={{ fontSize: '12px', fontWeight: '600', color: '#000', textDecoration: 'underline' }}>ver a série completa</a>
                </div>
              </div>

            </div>
          </div>
        </div>
      </section>

      {/* CHECAGEM */}
      <section className="lei" data-screen-label="01d Checagem">
        <div className="container">
          <div className="lei-intro">
            <div>
              <div className="eyebrow">checagem rápida</div>
              <h2 className="h2">O que ter em dia<br/>e o que te <em>trava</em>.</h2>
            </div>
            <p>
              Documentação desorganizada é a razão mais comum pela qual imigrante perde tempo, perde dinheiro e leva "não" em processos administrativos. Confira os dois lados antes de precisar.
            </p>
          </div>

          <div className="lei-grid">
            <div className="lei-card">
              <div className="lei-card-label pode">o que ter em dia</div>
              <ul className="lei-list pode">
                <li>
                  <div>
                    <b>Documentos válidos</b>
                    <span>Todos dentro do prazo. Documento vencido raramente é aceito, e ninguém abre exceção pra você.</span>
                  </div>
                </li>
                <li>
                  <div>
                    <b>Nome consistente</b>
                    <span>O mesmo nome, do mesmo jeito, em todos os papéis. Uma letra diferente entre passaporte e ID estadual já é motivo de divergência.</span>
                  </div>
                </li>
                <li>
                  <div>
                    <b>Endereço atualizado</b>
                    <span>Correto em todos os registros. Comprovação de endereço e de tempo de residência no estado é exigida em processos ligados a arma de fogo. </span>
                  </div>
                </li>
                <li>
                  <div>
                    <b>I-94 salvo</b>
                    <span>Acessado e guardado a partir de i94.cbp.dhs.gov. É ele que mostra seu status atual, não o visto.</span>
                  </div>
                </li>
                <li>
                  <div>
                    <b>Cópias de segurança</b>
                    <span>Versões digitais de tudo, guardadas em local seguro e acessível.</span>
                  </div>
                </li>
              </ul>
            </div>
            <div className="lei-card">
              <div className="lei-card-label nao">o que trava o processo</div>
              <ul className="lei-list nao">
                <li className="simple">Documento vencido, mesmo que seu status não tenha mudado</li>
                <li className="simple">Nome divergente entre um papel e outro</li>
                <li className="simple">Descartar passaporte antigo com visto carimbado</li>
                <li className="simple">Confundir a validade do visto com o prazo do I-94 - são coisas diferentes</li>
                <li className="simple">Ficar sem comprovante de endereço recente na hora que pedirem</li>
              </ul>
            </div>
          </div>

          <div className="excecoes-box">
            <div>
              <div className="exc-label">atenção</div>
              <h3 className="exc-h">Isto é um ponto de partida.</h3>
              <p className="exc-p">
                Este checklist é educacional e não é uma lista exaustiva. Dependendo do processo, do estado e da sua categoria de visto, pode ser exigida documentação adicional e, em alguns casos, requisitos que vão muito além de documento. Sempre verifique os requisitos atuais do processo específico que você vai iniciar.
              </p>
            </div>
            <ul className="exc-list">
              <li>Os requisitos variam por estado</li>
              <li>Variam por instituição e órgão administrativo</li>
              <li>Variam por revendedor licenciado (FFL Dealer)</li>
              <li>Cada categoria de visto tem regras próprias</li>
              <li>Não substitui aconselhamento jurídico</li>
            </ul>
          </div>
        </div>
      </section>

      {/* OFERTA */}
      <section className="oferta" id="oferta" data-screen-label="01e Oferta">
        <div className="container">
          <div className="oferta-inner">
            <div className="oferta-left">
              <div className="eyebrow light">bare arms · pt-br · vol. 01 · 2026</div>
              <h2 className="oferta-h">O <em>checklist</em> completo.</h2>
              <p className="oferta-p">Acesso imediato, direto no seu email.</p>
            </div>

            <div className="price-card">
              <div className="price-card-head">
                <div className="price-card-title">
                  Documentação Básica · Vol. 01
                  <small>Bare Arms R&S · 2026 · PDF</small>
                </div>
                <div className="price-display">
                  <span className="price-original">$29</span>
                  <div className="price-final">$5,90</div>
                  <span className="price-note">pagamento único</span>
                </div>
              </div>

              <ul className="includes-list">
                <li>Checklist em PDF, acesso imediato</li>
                <li>Os 5 documentos essenciais, detalhados um a um</li>
                <li>7 erros comuns + checklist de autoauditoria</li>
                <li>Suporte por WhatsApp em português</li>
              </ul>

              <button className="btn btn-black btn-arrow" style={{width:'100%'}} onClick={onCheckout}>
                Quero o meu agora · $5,90
              </button>
              <p className="payment-note">pagamento seguro · cartão internacional</p>
              <div style={{ marginTop: '16px', fontSize: '11px', lineHeight: '1.4', color: '#666', textAlign: 'center' }}>
                Material educacional. Não é aconselhamento jurídico e não determina elegibilidade.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="faq" data-screen-label="01f FAQ">
        <div className="container">
          <div className="faq-grid">
            <div className="faq-left">
              <div className="eyebrow">FAQ</div>
              <h2 className="h2" style={{marginTop:12}}>Perguntas<br/><em>frequentes</em>.</h2>
              <p>As dúvidas mais comuns — inclusive as que ninguém tem coragem de fazer.</p>
            </div>
            <ul className="faq-list">
              {[
                {
                  q: "Com esses documentos eu já posso comprar uma arma?",
                  a: "Não. E qualquer um que te disser que sim está te fazendo um péssimo favor. Estes 5 documentos são o pré-requisito — o que você precisa ter em mãos antes de sequer iniciar qualquer processo. Depois deles vem verificação federal, formulário próprio e regras que dependem do seu estado e, principalmente, da sua categoria de visto. Este material trata da primeira etapa. Só dela."
                },
                {
                  q: "Serve pro meu tipo de visto?",
                  a: "A organização documental básica vale pra qualquer categoria - F-1, J-1, H-1B, L-1, TPS, residente permanente e outras. Mas atenção: o que muda depois dessa etapa muda muito por categoria. A lei federal não trata todo imigrante da mesma forma, e o material aponta exatamente onde você precisa verificar a sua situação específica."
                },
                {
                  q: "Isso garante aprovação em algum processo?",
                  a: "Não, e nenhum checklist do mundo garante. O que a documentação em ordem faz é evitar que você seja eliminado no primeiro filtro por um motivo bobo e evitável. Elegibilidade depende do seu caso concreto e de um profissional qualificado - não de um PDF."
                },
                {
                  q: "Isso é aconselhamento jurídico?",
                  a: "Não. É material educacional, feito pra você entender o terreno e chegar preparado na conversa com quem pode te orientar de verdade. Inclusive: um dos objetivos deste material é fazer você saber o que perguntar a um advogado, em vez de pagar consulta pra descobrir qual papel separar."
                },
                {
                  q: "Por que tão barato?",
                  a: "Porque é o material de entrada da série. Quero que você veja que entrega o que promete e acompanhe os próximos volumes, que tratam da parte mais complexa. Sem pressão e sem enrolação."
                },
                {
                  q: "Como vou receber?",
                  a: "Direto no seu email, em PDF, na hora que o pagamento aprovar. Mais o WhatsApp pra qualquer dúvida, em português."
                }
              ].map((item, i) => (
                <li key={i} className={`faq-item ${openFaq === i ? 'open' : ''}`}>
                  <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                    {item.q}
                    <span className="faq-icon">+</span>
                  </button>
                  <div className="faq-a">
                    <div className="faq-a-inner">{item.a}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* FECHAMENTO */}
      <section className="fechamento" data-screen-label="01g Fechamento">
        <div className="container">
          <div className="eyebrow light">o primeiro passo</div>
          <h2>5 documentos.<br/>1 checklist.<br/><em>$5,90</em>.</h2>
          <p>
            Se você é imigrante e tem interesse em arma de fogo ou caça nos EUA, esse é o seu passo zero. Não vai te autorizar nada - vai te tirar do escuro e te deixar pronto pra entender o que vem depois.
          </p>
          
          {/* Disclaimer na página de vendas (Checklist Item 5) */}
          <div style={{
            maxWidth: '600px', margin: '24px auto', padding: '16px',
            border: '1px solid rgba(255, 255, 255, 0.2)', borderRadius: '8px',
            backgroundColor: 'rgba(0, 0, 0, 0.15)',
            fontSize: '13px', lineHeight: '1.5', color: 'rgba(255, 255, 255, 0.9)', textAlign: 'left'
          }}>
            <strong>Aviso Legal:</strong> Este produto é exclusivamente educacional. Não constitui aconselhamento jurídico, não determina elegibilidade para qualquer processo e não garante nenhum resultado. Leis podem sofrer alterações. Consulte um advogado qualificado para orientação sobre sua situação específica.
          </div>

          <button className="btn btn-tan btn-arrow" onClick={onCheckout}>Começa agora · $5,90</button>
          
          <div className="fechamento-trust">
            <span className="trust-pill">acesso imediato</span>
            <span className="trust-pill">em português</span>
            <span className="trust-pill">suporte no WhatsApp</span>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer data-screen-label="01h Footer">
        <div className="container">
          <div className="foot-row">
            <div className="foot-logo">
              <img src="/assets/logo-bare-arms-cream.png" alt="Bare Arms" />
              <p className="foot-tag">
                Materiais educacionais em português para imigrantes brasileiros nos Estados Unidos.
              </p>
            </div>
            <div className="foot-cols">
              {/* Termos de Uso específicos e Política de Privacidade (Checklist Itens 3 e 4) */}
              <div className="foot-col">
                <span className="eyebrow light">links legais</span>
                <a href="#" onClick={(e) => { e.preventDefault(); onTermos(); }}>Termos de Uso</a>
                <a href="#" onClick={(e) => { e.preventDefault(); onPrivacidade(); }}>Política de Privacidade</a>
                <a href="https://wa.me/14073266600" target="_blank" rel="noreferrer">Contato</a>
              </div>
              <div className="foot-col">
                <span className="eyebrow light">contato</span>
                <a href="mailto:info@barsgroup.com">info@barsgroup.com</a>
                <a href="https://wa.me/14073266600" target="_blank" rel="noreferrer">WhatsApp · +1 (407) 326-6600</a>
                <a href="#">Orlando, FL</a>
              </div>
            </div>
          </div>
          <p className="foot-disclaimer">
            Material fornecido exclusivamente para fins de informação e educação. Não constitui aconselhamento jurídico nem de imigração e não cria relação advogado-cliente. Não determina elegibilidade para nenhum processo, benefício, licença ou direito, e não autoriza a aquisição, posse ou porte de arma de fogo. As leis federais e estaduais e os requisitos dos órgãos podem mudar a qualquer momento e variam conforme a categoria imigratória. Verifique os requisitos atuais de forma independente e consulte um advogado qualificado antes de tomar qualquer medida.
          </p>
          <div className="foot-base">
            <span>Bare Arms Research & Solutions · 2026</span>
            <span>material educacional · não é aconselhamento jurídico</span>
          </div>
        </div>
      </footer>
    </>
  );
}

window.Landing = Landing;