/* Aktuelles (Blog) overview + Article detail template */

function AktuellesPage() {
  const cats = window.SITE.blogCats;
  const [cat, setCat] = useState("Alle");
  const posts = window.SITE.postsAll;
  const shown = cat === "Alle" ? posts : posts.filter((p) => p.cat === cat);
  return (
    <main className="page-enter">
      <PageHero
        crumb="Aktuelles"
        eyebrow="Blog vom Lernort"
        title="Aktuelles von der Farm"
        lead="Geschichten aus Garten, Werkstatt, Atelier und aus unseren Kooperationen – geschrieben von den Menschen, die den Lernort jeden Tag gestalten."
      />

      <section className="section section--tight">
        <div className="container">
          <Reveal>
            <div className="blog-filter" role="tablist" aria-label="Nach Bereich filtern">
              {cats.map((c) => (
                <button key={c} role="tab" aria-selected={cat === c}
                  className={`fbtn ${cat === c ? "active" : ""}`} onClick={() => setCat(c)}>{c}</button>
              ))}
            </div>
          </Reveal>
          <div className="blog-grid">
            {shown.map((p, i) => (
              <Reveal key={p.t} delay={String((i % 3) + 1)}>
                <a className="post-card" href="#/artikel">
                  <Ph motif={p.motif} tone={p.bg} />
                  <div className="body">
                    <div className="meta"><span className="cat">{p.cat}</span><span>·</span><span>{p.date}</span><span>·</span><span className="read">{p.read}</span></div>
                    <h3>{p.t}</h3>
                    <p className="excerpt">{p.lead}</p>
                    <span className="link-arrow more">Weiterlesen <Arrow /></span>
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
          {shown.length === 0 && (
            <p className="muted center" style={{ padding: "40px 0" }}>Für diesen Bereich gibt es aktuell noch keine Beiträge.</p>
          )}
        </div>
      </section>

      {/* newsletter — prominent */}
      <section className="section section--tight">
        <div className="container">
          <Reveal>
            <div className="news-band has-rays">
              <div className="rays rays--sage" style={{ "--ray-opacity": ".04", "--ray-x": "85%" }} aria-hidden="true"></div>
              <div style={{ maxWidth: 560, position: "relative", zIndex: 1 }}>
                <span className="eyebrow">Newsletter</span>
                <h2 style={{ fontSize: "clamp(1.9rem,3.2vw,2.6rem)" }}>Neue Beiträge direkt ins Postfach</h2>
                <p className="lead" style={{ marginTop: ".8rem" }}>
                  Etwa einmal im Monat: Geschichten von der Farm, Infoabende und Hospitationstermine.
                </p>
                <form className="news-form" onSubmit={(e) => e.preventDefault()}>
                  <input type="email" placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse" />
                  <button className="btn btn--primary" type="submit">Anmelden <Arrow /></button>
                </form>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

function ArtikelPage() {
  const a = window.SITE.article;
  return (
    <main className="page-enter">
      <section className="section" style={{ paddingBottom: "clamp(40px,5vw,72px)" }}>
        <div className="container">
          <article className="article">
            <Reveal>
              <div className="breadcrumb" style={{ marginBottom: 18 }}>
                <a href="#/">Start</a> · <a href="#/aktuelles">Aktuelles</a> · Artikel
              </div>
              <div className="a-meta">
                <span className="cat">{a.cat}</span><span>·</span><span>{a.date}</span><span>·</span><span>{a.read} Lesezeit</span>
              </div>
              <h1>{a.title}</h1>
              <p className="a-lead">{a.lead}</p>
            </Reveal>
            <Reveal delay="2"><Ph motif="Jugendliche bei der Gartenarbeit" tone="ph--sage" className="a-hero" /></Reveal>
            <Reveal>
              <div className="a-author">
                <Ph motif="" tone="ph--olive" className="av" />
                <span>{a.author}</span>
              </div>
              <div className="article-body">
                {a.body.map((b, i) => {
                  if (b.type === "h") return <h2 key={i}>{b.text}</h2>;
                  if (b.type === "quote") return <p key={i} className="pull">„{b.text}"</p>;
                  return <p key={i}>{b.text}</p>;
                })}
              </div>
            </Reveal>
            <Reveal>
              <div style={{ marginTop: "2.4rem", paddingTop: "1.6rem", borderTop: "1px solid rgba(49,64,28,.1)", display: "flex", flexWrap: "wrap", gap: 14, justifyContent: "space-between", alignItems: "center" }}>
                <a className="link-arrow" href="#/aktuelles" style={{ transform: "scaleX(-1)" }} aria-label="Zurück zur Übersicht"><Arrow /></a>
                <a className="link-arrow" href="#/aktuelles">Alle Beiträge <Arrow /></a>
              </div>
            </Reveal>
          </article>
        </div>
      </section>

      <section className="section section--sage has-rays section--tight">
        <div className="rays rays--sage" style={{ "--ray-opacity": ".03" }} aria-hidden="true"></div>
        <div className="container">
          <SecHead eyebrow="Weiterlesen" title="Mehr aus dem Lernort" />
          <div className="blog-grid">
            {window.SITE.postsAll.slice(1, 4).map((p, i) => (
              <Reveal key={p.t} delay={String((i % 3) + 1)}>
                <a className="post-card" href="#/artikel">
                  <Ph motif={p.motif} tone={p.bg} />
                  <div className="body">
                    <div className="meta"><span className="cat">{p.cat}</span><span>·</span><span>{p.date}</span></div>
                    <h3>{p.t}</h3>
                    <span className="link-arrow more">Weiterlesen <Arrow /></span>
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { AktuellesPage, ArtikelPage });