// Just Travel — Preços e planos page app (React via Babel)
// Loaded after React UMD + landing-sections.jsx + landing-footer.jsx.
// Reuses globals: Navbar, Footer, SIcon, Reveal. Reuses native .plan-card /
// .pricing-grid classes inside the .pr-grid wrapper. No import/export/require.
// Every top-level name is prefixed PR_ / PR to stay globally unique.

const PR_SIGNUP = "https://office-dashboard.justtraveltour.com/public-whitelabel/new/step-1";

/* ------------------------------------------------------------
   Two plans, matching the landing: the store is free forever (Just Travel
   earns the commission on each sale) and the intelligence layer (TRAVIA,
   omnichannel inbox, CRM, automations) is a flat monthly add-on. There is
   no billing toggle: only the monthly price is confirmed.
   ------------------------------------------------------------ */
const PR_PLANS = [
  {
    name: "Loja online",
    desc: "Tudo para a sua agência vender online com a sua marca.",
    price: "0",
    priceSub: "Grátis, você só paga a comissão sobre as vendas.",
    features: [
      "Loja online completa e com a sua marca",
      "Domínio próprio",
      "Acesso a +1M produtos turísticos",
      "Checkout PIX, boleto e cartão",
      "Painel de gestão das suas vendas",
      "Editor visual sem código",
      "Onboarding guiado e Just Academy",
      "Suporte 24h",
    ],
    cta: { label: "Criar minha loja grátis", href: PR_SIGNUP, cls: "btn--outline" },
  },
  {
    name: "IA e CRM",
    desc: "Para escalar vendas com automação e inteligência.",
    featured: true,
    badge: "Mais popular",
    price: "399",
    priceSub: "Cobrado mensalmente. Cancele quando quiser, a loja continua grátis.",
    features: [
      "Tudo do plano Loja online",
      "TRAVIA: IA que vende sozinha 24h",
      "IA que qualifica os leads para você",
      "Omnicanal para centralizar o atendimento",
      "CRM completo, alimentado pelas conversas",
      "Automações e campanhas",
      "Recuperação automática de carrinho",
    ],
    cta: { label: "Ativar IA e CRM", href: PR_SIGNUP, cls: "btn--blue" },
  },
];

/* ------------------------------------------------------------
   Feature comparison. Each row's cells are [Loja online, IA e CRM];
   the second (paid) column is highlighted. Cell = one of:
     { t: "yes" } { t: "no" } { t: "txt", v: "…" }
   ------------------------------------------------------------ */
const PR_TABLE = [
  {
    title: "Plataforma",
    rows: [
      { feat: "Loja whitelabel completa", cells: [{ t: "yes" }, { t: "yes" }] },
      { feat: "Domínio próprio", cells: [{ t: "yes" }, { t: "yes" }] },
      { feat: "Editor visual sem código", cells: [{ t: "yes" }, { t: "yes" }] },
      { feat: "Painel de gestão", cells: [{ t: "yes" }, { t: "yes" }] },
    ],
  },
  {
    title: "Produtos & vendas",
    rows: [
      { feat: "Catálogo +1M produtos", cells: [{ t: "yes" }, { t: "yes" }] },
      { feat: "Checkout PIX, boleto e cartão", cells: [{ t: "yes" }, { t: "yes" }] },
      { feat: "Antifraude integrado", cells: [{ t: "yes" }, { t: "yes" }] },
      { feat: "Produtos exclusivos", cells: [{ t: "yes" }, { t: "yes" }] },
      { feat: "Margens definidas por você", cells: [{ t: "yes" }, { t: "yes" }] },
    ],
  },
  {
    title: "Automação & IA",
    rows: [
      { feat: "TRAVIA · IA SDR 24/7", cells: [{ t: "no" }, { t: "yes" }] },
      { feat: "Qualificação de leads por IA", cells: [{ t: "no" }, { t: "yes" }] },
      { feat: "Omnicanal de atendimento", cells: [{ t: "no" }, { t: "yes" }] },
      { feat: "CRM e funil de vendas", cells: [{ t: "no" }, { t: "yes" }] },
      { feat: "Automações e campanhas", cells: [{ t: "no" }, { t: "yes" }] },
      { feat: "Recuperação de carrinho", cells: [{ t: "no" }, { t: "yes" }] },
    ],
  },
  {
    title: "Onboarding & suporte",
    rows: [
      { feat: "Ativação da loja", cells: [{ t: "txt", v: "Até 24h" }, { t: "txt", v: "Até 24h" }] },
      { feat: "Onboarding guiado", cells: [{ t: "yes" }, { t: "yes" }] },
      { feat: "Just Academy", cells: [{ t: "yes" }, { t: "yes" }] },
      { feat: "Suporte 24h", cells: [{ t: "yes" }, { t: "yes" }] },
    ],
  },
];

const PR_FAQ = [
  {
    q: "Preciso pagar para começar?",
    a: "Não. A sua loja whitelabel é gratuita, sem cartão de crédito e sem taxa de setup. A Just Travel só ganha a comissão quando você vende.",
  },
  {
    q: "O que muda no plano IA e CRM?",
    a: "Por R$ 399 por mês você liga a camada de inteligência sobre a loja: o TRAVIA vendendo 24 horas, o omnicanal que centraliza o atendimento, o CRM e as automações de campanha.",
  },
  {
    q: "Existe taxa de setup ou fidelidade?",
    a: "Nenhuma. Não cobramos setup nem exigimos contrato de fidelidade. Sua loja fica no ar em até 24 horas após a ativação.",
  },
  {
    q: "Como funcionam as comissões?",
    a: "Você define a sua margem sobre cada produto. A Just Travel só ganha quando você vende, sem custos escondidos sobre o inventário.",
  },
  {
    q: "Posso cancelar o plano de IA depois?",
    a: "Sim, a qualquer momento direto no painel. Ao cancelar, você perde a camada de IA e CRM, mas a sua loja continua no ar e continua gratuita.",
  },
  {
    q: "Vocês atendem redes e franquias?",
    a: "Sim. Operações em escala, com várias lojas, API dedicada e gerente de conta, são montadas sob medida. Fale com o time de vendas.",
  },
];

