// Just Travel — Produtos page app (React via Babel)
// Loaded after landing-icons.jsx (Icon/SIcon), landing-sections.jsx (CATEGORIES,
// Reveal) and landing-footer.jsx (PageShell). Shares one global scope, so every
// top-level name here is prefixed PD_.
//
// One page, one anchor per category. There is deliberately no page per product:
// the navbar's Produtos menu builds `Produtos.html#<slug>` straight from
// CATEGORIES in landing-sections.jsx, which is the site's single product
// taxonomy. Adding, renaming or reordering a product happens there and this page
// follows, so the menu can never offer a section that does not exist.

const PD_HREF_START = "https://office-dashboard.justtraveltour.com/public-whitelabel/new/step-1";
const PD_HREF_DEMO = "Agendar-Demo.html";

/* Photography, per category, cropped to the 3:2 the poster renders at and
   written as AVIF by scripts/product-photos.mjs (the masters live in
   media-src/photos/, which is not deployed). Values are relative to
   /assets/photos/.

   All ten categories have a photo. "guias" has no entry: the category itself
   was removed from CATEGORIES in landing-sections.jsx, so it never reaches
   this map. */
const PD_PHOTOS = {
  ingressos: "produtos/ingressos.avif",
  hospedagens: "produtos/hospedagens.avif",
  transportes: "produtos/transportes.avif",
  cruzeiros: "produtos/cruzeiros.avif",
  eventos: "produtos/eventos.avif",
  parques: "produtos/parques.avif",
  seguros: "produtos/seguros.avif",
  experiencias: "produtos/experiencias.avif",
  esportivos: "produtos/esportivos.avif",
  exclusivos: "produtos/exclusivos.avif",
};

/* Long-form intro per category, one sentence that the landing card has no room
   for. Scope only, in the same spirit as `points` in CATEGORIES: it says what
   the category covers, and restates commitments already published elsewhere on
   the site. Nothing here asserts a new commercial fact. A slug with no entry
   simply renders without the paragraph. */
const PD_INTRO = {
  ingressos: "Atrações, shows, passeios e parques com voucher emitido no ato da compra, para o cliente que fecha a viagem e já quer o ingresso na mão.",
  parques: "Os parques que puxam a viagem para os Estados Unidos, com passaporte de um ou vários dias e o ingresso oficial de cada operação.",
  hospedagens: "Do hotel econômico ao resort, e da casa por temporada ao apartamento para a família inteira, na mesma reserva do resto da viagem.",
  cruzeiros: "Roteiros marítimos e fluviais das principais armadoras, com cabine escolhida por categoria e ocupação.",
  transportes: "O deslocamento inteiro da viagem: o carro alugado por diária, o transfer do aeroporto e o traslado entre cidades e atrações.",
  experiencias: "O que o cliente vai lembrar depois: city tours, gastronomia, natureza e cultura, em roteiros de meio dia ou dia inteiro.",
  eventos: "Shows, festivais e temporadas com data e setor definidos, que a agência transforma em pacote com hospedagem e transporte.",
  esportivos: "Jogos, clássicos e campeonatos com ingresso por setor do estádio, montados como pacote de torcida.",
  seguros: "Assistência médica em viagem com cobertura escolhida por destino e duração, no mesmo carrinho da reserva que ela protege.",
  guias: "A sua loja já vem com editor de páginas e blog. Esta é a matéria-prima deles: conteúdo de destino para atrair o cliente antes de ele pedir orçamento.",
  exclusivos: "Tarifas que a Just Travel negocia direto com o fornecedor, com condições que as OTAs não oferecem e margem definida por você.",
};

/* The poster: the same treatment as the product card on the landing, so a
   category reads identically in both places. `i` only tilts the gradient. */
function PDPoster({ cat, i }) {
  const photo = PD_PHOTOS[cat.slug];
  return (
    <div className="prod__visual" style={{ "--prod-i": i }}>
      {photo &&
        <img className="prod__photo" src={`/assets/photos/${photo}`} alt="" loading="lazy" />}
      <span className="prod__glyph" aria-hidden="true">
        <SIcon name={cat.icon} size={148} />
      </span>
      <span className="prod__visual-name">{cat.name}</span>
    </div>
  );
}

function PDHero() {
  return (
    <section className="pd-hero" id="top">
      <div className="container">
        <Reveal>
          <span className="eyebrow">Catálogo</span>
        </Reveal>
        <Reveal delay={80}>
          <h1 className="pd-hero__title display-1">
            Tudo que a viagem precisa, no mesmo carrinho
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p className="pd-hero__lead lead">
            Mais de 1 milhão de produtos turísticos conectados por API, com preço e
            disponibilidade em tempo real. A sua agência monta o pacote inteiro numa
            venda só, e a margem de cada item é você quem define.
          </p>
        </Reveal>

        {/* The index is the page's table of contents and the same list the
            navbar menu offers, in the same order. */}
        <Reveal as="nav" className="pd-index" delay={240} aria-label="Categorias de produtos">
          {CATEGORIES.map((c) =>
            <a key={c.slug} className="pd-index__item" href={`#${c.slug}`}>
              <SIcon name={c.icon} size={16} />
              {c.name}
            </a>
          )}
        </Reveal>
      </div>
    </section>
  );
}

/* Rows alternate sides. The heading is the category name, so the anchor the
   navbar points at lands on the thing it named. */
function PDSection({ cat, i }) {
  return (
    <section className={`section pd-sect ${i % 2 ? "pd-sect--alt" : ""}`} id={cat.slug}>
      <div className="container">
        <Reveal as="div" className={`pd-row ${i % 2 ? "pd-row--flip" : ""}`}>
          <PDPoster cat={cat} i={i} />

          <div className="pd-copy">
            <span className="pd-copy__ey">
              <SIcon name={cat.icon} size={18} />
              Categoria
            </span>
            <h2 className="pd-copy__h">{cat.name}</h2>
            <p className="pd-copy__body">{cat.body}</p>
            {PD_INTRO[cat.slug] && <p className="pd-copy__intro">{PD_INTRO[cat.slug]}</p>}
            <ul className="prod__points">
              {cat.points.map((p) =>
                <li key={p}><SIcon name="check" size={16} />{p}</li>
              )}
            </ul>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function PDClose() {
  return (
    <section className="section pd-close">
      <div className="container">
        <Reveal as="div" className="pd-close__inner">
          <h2 className="pd-close__h">Comece a vender esse catálogo hoje</h2>
          <p className="pd-close__sub">
            A loja fica no ar em até 24 horas, com a sua marca na frente e o catálogo
            inteiro já conectado.
          </p>
          <div className="pd-close__ctas">
            <a className="btn btn--blue btn--lg" href={PD_HREF_START}>
              Começar grátis
              <span className="btn__arrow"><SIcon name="btnArrow" /></span>
            </a>
            <a className="btn btn--outline btn--lg" href={PD_HREF_DEMO}>
              Agendar demo
              <span className="btn__arrow"><SIcon name="btnArrow" /></span>
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function PDApp() {
  return (
    <PageShell>
      <main>
        <PDHero />
        {CATEGORIES.map((c, i) => <PDSection key={c.slug} cat={c} i={i} />)}
        <PDClose />
      </main>
    </PageShell>
  );
}

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