// Aktuelles — News-Beiträge + kommende Ausstellungen.
function JHNews() {
  const { SectionLabel } = window.JasminHaasDesignSystem_416321;
  const Reveal = window.JHReveal;
  const news = window.JH_NEWS || [];
  const exhibitions = window.JH_EXHIBITIONS || [];

  const fmt = (d) => {
    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(d);
    return m ? `${m[3]}.${m[2]}.${m[1]}` : d;
  };

  return (
    <div style={{ background: "var(--bg-canvas)", paddingTop: "calc(86px + var(--space-12))", minHeight: "100vh" }}>
      <div style={{ maxWidth: "var(--content-max)", margin: "0 auto", padding: "0 var(--gutter) var(--section-y)" }}>
        <Reveal>
          <SectionLabel eyebrow="Aktuelles" title="Neuigkeiten aus dem Atelier" />
        </Reveal>

        <div style={{ marginTop: "48px", display: "flex", flexDirection: "column", gap: "40px", maxWidth: "760px" }}>
          {news.length === 0 && (
            <p style={{ fontFamily: "var(--font-sans)", color: "var(--text-secondary)" }}>Bald gibt es hier Neuigkeiten.</p>
          )}
          {news.map((n, i) => (
            <Reveal key={i} delay={i * 80}>
              <article style={{ background: "var(--bg-paper)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-md)", overflow: "hidden" }}>
                {n.img && <img src={n.img} alt={n.title} style={{ width: "100%", maxHeight: "420px", objectFit: "cover", display: "block" }} />}
                <div style={{ padding: "clamp(24px, 3vw, 40px)" }}>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "0.66rem", fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--text-gold)" }}>{fmt(n.date)}</div>
                  <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "1.7rem", margin: "10px 0 12px", color: "var(--text-primary)" }}>{n.title}</h3>
                  <p style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: "1rem", lineHeight: 1.75, color: "var(--text-secondary)", whiteSpace: "pre-wrap" }}>{n.body}</p>
                </div>
              </article>
            </Reveal>
          ))}
        </div>

        {exhibitions.length > 0 && (
          <Reveal style={{ marginTop: "var(--space-24)" }}>
            <SectionLabel eyebrow="Ausstellungen" title="Wo Sie meine Werke sehen können" />
            <div style={{ marginTop: "28px", maxWidth: "760px" }}>
              {exhibitions.map((ex, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: "28px", alignItems: "center", padding: "24px 8px", borderTop: "1px solid var(--line)", ...(i === exhibitions.length - 1 ? { borderBottom: "1px solid var(--line)" } : {}) }}>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: "0.78rem", fontWeight: 600, letterSpacing: "0.08em", color: "var(--text-gold)" }}>{ex.date}</div>
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: "1.25rem", color: "var(--text-primary)" }}>{ex.title}{ex.place ? <span style={{ color: "var(--text-muted)" }}> · {ex.place}</span> : null}</div>
                    {ex.note && <div style={{ fontFamily: "var(--font-sans)", fontSize: "0.88rem", color: "var(--text-secondary)", marginTop: "4px" }}>{ex.note}</div>}
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        )}
      </div>
    </div>
  );
}
window.JHNews = JHNews;