// ARTICLE detail page — le ?id=N e renderiza post correspondente
function ArticleApp() {
  const [lang, setLang] = useLang();
  const t = mergeT(lang);
  const bp = t.blog_page;
  const params = new URLSearchParams(window.location.search);
  const id = parseInt(params.get("id") || "0", 10);
  const post = bp.posts[id];

  const heroImgs = [
    "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1600&q=85&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1600&q=85&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=1600&q=85&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1620626011761-996317b8d101?w=1600&q=85&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=1600&q=85&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1600&q=85&auto=format&fit=crop",
  ];

  if (!post) {
    return (
      <>
        <Header lang={lang} setLang={setLang} t={t} active="blog" />
        <section className="section">
          <div className="container" style={{ textAlign: "center", padding: "100px 20px" }}>
            <h1>{lang === "en" ? "Article not found" : "Artículo no encontrado"}</h1>
            <p style={{ marginTop: 20 }}>
              <a href="blog.html" className="btn btn-primary">{lang === "en" ? "← Back to Blog" : "← Volver al Blog"}</a>
            </p>
          </div>
        </section>
        <FooterMP lang={lang} t={t} />
      </>
    );
  }

  // Body placeholder (pode ser ajustado depois adicionando "body" em cada post no i18n-pages.js)
  const defaultBody = post.body || (lang === "en"
    ? [
        `${post.excerpt}`,
        `In Austin's competitive remodeling market, every detail matters. ${post.title} is more than just a project — it's an opportunity to elevate how your home looks, feels, and functions.`,
        `At Prospec & Design Remodeling, we approach each ${post.cat ? post.cat.toLowerCase() : "project"} with the same level of care: clear timelines, honest pricing, and craftsmanship that lasts. Our team has handled dozens of projects across Austin metro — from kitchen overhauls in Westlake to full-home builds in Cedar Park.`,
        `What separates a great remodel from a mediocre one is preparation. Before we touch a single wall, we walk through your space, understand how you live, and identify the practical wins. Sometimes the most impactful change isn't the most expensive one.`,
        `Materials matter too. We source from trusted local suppliers — never the cheapest, always the best value for your budget. Hardwood from Texas mills, fixtures with real warranties, finishes that will look as good in 10 years as the day we install them.`,
        `If you're considering a ${post.cat ? post.cat.toLowerCase() : "project"} for your Austin home, we'd love to talk. No pressure, no sales pitch — just a free consultation to understand your goals and tell you honestly what's possible.`,
      ]
    : [
        `${post.excerpt}`,
        `En el competitivo mercado de remodelación de Austin, cada detalle cuenta. ${post.title} es más que un proyecto — es una oportunidad de elevar cómo se ve, se siente y funciona tu hogar.`,
        `En Prospec & Design Remodeling, abordamos cada ${post.cat ? post.cat.toLowerCase() : "proyecto"} con el mismo nivel de cuidado: cronogramas claros, precios honestos y artesanía que perdura. Nuestro equipo ha manejado decenas de proyectos en el área metropolitana de Austin — desde renovaciones de cocina en Westlake hasta construcciones completas en Cedar Park.`,
        `Lo que separa una gran remodelación de una mediocre es la preparación. Antes de tocar una sola pared, recorremos tu espacio, entendemos cómo vives e identificamos las mejoras prácticas. A veces el cambio más impactante no es el más caro.`,
        `Los materiales también importan. Compramos de proveedores locales confiables — nunca el más barato, siempre el mejor valor para tu presupuesto. Maderas de molinos de Texas, accesorios con garantías reales, acabados que se verán tan bien en 10 años como el día que los instalamos.`,
        `Si estás considerando ${post.cat ? "un " + post.cat.toLowerCase() : "un proyecto"} para tu hogar en Austin, nos encantaría conversar. Sin presión, sin discurso de ventas — solo una consulta gratuita para entender tus metas y decirte honestamente qué es posible.`,
      ]);

  return (
    <>
      <Header lang={lang} setLang={setLang} t={t} active="blog" />
      <PageHero
        crumbs={[
          { label: bp.crumb, href: "blog.html" },
          { label: post.cat },
        ]}
        eyebrow={post.cat}
        titlePre={post.title}
        titleAccent=""
        lead={post.excerpt}
      />
      <section className="section">
        <div className="container" style={{ maxWidth: 920 }}>
          <div className="article-meta" style={{ display: "flex", gap: 12, color: "var(--muted)", fontSize: 14, marginBottom: 24, alignItems: "center", flexWrap: "wrap" }}>
            <span>{lang === "en" ? "By" : "Por"} <strong style={{ color: "var(--ink)" }}>{post.author}</strong></span>
            <span>·</span>
            <span>{post.date}</span>
            <span>·</span>
            <span>{post.read}</span>
          </div>
          <img src={heroImgs[id % heroImgs.length]} alt={post.title} style={{ width: "100%", borderRadius: 16, marginBottom: 32, aspectRatio: "16/9", objectFit: "cover" }} />
          <div className="article-body" style={{ fontSize: 17, lineHeight: 1.7, color: "var(--ink)" }}>
            {defaultBody.map((para, i) => (
              <p key={i} style={{ marginBottom: 18 }}>{para}</p>
            ))}
          </div>

          {/* Outros posts (sugestões) */}
          <div style={{ marginTop: 60, paddingTop: 40, borderTop: "1px solid var(--line)" }}>
            <h3 style={{ marginBottom: 24 }}>{lang === "en" ? "Read more" : "Leer más"}</h3>
            <div className="blog-grid">
              {bp.posts
                .map((p, i) => ({ p, i }))
                .filter(({ i }) => i !== id)
                .slice(0, 3)
                .map(({ p, i }) => (
                  <a key={i} href={`article.html?id=${i}`} className="blog-card" style={{ textDecoration: "none", color: "inherit", display: "flex", flexDirection: "column" }}>
                    <img src={heroImgs[i % heroImgs.length]} alt={p.title} />
                    <div className="body">
                      <div className="meta">
                        <span className="cat">{p.cat}</span>
                        <span>·</span>
                        <span>{p.date}</span>
                      </div>
                      <h3>{p.title}</h3>
                      <p>{p.excerpt}</p>
                      <div className="meta" style={{ marginTop: "auto" }}>
                        <span>{p.author}</span>
                        <span>·</span>
                        <span>{p.read}</span>
                      </div>
                    </div>
                  </a>
                ))}
            </div>
          </div>
        </div>
      </section>
      <CTABanner t={t} />
      <FooterMP lang={lang} t={t} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<ArticleApp />);