// Just Travel — Comparativo (Just Travel vs OTAs) page app (React via Babel)
// Loaded after React UMD + landing-sections.jsx + landing-footer.jsx.
// Reuses globals: Navbar, Footer, SIcon, Reveal. No import/export/require.
// Every top-level name is prefixed CP_ / CP to stay globally unique.

/* ------------------------------------------------------------
   Comparison matrix. Each cell is one of:
     { k: "yes" }                       → check icon
     { k: "no" }                         → x icon
     { k: "txt", v: "…", strong: true }  → short label (strong = win side)
   The Just Travel column is engineered to win.
   ------------------------------------------------------------ */
const CP_GROUPS = [
  {
    title: "Marca & relacionamento",
    rows: [
      { feat: "Loja com a sua marca e domínio próprio", ota: { k: "no" }, jt: { k: "yes" } },
      { feat: "De quem é o cliente ao final da compra", ota: { k: "txt", v: "Da OTA" }, jt: { k: "txt", v: "100% seu", strong: true } },
      { feat: "Personalização visual (logo, cores, páginas)", ota: { k: "no" }, jt: { k: "yes" } },
    ],
  },
  {
    title: "Inventário",
    rows: [
      { feat: "Catálogo de produtos turísticos", ota: { k: "txt", v: "Limitado ao portal" }, jt: { k: "txt", v: "+1 milhão via API", strong: true } },
      { feat: "Hotéis, ingressos, seguros e cruzeiros num só fluxo", ota: { k: "txt", v: "Fragmentado" }, jt: { k: "yes" } },
      { feat: "Produtos exclusivos e tarifas negociadas", ota: { k: "no" }, jt: { k: "yes" } },
    ],
  },
  {
    title: "Pagamentos & antifraude",
    rows: [
      { feat: "Checkout próprio com PIX, boleto e cartão", ota: { k: "no" }, jt: { k: "yes" } },
      { feat: "Antifraude integrado na transação", ota: { k: "txt", v: "Por conta da OTA" }, jt: { k: "yes" } },
      { feat: "Parcelamento e split de pagamento", ota: { k: "no" }, jt: { k: "yes" } },
      { feat: "Taxas e comissões", ota: { k: "txt", v: "Opacas" }, jt: { k: "txt", v: "Você define", strong: true } },
    ],
  },
  {
    title: "Gestão",
    rows: [
      { feat: "CRM e gestão de leads", ota: { k: "no" }, jt: { k: "yes" } },
      { feat: "IA SDR que atende e vende 24/7", ota: { k: "no" }, jt: { k: "yes" } },
      { feat: "Ativação com suporte dedicado", ota: { k: "txt", v: "Sem onboarding" }, jt: { k: "txt", v: "No ar em 24h", strong: true } },
    ],
  },
];

const CP_REASONS = [
  {
    icon: "palette",
    title: "Sua marca na frente, nunca a deles",
    body: "Nas OTAs o cliente compra da Booking ou da Decolar. Na Just Travel, a loja, o domínio e o checkout são da sua agência. O cliente é seu, com todo o histórico e o relacionamento.",
  },
  {
    icon: "cart",
    title: "O mesmo inventário das gigantes",
    body: "Mais de 1 milhão de produtos turísticos por API: hotéis, ingressos, seguros, cruzeiros e experiências. Você vende o que as grandes vendem, sem depender delas para fechar a venda.",
  },
  {
    icon: "shield",
    title: "Antifraude e checkout já inclusos",
    body: "Cada transação é validada antes da compra, com PIX, boleto e cartão prontos. Venda sem medo de chargeback e sem contratar gateway ou antifraude à parte.",
  },
];

/* Render one comparison cell inside a td. */
function CPCell({ cell }) {
  if (cell.k === "yes") {
    return (
      <span className="cp-cell cp-cell--yes" aria-label="Incluído">
        <SIcon name="check" size={22} />
      </span>
    );
  }
  if (cell.k === "no") {
    return (
      <span className="cp-cell cp-cell--no" aria-label="Não incluído">
        <SIcon name="x" size={20} />
      </span>
    );
  }
  return (
    <span className={`cp-cell cp-cell--txt ${cell.strong ? "is-strong" : ""}`}>{cell.v}</span>
  );
}