/* Render one comparison cell inside a td. */
function PRCell({ cell }) {
  if (cell.t === "yes") {
    return (
      <span className="pr-cell pr-cell--yes" aria-label="Incluído">
        <SIcon name="check" size={22} />
      </span>
    );
  }
  if (cell.t === "no") {
    return (
      <span className="pr-cell pr-cell--no" aria-label="Não incluído">
        <SIcon name="x" size={20} />
      </span>
    );
  }
  return <span className="pr-cell pr-cell--txt">{cell.v}</span>;
}

/* One pricing card, reusing the native .plan-card classes. */
function PRPlanCard({ plan }) {
  return (
    <div className={`plan-card ${plan.featured ? "plan-card--featured" : ""}`}>
      {plan.badge && <div className="plan-card__badge">{plan.badge}</div>}
      <div className="plan-card__name">{plan.name}</div>
      <div className="plan-card__desc">{plan.desc}</div>

      <div className="plan-card__price">
        <span className="plan-card__price-currency">R$</span>
        <span className="plan-card__price-value">{plan.price}</span>
        <span className="plan-card__price-period">/mês</span>
      </div>
      <div className="plan-card__price-sub">{plan.priceSub}</div>

      <ul className="plan-card__features">
        {plan.features.map((f) => (
          <li key={f}>
            <SIcon name="check" size={18} />
            {f}
          </li>
        ))}
      </ul>

      <div className="plan-card__cta">
        <a className={`btn ${plan.cta.cls} btn--lg`} href={plan.cta.href}>
          {plan.cta.label}
          <span className="btn__arrow"><SIcon name="btnArrow" /></span>
        </a>
      </div>
    </div>
  );
}

function PRApp() {
  return (
    <PageShell>
      <main>
        {/* a) Hero */}
        <section className="pr-hero">
          <div className="container">
            <Reveal>
              <span className="eyebrow">Preços</span>
            </Reveal>
            <Reveal delay={80}>
              <h1 className="pr-hero__title display-1">Preços e planos</h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="lead" style={{ maxWidth: 600, marginTop: 18 }}>
                Crie a sua loja e comece a vender de graça. Quando quiser vender no
                automático, ligue a camada de IA e CRM. Sem taxa de setup e sem
                fidelidade.
              </p>
            </Reveal>
          </div>
        </section>

        {/* b) Plans grid */}
        <section className="section" style={{ paddingTop: 0 }}>
          <div className="container">
            <div className="pricing-grid pr-grid">
              {PR_PLANS.map((plan) => (
                <PRPlanCard key={plan.name} plan={plan} />
              ))}
            </div>

            <div className="pricing__small">
              <strong>A Just Travel só ganha quando você vende.</strong>
            </div>

            <Reveal as="div" className="pr-bespoke" delay={80}>
              <p className="pr-bespoke__txt">
                <strong>Rede, franquia ou operadora?</strong> Operações com várias lojas,
                API dedicada e gerente de conta são montadas sob medida.
              </p>
              <a className="btn btn--outline btn--md" href="Agendar-Demo.html">
                Falar com vendas
                <span className="btn__arrow"><SIcon name="btnArrow" /></span>
              </a>
            </Reveal>
          </div>
        </section>

        {/* c) Comparison table */}
        <section className="section section--alt">
          <div className="container">
            <Reveal as="div" className="sect-head sect-head--center">
              <span className="eyebrow">Compare os planos</span>
              <h2 className="h-section">Tudo que cada plano inclui</h2>
              <p className="lead">
                Repare no quanto já vem no plano gratuito: o pago só acrescenta a
                camada de inteligência por cima.
              </p>
            </Reveal>

            <div className="pr-table-wrap">
              <table className="pr-table">
                <thead>
                  <tr>
                    <th className="pr-table__feat">Recurso</th>
                    <th>Loja online</th>
                    <th className="pr-table__hl">IA e CRM</th>
                  </tr>
                </thead>
                <tbody>
                  {PR_TABLE.map((group) => (
                    <React.Fragment key={group.title}>
                      <tr className="pr-table__group">
                        <td colSpan={3}>{group.title}</td>
                      </tr>
                      {group.rows.map((row) => (
                        <tr key={row.feat}>
                          <td className="pr-table__feat">{row.feat}</td>
                          {row.cells.map((cell, ci) => (
                            <td key={ci} className={ci === 1 ? "pr-table__hl" : ""}>
                              <PRCell cell={cell} />
                            </td>
                          ))}
                        </tr>
                      ))}
                    </React.Fragment>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </section>

        {/* d) FAQ */}
        <section className="section">
          <div className="container">
            <Reveal as="div" className="sect-head sect-head--center">
              <span className="eyebrow">Dúvidas frequentes</span>
              <h2 className="h-section">Perguntas sobre preços e planos</h2>
            </Reveal>

            <div className="pr-faq">
              {PR_FAQ.map((item, i) => (
                <Reveal className="pr-faq__item" delay={(i % 2) * 90} key={item.q}>
                  <h3 className="pr-faq__q">{item.q}</h3>
                  <p className="pr-faq__a">{item.a}</p>
                </Reveal>
              ))}
            </div>
          </div>
        </section>
      </main>
      </PageShell>
  );
}

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