// Just Travel — Blog listing page (React via Babel)
// Loaded AFTER React UMD, landing-sections.jsx, landing-footer.jsx, blog-data.js.
// Shares ONE global scope with the other page scripts, so every top-level name
// here is prefixed BL_/BLApp and we reach for React.* directly (no destructuring,
// no import/export/require). Reuses the globals Navbar, Footer, SIcon, Reveal.

// Build the article URL consumed by artigo-app.jsx (reads ?slug=...).
const BL_articleHref = (slug) => "Artigo.html?slug=" + encodeURIComponent(slug);

// Author · date · read row (shared by the featured block and the cards).
function BL_Meta({ post }) {
  return (
    <div className="bl-meta">
      <span className="bl-avatar">{post.initials}</span>
      <span>{post.author}</span>
      <span className="bl-meta__dot" aria-hidden="true"></span>
      <span>{post.date}</span>
      <span className="bl-meta__dot" aria-hidden="true"></span>
      <span>{post.read}</span>
    </div>
  );
}

// Single grid card. The whole card is the link into the article.
function BL_Card({ post }) {
  return (
    <a className="bl-card" href={BL_articleHref(post.slug)}>
      <div
        className="bl-card__media"
        style={{ backgroundImage: post.cover ? `url(${post.cover})` : undefined }}
      >
        <span className="bl-card__cat">{post.category}</span>
      </div>
      <h3 className="bl-card__title">{post.title}</h3>
      <p className="bl-card__excerpt">{post.excerpt}</p>
      <div className="bl-card__foot">
        <BL_Meta post={post} />
      </div>
    </a>
  );
}

// Newsletter card — keeps its own submit state locally.
function BL_Newsletter() {
  const [sent, setSent] = React.useState(false);
  return (
    <div className="bl-news">
      <h3 className="bl-news__h">Receba conteúdo direto no seu e-mail</h3>
      <p className="bl-news__sub">
        Guias, tendências de travel tech e histórias de agências parceiras.
        Uma vez por semana, sem spam.
      </p>
      <form
        className="bl-news__form"
        onSubmit={(e) => {
          e.preventDefault();
          const email = (e.currentTarget.email?.value || "").trim();
          if (/.+@.+\..+/.test(email)) setSent(true);
        }}
      >
        {sent ? (
          <div className="bl-news__ok">
            <SIcon name="check" size={18} />
            Pronto! Você está na lista.
          </div>
        ) : (
          <>
            <input
              className="bl-news__input"
              type="email"
              name="email"
              autoComplete="email"
              inputMode="email"
              spellCheck={false}
              required
              placeholder="Seu melhor e-mail"
              aria-label="E-mail"
            />
            <button type="submit" className="bl-news__btn">Assinar</button>
          </>
        )}
      </form>
      <div className="bl-news__fine">Você pode cancelar quando quiser.</div>
    </div>
  );
}

function BLApp() {
  const posts = window.BLOG_POSTS || [];
  const categories = window.BLOG_CATEGORIES || ["Todos"];

  const [cat, setCat] = React.useState("Todos");

  // Featured post drives the hero showcase; everything else feeds the grid.
  const featured = React.useMemo(
    () => posts.find((p) => p.featured) || posts[0],
    [posts]
  );
  const rest = React.useMemo(
    () => posts.filter((p) => p !== featured),
    [posts, featured]
  );
  const filtered = React.useMemo(
    () => (cat === "Todos" ? rest : rest.filter((p) => p.category === cat)),
    [rest, cat]
  );
  const popular = React.useMemo(
    () => posts.filter((p) => p.popular),
    [posts]
  );

  return (
    <PageShell>
      <main>
        {/* a) HERO + b) FEATURED */}
        <section className="bl-hero">
          <div className="container">
            <Reveal as="div">
              <span className="eyebrow">Blog</span>
              <h1 className="bl-hero__title display-1">
                Ideias para a sua agência vender mais viagens
              </h1>
              <p className="bl-hero__sub lead">
                Estratégias, tecnologia e histórias reais de agências que
                colocaram a própria marca na frente das OTAs.
              </p>
            </Reveal>

            {featured && (
              <a className="bl-feat" href={BL_articleHref(featured.slug)}>
                <div
                  className="bl-feat__media"
                  style={{
                    backgroundImage: featured.cover ? `url(${featured.cover})` : undefined,
                  }}
                >
                  <span className="bl-feat__badge">Destaque</span>
                </div>
                <div className="bl-feat__body">
                  <span className="bl-feat__eyebrow eyebrow">{featured.category}</span>
                  <h2 className="bl-feat__title">{featured.title}</h2>
                  <p className="bl-feat__excerpt">{featured.excerpt}</p>
                  <div className="bl-feat__foot">
                    <BL_Meta post={featured} />
                    <span className="bl-readmore">
                      Ler artigo
                      <SIcon name="arrowRight" size={16} />
                    </span>
                  </div>
                </div>
              </a>
            )}
          </div>
        </section>

        {/* c) CHIPS + d) LAYOUT */}
        <section className="section">
          <div className="container">
            <div className="bl-chips">
              {categories.map((c) => (
                <button
                  key={c}
                  type="button"
                  className={`bl-chip ${cat === c ? "is-active" : ""}`}
                  onClick={() => setCat(c)}
                >
                  {c}
                </button>
              ))}
            </div>

            <div className="bl-layout">
              <div className="bl-grid">
                {filtered.map((p) => (
                  <BL_Card key={p.slug} post={p} />
                ))}
              </div>

              <aside className="bl-side">
                <div className="bl-pop-block">
                  <h3 className="bl-side__h">Mais lidos</h3>
                  <div className="bl-pop">
                    {popular.map((p, i) => (
                      <a
                        key={p.slug}
                        className="bl-pop__item"
                        href={BL_articleHref(p.slug)}
                      >
                        <span className="bl-pop__num">{i + 1}</span>
                        <div>
                          <div className="bl-pop__title">{p.title}</div>
                          <div className="bl-pop__meta">
                            {p.category} · {p.read}
                          </div>
                        </div>
                      </a>
                    ))}
                  </div>
                </div>

                <BL_Newsletter />
              </aside>
            </div>
          </div>
        </section>
      </main>
      </PageShell>
  );
}

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