function CPApp() {
  return (
    <PageShell>
      <main>
        {/* a) Hero */}
        <section className="cp-hero">
          <div className="container">
            <Reveal>
              <span className="eyebrow">Comparativo</span>
            </Reveal>
            <Reveal delay={80}>
              <h1 className="display-1">Just Travel vs. OTAs</h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="lead" style={{ maxWidth: 620, marginTop: 18 }}>
                As OTAs vendem a marca delas com o seu cliente. A Just Travel coloca a
                sua agência na frente: mesma tecnologia, mesmo inventário, mas a venda,
                os dados e a relação passam a ser seus.
              </p>
            </Reveal>
          </div>
        </section>

        {/* b) Comparison table */}
        <section className="section cp-table-sec">
          <div className="container">
            <Reveal>
              <div className="cp-table-wrap">
                <table className="cp-table">
                  <thead>
                    <tr>
                      <th className="cp-table__feat">Recurso</th>
                      <th className="cp-table__ota">OTAs</th>
                      <th className="cp-table__jt">
                        <span className="cp-table__jt-mark">
                          <img src="assets/logo-mark.png" alt="" />
                          Just Travel
                        </span>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {CP_GROUPS.map((group) => (
                      <React.Fragment key={group.title}>
                        <tr className="cp-table__group">
                          <td colSpan={3}>{group.title}</td>
                        </tr>
                        {group.rows.map((row) => (
                          <tr key={row.feat}>
                            <td className="cp-table__feat">{row.feat}</td>
                            <td className="cp-table__ota"><CPCell cell={row.ota} /></td>
                            <td className="cp-table__jt"><CPCell cell={row.jt} /></td>
                          </tr>
                        ))}
                      </React.Fragment>
                    ))}
                  </tbody>
                </table>
              </div>
            </Reveal>
          </div>
        </section>

        {/* c) Reasons */}
        <section className="section">
          <div className="container">
            <Reveal as="div" className="sect-head sect-head--center">
              <span className="eyebrow">Por que a Just Travel vence</span>
              <h2 className="h-section">Três motivos que fazem a diferença</h2>
              <p className="lead">
                Não é sobre substituir uma OTA por outra. É sobre a sua agência deixar
                de alugar o cliente e passar a ser dona da venda.
              </p>
            </Reveal>

            <div className="cp-reasons">
              {CP_REASONS.map((reason, i) => (
                <Reveal className="cp-reason" delay={i * 120} key={reason.title}>
                  <div className="cp-reason__ic">
                    <SIcon name={reason.icon} size={24} />
                  </div>
                  <h3 className="cp-reason__title">{reason.title}</h3>
                  <p className="cp-reason__body">{reason.body}</p>
                </Reveal>
              ))}
            </div>
          </div>
        </section>

        {/* d) CTA */}
        <section className="cp-cta">
          <div className="container">
            <Reveal as="div" className="cp-cta__inner">
              <h2 className="cp-cta__title">
                Pare de vender para a OTA. Comece a vender com a sua marca
              </h2>
              <p className="cp-cta__sub">
                Ative sua loja whitelabel em até 24 horas. Sem setup, sem fidelidade,
                sem cartão de crédito.
              </p>
              <div className="cp-cta__row">
                <a
                  className="btn btn--blue btn--lg"
                  href="https://office-dashboard.justtraveltour.com/public-whitelabel/new/step-1"
                >
                  Começar grátis
                  <span className="btn__arrow"><SIcon name="btnArrow" /></span>
                </a>
                <a className="btn btn--outline btn--lg" href="Agendar-Demo.html">
                  Agendar demo
                  <span className="btn__arrow"><SIcon name="btnArrow" /></span>
                </a>
              </div>
            </Reveal>
          </div>
        </section>
      </main>
      </PageShell>
  );
}

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