// Just Travel — White Label page app (React via Babel)
// Loaded after React UMD, landing-icons.jsx (SIcon), landing-sections.jsx
// (Navbar, Reveal) and landing-footer.jsx (PageShell). Shares one global scope
// — every top-level name here is prefixed WL_ / WLApp so it never collides.
//
// Ported from the Figma frame "Just Travel | White Label" (Content Landing page,
// node 43:3564) in Aug 2026. Four folds: the hero with the storefront art, the
// near-black ecosystem band, the "sem setup / sem fidelidade / sem TI" band and
// the journey + closing CTA. The frame also draws a navbar and a footer; those
// are not rebuilt here, because PageShell already carries the site's own.

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

// Photography for the storefront cards comes from the set already published on
// Produtos.html, so the mockup shows the same inventory the catalogue does and
// nothing new lands in assets/.
const WL_SHOT_HOTEL = "/assets/photos/produtos/hospedagens.avif";
const WL_SHOT_TOUR = "/assets/photos/produtos/experiencias.avif";

// The recorded walkthrough of the white label platform (1280x720, 67s). The
// poster is a frame of that same film, pulled out so the idle player shows the
// store instead of the blue title card the video opens on. Heavy original in
// media-src/, which is not deployed.
const WL_VIDEO = "/assets/videodemowhitelabel.webm";
const WL_VIDEO_POSTER = "/assets/videodemowhitelabel-poster.webp";

// The six halves of the platform, one card each, read left to right in the
// order an agency meets them: store, catalogue, checkout, back office, margin,
// infrastructure.
const WL_ECO = [
  { icon: "home",    t: "Sua loja",   d: "A sua agência com identidade própria, domínio próprio e uma experiência só sua." },
  { icon: "bag",     t: "Produtos",   d: "Mais de 1 milhão de opções: hospedagens, ingressos, transportes e cruzeiros." },
  { icon: "card",    t: "Checkout",   d: "PIX, boleto e cartão no seu domínio, com o dado do cartão tokenizado." },
  { icon: "users",   t: "Gestão",     d: "Acompanhe vendas, pedidos e clientes no painel da própria agência." },
  { icon: "percent", t: "Comissões",  d: "Controle do seu markup e do faturamento, venda a venda." },
  { icon: "cpu",     t: "Tecnologia", d: "Hospedagem, segurança e atualizações por nossa conta, sem código e sem TI." },
];

// The journey, from the customer's first click to the agency's commission.
const WL_STEPS = [
  { ey: "Sua marca",        icon: "palette",  t: "Loja com o seu domínio", d: "Hospedada por nós e publicada com o seu logotipo, as suas cores e o seu endereço." },
  { ey: "Inventário",       icon: "globe",    t: "Milhões de produtos",    d: "O seu cliente pesquisa hospedagens, ingressos e passeios direto na sua loja." },
  { ey: "Conversão",        icon: "lock",     t: "Checkout seguro",        d: "A compra acontece com PIX, boleto ou cartão, sem que ele saia do seu site." },
  { ey: "Resultado",        icon: "sparkles", t: "Venda e margem",         d: "A comissão é sua, e o cliente continua sendo da sua agência.", good: true },
];

const WL_SEM = [
  { icon: "zap",      t: "Sem setup",       d: "No ar em até 24 horas, sem código e sem projeto de implantação." },
  { icon: "check",    t: "Sem fidelidade",  d: "Comece grátis e cancele quando quiser, sem contrato de amarração." },
  { icon: "settings", t: "Sem equipe de TI", d: "Hospedagem, segurança e atualizações são por nossa conta." },
];

/* ------------------------------------------------------------
   Product art
   ------------------------------------------------------------
   Two mockups drawn as elements rather than screenshots, so they stay crisp,
   stay translatable and stay light in the dark theme (see the "light island"
   rule the page stylesheet applies to .wl-lit).

   Both are decorative: aria-hidden, and every figure in them is illustrative
   UI, not a published metric.
   ------------------------------------------------------------ */

