// BLOG page
function BlogApp() {
  const [lang, setLang] = useLang();
  const t = mergeT(lang);
  const bp = t.blog_page;
  const heroImgs = [
    "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1100&q=80&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=900&q=80&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=900&q=80&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1620626011761-996317b8d101?w=900&q=80&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=900&q=80&auto=format&fit=crop",
    "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=900&q=80&auto=format&fit=crop",
  ];
  const [feat, ...rest] = bp.posts;
  return (
    <>
      <Header lang={lang} setLang={setLang} t={t} active="blog" />
      <PageHero
        crumbs={[{ label: bp.crumb }]}
        eyebrow={bp.eyebrow}
        titlePre={bp.title_pre}
        titleAccent={bp.title_accent}
        lead={bp.lead}
      />
      <section className="section">
        <div className="container">
          {/* Featured */}
          <article className="blog-feature">
            <img src={heroImgs[0]} alt={feat.title} />
            <div className="body">
              <div className="meta">
                <span className="cat">{bp.featured_label}</span>
                <span>{feat.cat}</span>
                <span>·</span>
                <span>{feat.date}</span>
                <span>·</span>
                <span>{feat.read}</span>
              </div>
              <h2>{feat.title}</h2>
              <p>{feat.excerpt}</p>
              <div className="meta" style={{ marginTop: 8 }}>
                <span>{lang === 'en' ? 'By' : 'Por'} {feat.author}</span>
              </div>
              <a href={`article.html?id=0`} className="btn btn-primary" style={{ alignSelf: "flex-start", marginTop: 8 }}>
                {bp.read_more} <Icon.ArrowRight size={16} />
              </a>
            </div>
          </article>

          <div className="blog-grid">
            {rest.map((p, i) => (
              <a href={`article.html?id=${i + 1}`} className="blog-card" key={i} style={{textDecoration:"none",color:"inherit",display:"flex",flexDirection:"column"}}>
                <img src={heroImgs[i + 1]} 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>
      </section>
      <CTABanner t={t} />
      <FooterMP lang={lang} t={t} />
    </>
  );
}

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