/* NewsScreen — full Aktuelles archive */

const ALL_NEWS = [
  { date: "28 Apr 2026", cat: "BSO 2011", title: "Aktualisierte Zertifizierungsordnung — gültig ab 01.06.2026",
    excerpt: "Die Gebührenkommission hat eine angepasste Fassung der BSO 2011 beschlossen. Die wesentlichen Änderungen betreffen das Folge-Audit-Intervall und die Dokumentationspflichten." },
  { date: "12 Apr 2026", cat: "Verfahren", title: "Fachkundenachweis NISV — Anmeldung jetzt online möglich",
    excerpt: "Für Geräte nach NISV sind alle Anwender:innen zum Fachkundenachweis verpflichtet. Die DLG bietet die Prüfung ab sofort vollständig digital an." },
  { date: "02 Apr 2026", cat: "Hygienesiegel", title: "Neuer Fachbereich: Nagelmodellage und Wimperntechnik",
    excerpt: "Mit Beschluss der Geschäftsführung wurde der Geltungsbereich des Hygienesiegels (BSO 2079) auf Nagel- und Wimpernstudios erweitert." },
  { date: "21 Mär 2026", cat: "AZAV", title: "Trägerzulassung — neue Maßnahmen für 2026 / 2027 anerkannt",
    excerpt: "Für DLG-zertifizierte Schulungsträger wurden vier weitere AVGS-fähige Maßnahmen anerkannt. Übersicht und Anmeldung über die Geschäftsstelle." },
  { date: "04 Mär 2026", cat: "Auszeichnung", title: "Qualitätsbetrieb des Jahres 2026 — Bewerbung jetzt offen",
    excerpt: "Die Geschäftsführung lädt alle DLG-zertifizierten Betriebe zur Teilnahme ein. Bewerbungs­schluss ist der 15. Juni 2026, die Auszeichnung erfolgt im Herbst." },
  { date: "12 Feb 2026", cat: "Register", title: "Öffentliches DLG-Register umgezogen",
    excerpt: "Das öffentliche Zertifikats­register ist ab sofort unter register.deutsche-legat.de erreichbar. Alle Aktenzeichen behalten ihre Gültigkeit." },
];

const NewsScreen = ({ onNav }) => (
  <div data-screen-label="Aktuelles">
    <PageHeader
      eyebrow="Mitteilungen · Pressemeldungen"
      title="Aktuelles aus dem Haus."
      lede="Verordnungs­änderungen, Fachbereichs­erweiterungen und Hinweise zur Antrags­bearbeitung — chronologisch dokumentiert."
      meta="Stand 04 / 2026 · Archiv"
    />

    <section className="dlg-news dlg-news--archive">
      <NewsArchiveStyles/>
      <div className="container">
        <div className="dlg-news__grid">
          {ALL_NEWS.map((n, i) => (
            <article key={i} className="dlg-news__item">
              <div className="dlg-news__meta">
                <span className="dlg-news__date">{n.date}</span>
                <span className="dlg-news__cat">{n.cat}</span>
              </div>
              <h3 className="dlg-news__title">{n.title}</h3>
              <p className="dlg-news__excerpt">{n.excerpt}</p>
              <a href="#" onClick={e=>e.preventDefault()}>Weiterlesen <Icon d={Icons.arrowR} size={13}/></a>
            </article>
          ))}
        </div>

        <div className="dlg-news__pager">
          <Button variant="ghost" size="sm" icon="arrowL" disabled>Neuere</Button>
          <span className="dlg-news__pageno">Seite 1 von 4</span>
          <Button variant="ghost" size="sm" iconRight="arrowR">Ältere</Button>
        </div>
      </div>
    </section>
  </div>
);

const NewsArchiveStyles = () => (
  <style>{`
    .dlg-news--archive { padding: 72px 0 96px; background: #fff; }
    .dlg-news--archive .dlg-news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
    .dlg-news--archive .dlg-news__item { padding: 28px 0 0; border-top: 4px solid var(--dlg-navy-700); }
    .dlg-news--archive .dlg-news__item:nth-child(3n+2) { border-top-color: var(--dlg-gold-500); }
    .dlg-news--archive .dlg-news__item:nth-child(3n+3) { border-top-color: var(--dlg-red-600); }
    .dlg-news--archive .dlg-news__meta { display: flex; gap: 14px; align-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px; }
    .dlg-news--archive .dlg-news__date { color: var(--fg-3); }
    .dlg-news--archive .dlg-news__cat  { color: var(--dlg-navy-700); }
    .dlg-news--archive .dlg-news__title { font-family: var(--font-serif); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--dlg-navy-900); margin: 0 0 12px; letter-spacing: -0.01em; }
    .dlg-news--archive .dlg-news__excerpt { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 0 0 16px; }
    .dlg-news--archive .dlg-news__item a { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; font-weight: 700; color: var(--dlg-navy-700); text-decoration: none; }
    .dlg-news--archive .dlg-news__item a:hover { color: var(--dlg-navy-900); gap: 10px; transition: gap var(--dur-1) var(--ease-out); }

    .dlg-news__pager { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); }
    .dlg-news__pageno { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 1px; }
  `}</style>
);

Object.assign(window, { NewsScreen });