// lp-classica.jsx — variation 1: Classic luxury sales page
// Structured, polished, follows the brief block by block

function LPClassica({ tweaks }) {
  const H = HEADLINES[tweaks.headline] || HEADLINES.C;
  const heroPhoto  = tweaks.heroPhoto;
  const smilePhoto = 'assets/nath-perfil.png'; // for "Quem é" section
  const showProof  = tweaks.showProof;
  const [openFaq, setOpenFaq] = React.useState(0);

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

      {/* === TOP NAV with small logo === */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '14px 22px', borderBottom: '1px solid var(--line)',
      }}>
        <LogoMark />
        <span className="eyebrow" style={{ color: 'var(--gold-light)' }}>6 jun · 14h</span>
      </div>

      {/* === HERO === */}
      <section className="section" style={{ paddingTop: 32, paddingBottom: 24, position: 'relative' }}>
        <div className="aurora" />
        <div style={{ position: 'relative' }}>
          <div className="eyebrow text-center">Imersão ao vivo · psicoterapeuta Nathalia Prisco</div>
          <Ornament />
          <h1 className="display" style={{ fontSize: 40, textAlign: 'left', marginTop: 12 }}>
            {H.title}
          </h1>
          <p className="lede italic serif" style={{ fontSize: 17, marginTop: 14, color: 'var(--cream-dim)', lineHeight: 1.4 }}>
            {H.kicker}
          </p>

          <div style={{ marginTop: 28, position: 'relative' }}>
            <NathPhoto src={heroPhoto} style={{
              borderRadius: 18,
              boxShadow: '0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px var(--line)',
            }} />
            <div style={{
              position: 'absolute', left: 14, bottom: 14,
              background: 'rgba(14,2,5,0.78)',
              backdropFilter: 'blur(8px)',
              padding: '8px 12px', borderRadius: 999,
              border: '1px solid var(--gold)',
              fontFamily: 'var(--font-display)', fontStyle: 'italic',
              fontSize: 13, color: 'var(--cream)',
            }}>
              Nathalia Prisco · <span style={{ color: 'var(--gold-light)' }}>psicoterapeuta</span>
            </div>
          </div>

          <div style={{ marginTop: 28 }}>
            <CTAPrimary price={tweaks.activeLotPrice} />
          </div>
        </div>
      </section>

      {/* === BLOCO 2: SUBHEADLINE / VALOR === */}
      <section className="section" style={{ paddingTop: 36 }}>
        <p className="lede" style={{ fontSize: 16 }}>
          Uma imersão ao vivo de <strong style={{ color: 'var(--cream)' }}>3 horas</strong> com a psicoterapeuta{' '}
          <strong style={{ color: 'var(--gold-light)', fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 600 }}>
            Nathalia Prisco
          </strong>{' '}
          — para a mulher que já sabe que algo está errado nos próprios relacionamentos, mas ainda não sabe o que, dentro dela, está sustentando isso.
        </p>
        <div className="card" style={{ marginTop: 22, padding: 18, textAlign: 'center' }}>
          <div className="eyebrow">Quando</div>
          <div className="serif italic" style={{ fontSize: 22, color: 'var(--cream)', marginTop: 6 }}>
            6 de junho · 14h
          </div>
          <div style={{ fontSize: 12, color: 'var(--cream-dim)', marginTop: 4 }}>
            ao vivo no Zoom · sem replay
          </div>
        </div>
      </section>

      {/* === BLOCO 3: OPENING / VOCÊ RECONHECE === */}
      <section className="section" style={{ paddingTop: 36 }}>
        <div className="eyebrow">Você reconhece o roteiro</div>
        <Ornament />
        <p className="lede mt-3">
          Alguém aparece. Você investe. Ele some. Você se pergunta o que fez de errado. Ele volta. Você dá uma nova chance.
        </p>
        <p className="lede mt-3">
          E em algum momento — semanas ou meses depois — você está exatamente no mesmo lugar, com a mesma dor, só com um nome diferente na tela.
        </p>
        <p className="lede mt-3" style={{ color: 'var(--cream)' }}>
          O que dói mais não é ele. <em className="serif italic gold" style={{ fontStyle: 'italic' }}>É a sensação de que você já sabia.</em>
        </p>
        <p className="lede mt-3">
          Que você viu os sinais. Que suas amigas viram antes de você. Que você é, de alguma forma, cúmplice do que aconteceu — e não entende por que continua deixando.
        </p>
        <p className="lede mt-3">
          A resposta não está nos homens que você escolheu. Está no mecanismo interno que produz essas escolhas — repetidamente, com pessoas diferentes, no mesmo padrão.
        </p>

        <SectionCTA
          hint={<>Você não veio até aqui por acaso.<br />Garante teu lugar antes do lote virar.</>}
          price={tweaks.activeLotPrice}
        />
      </section>

      {/* === BLOCO 5: IDENTIFICAÇÃO DA DOR === */}
      <section className="section" style={{ background: 'rgba(14,2,5,0.5)' }}>
        <div className="eyebrow">Por que você está aqui</div>
        <h2 className="display mt-3" style={{ fontSize: 28 }}>
          Você reconhece pelo menos uma dessas <span className="accent">situações.</span>
        </h2>
        <div className="mt-6">
          {[
            <>Você <strong>investe emoção, tempo e presença</strong> — e ele não assume. Você fica esperando uma definição que nunca vem.</>,
            <>Você viu esse mesmo homem assumir outra logo depois. E ficou se perguntando <strong>o que ela tem que você não tem.</strong></>,
            <>Você sabe o padrão. Já analisou, já conversou com amigas, já leu. E ainda assim, quando aparece alguém novo, <strong>você se pega no mesmo ciclo.</strong></>,
            <>Você tem medo de que o problema seja você — mas também tem medo de <strong>olhar pra isso de verdade.</strong></>,
            <>Você está cansada de se sentir burra. Não é falta de inteligência. <strong>É que algo em você continua fazendo escolhas que sua parte consciente não aprova.</strong></>,
            <>Você não quer técnicas de conquista. Você quer entender <strong>o que está acontecendo dentro de você</strong> e parar de ser refém disso.</>,
          ].map((t, i) => (
            <div key={i} className="check-row">
              <div className="check-mark">✓</div>
              <div className="check-text">{t}</div>
            </div>
          ))}
        </div>
        <p className="lede italic serif text-center mt-8" style={{ fontSize: 17, color: 'var(--gold-light)' }}>
          Se você reconheceu alguma dessas frases como sua — você está no lugar certo.
        </p>

        <SectionCTA
          hint={<>Quem se reconheceu acima já sabe.<br />O lugar é aqui.</>}
          price={tweaks.activeLotPrice}
        />
      </section>

      {/* === BLOCO 6: SOLUÇÃO / SOBRE A NATH === */}
      <section className="section">
        <div className="eyebrow">A solução não é técnica. É clareza.</div>
        <h2 className="display mt-3" style={{ fontSize: 28 }}>
          A Nath não vai te dizer como agir <span className="accent">diferente com homens.</span>
        </h2>
        <p className="lede mt-4">
          Ela vai te mostrar <strong style={{ color: 'var(--cream)' }}>o que, dentro de você, está produzindo esse padrão</strong> — e por que as tentativas de mudar o comportamento sem entender o mecanismo sempre falham. Você já tentou. Sabe que falham.
        </p>

        {/* "Quem é Nath" card — now with smiling photo */}
        <div className="card mt-6" style={{ padding: 0, overflow: 'hidden' }}>
          <NathPhoto src={smilePhoto} style={{ borderRadius: 0, width: '100%' }} />
          <div style={{ padding: 22 }}>
            <div className="eyebrow">Quem é</div>
            <div className="serif italic" style={{ fontSize: 26, color: 'var(--gold-light)', marginTop: 4 }}>
              Nathalia Prisco
            </div>
            <p className="lede mt-3" style={{ fontSize: 14 }}>
              Psicoterapeuta com clínica ativa e agenda fechada. Pacientes em mais de 6 países. Anos de clínica olhando para o que realmente está por baixo dos relacionamentos que não funcionam.
            </p>
            <Ornament heart />
            <p className="lede" style={{ fontSize: 14, fontStyle: 'italic', fontFamily: 'var(--font-display)' }}>
              Ela não vende autoajuda. Ela não vende empoderamento. Ela vende <strong style={{ color: 'var(--gold-light)' }}>clareza</strong> — aquela que muda algo porque você não consegue mais não ver.
            </p>
            <div style={{
              display: 'flex', justifyContent: 'center', gap: 14,
              marginTop: 16, paddingTop: 14, borderTop: '1px dashed var(--line)',
              fontSize: 11, color: 'var(--cream-dim)', flexWrap: 'wrap',
            }}>
              <span>Clínica ativa</span><span style={{ color: 'var(--gold)' }}>·</span>
              <span>+6 países</span><span style={{ color: 'var(--gold)' }}>·</span>
              <span>+30 mil mulheres no IG</span>
            </div>
          </div>
        </div>

        <h3 className="serif italic mt-8" style={{ fontSize: 22, color: 'var(--cream)' }}>
          Na imersão, em 3 horas ao vivo, você vai entender:
        </h3>
        <div className="mt-4">
          {[
            'Qual é 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 mulher que sai dele',
            'Como a consciência desse mecanismo — não técnica, não fórmula — é o que muda a escolha na raiz',
          ].map((t, i) => (
            <div key={i} className="check-row">
              <div className="check-mark">{String(i + 1).padStart(2, '0')}</div>
              <div className="check-text">{t}</div>
            </div>
          ))}
        </div>
      </section>

      {/* === BLOCO 7: BENEFÍCIOS === */}
      <section className="section" style={{ background: 'rgba(14,2,5,0.5)' }}>
        <div className="eyebrow">Depois da imersão</div>
        <h2 className="display mt-3" style={{ fontSize: 28 }}>
          O que vai estar <span className="accent">diferente em você.</span>
        </h2>
        <div className="mt-6">
          {[
            [<><strong>Parar de se perguntar o que há de errado em você</strong></>, 'porque você vai ter uma resposta real, não uma narrativa de autoajuda'],
            [<><strong>Reconhecer o padrão antes de entrar nele</strong></>, 'não depois que já deu tudo errado'],
            [<><strong>Deixar de se sentir burra</strong></>, 'por continuar repetindo o que não quer repetir'],
            [<><strong>Entender o que sustentava a espera</strong></>, 'pelo homem que não assumia, pela relação que não evoluía'],
            [<><strong>Sair do lugar de quem é escolhida</strong></>, 'para o lugar de quem decide — por escolha que vem de dentro'],
            [<><strong>Acesso direto à Nathalia</strong></>, 'sem intermediários, sem gravação editada, 3 horas ao vivo'],
          ].map(([title, sub], i) => (
            <div key={i} className="check-row">
              <div className="check-mark">♦</div>
              <div className="check-text">
                {title}
                <div style={{ color: 'var(--cream-dim)', marginTop: 2, fontWeight: 400 }}>{sub}</div>
              </div>
            </div>
          ))}
        </div>

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

      {/* === BLOCO 8: PROVA SOCIAL === */}
      <section className={`section ${showProof ? '' : 'hidden'}`}>
        <div className="eyebrow text-center">O que a audiência da Nath fala</div>
        <h2 className="display text-center mt-3" style={{ fontSize: 26 }}>
          Mensagens que <span className="accent">chegam todo dia.</span>
        </h2>
        <p className="lede text-center mt-3" style={{ fontSize: 13, color: 'var(--cream-faint)' }}>
          Prints reais da caixinha e do WhatsApp. <em>Nomes preservados.</em>
        </p>
        <div className="col gap-3 mt-6">
          {TESTIMONIALS.map((t, i) => <WhatsAppPrint key={i} {...t} />)}
        </div>
        <div className="card mt-8">
          <div className="eyebrow">Sobre a Nathalia</div>
          <div className="mt-3">
            {[
              'Psicoterapeuta com clínica ativa e agenda fechada',
              'Pacientes em mais de 6 países',
              'Mais de 30 mil mulheres no Instagram',
              'Formação clínica real — não coaching, não certificação rápida',
            ].map((t, i) => (
              <div key={i} className="check-row">
                <div className="check-mark">✓</div>
                <div className="check-text">{t}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* === BLOCO 9: OFERTA DETALHADA === */}
      <section className="section">
        <div className="eyebrow text-center">O que você recebe</div>
        <h2 className="display text-center mt-3" style={{ fontSize: 28 }}>
          A oferta, <span className="accent">por inteiro.</span>
        </h2>

        <div className="mt-6">
          <PriceBlock activeLot={tweaks.activeLot} />
        </div>

        <h3 className="serif italic mt-8 text-center" style={{ fontSize: 18, color: 'var(--cream)' }}>
          Os lotes
        </h3>
        <div className="mt-4">
          <LotTable active={tweaks.activeLot} />
        </div>
      </section>

      {/* === BLOCO 10: OBJEÇÕES === */}
      <section className="section" style={{ background: 'rgba(14,2,5,0.5)' }}>
        <div className="eyebrow">Quebra de objeções</div>
        <h2 className="display mt-3" style={{ fontSize: 26 }}>
          O que você está pensando <span className="accent">agora.</span>
        </h2>
        <div className="col gap-4 mt-6">
          {[
            ['"3 horas não vão mudar algo que carrego há anos."',
              'Não vão te curar. Não é isso que a imersão promete. O que muda em 3 horas é o que você vê — e o que você vê não dá mais pra não ver.'],
            ['"Eu já sei qual é meu problema. O problema são os homens."',
              'Pode ser. Mas se o problema fosse só eles — por que eles continuam sendo sempre o mesmo tipo? A imersão vai te mostrar o filtro interno que chama esse tipo específico.'],
            ['"Já consumi muito conteúdo e nada mudou."',
              'A Nath não é criadora de conteúdo. É psicoterapeuta. Em vez de te dizer como agir, ela te mostra o mecanismo por baixo da ação.'],
            ['"Tenho medo de descobrir que o problema sou eu."',
              'Esse medo faz sentido. A Nath conduz com cuidado clínico real — sem julgamento, sem culpabilização. Entender não é o mesmo que se culpar.'],
            ['"Já gastei com coisas que não funcionaram."',
              <>Por isso existe a garantia de 7 dias. Se não valer, devolvo 100% sem perguntas. O risco é zero. R${tweaks.activeLotPrice} é menos que um delivery.</>],
          ].map(([q, a], i) => (
            <div key={i} className="card" style={{ padding: 18 }}>
              <div className="serif italic" style={{ fontSize: 17, color: 'var(--gold-light)', lineHeight: 1.3 }}>{q}</div>
              <p className="lede mt-3" style={{ fontSize: 14 }}>{a}</p>
            </div>
          ))}
        </div>
      </section>

      {/* === BLOCO 11: GARANTIA === */}
      <section className="section text-center">
        <GuaranteeBadge width={200} />
        <h2 className="display mt-6" style={{ fontSize: 26 }}>
          Garantia incondicional de <span className="accent">7 dias.</span><br />
          Sem perguntas.
        </h2>
        <p className="lede mt-4">
          Se você entrar na Imersão Mulher 1% e sair sem nada que valha o valor investido, basta enviar uma mensagem em até 7 dias corridos e o reembolso é integral.
        </p>
        <Ornament heart />
        <p className="serif italic" style={{ fontSize: 18, color: 'var(--cream)' }}>
          Não precisa justificar. Não precisa provar nada.<br />
          <strong style={{ color: 'var(--gold-light)' }}>O risco é meu — não seu.</strong>
        </p>
      </section>

      {/* === BLOCO 12: URGÊNCIA === */}
      <section className="section">
        <div className="eyebrow">Urgência real</div>
        <h2 className="display mt-3" style={{ fontSize: 26 }}>
          Lote especial encerra quando as <span className="accent">vagas acabarem.</span>
        </h2>
        <p className="lede mt-4">
          Depois do Lote 1 (R$29), o preço sobe para R$59 e depois R$99. Não há aviso antecipado de quando cada lote muda.
        </p>
        <div className="mt-6">
          <VagasProgress percent={87} />
        </div>
        <div className="card mt-6 text-center">
          <div className="eyebrow">Ao vivo · sem replay</div>
          <div className="serif italic mt-2" style={{ fontSize: 28, color: 'var(--cream)' }}>
            6 de junho · 14h
          </div>
          <p className="lede mt-3" style={{ fontSize: 14 }}>
            Se você não puder estar presente no horário, este não é o momento certo. Mas se puder — e você sabe que pode — o que está esperando não é uma condição melhor.{' '}
            <em className="serif italic gold">É só a decisão.</em>
          </p>
        </div>

        <SectionCTA
          hint={<>Cada minuto que passa é uma vaga a menos<br />neste lote especial.</>}
          label="Garantir minha vaga agora"
          price={tweaks.activeLotPrice}
        />
      </section>

      {/* === BLOCO 13: FAQ === */}
      <section className="section">
        <div className="eyebrow">Perguntas frequentes</div>
        <h2 className="display mt-3" style={{ fontSize: 28 }}>
          Tira as <span className="accent">dúvidas.</span>
        </h2>
        <div className="mt-6">
          {[
            ['A imersão tem replay?',
              'Não. A imersão é ao vivo e não terá replay disponível. Isso é uma escolha intencional: o que acontece ao vivo, com presença real, tem uma qualidade diferente. Se quiser a gravação, ela está disponível como order bump na página de compra — após o evento, sobe para R$297.'],
            ['Serve pra quem nunca fez terapia?',
              'Sim. A Nath conduz a imersão pensando em mulheres que nunca fizeram terapia e em mulheres que fazem há anos. O conteúdo não pressupõe conhecimento prévio de psicologia.'],
            ['E quem já está em terapia?',
              'Também. A imersão não substitui terapia individual — ela entrega um recorte específico sobre padrões relacionais, com a profundidade que a Nath tem sobre esse tema em particular.'],
            ['Como funciona o acesso?',
              'Após a compra, você entra no grupo de WhatsApp onde o link do Zoom é enviado antes do evento. A imersão acontece no dia 6 de junho às 14h.'],
            ['Posso parcelar?',
              'O lote especial é em pagamento único. Cartão, PIX ou boleto.'],
            ['E se eu não puder no dia?',
              'A imersão é ao vivo e não há replay gratuito. Avalie o order bump da gravação. Se mesmo assim não puder, a garantia de 7 dias cobre o reembolso.'],
            ['Por que o preço é tão baixo?',
              'Porque o objetivo desta primeira edição é presença e transformação, não margem. O preço sobe nos próximos lotes. Quem entra cedo, entra no menor valor disponível.'],
            ['Tenho mais dúvidas. Com quem falo?',
              <>Toca no botão verde do WhatsApp no canto da tela — você fala direto com o suporte.</>],
          ].map(([q, a], i) => (
            <div key={i} className="faq-item" data-open={openFaq === i}>
              <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                <span>{q}</span><span className="chev">+</span>
              </button>
              <div className="faq-a">{a}</div>
            </div>
          ))}
        </div>
      </section>

      {/* === BLOCO 14: CTA FINAL === */}
      <section className="section text-center" style={{ background: 'linear-gradient(180deg, rgba(74,18,32,0.4), rgba(14,2,5,1))' }}>
        <Ornament />
        <p className="serif italic" style={{ fontSize: 18, color: 'var(--gold-light)' }}>
          Você já sabe que o padrão existe.
        </p>
        <h2 className="display mt-6" style={{ fontSize: 30 }}>
          A diferença não é<br />força de vontade.<br />
          <span className="accent">É clareza.</span>
        </h2>
        <p className="lede mt-4">
          Em 3 horas ao vivo com a Nathalia Prisco, você vai ter essa clareza.
        </p>
        <p className="serif italic mt-3" style={{ fontSize: 18, color: 'var(--cream)' }}>
          Não amanhã. <span className="gold">No dia 6 de junho.</span>
        </p>
        <div className="mt-8">
          <PriceBlock activeLot={tweaks.activeLot} label="Quero meu lugar agora" />
        </div>
      </section>

      {/* === BLOCO 15: PS === */}
      <section className="section" style={{ paddingTop: 32, paddingBottom: 32 }}>
        <div className="card" style={{ borderColor: 'var(--gold)' }}>
          <div className="eyebrow gold">P.S.</div>
          <p className="lede mt-3">
            O que você está pagando aqui <strong style={{ color: 'var(--cream)' }}>não é uma aula.</strong> É a possibilidade de entender, de uma vez, o que está por baixo de algo que você carrega há tempo demais.
          </p>
          <p className="lede mt-3">
            R${tweaks.activeLotPrice} com garantia de reembolso total se não valer.
          </p>
          <p className="serif italic mt-4" style={{ fontSize: 16, color: 'var(--gold-light)' }}>
            Mas você precisa estar lá no dia 6, às 14h. Ao vivo. Sem replay.
          </p>
          <p className="lede mt-3" style={{ color: 'var(--cream)' }}>
            Se você leu até aqui — você sabe que precisa ir.
          </p>
        </div>
        <div className="mt-6">
          <CTAPrimary
            price={tweaks.activeLotPrice}
            label="Garantir minha vaga"
          />
        </div>
      </section>

      {/* === FOOTER === */}
      <footer style={{
        padding: '32px 24px 40px',
        borderTop: '1px solid var(--line)',
        background: 'rgba(14,2,5,0.6)',
        textAlign: 'center',
      }}>
        <LogoMark />
        <p style={{ fontSize: 12, color: 'var(--cream-dim)', marginTop: 16, lineHeight: 1.6, fontFamily: 'var(--font-display)', fontStyle: 'italic' }}>
          Nathalia Prisco · Psicoterapeuta
        </p>
        <div style={{ marginTop: 12 }}>
          <IGLink />
        </div>
        <div style={{
          marginTop: 24, paddingTop: 16, borderTop: '1px solid var(--line)',
          display: 'flex', justifyContent: 'center', gap: 18, flexWrap: 'wrap',
          fontSize: 11, color: 'var(--cream-faint)',
        }}>
          <a href="#" style={{ color: 'inherit', textDecoration: 'underline', textDecorationColor: 'var(--gold)', textUnderlineOffset: 3 }}>Política de privacidade</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'underline', textDecorationColor: 'var(--gold)', textUnderlineOffset: 3 }}>Termos de uso</a>
        </div>
        <p style={{ fontSize: 10, color: 'var(--cream-faint)', marginTop: 18, lineHeight: 1.5, maxWidth: 340, marginInline: 'auto' }}>
          © 2026 Nathalia Prisco. Todos os direitos reservados.<br />
          Esta página não é afiliada ao Facebook, Instagram ou qualquer entidade do Meta. Resultados podem variar de pessoa para pessoa.
        </p>
      </footer>
    </div>
  );
}

window.LPClassica = LPClassica;
