// Just Travel — Segurança & Conformidade page app (React via Babel)
// Loaded after React UMD, landing-sections.jsx (Navbar, SIcon, Reveal deps)
// and landing-footer.jsx (Footer). Shares one global scope — every top-level
// name here is prefixed SC_ / SCApp so it never collides with those files.

const SC_HREF_START = "https://office-dashboard.justtraveltour.com/public-whitelabel/new/step-1";
const SC_HREF_DEMO = "Agendar-Demo.html";
// Dedicated security inbox, not the commercial one: this page asks for
// vulnerability reports, and they cannot land in the sales queue.
const SC_MAIL = "mailto:seguranca@justtraveltour.com";

// Two groups, because the strip used to mix two different subjects: protecting
// the client's data and protecting the transaction. Those are exactly the two
// subjects the sections below are built around, so the top of the page now
// announces the same split.
//
// Only claims with internal backing, and no security certification in either
// group: none is held, and the payment gateway was checked on 03/08/2026 with
// nobody in the chain certified, so there is no certified environment to point
// at. "Tokenização" is what is true about payments. No certificate in hand, no
// seal here, whatever the standard is called.
const SC_BADGE_GROUPS = [
  {
    label: "Informação e dados de clientes",
    items: ["LGPD", "SSL/HTTPS", "TLS 1.3", "Controle de acesso"],
  },
  {
    label: "Transação e antifraude",
    items: ["3-D Secure", "Análise de risco", "Tokenização"],
  },
];

// Os seis pilares sob os mesmos rótulos da tira de selos, mais um terceiro
// neutro para o que não é nem dado nem transação. Seis cards em três grupos dão
// dois por grupo, e é por isso que a grade virou de duas colunas: em três
// colunas cada grupo deixaria uma célula vazia. Com os nove cards antigos a
// divisão fecharia 3+3+3, mas eles foram enxugados para seis em 03/08/2026.
const SC_PILLAR_GROUPS = [
  {
    label: "Informação e dados de clientes",
    cards: [
      {
        icon: "shield",
        title: "Conformidade com a LGPD",
        body: "Coleta, consentimento e tratamento de dados pessoais seguindo a Lei Geral de Proteção de Dados. Quem acessa dados de clientes é orientado sobre esse tratamento e sobre como reportar um incidente.",
      },
      {
        icon: "users",
        title: "Controle de acesso",
        body: "Permissões por perfil: cada pessoa da sua equipe acessa apenas as áreas e os dados necessários ao seu trabalho.",
      },
    ],
  },
  {
    label: "Transação e antifraude",
    cards: [
      {
        icon: "boltCircle",
        title: "Antifraude em cada transação",
        body: "Toda compra passa por análise de risco antes da aprovação, com 3-D Secure no cartão. Você vende sem medo de chargeback.",
      },
      {
        icon: "lock",
        // Não "ponta a ponta": o que existe é criptografia em trânsito (TLS) mais
        // tokenização do dado de cartão. E2E tem significado técnico específico e
        // um cliente técnico cobra isso.
        title: "Criptografia e tokenização",
        body: "Conexões protegidas por SSL/HTTPS com TLS 1.3. No checkout, os dados de cartão são tokenizados e não trafegam pela sua loja.",
      },
    ],
  },
  {
    label: "Infraestrutura e operação",
    cards: [
      {
        icon: "clock",
        // Sem percentual e sem a palavra SLA: a cláusula 5 dos Termos promete
        // redundância, monitoramento e backup diário, sem número e sem remédio por
        // indisponibilidade, e diz que interrupções pontuais podem ocorrer.
        title: "Infraestrutura redundante",
        body: "Redundância na infraestrutura, monitoramento 24/7 da operação e backups automáticos diários.",
      },
      {
        icon: "code",
        // Processo interno confirmado pelo time em 29/07/2026. Não é certificação:
        // nenhum selo novo entrou na tira.
        title: "Desenvolvimento seguro",
        body: "Toda alteração passa por revisão de código e testes antes de entrar em produção. Dependências e serviços são revisados de forma contínua, com as correções priorizadas por risco real.",
      },
    ],
  },
];

// Sem nome de fornecedor nesta página: a narrativa comercial não fica presa a
// uma ferramenta que pode ser trocada, e não entrega superfície de ataque. Os
// nomes seguem na Política de Privacidade §5, onde servem à transparência de
// suboperadores exigida pela LGPD.
const SC_AF_LIST = [
  "Análise de risco em toda compra, antes da aprovação",
  "3-D Secure na autenticação do cartão",
  "Verificação de identidade no cadastro",
];