function WLStorefront() {
  return (
    <div className="wl-shop wl-lit">
      <div className="wl-shop__bar">
        <span className="wl-shop__dots" aria-hidden="true"><i></i><i></i><i></i></span>
        <span className="wl-shop__url">viagens.suaagencia.com.br</span>
      </div>
      <div className="wl-shop__body">
        <div className="wl-shop__head">
          <span className="wl-shop__brand"><i aria-hidden="true"></i>Sua Agência</span>
          <span className="wl-shop__nav">
            <span>Hotéis</span><span>Pacotes</span><span>Suporte</span>
          </span>
        </div>

        <div className="wl-shop__search">
          <SIcon name="search" size={null} />
          <span className="wl-shop__search-txt">Onde você quer ir?</span>
          <span className="wl-shop__search-btn">Buscar</span>
        </div>

        <div className="wl-shop__grid">
          <div className="wl-shop__card">
            {/* First fold, and the one card the checkout panel does not cover,
                so this one is not deferred. */}
            <img src={WL_SHOT_HOTEL} alt="" width="254" height="100" decoding="async" />
            <div className="wl-shop__card-txt">
              <strong>Resort em Orlando</strong>
              <span className="wl-shop__where">Flórida, EUA</span>
              <span className="wl-shop__row">
                <b>R$ 450/noite</b>
                <em>4,8</em>
              </span>
            </div>
          </div>
          <div className="wl-shop__card">
            <img src={WL_SHOT_TOUR} alt="" width="254" height="100" loading="lazy" decoding="async" />
            <div className="wl-shop__card-txt">
              <strong>City tour em Nova York</strong>
              <span className="wl-shop__where">Nova York, EUA</span>
              <span className="wl-shop__row">
                <b>R$ 290/pessoa</b>
                <em>4,9</em>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function WLCheckout() {
  return (
    <div className="wl-float wl-float--checkout wl-lit">
      <div className="wl-float__head">
        <strong>Pagamento seguro</strong>
        <SIcon name="lock" size={null} />
      </div>
      <div className="wl-sum">
        <span><i>Resort em Orlando (3 noites)</i><b>R$ 1.350</b></span>
        <span><i>Taxas de serviço</i><b>R$ 85</b></span>
        <span className="wl-sum__total"><i>Total pago</i><b>R$ 1.435</b></span>
      </div>
      <div className="wl-pay">
        <span className="wl-pay__opt is-on"><i aria-hidden="true"></i>Cartão de crédito parcelado</span>
        <span className="wl-pay__opt"><i aria-hidden="true"></i>PIX à vista</span>
      </div>
      <span className="wl-float__cta">Confirmar reserva</span>
    </div>
  );
}

function WLSales() {
  return (
    <div className="wl-float wl-float--sales wl-lit">
      <span className="wl-float__label">Vendas do mês</span>
      <strong className="wl-float__big">R$ 142.850</strong>
      <span className="wl-float__delta"><b>+28,4%</b> vs. mês anterior</span>
    </div>
  );
}

function WLCustomizer() {
  return (
    <div className="wl-float wl-float--brand wl-lit">
      <strong className="wl-float__title">Personalização visual</strong>
      <span className="wl-kv"><i>Cor primária</i><b><em aria-hidden="true"></em>#009FE3</b></span>
      <span className="wl-kv"><i>Logotipo</i><b className="wl-chip">logo-da-agencia.svg</b></span>
    </div>
  );
}

/* The recorded platform demo, in the slot the frame gives a drawn admin panel.
   Same job, real footage, so the section shows the product instead of an
   illustration of it.

   Never autoplays and never preloads: the file is 6.6MB and the section is two
   folds down, so nothing is fetched until someone asks for it. The poster (46KB)
   carries the idle state on its own. Controls appear once it has started, which
   is the same contract as the depoimento player in landing-sections.jsx. */
function WLDemo() {
  const ref = useRef(null);
  const [started, setStarted] = useState(false);

  const start = () => {
    setStarted(true);
    const v = ref.current;
    if (v) { const p = v.play(); if (p && p.catch) p.catch(() => {}); }
  };

  return (
    <div className="wl-demo">
      <video
        ref={ref}
        className="wl-demo__v"
        src={WL_VIDEO}
        poster={WL_VIDEO_POSTER}
        preload="none"
        playsInline
        controls={started}
        onPlay={() => setStarted(true)}
      />
      {!started && (
        <button
          type="button"
          className="wl-demo__play"
          onClick={start}
          aria-label="Assistir à demonstração da plataforma"
        >
          <SIcon name="play" size={26} />
        </button>
      )}
    </div>
  );
}

/* ------------------------------------------------------------
   Folds
   ------------------------------------------------------------ */

function WLHero() {
  return (
    <section className="wl-hero" id="top">
      <div className="container">
        <div className="wl-hero__grid">
          <div className="wl-copy">
            <Reveal>
              <div className="wl-eyebrow">
                <span className="wl-eyebrow__rule" aria-hidden="true"></span>
                <span className="eyebrow">Plataforma White Label</span>
              </div>
            </Reveal>

            <Reveal delay={80}>
              <h1 className="wl-title display-1">
                Uma plataforma completa. A marca é a sua
              </h1>
            </Reveal>

            <Reveal delay={160}>
              <p className="wl-lead">
                Venda hospedagens, ingressos, carros, cruzeiros, passeios e muito mais em
                uma experiência fluida, com a identidade visual, o domínio e as regras de
                negócio da sua própria agência.
              </p>
            </Reveal>

            <Reveal delay={240}>
              <div className="wl-cta-row">
                <a className="btn btn--blue btn--lg" href={WL_HREF_START}>
                  Começar grátis
                  <span className="btn__arrow"><SIcon name="btnArrow" /></span>
                </a>
                <a className="btn btn--outline btn--lg" href={WL_HREF_DEMO}>
                  Agendar demo
                  <span className="btn__arrow"><SIcon name="btnArrow" /></span>
                </a>
              </div>
            </Reveal>

            {/* The frame puts three customer portraits here. We have no such
                photograph and no confirmed agency count behind the line it
                captioned, so the slot keeps the one sales figure the team has
                confirmed (PRODUCT.md, 29/07/2026) instead. */}
            <Reveal delay={320}>
              <p className="wl-proof">
                <span className="wl-proof__ic"><SIcon name="chart" size={20} /></span>
                <span><strong>+R$ 1 bilhão</strong> já vendido pelas agências que operam na plataforma.</span>
              </p>
            </Reveal>
          </div>

          <Reveal className="wl-visual" delay={160}>
            <div className="wl-stage" aria-hidden="true">
              <div className="wl-stage__in">
                <WLStorefront />
                <span className="wl-badge"><SIcon name="chart" size={null} />Sua margem: 15%</span>
                <WLCheckout />
                <WLSales />
                <WLCustomizer />
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function WLEco() {
  return (
    <section className="wl-eco" id="ecossistema">
      <div className="container container--wide">
        <Reveal as="div" className="wl-eco__head">
          <h2 className="h-section">Tudo conectado para você vender mais</h2>
          <p className="wl-eco__lead">
            A sua agência com uma estrutura completa para vender, receber, acompanhar
            pedidos e administrar a operação em um único ambiente.
          </p>
        </Reveal>

        <div className="wl-eco__grid">
          <Reveal className="wl-eco__art" delay={80}>
            <WLDemo />
          </Reveal>

          <div className="wl-eco__cards">
            {WL_ECO.map((c, i) => (
              <Reveal key={c.t} className="wl-feat" delay={120 + i * 70}>
                <span className="wl-feat__ic"><SIcon name={c.icon} size={18} /></span>
                <strong className="wl-feat__t">{c.t}</strong>
                <span className="wl-feat__d">{c.d}</span>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function WLBand() {
  return (
    <section className="section">
      <div className="container">
        <Reveal as="div" className="wl-band__head">
          <p className="wl-band__lead">
            Não é um tema nem um plugin. É <strong>uma plataforma inteira operando sob a
            marca da sua agência</strong>, do primeiro clique ao pós-venda, sem o cliente
            saber que a Just Travel está por trás.
          </p>
        </Reveal>

        <div className="wl-sem">
          {WL_SEM.map((s, i) => (
            <Reveal key={s.t} className="wl-sem__item" delay={i * 120}>
              <span className="wl-sem__mark">
                <SIcon name={s.icon} size={18} />
              </span>
              <strong className="wl-sem__t">{s.t}</strong>
              <span className="wl-sem__txt">{s.d}</span>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function WLFlow() {
  return (
    <section className="section wl-flow" id="jornada">
      <div className="container">
        <Reveal as="div" className="sec-head">
          <h2 className="h-section">Você cuida da sua agência. A tecnologia fica com a gente</h2>
          <p className="lead">
            Veja como a jornada acontece na sua plataforma white label, do primeiro
            clique ao pós-venda.
          </p>
        </Reveal>

        <ol className="wl-steps">
          {WL_STEPS.map((s, i) => (
            <Reveal as="li" key={s.t} className="wl-step" delay={i * 110}>
              <div className="wl-step__card">
                <span className={`wl-step__ey${s.good ? " is-good" : ""}`}>
                  <SIcon name={s.icon} size={16} />{s.ey}
                </span>
                <strong className="wl-step__t">{s.t}</strong>
                <span className="wl-step__d">{s.d}</span>
              </div>
              <span className="wl-step__n">Passo {i + 1}</span>
              <span className="wl-step__arrow" aria-hidden="true">
                <SIcon name="arrowRight" size={22} />
              </span>
            </Reveal>
          ))}
        </ol>

        <Reveal as="div" className="wl-cta" delay={120}>
          <h2 className="wl-cta__title">Pronto para colocar a sua marca na frente?</h2>
          <p className="wl-cta__lead">
            Comece grátis ou fale com um especialista para conhecer todas as
            possibilidades da plataforma white label.
          </p>
          <div className="wl-cta-row wl-cta-row--center">
            <a className="btn btn--blue btn--lg" href={WL_HREF_START}>
              Começar grátis
              <span className="btn__arrow"><SIcon name="btnArrow" /></span>
            </a>
            <a className="btn btn--outline btn--lg" href={WL_HREF_DEMO}>
              Falar com um especialista
              <span className="btn__arrow"><SIcon name="btnArrow" /></span>
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function WLApp() {
  return (
    <PageShell>
      <main>
        <WLHero />
        <WLEco />
        <WLBand />
        <WLFlow />
      </main>
    </PageShell>
  );
}

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