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

  const SECTIONS = [
    {
      slug: 'kurse', icon: '📚',
      title: { de: 'Kurse & Programme', en: 'Courses & Programmes' },
      tagline: { de: 'Geführte Deutschkurse für jedes Niveau — von A1 bis B2.', en: 'Guided German courses for every level — A1 to B2.' },
      about: {
        de: 'Strukturierte Online-Kurse mit zertifizierten Lehrkräften aus der Schweiz und Deutschland — Niveaus A1 bis B2. Jeder Kurs kombiniert wöchentliche Live-Sessions, asynchrone Übungen und persönliches Feedback. Dank unserer freiwilligen Mitarbeiter:innen und Sponsoren halten wir die Preise sehr günstig.',
        en: 'Structured online courses with certified teachers from Switzerland and Germany — levels A1 to B2. Each course combines weekly live sessions, async exercises, and personal feedback. Thanks to our volunteers and sponsors, prices are kept very low.',
      },
      modules: {
        de: ['Wöchentliche Live-Gruppensessions (max. 8 Teilnehmer:innen)', 'Asynchrone Übungen mit AI-gestütztem Feedback', 'Monatliche 1:1-Sprachcoachings', 'Abschlusszertifikat nach jedem Modul'],
        en: ['Weekly live group sessions (max 8 participants)', 'Async exercises with AI-powered feedback', 'Monthly 1:1 language coaching', 'Certificate after each module'],
      },
      levels: ['A1', 'A2', 'B1', 'B2'],
    },
    {
      slug: 'ressourcen', icon: '🎧',
      title: { de: 'Selbstlern-Ressourcen', en: 'Self-Study Resources' },
      tagline: { de: 'Übungen, Videos, Podcasts und Lernmaterialien — jederzeit verfügbar.', en: 'Exercises, videos, podcasts, and learning materials — available anytime.' },
      about: {
        de: 'Eine kuratierte Bibliothek mit Hunderten kostenlosen Materialien für Selbstlernende. Wir aktualisieren wöchentlich. Ideal als Ergänzung zu einem Kurs oder für motivierte Lernende, die ihr eigenes Tempo bestimmen wollen.',
        en: 'A curated library with hundreds of free materials for self-learners. Updated weekly. Ideal as a supplement to a course or for motivated learners who want to set their own pace.',
      },
      modules: {
        de: ['Über 200 Übungs-PDFs (A1–B2)', 'Wöchentlicher RAAIRO-Podcast: 15 Min auf einfachem Deutsch', 'Vokabel-Decks für Anki & Quizlet', 'Grammatik-Erklärvideos auf YouTube'],
        en: ['Over 200 exercise PDFs (A1–B2)', 'Weekly RAAIRO podcast: 15 min in simple German', 'Vocabulary decks for Anki & Quizlet', 'Grammar explanation videos on YouTube'],
      },
      levels: [],
    },
    {
      slug: 'beruf', icon: '💼',
      title: { de: 'Berufsdeutsch', en: 'Professional German' },
      tagline: { de: 'Deutsch für deinen Beruf und deine Karriere.', en: 'German for your profession and career.' },
      about: {
        de: 'Branchenspezifische Sprachprogramme, die dich auf den Schweizer und deutschen Arbeitsmarkt vorbereiten. Wir fokussieren auf reale Situationen: Bewerbungsgespräche, E-Mails an Vorgesetzte, Kundenkontakt, Verhandlungen.',
        en: 'Industry-specific language programmes that prepare you for the Swiss and German job market. We focus on real situations: job interviews, emails to supervisors, customer contact, negotiations.',
      },
      modules: {
        de: ['Lebenslauf- und Anschreiben-Werkstatt', 'Vorstellungsgespräche mit Native-Speaker-Coach', 'Branchen-Vokabular: IT · Pflege · Gastronomie · Bau', 'Schweizerdeutsche Idiome für den Berufsalltag'],
        en: ['CV and cover letter workshop', 'Job interviews with native-speaker coach', 'Industry vocabulary: IT · Healthcare · Hospitality · Construction', 'Swiss German idioms for the workplace'],
      },
      levels: ['B1', 'B2'],
    },
    {
      slug: 'pruefung', icon: '🎯',
      title: { de: 'Prüfungsvorbereitung', en: 'Exam Preparation' },
      tagline: { de: 'Gezielte Vorbereitung auf Goethe-, telc- und ÖSD-Prüfungen.', en: 'Targeted preparation for Goethe, telc, and ÖSD exams.' },
      about: {
        de: 'Wir bereiten dich systematisch auf die offiziellen Sprachprüfungen vor. Unsere Trainer:innen sind selbst Prüfer:innen und kennen die genauen Bewertungskriterien. Mock-Tests unter Realbedingungen mit detailliertem Feedback.',
        en: 'We prepare you systematically for official language exams. Our trainers are examiners themselves and know the exact assessment criteria. Mock tests under real conditions with detailed feedback.',
      },
      modules: {
        de: ['Vollständige Mock-Prüfungen (Lesen · Hören · Schreiben · Sprechen)', 'Individuelles Schwachstellen-Profil nach jedem Mock-Test', 'Strategien für die kritischen 4 Wochen vor der Prüfung', 'Anmeldung bei Goethe / telc / ÖSD inklusive'],
        en: ['Full mock exams (Reading · Listening · Writing · Speaking)', 'Individual weakness profile after each mock test', 'Strategies for the critical 4 weeks before the exam', 'Goethe / telc / ÖSD registration included'],
      },
      levels: ['A1', 'A2', 'B1', 'B2'],
    },
    {
      slug: 'tipps', icon: '💡',
      title: { de: 'Tipps & Lernstrategien', en: 'Tips & Learning Strategies' },
      tagline: { de: 'Praktische Tipps für deinen Lernalltag.', en: 'Practical tips for your daily learning routine.' },
      about: {
        de: 'Sprachen lernt man nicht nur in Lektionen — man lernt sie im Alltag. Wir teilen die Methoden, die unseren Fellows wirklich geholfen haben: kleine, konsistente Schritte, eingebettet in dein tägliches Leben.',
        en: 'Languages are learned not just in lessons — you learn them in everyday life. We share the methods that truly helped our fellows: small, consistent steps embedded in your daily routine.',
      },
      modules: {
        de: ['Die 20-Minuten-Methode: täglich, ohne Ausreden', 'Sprachbrücken: Wie du Deutsch in deinem Job einbaust', 'Konversationspartner finden — kostenlos', 'Häufige Anfängerfehler und wie du sie vermeidest'],
        en: ['The 20-minute method: daily, no excuses', 'Language bridges: how to integrate German at work', 'Finding conversation partners — for free', 'Common beginner mistakes and how to avoid them'],
      },
      levels: [],
    },
    {
      slug: 'volunteer', icon: '🤝',
      title: { de: 'Volunteer: Kostenlos Deutsch lernen', en: 'Volunteer: Learn German for Free' },
      tagline: {
        de: 'Führe Gespräche mit älteren Menschen — und erhalte deinen Deutschkurs gratis.',
        en: 'Have conversations with elderly people — and receive your German course for free.',
      },
      about: {
        de: 'Unser Volunteer-Programm verbindet zwei Bedürfnisse: ältere Menschen, die unter Einsamkeit leiden und wieder echte Gespräche führen wollen — und Lernende, die Deutsch üben möchten und sich keine Kurse leisten können. Du investierst Zeit für Konversationen. Wir schenken dir dafür den vollen Deutschkurs, A1 bis B2.',
        en: 'Our volunteer programme connects two needs: elderly people who suffer from loneliness and want real conversations — and learners who want to practice German but can\'t afford courses. You invest time for conversations. We give you the full German course, A1 to B2, completely free.',
      },
      modules: {
        de: ['Match mit einem oder zwei älteren Gesprächspartner:innen', 'Wöchentliche Konversationen (30–60 Min, flexibel)', 'Vollständiger RAAIRO-Deutschkurs (A1–B2) — vollständig kostenlos', 'Begleitung durch unsere Sozial-Koordinator:innen', 'Zertifikat „Konversations-Volunteer" + Sprachkurs-Zertifikat'],
        en: ['Match with one or two elderly conversation partners', 'Weekly conversations (30–60 min, flexible)', 'Full RAAIRO German course (A1–B2) — completely free', 'Support from our social coordinators', '"Conversation Volunteer" certificate + language course certificate'],
      },
      levels: ['A1', 'A2', 'B1', 'B2'],
      highlight: true,
    },
  ];

  const s = {
    page: { 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' },
    header: { padding: '0.5rem 1.25rem 0' },
    eyebrow: { fontSize: '0.65rem', textTransform: 'uppercase', letterSpacing: '0.25em', color: 'var(--text-muted)', fontWeight: 700 },
    h1: { fontFamily: 'serif', fontSize: '1.6rem', fontWeight: 700, lineHeight: 1.1, color: 'var(--text-default)', marginTop: 4 },
    lead: { marginTop: 8, fontSize: '0.84rem', color: 'var(--text-muted)', lineHeight: 1.6 },
    statsRow: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, margin: '0.75rem 1rem 0' },
    stat: { background: '#fff', borderRadius: 12, border: '1px solid rgba(28,35,32,0.08)', padding: '10px 8px', textAlign: 'center' },
    statNum: { fontFamily: 'serif', fontSize: '1.2rem', fontWeight: 700, color: 'var(--color-forest-900)' },
    statLabel: { fontSize: '0.58rem', color: 'var(--text-muted)', marginTop: 2, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em' },
    list: { padding: '0.75rem 1rem 0', display: 'flex', flexDirection: 'column', gap: 12 },
    card: (highlight) => ({
      background: highlight ? 'var(--color-forest-900)' : '#fff',
      color: highlight ? '#fff' : 'var(--text-default)',
      borderRadius: 16,
      border: highlight ? 'none' : '1px solid rgba(28,35,32,0.08)',
      padding: '16px',
      boxShadow: '0 1px 3px rgba(28,35,32,0.06)',
      cursor: 'pointer',
    }),
    cardTitle: (highlight) => ({ fontWeight: 700, fontSize: '0.92rem', color: highlight ? '#fff' : 'var(--text-default)', lineHeight: 1.3 }),
    cardTagline: (highlight) => ({ fontSize: '0.76rem', lineHeight: 1.5, marginTop: 4, color: highlight ? 'rgba(255,255,255,0.75)' : 'var(--text-muted)' }),
    levels: { display: 'flex', gap: 4, marginTop: 8, flexWrap: 'wrap' },
    levelBadge: (highlight) => ({
      fontSize: '0.6rem', fontWeight: 700, borderRadius: 6, padding: '2px 7px',
      background: highlight ? 'rgba(255,255,255,0.15)' : '#f0fdf4',
      color: highlight ? '#fff' : '#166534',
    }),
    moreArrow: (highlight) => ({ fontSize: '0.72rem', color: highlight ? 'rgba(255,255,255,0.65)' : 'var(--text-muted)', marginTop: 8, display: 'block' }),
    detailPage: { background: 'var(--bg-page)', minHeight: '100%', paddingBottom: '2rem' },
    detailHeader: { padding: '0 1.25rem' },
    detailH1: { fontFamily: 'serif', fontSize: '1.4rem', fontWeight: 700, lineHeight: 1.2, color: 'var(--text-default)', marginTop: 4 },
    detailTagline: { fontSize: '0.84rem', color: 'var(--text-muted)', marginTop: 4, lineHeight: 1.6 },
    detailAbout: { fontSize: '0.84rem', lineHeight: 1.7, color: 'var(--text-default)', marginTop: '1rem' },
    sectionLabel: { fontSize: '0.65rem', textTransform: 'uppercase', letterSpacing: '0.2em', color: 'var(--text-muted)', fontWeight: 700, marginTop: '1.25rem', marginBottom: 8 },
    moduleItem: { fontSize: '0.82rem', lineHeight: 1.6, color: 'var(--text-muted)', display: 'flex', gap: 8, marginBottom: 6 },
    ctaBox: { background: 'var(--color-forest-900)', color: '#fff', borderRadius: 14, padding: '16px', margin: '1.25rem 0 0' },
    ctaTitle: { fontWeight: 700, fontSize: '0.92rem' },
    ctaDesc: { fontSize: '0.75rem', color: 'rgba(255,255,255,0.75)', marginTop: 4 },
    ctaBtn: { display: 'block', width: '100%', background: '#fff', color: 'var(--color-forest-900)', border: 'none', borderRadius: 10, padding: '11px', fontSize: '0.84rem', fontWeight: 700, cursor: 'pointer', marginTop: 12 },
  };

  function SectionDetail({ sec, onBack, lk }) {
    return (
      <div style={s.detailPage}>
        <button style={s.back} onClick={onBack}>‹ {lk === 'de' ? 'Zurück' : 'Back'}</button>
        <div style={s.detailHeader}>
          <div style={{ fontSize: '2rem', marginBottom: 4 }}>{sec.icon}</div>
          <h1 style={s.detailH1}>{sec.title[lk]}</h1>
          <p style={s.detailTagline}>{sec.tagline[lk]}</p>
          <p style={s.detailAbout}>{sec.about[lk]}</p>

          <div style={s.sectionLabel}>{lk === 'de' ? 'Inhalte' : 'What\'s included'}</div>
          {sec.modules[lk].map((m, i) => (
            <div key={i} style={s.moduleItem}>
              <span style={{ flexShrink: 0, color: 'var(--color-forest-900)', fontWeight: 700 }}>✓</span>
              <span>{m}</span>
            </div>
          ))}

          {sec.levels && sec.levels.length > 0 && (
            <>
              <div style={s.sectionLabel}>{lk === 'de' ? 'Sprachniveaus' : 'Language levels'}</div>
              <div style={s.levels}>
                {sec.levels.map(l => (
                  <span key={l} style={{ ...s.levelBadge(false), fontSize: '0.72rem', padding: '4px 10px' }}>{l}</span>
                ))}
              </div>
            </>
          )}

          <div style={s.ctaBox}>
            <div style={s.ctaTitle}>
              {sec.highlight
                ? (lk === 'de' ? 'Jetzt als Volunteer bewerben' : 'Apply as a volunteer now')
                : (lk === 'de' ? `${sec.title.de} anfragen` : `Enquire about ${sec.title.en}`)}
            </div>
            <div style={s.ctaDesc}>
              {sec.highlight
                ? (lk === 'de' ? 'Kostenlos Deutsch lernen, während du anderen hilfst — melde dich jetzt an.' : 'Learn German for free while helping others — sign up now.')
                : (lk === 'de' ? 'Wir helfen dir, das richtige Programm zu finden und anzumelden.' : 'We help you find the right programme and get enrolled.')}
            </div>
            <button style={s.ctaBtn} onClick={() => window.open('mailto:support@raairo.org', '_blank')}>
              support@raairo.org →
            </button>
          </div>
        </div>
      </div>
    );
  }

  function DeutschScreen({ nav, lang = 'EN' }) {
    const lk = lang === 'DE' ? 'de' : 'en';
    const [detail, setDetail] = React.useState(null);

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

    return (
      <div style={s.page}>
        <button style={s.back} onClick={() => nav('bootcamps')}>
          ‹ {lk === 'de' ? 'Praktika & Chancen' : 'Internships & Opportunities'}
        </button>

        <div style={s.header}>
          <div style={s.eyebrow}>{lk === 'de' ? 'Sprachprogramm' : 'Language programme'}</div>
          <h1 style={s.h1}>{lk === 'de' ? 'Deutsch lernen' : 'Learn German'}</h1>
          <p style={s.lead}>
            {lk === 'de'
              ? 'Bessere Deutschkenntnisse eröffnen Türen — für Ihre Karriere und Ihre Zukunft. Niveaus A1 bis B2.'
              : 'Better German skills open doors — for your career and your future. Levels A1 to B2.'}
          </p>
        </div>

        <div style={s.statsRow}>
          <div style={s.stat}>
            <div style={s.statNum}>A1–B2</div>
            <div style={s.statLabel}>{lk === 'de' ? 'Alle Niveaus' : 'All levels'}</div>
          </div>
          <div style={s.stat}>
            <div style={s.statNum}>200+</div>
            <div style={s.statLabel}>{lk === 'de' ? 'Materialien' : 'Materials'}</div>
          </div>
          <div style={s.stat}>
            <div style={s.statNum}>0€</div>
            <div style={s.statLabel}>{lk === 'de' ? 'Via Volunteer' : 'Via volunteer'}</div>
          </div>
        </div>

        <div style={s.list}>
          {SECTIONS.map(sec => (
            <div key={sec.slug} style={s.card(sec.highlight)} onClick={() => setDetail(sec)}>
              <div style={{ fontSize: '1.4rem', marginBottom: 6 }}>{sec.icon}</div>
              <div style={s.cardTitle(sec.highlight)}>{sec.title[lk]}</div>
              <div style={s.cardTagline(sec.highlight)}>{sec.tagline[lk]}</div>
              {sec.levels && sec.levels.length > 0 && (
                <div style={s.levels}>
                  {sec.levels.map(l => <span key={l} style={s.levelBadge(sec.highlight)}>{l}</span>)}
                </div>
              )}
              <span style={s.moreArrow(sec.highlight)}>{lk === 'de' ? 'Mehr erfahren →' : 'Learn more →'}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  window.RAAIRODeutsch = DeutschScreen;
})();