// lp-raw.jsx — variation 3: raw / manifesto / letter

function LPRaw({ tweaks }) {
  const H = HEADLINES[tweaks.headline] || HEADLINES.C;
  const heroPhoto = tweaks.heroPhoto;
  const smilePhoto = 'assets/nath-perfil.png';
  const showProof = tweaks.showProof;
  const [openFaq, setOpenFaq] = React.useState(-1);

  return (
    <div className="lp-mobile raw">
      <Countdown compact />

      {/* === LETTER HEADER === */}
      <section className="section" style={{ paddingTop: 32, paddingBottom: 16 }}>
        <div className="typewriter" style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, opacity: 0.7 }}>
          <span>De: Nathalia Prisco</span>
          <span>28 · maio · 26</span>
        </div>
        <div className="typewriter" style={{ fontSize: 11, opacity: 0.7, marginTop: 4 }}>
          Para: você, que abriu isto sabendo por quê.
        </div>
        <div style={{ height: 1, background: 'var(--gold)', opacity: 0.5, margin: '20px 0' }} />

        <h1 className="display" style={{ fontSize: 30, lineHeight: 1.12, margin: 0 }}>
          {H.title}
        </h1>
        <p className="typewriter mt-6" style={{ color: 'var(--gold-light)', lineHeight: 1.5 }}>
          // {H.kicker}
        </p>
      </section>

      {/* === LETTER BODY 1 === */}
      <section className="section" style={{ paddingTop: 24 }}>
        <p className="typewriter">Eu vou ser direta com você.</p>
        <p className="typewriter mt-4">
          Alguém aparece. Você investe. Ele some.<br />
          Você se pergunta o que fez de errado.<br />
          Ele volta. Você dá uma nova chance.
        </p>
        <p className="typewriter mt-4">
          E em algum momento — <strong>semanas ou meses depois</strong> — você está exatamente no mesmo lugar, com a mesma dor, só com um nome diferente na tela.
        </p>
        <p className="typewriter mt-4">O que dói mais não é ele.</p>
        <p className="typewriter mt-2" style={{ color: 'var(--gold-light)' }}>
          <strong>É a sensação de que você já sabia.</strong>
        </p>
        <p className="typewriter mt-4">
          Que você viu os sinais.<br />
          Que suas amigas viram antes de você.<br />
          Que você é, de alguma forma, cúmplice do que aconteceu — e não entende por que continua deixando.
        </p>

        <SectionCTA
          hint={<>Tu não chegaste aqui à toa.<br />Vem entender de onde isso vem.</>}
          price={tweaks.activeLotPrice}
        />
      </section>

      {/* === The strikethrough manifesto block === */}
      <section className="section" style={{ background: 'rgba(0,0,0,0.25)' }}>
        <p className="typewriter" style={{ color: 'var(--cream-dim)' }}>
          A resposta que te vendem:
        </p>
        <div className="mt-4" style={{ display: 'grid', gap: 8 }}>
          {[
            'Você precisa se valorizar mais.',
            'Tem que aprender a se amar primeiro.',
            'Use técnicas de conquista.',
            'Faça vácuo. Não responde. Espera 3 dias.',
            'Lê esses 12 livros de autoajuda.',
            'O problema são todos os homens.',
          ].map((t, i) => (
            <p key={i} className="typewriter strike" style={{ fontSize: 13, margin: 0 }}>
              — {t}
            </p>
          ))}
        </div>
        <Ornament />
        <p className="typewriter mt-4" style={{ color: 'var(--cream)' }}>
          A resposta real:
        </p>
        <p className="typewriter mt-3" style={{ color: 'var(--gold-light)', fontSize: 15 }}>
          <strong>A resposta não está nos homens que você escolheu.</strong>
        </p>
        <p className="typewriter mt-2">
          Está no mecanismo interno que produz essas escolhas — repetidamente, com pessoas diferentes, no mesmo padrão.
        </p>
      </section>

      {/* === LETTER 2: SOBRE A NATH === */}
      <section className="section">
        <p className="typewriter" style={{ color: 'var(--gold-light)' }}>
          <strong>// Quem sou eu pra te dizer isso</strong>
        </p>

        {/* Polaroid-style smiling photo — moved here per request */}
        <div style={{
          marginTop: 28,
          padding: 14,
          background: 'var(--cream)',
          transform: 'rotate(-1.5deg)',
          boxShadow: '0 24px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.1)',
          marginInline: 8,
        }}>
          <NathPhoto src={smilePhoto} style={{ borderRadius: 0, filter: 'contrast(0.98) saturate(0.9)' }} />
          <p style={{
            fontFamily: 'var(--font-script)',
            fontSize: 22,
            color: '#3A1820',
            margin: '12px 0 0',
            textAlign: 'center',
          }}>
            Nath, 2026 ·
          </p>
        </div>

        <p className="typewriter mt-8">
          Sou psicoterapeuta.<br />
          Clínica ativa. Agenda fechada.<br />
          Pacientes em mais de 6 países.
        </p>
        <p className="typewriter mt-4">
          Anos olhando, sessão por sessão, para o que está por baixo dos relacionamentos que não funcionam — não em teoria, em vidas reais.
        </p>
        <p className="typewriter mt-4">
          Eu não vendo autoajuda. Eu não vendo empoderamento.
        </p>
        <p className="typewriter mt-2" style={{ color: 'var(--gold-light)' }}>
          <strong>Eu vendo clareza.</strong>
        </p>
        <p className="typewriter mt-3">
          Aquela que muda algo porque você <em>não consegue mais não ver.</em>
        </p>
      </section>

      {/* === O QUE VAI ACONTECER === */}
      <section className="section">
        <p className="typewriter" style={{ color: 'var(--gold-light)' }}>
          <strong>// O que vai acontecer no dia 6</strong>
        </p>
        <p className="typewriter mt-4">
          Três horas ao vivo, no Zoom.<br />
          Sem replay.<br />
          Sem roteiro engessado.<br />
          Sem técnica.
        </p>
        <p className="typewriter mt-4">Eu vou te mostrar:</p>
        <div className="mt-4" style={{ borderLeft: '1px solid var(--gold)', paddingLeft: 14 }}>
          {[
            'O mecanismo psíquico que sustenta padrões relacionais repetitivos.',
            'Por que saber racionalmente que algo está errado não é suficiente para mudar.',
            'O que diferencia a mulher que continua no ciclo da que sai dele.',
            'Como a consciência desse mecanismo muda a escolha na raiz.',
          ].map((t, i) => (
            <p key={i} className="typewriter" style={{ margin: '10px 0', fontSize: 13 }}>
              <span style={{ color: 'var(--gold-light)' }}>{String(i + 1).padStart(2, '0')}.</span> {t}
            </p>
          ))}
        </div>
      </section>

      {/* === FRASES SUAS === */}
      <section className="section" style={{ background: 'rgba(0,0,0,0.25)' }}>
        <p className="typewriter" style={{ color: 'var(--gold-light)' }}>
          <strong>// Você está aqui se já disse alguma destas</strong>
        </p>
        <div className="mt-6" style={{ display: 'grid', gap: 16 }}>
          {[
            '"Por que sempre acontece comigo?"',
            '"Por que ele assumiu ela em 1 mês e a mim não em 2 anos?"',
            '"O que ela tem que eu não tenho?"',
            '"Eu sei o que tô fazendo de errado. Por que continuo fazendo?"',
            '"Eu não quero técnica. Eu quero entender."',
          ].map((t, i) => (
            <p key={i} className="serif italic" style={{
              fontSize: 19, color: 'var(--cream)',
              borderLeft: '2px solid var(--gold)', paddingLeft: 14,
              margin: 0, lineHeight: 1.3,
            }}>
              {t}
            </p>
          ))}
        </div>
        <Ornament heart />
        <p className="typewriter text-center" style={{ color: 'var(--gold-light)' }}>
          Essas frases têm nome. Têm lógica.<br />
          E têm um motivo de funcionar em você.
        </p>

        <SectionCTA
          hint={<>Se reconheceu uma como sua,<br />o lugar é aqui.</>}
          price={tweaks.activeLotPrice}
        />
      </section>

      {/* === DEPOIS DA IMERSÃO === */}
      <section className="section">
        <p className="typewriter" style={{ color: 'var(--gold-light)' }}>
          <strong>// Depois da imersão</strong>
        </p>
        <p className="typewriter mt-4">O que vai estar diferente em você:</p>
        <div className="mt-4" style={{ display: 'grid', gap: 12 }}>
          {[
            'Parar de se perguntar o que há de errado em você.',
            'Reconhecer o padrão antes de entrar nele.',
            'Deixar de se sentir burra. Você não era.',
            'Entender o que sustentava a espera. E parar de sustentar.',
            'Sair do lugar de quem é escolhida pro lugar de quem decide.',
            'Acesso direto a mim, sem intermediários, três horas ao vivo.',
          ].map((t, i) => (
            <div key={i} className="typewriter" style={{ fontSize: 13, display: 'grid', gridTemplateColumns: '24px 1fr', gap: 8 }}>
              <span style={{ color: 'var(--gold-light)' }}>[+]</span>
              <span>{t}</span>
            </div>
          ))}
        </div>

        <SectionCTA
          hint={<>Isso só acontece se tu estiveres lá no dia 6.<br />Garante teu lugar.</>}
          price={tweaks.activeLotPrice}
        />
      </section>

      {/* === TESTIMONIALS === */}
      <section className={`section ${showProof ? '' : 'hidden'}`}>
        <p className="typewriter" style={{ color: 'var(--gold-light)' }}>
          <strong>// O que chega aqui depois</strong>
        </p>
        <p className="typewriter mt-3" style={{ fontSize: 12, opacity: 0.7 }}>
          Prints reais. Nomes preservados.
        </p>
        <div className="col gap-3 mt-6">
          {TESTIMONIALS.map((t, i) => <WhatsAppPrint key={i} {...t} />)}
        </div>
      </section>

      {/* === OFERTA / PRICE BLOCK === */}
      <section className="section">
        <p className="typewriter" style={{ color: 'var(--gold-light)' }}>
          <strong>// A oferta</strong>
        </p>
        <p className="typewriter mt-3">O que você leva:</p>
        <div className="mt-4" style={{ fontFamily: 'var(--font-mono)', fontSize: 13, lineHeight: 1.9 }}>
          {[
            'Imersão ao vivo · 3 horas · Zoom',
            'Acesso direto · sem intermediários',
            'Grupo de WhatsApp · link e info',
            'Garantia 7 dias · reembolso integral',
          ].map((t, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
              <span style={{ color: 'var(--gold-light)' }}>[✓]</span>
              <span>{t}</span>
            </div>
          ))}
        </div>

        {/* The big price block */}
        <div className="mt-8">
          <PriceBlock activeLot={tweaks.activeLot} />
        </div>

        <p className="typewriter mt-6" style={{ color: 'var(--gold-light)' }}>
          // Os lotes
        </p>
        <div className="mt-3">
          <LotTable active={tweaks.activeLot} />
        </div>
      </section>

      {/* === OBJEÇÕES SECTION (raw style) === */}
      <section className="section" style={{ background: 'rgba(0,0,0,0.25)' }}>
        <p className="typewriter" style={{ color: 'var(--gold-light)' }}>
          <strong>// O que você está pensando agora</strong>
        </p>
        <div className="mt-6" style={{ display: 'grid', gap: 28 }}>
          {[
            ['"3 horas não vão mudar algo que carrego há anos."',
             'Não vão te curar. Não é o que prometo. O que muda em 3 horas é o que você vê. E o que você vê — não dá mais pra não ver.'],
            ['"O problema são os homens."',
             'Talvez. Mas então por que continuam sendo o mesmo tipo? A imersão te mostra o filtro interno. É ele que chama esse tipo de homem.'],
            ['"Já consumi muito conteúdo."',
             'Eu não sou criadora de conteúdo. Eu sou psicoterapeuta. Não te digo como agir. Te mostro o mecanismo por baixo.'],
            ['"Tenho medo de descobrir que sou eu."',
             'Esse medo faz sentido. Entender não é se culpar — é o oposto. A condução é clínica. Sem julgamento.'],
            ['"Já gastei com coisas que não funcionaram."',
             'Por isso tem garantia de 7 dias. Não valeu, devolvo 100%. R$' + tweaks.activeLotPrice + ' — menos que um delivery.'],
          ].map(([q, a], i) => (
            <div key={i}>
              <p className="serif italic" style={{ fontSize: 17, color: 'var(--cream)', margin: 0, lineHeight: 1.3 }}>
                {q}
              </p>
              <p className="typewriter mt-3" style={{ fontSize: 13, color: 'var(--cream-dim)' }}>
                → {a}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* === GARANTIA === */}
      <section className="section text-center">
        <p className="typewriter" style={{ color: 'var(--gold-light)' }}>
          <strong>// Garantia</strong>
        </p>
        <div className="mt-6">
          <GuaranteeBadge width={200} />
        </div>
        <p className="typewriter mt-6">
          Sete dias.<br />
          Sem perguntas. Sem justificativa.<br />
          Reembolso integral.
        </p>
        <Ornament heart />
        <p className="serif italic" style={{ fontSize: 20, color: 'var(--gold-light)' }}>
          O risco é meu. Não seu.
        </p>
      </section>

      {/* === URGÊNCIA REAL === */}
      <section className="section">
        <p className="typewriter" style={{ color: 'var(--gold-light)' }}>
          <strong>// Urgência real</strong>
        </p>
        <p className="typewriter mt-4">
          Lote especial encerra quando as vagas acabarem.<br />
          Depois: R$59. Depois: R$99.
        </p>
        <p className="typewriter mt-4" style={{ color: 'var(--cream-dim)' }}>
          A imersão é ao vivo. 6 de junho, 14h. Sem replay.
        </p>
        <div className="mt-6">
          <VagasProgress percent={87} />
        </div>

        <SectionCTA
          hint={<>Não há aviso antecipado<br />de quando o lote muda.</>}
          label="Garantir minha vaga"
          price={tweaks.activeLotPrice}
        />
      </section>

      {/* === FAQ === */}
      <section className="section">
        <p className="typewriter" style={{ color: 'var(--gold-light)' }}>
          <strong>// FAQ</strong>
        </p>
        <div className="mt-4">
          {[
            ['Tem replay?', 'Não. Ao vivo. A gravação está disponível como order bump — depois R$297.'],
            ['Serve pra quem nunca fez terapia?', 'Sim. Não pressupõe conhecimento prévio de psicologia.'],
            ['E quem já está em terapia?', 'Também. Não substitui terapia individual — é um recorte específico.'],
            ['Como funciona o acesso?', 'Após a compra: grupo de WhatsApp. O link do Zoom chega ali, antes do evento.'],
            ['Posso parcelar?', 'O lote especial é em pagamento único. Cartão, PIX ou boleto.'],
            ['E se eu não puder no dia?', 'Avalia comprar a gravação. A garantia de 7 dias cobre também.'],
            ['Por que tão barato?', 'Primeira edição. O objetivo é presença, não margem. Sobe nos próximos lotes.'],
            ['Suporte?', 'Toca no botão verde do WhatsApp no canto da tela.'],
          ].map(([q, a], i) => (
            <div key={i} className="faq-item" data-open={openFaq === i}>
              <button className="faq-q" style={{
                fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 500,
              }} onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                <span><span style={{ color: 'var(--gold-light)' }}>?</span> {q}</span>
                <span className="chev">+</span>
              </button>
              <div className="faq-a" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{a}</div>
            </div>
          ))}
        </div>
      </section>

      {/* === FINAL CTA — signed letter === */}
      <section className="section" style={{
        background: 'linear-gradient(180deg, rgba(74,18,32,0.5), rgba(14,2,5,1))',
        paddingTop: 56, paddingBottom: 40,
      }}>
        <p className="typewriter" style={{ color: 'var(--gold-light)' }}>
          <strong>// Para fechar</strong>
        </p>
        <p className="typewriter mt-6">Você já sabe que o padrão existe.</p>
        <p className="typewriter mt-3">
          Já tentou mudar por conta própria.<br />
          Já analisou. Já conversou.<br />
          Já prometeu pra si mesma que dessa vez seria diferente.
        </p>
        <p className="typewriter mt-4">
          A diferença entre a mulher que continua no ciclo<br />
          e a Mulher 1% não é força de vontade.<br />
          Não é autoestima.
        </p>
        <p className="typewriter mt-3" style={{ color: 'var(--gold-light)' }}>
          <strong>É saber o que está produzindo o padrão.</strong>
        </p>
        <p className="typewriter mt-4">De verdade — não como teoria.</p>
        <p className="typewriter mt-4">Em 3 horas ao vivo comigo, você vai ter essa clareza.</p>
        <p className="typewriter mt-2" style={{ color: 'var(--cream)' }}>Não amanhã.</p>
        <p className="typewriter" style={{ color: 'var(--gold-light)' }}>
          <strong>No dia 6 de junho.</strong>
        </p>

        {/* Big price block */}
        <div className="mt-8">
          <PriceBlock activeLot={tweaks.activeLot} label="Quero meu lugar agora" />
        </div>

        {/* Signature */}
        <div style={{ marginTop: 40 }}>
          <p className="typewriter" style={{ fontSize: 12, opacity: 0.7 }}>Com cuidado,</p>
          <div className="signature">Nathalia</div>
          <p className="typewriter" style={{ fontSize: 11, opacity: 0.6, marginTop: 6 }}>
            psicoterapeuta · <IGLink />
          </p>
        </div>

        {/* PS */}
        <div style={{
          marginTop: 36, padding: '18px 16px',
          borderLeft: '2px solid var(--gold)',
          background: 'rgba(201,168,76,0.04)',
        }}>
          <p className="typewriter">
            <strong style={{ color: 'var(--gold-light)' }}>P.S.</strong>
          </p>
          <p className="typewriter mt-3">
            O que você está pagando aqui não é uma aula.<br />
            É a possibilidade de entender, de uma vez, o que está por baixo de algo que você carrega há tempo demais.
          </p>
          <p className="typewriter mt-3">
            R${tweaks.activeLotPrice} com garantia de reembolso total se não valer.
          </p>
          <p className="typewriter mt-3" style={{ color: 'var(--gold-light)' }}>
            <strong>Mas você precisa estar lá no dia 6, às 14h. Ao vivo. Sem replay.</strong>
          </p>
          <p className="typewriter mt-3">
            Se você leu até aqui — você sabe que precisa ir.
          </p>
        </div>
      </section>

      {/* === FOOTER === */}
      <footer style={{
        padding: '32px 24px 40px',
        borderTop: '1px solid var(--line)',
        background: 'rgba(0,0,0,0.4)',
        textAlign: 'center',
      }}>
        <LogoMark />
        <p className="typewriter" style={{ fontSize: 11, color: 'var(--cream-dim)', marginTop: 14, opacity: 0.85 }}>
          Nathalia Prisco · psicoterapeuta
        </p>
        <div style={{ marginTop: 10 }}>
          <IGLink />
        </div>
        <div style={{
          marginTop: 22, paddingTop: 14, borderTop: '1px solid var(--line)',
          display: 'flex', justifyContent: 'center', gap: 18, flexWrap: 'wrap',
          fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--cream-faint)',
        }}>
          <a href="#" style={{ color: 'inherit', textDecoration: 'underline', textDecorationColor: 'var(--gold)' }}>politica de privacidade</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'underline', textDecorationColor: 'var(--gold)' }}>termos de uso</a>
        </div>
        <p className="typewriter" style={{ fontSize: 10, color: 'var(--cream-faint)', marginTop: 16, lineHeight: 1.5, opacity: 0.7 }}>
          © 2026 Nathalia Prisco. Todos os direitos reservados.<br />
          Página não afiliada ao Meta. Resultados podem variar.
        </p>
      </footer>
    </div>
  );
}

window.LPRaw = LPRaw;