const SC_AF_STATS = [
  { v: "-80%", l: "de fraudes após a adoção do 3-D Secure" },
  // Só a análise de risco: verificação de identidade e assinatura eletrônica
  // não rodam em milissegundos, e juntar as duas no mesmo número era falso.
  { v: "Milissegundos", l: "para a análise de risco no 3-D Secure" },
  { v: "24/7", l: "de monitoramento da operação" },
];

const SC_COMMIT = [
  {
    num: "01",
    title: "Comunicação de incidentes",
    body: "Comunicamos incidentes de segurança relevantes com transparência: o que aconteceu, quais dados foram afetados e as medidas tomadas.",
  },
  {
    num: "02",
    title: "Monitoramento contínuo",
    body: "Acompanhamos aplicação, backoffice e BI com monitoramento contínuo. Erros e comportamentos fora do padrão chegam ao time técnico e são tratados.",
  },
  {
    num: "03",
    title: "Backups diários",
    // Sem número de retenção: publicar a janela exata convida a pergunta "e se
    // eu descobrir o problema depois disso" e entrega a quem quer explorar
    // exatamente quanto tempo tem antes de a cópia ser sobrescrita.
    body: "Backups automáticos todos os dias, usados para restaurar a operação quando necessário.",
  },
  {
    num: "04",
    title: "Privacidade por padrão",
    body: "Coletamos apenas os dados necessários à operação, com consentimento e tratamento conforme a LGPD.",
  },
];

