// blog.jsx — journal page
function BlogPage({ t, lang }) {
  const featured = COPY.blog.posts[0];
  const rest = COPY.blog.posts.slice(1);
  const [filter, setFilter] = React.useState("all");
  const cats = Array.from(new Set(COPY.blog.posts.map(p => t(p.cat))));

  return (
    <main>
      <section style={{ padding: "100px 0 60px" }}>
        <div className="wrap">
          <div className="eyebrow">{t(COPY.blog.eyebrow)}</div>
          <div className="mobile-stack" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80, alignItems: "end", marginTop: 24 }}>
            <h1 className="display" style={{ fontSize: "clamp(40px, 7vw, 112px)", margin: 0, overflowWrap: "break-word" }}>
              {t(COPY.blog.title).split(" ").slice(0, -1).join(" ")} <em>{t(COPY.blog.title).split(" ").slice(-1)}</em>
            </h1>
            <p className="lead" style={{ margin: 0, maxWidth: 380 }}>{t(COPY.blog.sub)}</p>
          </div>
        </div>
      </section>

      {/* category filter */}
      <div style={{ borderTop: "1px solid var(--c-rule)", borderBottom: "1px solid var(--c-rule)" }}>
        <div className="wrap" style={{ display: "flex", gap: 32, padding: "16px 40px", overflowX: "auto" }}>
          <span onClick={() => setFilter("all")} className="cap" style={{ cursor: "default", color: filter === "all" ? "var(--c-oxblood)" : "var(--c-ink-3)", borderBottom: filter === "all" ? "1px solid var(--c-oxblood)" : "1px solid transparent", paddingBottom: 4 }}>
            {t(["Todos", "All"])}
          </span>
          {cats.map(c => (
            <span key={c} onClick={() => setFilter(c)} className="cap" style={{ cursor: "default", color: filter === c ? "var(--c-oxblood)" : "var(--c-ink-3)", borderBottom: filter === c ? "1px solid var(--c-oxblood)" : "1px solid transparent", paddingBottom: 4 }}>
              {c}
            </span>
          ))}
        </div>
      </div>

      {/* featured */}
      <section style={{ padding: "80px 0 40px" }}>
        <div className="wrap">
          <div className="mobile-stack" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 56, alignItems: "stretch" }}>
            <div style={{ position: "relative" }}>
              <div className="ph" style={{ aspectRatio: "5/4", height: "100%" }}>
                <span>{t(["Foto principal · cosecha", "Lead photo · harvest"])}</span>
              </div>
              <div style={{ position: "absolute", top: 16, left: 16, background: "var(--c-paper)", padding: "6px 12px", fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".22em", textTransform: "uppercase" }}>
                ★ {t(["Destacado", "Featured"])}
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <div style={{ display: "flex", gap: 16, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--c-ink-3)" }}>
                <span style={{ color: "var(--c-oxblood)" }}>{t(featured.cat)}</span>
                <span>·</span><span>{featured.date}</span>
                <span>·</span><span>{featured.readtime}</span>
              </div>
              <h2 className="display" style={{ fontSize: "clamp(36px, 4vw, 56px)", margin: "24px 0 24px" }}>
                {t(featured.title)}
              </h2>
              <p className="lead" style={{ margin: 0, maxWidth: 480 }}>{t(featured.excerpt)}</p>
              <button className="btn dark" style={{ marginTop: 32, alignSelf: "flex-start" }}>{t(["Leer →", "Read →"])}</button>
            </div>
          </div>
        </div>
      </section>

      {/* grid */}
      <section style={{ padding: "60px 0 40px" }}>
        <div className="wrap">
          <div className="posts-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48, borderTop: "1px solid var(--c-rule)", paddingTop: 48 }}>
            {rest.filter(p => filter === "all" || t(p.cat) === filter).map((p, i) => (
              <article key={i} style={{ display: "flex", flexDirection: "column", gap: 16, cursor: "default" }}>
                <div className="ph" style={{ aspectRatio: "4/3" }}>
                  <span>{t(p.cat)}</span>
                </div>
                <div style={{ display: "flex", gap: 12, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--c-ink-3)" }}>
                  <span style={{ color: "var(--c-oxblood)" }}>{t(p.cat)}</span>
                  <span>·</span><span>{p.date}</span>
                  <span>·</span><span>{p.readtime}</span>
                </div>
                <h3 style={{ fontFamily: "var(--serif)", fontSize: 28, fontWeight: 400, lineHeight: 1.15, margin: 0 }}>{t(p.title)}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.65, color: "var(--c-ink-2)", margin: 0 }}>{t(p.excerpt)}</p>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--c-ink)", marginTop: 4 }}>
                  {t(["Leer →", "Read →"])}
                </span>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* newsletter */}
      <section style={{ padding: "100px 0", borderTop: "1px solid var(--c-rule)", marginTop: 60 }}>
        <div className="wrap mobile-stack" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="eyebrow">{t(["Boletín", "Newsletter"])}</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 4.5vw, 64px)", margin: "20px 0 16px", maxWidth: 520 }}>
              {t(["Una carta al mes. Nada más.", "One letter a month. Nothing more."])}
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--c-ink-2)", margin: 0, maxWidth: 460 }}>
              {t(["Notas de cosecha, conversaciones del palenque, y avisos de ediciones limitadas.", "Harvest notes, conversations from the palenque, and announcements of limited releases."])}
            </p>
          </div>
          <form onSubmit={e => e.preventDefault()} className="newsletter-form" style={{ display: "flex", gap: 0, borderBottom: "1px solid var(--c-ink)", paddingBottom: 8 }}>
            <input type="email" placeholder={t(["tu@correo.mx", "you@email.com"])} style={{ flex: 1, border: 0, background: "transparent", fontFamily: "var(--serif)", fontSize: 22, padding: 0, outline: "none", color: "var(--c-ink)" }} />
            <button className="btn dark" style={{ borderColor: "transparent" }}>{t(["Suscribir →", "Subscribe →"])}</button>
          </form>
        </div>
      </section>
    </main>
  );
}

window.BlogPage = BlogPage;