/* global React, window */
(function () {

  const POSTS = [
    {
      slug: 'graduate-alan-abakirov',
      cat: 'erfolg',
      graduate: { months: 6, certId: 'RAAIRO-2026-ALA-001' },
      title: { de: 'Alan Abakirov — Junior Software Developer', en: 'Alan Abakirov — Junior Software Developer' },
      excerpt: { de: '🏆 6 Monate Software Development · Abschluss bei RA | AI | RO', en: '🏆 6 months Software Development · Graduate of RA | AI | RO' },
      author: 'RA | AI | RO',
      date: '18. Mai 2026 · 18 May 2026',
      readMin: 1,
      body: {
        de: [
          'Programm: Software Development · 6 Monate Praktikum',
          'Abschluss: Junior Software Developer',
          'Zertifikat-ID: RAAIRO-2026-ALA-001',
          'Alan hat das sechsmonatige Praktikumsprogramm in Software Development bei RA | AI | RO erfolgreich abgeschlossen. Dieses öffentliche Profil dient als verifizierbarer Nachweis der Programmteilnahme und kann auf LinkedIn oder im Bewerbungsprozess geteilt werden.',
        ],
        en: [
          'Programme: Software Development · 6-month internship',
          'Degree: Junior Software Developer',
          'Certificate ID: RAAIRO-2026-ALA-001',
          'Alan successfully completed the six-month internship programme in Software Development at RA | AI | RO. This public profile serves as verifiable proof of programme participation and can be shared on LinkedIn or in job applications.',
        ],
      },
    },
    {
      slug: 'graduate-jenishkumar',
      cat: 'erfolg',
      graduate: { months: 6, certId: 'RAAIRO-2026-JEN-002' },
      title: { de: 'Jenishkumar — Junior Software Developer', en: 'Jenishkumar — Junior Software Developer' },
      excerpt: { de: '🏆 6 Monate Software Development · Abschluss bei RA | AI | RO', en: '🏆 6 months Software Development · Graduate of RA | AI | RO' },
      author: 'RA | AI | RO',
      date: '18. Mai 2026 · 18 May 2026',
      readMin: 1,
      body: {
        de: [
          'Programm: Software Development · 6 Monate Praktikum',
          'Abschluss: Junior Software Developer',
          'Zertifikat-ID: RAAIRO-2026-JEN-002',
          'Jenishkumar hat das sechsmonatige Praktikumsprogramm in Software Development bei RA | AI | RO erfolgreich abgeschlossen.',
        ],
        en: [
          'Programme: Software Development · 6-month internship',
          'Degree: Junior Software Developer',
          'Certificate ID: RAAIRO-2026-JEN-002',
          'Jenishkumar successfully completed the six-month internship programme in Software Development at RA | AI | RO.',
        ],
      },
    },
    {
      slug: 'graduate-michal',
      cat: 'erfolg',
      graduate: { months: 6, certId: 'RAAIRO-2026-MIC-003' },
      title: { de: 'Michal — Junior Software Developer', en: 'Michal — Junior Software Developer' },
      excerpt: { de: '🏆 6 Monate Software Development · Abschluss bei RA | AI | RO', en: '🏆 6 months Software Development · Graduate of RA | AI | RO' },
      author: 'RA | AI | RO',
      date: '18. Mai 2026 · 18 May 2026',
      readMin: 1,
      body: {
        de: [
          'Programm: Software Development · 6 Monate Praktikum',
          'Abschluss: Junior Software Developer',
          'Zertifikat-ID: RAAIRO-2026-MIC-003',
          'Michal hat das sechsmonatige Praktikumsprogramm in Software Development bei RA | AI | RO erfolgreich abgeschlossen.',
        ],
        en: [
          'Programme: Software Development · 6-month internship',
          'Degree: Junior Software Developer',
          'Certificate ID: RAAIRO-2026-MIC-003',
          'Michal successfully completed the six-month internship programme in Software Development at RA | AI | RO.',
        ],
      },
    },
    {
      slug: 'lukas-praktikum-festanstellung',
      cat: 'erfolg',
      title: { de: 'Vom Praktikum zur Festanstellung — Lukas\' Weg mit RA | AI | RO', en: 'From Internship to Full-Time — Lukas\' Journey with RA | AI | RO' },
      excerpt: { de: 'Wie ein RA | AI | RO-Praktikum den Start seiner Karriere ermöglichte.', en: 'How an RA | AI | RO internship launched his career in Switzerland.' },
      author: 'RA | AI | RO Redaktion',
      date: '15. Mai 2026',
      readMin: 5,
      body: {
        de: [
          'Lukas kam vor zwei Jahren als Junior-Entwickler aus Kolumbien zu uns. Sein Deutsch reichte gerade für ein A2-Zertifikat, sein Lebenslauf war auf zwei Praktika in Bogotá beschränkt — und doch sass er innerhalb von drei Monaten bei seinem ersten Schweizer Vorstellungsgespräch.',
          '„Was mir RA | AI | RO gegeben hat, war nicht nur Sprache. Es war Struktur," sagt Lukas heute. Im Remote Digital Impact Track hat er zwei Tage pro Woche an der Pagararriendo-Plattform mitprogrammiert, parallel dazu täglich 45 Minuten Deutsch gelernt.',
          'Nach sechs Monaten Praktikum hat ihn unser Schweizer Partner als Vollzeitkraft übernommen — mit B2-Deutschkenntnissen, einem dokumentierten Tech-Portfolio und einem Referenzschreiben des RA | AI | RO Verein.',
        ],
        en: [
          'Lukas came to us two years ago as a junior developer from Colombia. His German barely reached A2 level, his résumé was limited to two internships in Bogotá — and yet, within three months he was sitting in his first Swiss job interview.',
          '"What RA | AI | RO gave me was not just language. It was structure," says Lukas today. In the Remote Digital Impact Track he coded on the Pagararriendo platform two days a week, while learning German for 45 minutes every day.',
          'After six months of internship, our Swiss partner hired him full-time — with B2 German proficiency, a documented tech portfolio, and a reference letter from the RA | AI | RO Verein.',
        ],
      },
    },
    {
      slug: 'vorstellungsgespraech-5-tipps',
      cat: 'tipps',
      title: { de: '5 Tipps für ein erfolgreiches Vorstellungsgespräch', en: '5 Tips for a Successful Job Interview' },
      excerpt: { de: 'So überzeugen Sie und bleiben authentisch.', en: 'How to impress while staying true to yourself.' },
      author: 'RA | AI | RO Career Coaching',
      date: '8. Mai 2026',
      readMin: 4,
      body: {
        de: [
          '1. Recherchieren Sie das Unternehmen gründlich. Schweizer Arbeitgeber:innen erwarten, dass Sie die Werte, Produkte und aktuelle Situation des Unternehmens kennen.',
          '2. Bereiten Sie Ihre Geschichten vor. Statt allgemeiner Antworten erzählen Sie konkrete Situationen mit Ergebnis. Die STAR-Methode (Situation, Task, Action, Result) hilft.',
          '3. Stellen Sie kluge Fragen. Nichts zeigt Interesse so deutlich wie drei vorbereitete Fragen am Ende.',
          '4. Üben Sie auf Deutsch — auch wenn das Gespräch teilweise auf Englisch ist. Die Begrüssung, die Selbstvorstellung und die Verabschiedung sollten Sie immer auf Deutsch beherrschen.',
          '5. Folgen Sie nach. Eine kurze Dankes-E-Mail innerhalb von 24 Stunden ist Standard.',
        ],
        en: [
          '1. Research the company thoroughly. Swiss employers expect you to know the company\'s values, products, and current situation.',
          '2. Prepare your stories. Instead of generic answers, tell concrete situations with outcomes. The STAR method (Situation, Task, Action, Result) helps.',
          '3. Ask smart questions. Nothing shows genuine interest as clearly as three prepared questions at the end.',
          '4. Practice in German — even if part of the interview is in English. Greetings, your self-introduction, and the farewell should always be in German.',
          '5. Follow up. A short thank-you email within 24 hours is standard practice.',
        ],
      },
    },
    {
      slug: 'partnerschaft-pagararriendo',
      cat: 'news',
      title: { de: 'Neue Partnerschaft mit Pagararriendo: Mehr Chancen für LatAm-Talente', en: 'New Partnership with Pagararriendo: More Opportunities for LatAm Talent' },
      excerpt: { de: 'Gemeinsam fördern wir Praktika und Weiterbildungsmöglichkeiten.', en: 'Together we open internship and training opportunities for talented people from Latin America.' },
      author: 'RA | AI | RO',
      date: '2. Mai 2026',
      readMin: 3,
      body: {
        de: [
          'Der RA | AI | RO Verein hat heute eine erweiterte Partnerschaft mit Pagararriendo.com bekanntgegeben. Pagararriendo, die führende PropTech-Plattform für den kolumbianischen Mietmarkt, öffnet ab sofort jährlich zwölf Praktikumsplätze für RA | AI | RO-Fellows.',
          'Die Praktika umfassen Backend-Engineering, Datenanalyse und Customer Support. Alle Praktikant:innen erhalten parallel Deutsch- oder Französisch-Sprachtraining über unser Programm.',
          '„Wir glauben fest daran, dass die nächste Generation von europäischen Tech-Talenten zum grossen Teil aus Lateinamerika kommen wird," sagt Kurt Lehder, Vorstand von RA | AI | RO.',
        ],
        en: [
          'The RA | AI | RO Verein has announced an expanded partnership with Pagararriendo.com. Pagararriendo, the leading PropTech platform for the Colombian rental market, will now open twelve internship spots annually for RA | AI | RO Fellows.',
          'The internships cover backend engineering, data analysis, and customer support. All interns receive parallel German or French language training through our programme.',
          '"We firmly believe that the next generation of European tech talent will largely come from Latin America," says Kurt Lehder, board member of RA | AI | RO.',
        ],
      },
    },
  ];

  const CATS = {
    de: [
      { key: 'alle', label: 'Alle' },
      { key: 'erfolg', label: 'Erfolge' },
      { key: 'tipps', label: 'Tipps' },
      { key: 'news', label: 'News' },
    ],
    en: [
      { key: 'alle', label: 'All' },
      { key: 'erfolg', label: 'Success' },
      { key: 'tipps', label: 'Tips' },
      { key: 'news', label: 'News' },
    ],
  };

  const CAT_LABELS = {
    de: { erfolg: 'Erfolg', tipps: 'Tipps', news: 'News' },
    en: { erfolg: 'Success', tipps: 'Tips', news: 'News' },
  };

  const s = {
    page: { background: 'var(--bg-page)', minHeight: '100%', paddingBottom: '2rem' },
    header: { padding: '1.25rem 1.25rem 0' },
    h1: { fontFamily: 'serif', fontSize: '1.6rem', fontWeight: 700, lineHeight: 1.1, color: 'var(--text-default)' },
    lead: { marginTop: 8, fontSize: '0.84rem', color: 'var(--text-muted)', lineHeight: 1.6, maxWidth: '38ch' },
    searchWrap: { margin: '0.75rem 1.25rem 0', display: 'flex', alignItems: 'center', gap: 8, background: '#fff', borderRadius: 16, padding: '10px 14px', boxShadow: '0 1px 3px rgba(28,35,32,0.06)', border: '1px solid rgba(28,35,32,0.08)' },
    searchInput: { flex: 1, fontSize: '0.84rem', border: 'none', outline: 'none', background: 'transparent', color: 'var(--text-default)' },
    chips: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 6, margin: '0.75rem 1rem 0' },
    chip: (active) => ({
      fontSize: '0.68rem', fontWeight: 600, borderRadius: 999, padding: '6px 4px', textAlign: 'center', cursor: 'pointer', border: 'none',
      background: active ? 'var(--color-forest-900)' : '#fff',
      color: active ? '#fff' : 'rgba(28,35,32,0.7)',
      boxShadow: active ? 'none' : '0 0 0 1px rgba(28,35,32,0.1)',
      transition: 'all 0.15s',
    }),
    list: { padding: '0.75rem 1rem 0', display: 'flex', flexDirection: 'column', gap: 12 },
    card: { background: '#fff', borderRadius: 16, border: '1px solid rgba(28,35,32,0.08)', padding: 12, display: 'flex', gap: 10, cursor: 'pointer', boxShadow: '0 1px 3px rgba(28,35,32,0.06)' },
    imgBox: { width: 64, height: 64, borderRadius: 10, background: 'var(--color-forest-900)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 },
    imgLetter: { color: '#fff', fontWeight: 700, fontSize: '1.4rem', fontFamily: 'serif' },
    badge: (isGrad) => ({ display: 'inline-block', fontSize: '0.55rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', padding: '2px 6px', borderRadius: 4, background: isGrad ? '#fef3c7' : '#f0fdf4', color: isGrad ? '#92400e' : '#166534' }),
    cardTitle: { fontWeight: 600, fontSize: '0.78rem', lineHeight: 1.3, marginTop: 4, color: 'var(--text-default)', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' },
    cardExcerpt: { fontSize: '0.65rem', color: 'var(--text-muted)', marginTop: 2, display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden' },
    cardMeta: { fontSize: '0.6rem', color: 'var(--text-muted)', marginTop: 4, display: 'flex', alignItems: 'center', gap: 4 },
    detailPage: { background: 'var(--bg-page)', minHeight: '100%', paddingBottom: '2rem' },
    back: { display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: '0.75rem', fontWeight: 600, color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', padding: '1rem 1.25rem 0' },
    detailHeader: { padding: '0.5rem 1.25rem 0' },
    detailH1: { fontFamily: 'serif', fontSize: '1.4rem', fontWeight: 700, lineHeight: 1.15, color: 'var(--text-default)', marginTop: 8 },
    detailMeta: { fontSize: '0.7rem', color: 'var(--text-muted)', marginTop: 6 },
    detailBody: { padding: '1rem 1.25rem 0', display: 'flex', flexDirection: 'column', gap: 14 },
    detailP: { fontSize: '0.84rem', lineHeight: 1.7, color: 'var(--text-default)' },
    certBox: { background: 'var(--color-forest-900)', color: '#fff', borderRadius: 14, padding: '1rem 1.25rem', margin: '0 1.25rem' },
    certTitle: { fontSize: '0.65rem', textTransform: 'uppercase', letterSpacing: '0.2em', color: 'rgba(255,255,255,0.65)', fontWeight: 600 },
    certId: { fontFamily: 'monospace', fontSize: '0.88rem', marginTop: 6, fontWeight: 600 },
    empty: { background: '#fff', borderRadius: 16, border: '1px solid rgba(28,35,32,0.08)', padding: 24, textAlign: 'center', fontSize: '0.82rem', color: 'var(--text-muted)' },
  };

  function PostDetail({ post, onBack, lk }) {
    const body = post.body[lk];
    return (
      <div style={s.detailPage}>
        <button style={s.back} onClick={onBack}>‹ {lk === 'de' ? 'Zurück' : 'Back'}</button>

        {post.graduate && (
          <div style={s.certBox}>
            <div style={s.certTitle}>{lk === 'de' ? 'Zertifikat · RA | AI | RO' : 'Certificate · RA | AI | RO'}</div>
            <div style={s.certId}>{post.graduate.certId}</div>
            <div style={{ fontSize: '0.72rem', color: 'rgba(255,255,255,0.75)', marginTop: 4 }}>
              {post.graduate.months} {lk === 'de' ? 'Monate · Abschluss bestätigt' : 'months · Completion confirmed'}
            </div>
          </div>
        )}

        <div style={s.detailHeader}>
          <span style={s.badge(!!post.graduate)}>
            {post.graduate
              ? `🏆 ${lk === 'de' ? 'Zertifikat' : 'Certificate'} · ${post.graduate.months} ${lk === 'de' ? 'Mo' : 'mo'}`
              : CAT_LABELS[lk][post.cat] || post.cat}
          </span>
          <h1 style={s.detailH1}>{post.title[lk]}</h1>
          <div style={s.detailMeta}>{post.date} · {post.author}{!post.graduate && ` · ${post.readMin} ${lk === 'de' ? 'Min' : 'min'}`}</div>
        </div>

        <div style={s.detailBody}>
          {body.map((p, i) => (
            <p key={i} style={s.detailP}>{p}</p>
          ))}
        </div>
      </div>
    );
  }

  function NewsScreen({ nav, lang = 'EN' }) {
    const lk = lang === 'DE' ? 'de' : 'en';
    const [filter, setFilter] = React.useState('alle');
    const [query, setQuery] = React.useState('');
    const [detail, setDetail] = React.useState(null);

    if (detail) {
      return <PostDetail post={detail} onBack={() => setDetail(null)} lk={lk} />;
    }

    const q = query.trim().toLowerCase();
    const visible = POSTS.filter(p => {
      if (filter !== 'alle' && p.cat !== filter) return false;
      if (!q) return true;
      return p.title[lk].toLowerCase().includes(q) || p.excerpt[lk].toLowerCase().includes(q) || p.author.toLowerCase().includes(q);
    });

    const cats = CATS[lk];

    return (
      <div style={s.page}>
        <div style={s.header}>
          <h1 style={s.h1}>News & Updates</h1>
          <p style={s.lead}>
            {lk === 'de'
              ? 'Erfolgsgeschichten, Karrieretipps und Neuigkeiten aus der RA | AI | RO Community.'
              : 'Success stories, career tips, and news from the RA | AI | RO community.'}
          </p>
        </div>

        <div style={s.searchWrap}>
          <span style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>🔍</span>
          <input
            style={s.searchInput}
            placeholder={lk === 'de' ? 'Suche nach Themen, Autoren…' : 'Search topics, authors…'}
            value={query}
            onChange={e => setQuery(e.target.value)}
          />
          {query && (
            <button onClick={() => setQuery('')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', fontSize: '0.75rem', fontWeight: 600 }}>✕</button>
          )}
        </div>

        <div style={s.chips}>
          {cats.map(c => (
            <button key={c.key} style={s.chip(filter === c.key)} onClick={() => setFilter(c.key)}>
              {c.label}
            </button>
          ))}
        </div>

        <div style={s.list}>
          {visible.length === 0 ? (
            <div style={s.empty}>{lk === 'de' ? 'Keine Artikel gefunden.' : 'No articles found.'}</div>
          ) : visible.map(p => (
            <div key={p.slug} style={s.card} onClick={() => setDetail(p)}>
              <div style={s.imgBox}>
                <span style={s.imgLetter}>{p.title[lk][0]}</span>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <span style={s.badge(!!p.graduate)}>
                  {p.graduate
                    ? `🏆 ${lk === 'de' ? 'Zertifikat' : 'Certificate'} · ${p.graduate.months} ${lk === 'de' ? 'Mo' : 'mo'}`
                    : CAT_LABELS[lk][p.cat] || p.cat}
                </span>
                <div style={s.cardTitle}>{p.title[lk]}</div>
                <div style={s.cardExcerpt}>{p.excerpt[lk]}</div>
                <div style={s.cardMeta}>
                  {p.graduate ? (
                    <span style={{ color: 'var(--color-forest-700)', fontWeight: 600 }}>{lk === 'de' ? 'Zertifikat ansehen →' : 'View certificate →'}</span>
                  ) : (
                    <><span>{p.date}</span><span>·</span><span>{p.readMin} {lk === 'de' ? 'Min' : 'min'}</span></>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  window.RAAIRONews = NewsScreen;
})();