function SCHero() {
  return (
    <section className="sc-hero" id="top">
      <div className="container">
        <div className="sc-hero__grid">
          <div className="sc-hero__copy">
            <Reveal>
              <span className="eyebrow">Segurança & Conformidade</span>
            </Reveal>
            <Reveal delay={80}>
              <h1 className="sc-hero__title display-1">
                A Just mantém a confiança dos seus clientes,{" "}
                <span className="sc-hero__title-ink">protegida por padrão</span>
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="lead">
                Você não precisa montar um time de segurança para vender viagem online.
                Conformidade com a LGPD, tokenização dos dados de cartão e análise
                antifraude em toda compra já vêm ligados na plataforma.
              </p>
            </Reveal>
          </div>

          <div className="sc-hero__media">
            {/* Cut-out mockup (transparent background) so the blue bloom
                behind it reads as light, not as a card behind a photo.
                The wrapper carries the shadow and the screen bloom: both are
                decoration, so the bloom is a bare span with no text. */}
            <div className="sc-hero__device">
              <picture>
                <source srcSet="assets/photos/seguranca-mockup-v2.avif" type="image/avif" />
                <img
                  src="assets/photos/seguranca-mockup-v2.webp"
                  alt="Cliente comprando ingressos pelo celular no site de uma agência Just Travel"
                  width="520"
                  height="723"
                  decoding="async"
                />
              </picture>
              <span className="sc-hero__lit" aria-hidden="true" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Faixa própria, largura total do painel, não mais dentro da coluna do título:
// dois grupos lado a lado precisam da largura do container. Na coluna de 540px
// cada grupo teria ~250px e os selos quebrariam em três linhas.
function SCBadges() {
  return (
    <section className="sc-badges-band">
      <div className="container">
        <div className="sc-badges-grid">
          {SC_BADGE_GROUPS.map((g, gi) => (
            <Reveal as="div" className="sc-badges" key={g.label} delay={gi * 100}>
              <span className="sc-badges__lbl">{g.label}</span>
              <div className="sc-badges__row">
                {g.items.map((b) => (
                  <span key={b} className="sc-badge">
                    <SIcon name="check" size={13} color="var(--sc-blue)" />
                    {b}
                  </span>
                ))}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function SCPledge() {
  return (
    <section className="section section--tight sc-pledge">
      <div className="container">
        <div className="sc-pledge__grid">
          <Reveal as="div" className="sc-pledge__head">
            <span className="eyebrow">Privacidade & governança</span>
            <h2 className="h2">Nosso compromisso com a proteção dos seus dados</h2>
          </Reveal>
          <Reveal as="div" className="sc-pledge__body" delay={100}>
            <p>
              Nosso compromisso é garantir a segurança e a privacidade das suas
              informações e dos seus clientes. Mantemos um programa sólido de governança
              em proteção de dados, constantemente aprimorado para atender às exigências
              da Lei Geral de Proteção de Dados (LGPD) e às orientações da Autoridade
              Nacional de Proteção de Dados (ANPD).
            </p>
            <p>
              Contamos com uma equipe especializada que monitora continuamente nossos
              processos para prevenir, identificar e responder rapidamente a possíveis
              incidentes, assegurando a proteção dos dados pessoais e o respeito aos
              direitos de seus titulares.
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function SCPillars() {
  return (
    <section className="section">
      <div className="container">
        <Reveal as="div" className="sect-head">
          <span className="eyebrow">Como protegemos</span>
          <h2 className="h2">Segurança em todas as camadas da operação</h2>
          <p className="lead">
            Da coleta do dado ao pagamento aprovado, cada etapa tem controles pensados
            para proteger o seu cliente e a sua agência.
          </p>
        </Reveal>

        {/* Uma grade só, com os rótulos de grupo como linhas de largura total
            dentro dela: assim todo card mantém exatamente a mesma largura entre
            os grupos, o que não aconteceria com uma grade por grupo. */}
        <div className="sc-grid">
          {SC_PILLAR_GROUPS.map((g) => (
            <React.Fragment key={g.label}>
              <span className="eyebrow sc-grid__lbl">{g.label}</span>
              {g.cards.map((p, i) => (
                <Reveal key={p.title} className="sc-card" delay={i * 80}>
                  <span className="sc-card__ic">
                    <SIcon name={p.icon} size={19} />
                  </span>
                  <h3 className="sc-card__title">{p.title}</h3>
                  <p className="sc-card__body">{p.body}</p>
                </Reveal>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function SCAntifraud() {
  return (
    <section className="section section--alt">
      <div className="container">
        <div className="sc-af">
          <Reveal as="div" className="sc-af__copy">
            <span className="eyebrow">Antifraude</span>
            <h2 className="h2">Toda compra passa por análise de risco antes da aprovação</h2>
            <p className="lead">
              O que é legítimo segue o fluxo; o que é suspeito não vira reserva. Com a
              adoção do 3-D Secure, as fraudes caíram 80%. Mesmo assim, mantemos
              analistas dedicados à prevenção de fraudes acompanhando os casos que pedem
              revisão humana.
            </p>
            <ul className="sc-af__list">
              {SC_AF_LIST.map((li, i) => (
                <li key={i}>
                  <SIcon name="check" size={18} color="var(--just-blue-ink)" />
                  {li}
                </li>
              ))}
            </ul>
          </Reveal>

          <div className="sc-af__stats">
            {SC_AF_STATS.map((s, i) => (
              <Reveal key={i} className="sc-af__stat" delay={i * 120}>
                <div className="sc-af__stat-v">{s.v}</div>
                <div className="sc-af__stat-l">{s.l}</div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function SCCommitments() {
  return (
    <section className="section">
      <div className="container">
        <Reveal as="div" className="sect-head">
          <span className="eyebrow">Nossos compromissos</span>
          <h2 className="h2">O trabalho que roda todos os dias por trás da plataforma</h2>
          <p className="lead">
            Tratamos a proteção dos seus dados como parte do produto, com rotina,
            transparência e responsabilidade.
          </p>
        </Reveal>

        <div className="sc-commit">
          {SC_COMMIT.map((c, i) => (
            <Reveal key={i} className="sc-commit__item" delay={(i % 2) * 100}>
              <span className="sc-commit__num">{c.num}</span>
              <div>
                <h3 className="sc-commit__title">{c.title}</h3>
                <p className="sc-commit__body">{c.body}</p>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal as="div" className="sc-note" delay={80}>
          <p>
            Encontrou uma vulnerabilidade ou tem dúvidas sobre nossos controles? Fale com
            o time de segurança em <a href={SC_MAIL}>seguranca@justtraveltour.com</a>.
          </p>
          <p className="sc-note__fine">
            Todo relato é analisado pelo time de segurança, que mantém quem reportou
            informado do andamento.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function SCCta() {
  return (
    <section className="section sc-cta">
      <div className="container">
        <Reveal as="div" className="sc-cta__inner">
          <h2 className="sc-cta__title">
            Segurança não é opcional. Na Just Travel, ela já vem incluída
          </h2>
          <div className="sc-cta__row">
            <a className="btn btn--blue btn--lg" href={SC_HREF_DEMO}>
              Falar com um especialista
              <span className="btn__arrow"><SIcon name="btnArrow" /></span>
            </a>
            <a className="btn btn--outline btn--lg" href={SC_HREF_START}>
              Começar grátis
              <span className="btn__arrow"><SIcon name="btnArrow" /></span>
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function SCApp() {
  return (
    <PageShell>
      <main>
        {/* Hero + certification strip share one blue panel */}
        {/* Hero + tira de conformidade dividem o mesmo painel escuro */}
        <div className="sc-top">
          <div className="sc-top__box">
            <SCHero />
            <SCBadges />
          </div>
        </div>
        <SCPledge />
        <SCPillars />
        <SCAntifraud />
        <SCCommitments />
        <SCCta />
      </main>
      </PageShell>
  );
}

(function () {
  const el = document.getElementById("app");
  if (!el) return;
  ReactDOM.createRoot(el).render(<SCApp/>);
})();
