// blog.jsx
function Blog() {
  const posts = [
    { cls: 'a', cat: 'LLC', t: 'GmbH vs. US LLC — der ehrliche Vergleich für 2026', meta: '12 min · Edis', href: 'blog/gmbh-vs-us-llc-vergleich.html' },
    { cls: 'b', cat: 'Credit', t: 'US Business Credit aufbauen mit ITIN — Amex & Chase', meta: '14 min · Edis', href: 'blog/us-business-credit-aufbauen-itin.html' },
    { cls: 'c', cat: 'Banking', t: 'Stripe mit US LLC einrichten — Praxis-Guide', meta: '8 min · Edis', href: 'blog/stripe-us-llc-einrichten.html' },
    { cls: 'd', cat: 'Banking', t: 'Mercury Bankkonto eröffnen — Non-Resident Approval Guide', meta: '9 min · Edis', href: 'blog/mercury-bankkonto-eroeffnen-non-resident.html' }
  ];

  return (
    <section className="blog" id="blog" data-screen-label="Blog">
      <div className="wrap">
        <div className="blog-head">
          <SectionHead
            eyebrow="Ressourcen"
            title={<>Der Blog. Kein<br/><em>SEO-Füllstoff.</em></>}
            sub="Wir schreiben nur, wenn wir wirklich was Neues zu sagen haben."
            style={{ marginBottom: 0 }}
          />
          <a href="blog/" className="btn btn-ghost">Alle Artikel <Arrow /></a>
        </div>

        <div className="blog-grid">
          {posts.map((p, i) => (
            <a href={p.href} key={i} className="post">
              <div className={`post-img ${p.cls}`}></div>
              <div className="post-body">
                <div className="post-cat">{p.cat}</div>
                <div className="post-title">{p.t}</div>
                <div className="post-meta">{p.meta}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Blog = Blog;