const DSB = window.ConstruimosTuEdificioDesignSystem_3f039f;
const D_B = window.CTE_DATA;

function BlogPage({ onNavigate }) {
  const { BlogCard, Pill, SectionHeading, Eyebrow, Button, Input } = DSB;
  const cats = ["Todos", "Construcción", "Arquitectura", "Edificios", "Departamentos", "Estructuras", "Desarrollo inmobiliario", "Inversión inmobiliaria", "Terrenos"];
  const [cat, setCat] = React.useState("Todos");
  const posts = cat === "Todos" ? D_B.posts : D_B.posts.filter(p => p.category === cat);
  const [lead, ...rest] = D_B.posts;
  return (
    <React.Fragment>
      <PageHero image={D_B.photos.blogHero}
        title="Notas sobre construcción, arquitectura y desarrollo"
        subtitle="Criterios técnicos y decisiones reales de proyecto, explicados sin tecnicismos innecesarios."
        crumbs={[{ label: "Inicio", href: "/" }, { label: "Blog" }]} />
      <section className="section container reveal">
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20, flexWrap: "wrap", marginBottom: 40 }}>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {cats.map(c => (
              <button key={c} type="button" onClick={() => setCat(c)} style={{
                padding: "9px 16px", borderRadius: "var(--radius-pill)", cursor: "pointer",
                fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--track-eyebrow)",
                background: cat === c ? "var(--concrete-900)" : "var(--concrete-0)",
                color: cat === c ? "var(--text-inverse)" : "var(--text-body)",
                border: "1px solid " + (cat === c ? "transparent" : "var(--border-subtle)"),
                transition: "all var(--dur-fast) var(--ease-out)"
              }}>{c}</button>
            ))}
          </div>
          <div style={{ width: 260 }}><Input icon="search" placeholder="Buscar artículo" /></div>
        </div>
        {cat === "Todos" ? (
          <a href="#" style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: "var(--grid-gap)", alignItems: "stretch", marginBottom: "var(--grid-gap)", borderRadius: "var(--radius-xl)", overflow: "hidden", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-sm)" }} className="split-feature">
            <div style={{ backgroundImage: "url(" + lead.image + ")", backgroundSize: "cover", backgroundPosition: "center", minHeight: 320 }}></div>
            <div style={{ padding: "clamp(24px,3vw,44px)", display: "flex", flexDirection: "column", gap: 16, justifyContent: "center" }}>
              <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                <Pill tone="accent">{lead.category}</Pill>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--track-eyebrow)", color: "var(--text-faint)" }}>{lead.date} · {lead.readTime}</span>
              </div>
              <h2 style={{ fontSize: "var(--text-display-s)", letterSpacing: "var(--track-display)", lineHeight: 1.18 }}>{lead.title}</h2>
              <p style={{ fontSize: "var(--text-md)", lineHeight: "var(--lh-body)", color: "var(--text-muted)" }}>{lead.excerpt}</p>
              <div style={{ marginTop: 6 }}><Button variant="dark" arrow>Leer artículo</Button></div>
            </div>
          </a>
        ) : null}
        <div className="grid g3">
          {(cat === "Todos" ? rest : posts).map(p => <BlogCard key={p.title} {...p} />)}
        </div>
        {posts.length === 0 ? <p style={{ padding: "60px 0", textAlign: "center", color: "var(--text-muted)" }}>Aún no hay artículos en esta categoría.</p> : null}
      </section>
      <FinalCTA onNavigate={onNavigate} />
    </React.Fragment>
  );
}
Object.assign(window, { BlogPage });