/* blog.jsx — Blog-Übersichtsseite (Liste innerhalb der SPA, Detailseiten sind
   serverseitig gerenderte /blog/:slug-Routen — siehe Backend/server.js) */
const { useState: useStateBl, useEffect: useEffectBl } = React;

function BlogPage({ go }) {
  const { Reveal, MediaPlaceholder, LinkArrow } = window;
  const [posts, setPosts] = useStateBl([]);
  const [loading, setLoading] = useStateBl(true);

  useEffectBl(() => {
    fetch('/api/posts')
      .then((r) => r.json())
      .then((data) => setPosts(Array.isArray(data) ? data : []))
      .catch(() => setPosts([]))
      .finally(() => setLoading(false));
  }, []);

  return (
    <div>
      <header className="page-hero"><div className="wrap">
        <Reveal><span className="kicker">Blog</span>
          <h1 className="display" style={{ marginTop: 18 }}>Aktuelles</h1></Reveal>
        <Reveal delay={100}><p className="lead mt-m" style={{ maxWidth: '46ch' }}>
          Einblicke, Denkanstösse und News rund um Social Media, Kampagnen und unsere Projekte.</p></Reveal>
      </div></header>

      <section className="section" style={{ paddingTop: 0 }}><div className="wrap">
        {loading && <p className="small" style={{ color: 'var(--text-dim)' }}>Wird geladen…</p>}
        {!loading && posts.length === 0 && (
          <p className="small" style={{ color: 'var(--text-dim)' }}>Noch keine Beiträge veröffentlicht.</p>
        )}
        <div className="proj-grid">
          {posts.map((p, i) => (
            <Reveal key={p.id} delay={(i % 2) * 80}>
              <a href={`/blog/${p.slug}`} className="proj" style={{ display: 'block', textDecoration: 'none', color: 'inherit' }}>
                <div className="proj-media">
                  {p.image
                    ? <img src={p.image} alt={p.title} style={{ width: '100%', aspectRatio: '4/3', objectFit: 'cover', borderRadius: 'var(--radius)' }} />
                    : <MediaPlaceholder label={p.tag} />}
                </div>
                <div className="proj-meta">
                  <h3>{p.title}</h3>
                  <span className="proj-cat">{p.tag} · {p.date}</span>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
        <div className="mt-l"><LinkArrow onClick={() => go('kontakt')}>Thema, das wir aufgreifen sollen?</LinkArrow></div>
      </div></section>
      <window.CTAband go={go} />
    </div>
  );
}

Object.assign(window, { BlogPage });