/* Mitteilungen — homepage preview */

const NEWS_ITEMS = [
  { 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." },
];

const NewsList = ({ onNav, items = NEWS_ITEMS, showAllLink = true }) => (
  <section className="dlg-news">
    <NewsStyles/>
    <div className="container">
      <div className="dlg-news__head">
        <div>
          <Eyebrow tone="gold">Mitteilungen &amp; Aktuelles</Eyebrow>
          <h2 className="dlg-news__h2">Aus dem Haus.</h2>
        </div>
        {showAllLink && (
          <Button variant="ghost" size="sm" iconRight="arrowR" onClick={()=>onNav && onNav("news")}>
            Alle Mitteilungen
          </Button>
        )}
      </div>
      <div className="dlg-news__grid">
        {items.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>
  </section>
);

const NewsStyles = () => (
  <style>{`
    .dlg-news { padding: 96px 0; background: #fff; }
    .dlg-news__head { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 0 40px; gap: 24px; }
    .dlg-news__h2 { font-family: var(--font-serif); font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--dlg-navy-900); margin: 12px 0 0; letter-spacing: -0.015em; }
    .dlg-news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .dlg-news__item { padding: 28px 0 0; border-top: 4px solid var(--dlg-navy-700); }
    .dlg-news__item:nth-child(3n+2) { border-top-color: var(--dlg-gold-500); }
    .dlg-news__item:nth-child(3n+3) { border-top-color: var(--dlg-red-600); }
    .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__date { color: var(--fg-3); }
    .dlg-news__cat { color: var(--dlg-navy-700); }
    .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__excerpt { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 0 0 16px; }
    .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__item a:hover { color: var(--dlg-navy-900); gap: 10px; transition: gap var(--dur-1) var(--ease-out); }
  `}</style>
);

Object.assign(window, { NewsList, NEWS_ITEMS });