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

  const TRACKS = {
    de: [
      { key: 'alle', label: 'Alle' },
      { key: 'remote', label: 'Remote' },
      { key: 'thun', label: 'Thun' },
      { key: 'both', label: 'Remote & Thun' },
    ],
    en: [
      { key: 'alle', label: 'All' },
      { key: 'remote', label: 'Remote' },
      { key: 'thun', label: 'Thun' },
      { key: 'both', label: 'Remote & Thun' },
    ],
  };

  const OPPORTUNITIES = [
    {
      id: 'kiero-swiss-ai-ops', company: 'RA|AI|RO', programme: 'both',
      title: { de: 'AI Operations', en: 'AI Operations' },
      location: 'Thun · Remote',
      duration: { de: '6 Monate', en: '6 months' },
      type: { de: 'Vollzeit', en: 'Full-time' },
      startDate: { de: 'September 2026', en: 'September 2026' },
      about: {
        de: 'Du arbeitest direkt am Kern der RA|AI|RO Plattform: AI-Pipelines, Workflow-Automatisierung und interne Operations-Tools. Du baust mit unseren Senior-Engineers Features für unsere Mitglieder und lernst, wie ein Schweizer AI-Non-Profit operativ funktioniert.',
        en: 'You work at the core of the RA|AI|RO platform: AI pipelines, workflow automation, and internal operations tools. You build features with our senior engineers and learn how a Swiss AI non-profit operates.',
      },
      skills: ['Prompt Engineering', 'Workflow Automation', 'Python / TypeScript', 'Operations Mindset'],
    },
    {
      id: 'pagararriendo-pt', company: 'Pagararriendo.com', programme: 'remote',
      title: { de: 'PropTech Engineering', en: 'PropTech Engineering' },
      location: 'Bogotá · Remote',
      duration: { de: '6 Monate', en: '6 months' },
      type: { de: 'Vollzeit', en: 'Full-time' },
      startDate: { de: 'August 2026', en: 'August 2026' },
      about: {
        de: 'Pagararriendo automatisiert das kolumbianische Mietzahlungs- und Vermietungssystem. Du entwickelst APIs, optimierst Datenbanken und arbeitest an Integrationen mit lokalen Banken und Versicherungen.',
        en: 'Pagararriendo automates the Colombian rental payment and property management system. You build APIs, optimize databases, and work on integrations with local banks and insurance companies.',
      },
      skills: ['TypeScript / Node', 'PostgreSQL', 'REST APIs', 'Stripe / Local-Payments'],
    },
    {
      id: 'country-portals-cm', company: 'Country Portals', programme: 'remote',
      title: { de: 'Community Manager', en: 'Community Manager' },
      location: 'Remote · LatAm',
      duration: { de: '6 Monate', en: '6 months' },
      type: { de: 'Teilzeit', en: 'Part-time' },
      startDate: { de: 'Juli 2026', en: 'July 2026' },
      about: {
        de: 'Unsere City- und Country-Portale brauchen lokale Community-Manager:innen, die Inhalte kuratieren, soziale Kanäle bespielen und Bürger:innen einbinden. Du wirst Teil eines verteilten LatAm-Teams.',
        en: 'Our city and country portals need local community managers to curate content, manage social channels, and engage citizens. You\'ll be part of a distributed LatAm team.',
      },
      skills: ['Content Strategy', 'ES / DE / EN', 'Social Media', 'Local SEO'],
    },
    {
      id: 'jobseekers-coach', company: 'Jobseekers', programme: 'remote',
      title: { de: 'Career Placement Coach', en: 'Career Placement Coach' },
      location: 'Remote · DACH',
      duration: { de: '4 Monate', en: '4 months' },
      type: { de: 'Teilzeit', en: 'Part-time' },
      startDate: { de: 'September 2026', en: 'September 2026' },
      about: {
        de: 'Du unterstützt Menschen, die ihren Arbeitsplatz durch KI verloren haben — mit unserem AI Application Bot, persönlichem Coaching und strukturierter Bewerbungsbegleitung. Direkter Impact, sichtbar in Wochen.',
        en: 'You support people who lost their jobs due to AI — with our AI Application Bot, personal coaching, and structured job-search support. Direct impact, visible within weeks.',
      },
      skills: ['Career Coaching', 'AI Tooling', 'HR Basics', 'Empathy & Clarity'],
    },
    {
      id: 'lehder-law-legaltech', company: 'LEHDER LAW CO|CH', programme: 'both',
      title: { de: 'Legal-Tech Engineer', en: 'Legal-Tech Engineer' },
      location: 'Thun · Bogotá',
      duration: { de: '12 Monate', en: '12 months' },
      type: { de: 'Vollzeit', en: 'Full-time' },
      startDate: { de: 'Januar 2027', en: 'January 2027' },
      about: {
        de: 'LEHDER LAW automatisiert anwaltliche Workflows zwischen Schweizer und kolumbianischem Recht. Du arbeitest an Dokumenten-AI, E-Akten und mandatsbezogenen Pipelines.',
        en: 'LEHDER LAW automates legal workflows between Swiss and Colombian law. You work on document AI, digital case files, and mandate-related pipelines — directly with the firm\'s partners.',
      },
      skills: ['LegalTech', 'Document AI / OCR', 'Swiss + CO Law (Basics)', 'Workflow Design'],
    },
    {
      id: 'esunachimba-marketing', company: 'esunachimba!', programme: 'remote',
      title: { de: 'Local Marketing — Colombia', en: 'Local Marketing — Colombia' },
      location: 'Líbano, Tolima · Remote',
      duration: { de: '4 Monate', en: '4 months' },
      type: { de: 'Vollzeit', en: 'Full-time' },
      startDate: { de: 'August 2026', en: 'August 2026' },
      about: {
        de: 'esunachimba! ist die digitale Heimat unserer kolumbianischen Stadtportale. Du planst lokale Kampagnen, kuratierst Veranstaltungen und baust die User-Base in Tolima auf.',
        en: 'esunachimba! is the digital home of our Colombian city portals. You plan local campaigns, curate events, and build the user base in Tolima.',
      },
      skills: ['Local Marketing', 'Spanish (native)', 'Community Building', 'Analytics'],
    },
    {
      id: 'us-politics24-editorial', company: 'US-Politics24', programme: 'remote',
      title: { de: 'Editorial Researcher', en: 'Editorial Researcher' },
      location: 'Remote',
      duration: { de: '6 Monate', en: '6 months' },
      type: { de: 'Teilzeit', en: 'Part-time' },
      startDate: { de: 'September 2026', en: 'September 2026' },
      about: {
        de: 'Du recherchierst und schreibst ausgewogene Beiträge zur US-Politik für unsere News-Hubs. Faktencheck und redaktionelle Sorgfalt stehen im Zentrum.',
        en: 'You research and write balanced pieces on US politics for our news hubs. Fact-checking, source evaluation, and editorial care are at the center of the work.',
      },
      skills: ['Research & Fact-Checking', 'English (C1+)', 'Political Literacy', 'Editorial Standards'],
    },
    {
      id: 'swiss-toys-ecom', company: 'Swiss Toys', programme: 'thun',
      title: { de: 'Luxury E-Commerce', en: 'Luxury E-Commerce' },
      location: 'Schweiz · Remote',
      duration: { de: '6 Monate', en: '6 months' },
      type: { de: 'Vollzeit', en: 'Full-time' },
      startDate: { de: 'Oktober 2026', en: 'October 2026' },
      about: {
        de: 'Swiss Toys kuratiert hochwertiges Schweizer Spielzeug für den europäischen und LatAm-Markt. Du arbeitest an Produktkatalogen, Kampagnen und dem Cloudflare-Pages-Storefront.',
        en: 'Swiss Toys curates high-quality Swiss toys for the European and LatAm market. You work on product catalogs, campaigns, supplier relationships, and the Cloudflare Pages storefront.',
      },
      skills: ['E-Commerce', 'Cloudflare Pages', 'Product Marketing', 'Supply Chain Basics'],
    },
    {
      id: 'uv-org-platform', company: 'Unternehmensverein.org', programme: 'remote',
      title: { de: 'DACH-LinkedIn Platform Ops', en: 'DACH LinkedIn Platform Ops' },
      location: 'Remote · DACH',
      duration: { de: '6 Monate', en: '6 months' },
      type: { de: 'Vollzeit', en: 'Full-time' },
      startDate: { de: 'September 2026', en: 'September 2026' },
      about: {
        de: 'Unternehmensverein.org ist das LinkedIn-Äquivalent für den DACH-Raum. Du arbeitest an Community-Growth, Content-Moderation und der Integration unserer RAAIRO-Fellows.',
        en: 'Unternehmensverein.org is the LinkedIn equivalent for the DACH region. You work on community growth, content moderation, and integration of RAAIRO fellows into the network.',
      },
      skills: ['Community Growth', 'Content Moderation', 'B2B Networking', 'Platform Ops'],
    },
    {
      id: 'uv-ch-membership', company: 'Unternehmensverein.ch', programme: 'both',
      title: { de: 'Swiss Business Association', en: 'Swiss Business Association' },
      location: 'Thun · Remote',
      duration: { de: '6 Monate', en: '6 months' },
      type: { de: 'Vollzeit', en: 'Full-time' },
      startDate: { de: 'Oktober 2026', en: 'October 2026' },
      about: {
        de: 'Unternehmensverein.ch ist die Schweizer Business Association für KMU. Du unterstützt die Mitgliederakquise, organisierst lokale Events und entwickelst Partnerschaften.',
        en: 'Unternehmensverein.ch is the Swiss business association for SMEs. You support member acquisition, organize local events, and develop partnerships with Swiss trade associations.',
      },
      skills: ['Membership Development', 'Event Organisation', 'B2B Acquisition', 'Swiss Business Network'],
    },
  ];

  const TIERS = {
    de: [
      {
        id: 'students', label: 'Schüler & Studierende', price: '€450',
        items: ['Praktikum bei einem Partnerunternehmen', 'Sprachkurs (sobald verfügbar)', 'Applied AI Training mit Claude & Google', 'Abschlusszertifikat'],
      },
      {
        id: 'professionals', label: 'Berufseinsteiger & Jobsuchende', price: '€1.500',
        items: ['Praktikum bei einem Partnerunternehmen', 'Sprachkurs (Deutsch / Schweizerdeutsch)', 'Applied AI Training', 'Abschlusszertifikat', 'AI Application Bot', 'Persönlicher Career Coach', 'CV-Optimierung', '@mjm.li E-Mail'],
      },
      {
        id: 'volunteer', label: 'Volunteer', price: 'Kostenlos', isFree: true,
        items: ['Freiwilligenvereinbarung mit RA|AI|RO', 'Zugang zu internen Tools & Plattformen', 'Abschlusszertifikat', 'Netzwerk & Community'],
      },
    ],
    en: [
      {
        id: 'students', label: 'Students', price: '€450',
        items: ['Internship at a partner company', 'Language course (when available)', 'Applied AI Training with Claude & Google', 'Completion certificate'],
      },
      {
        id: 'professionals', label: 'Career starters & job seekers', price: '€1,500',
        items: ['Internship at a partner company', 'Language course (German / Swiss German)', 'Applied AI Training', 'Completion certificate', 'AI Application Bot', 'Personal career coach', 'CV optimisation', '@mjm.li email address'],
      },
      {
        id: 'volunteer', label: 'Volunteer', price: 'Free', isFree: true,
        items: ['Volunteer agreement with RA|AI|RO', 'Access to internal tools & platforms', 'Completion certificate', 'Network & community'],
      },
    ],
  };

  const PROGRAMME_LABEL = {
    de: { remote: 'Remote', thun: 'Thun Immersiv', both: 'Remote & Thun' },
    en: { remote: 'Remote', thun: 'Thun Immersive', both: 'Remote & Thun' },
  };

  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 },
    deutschBtn: {
      display: 'block', margin: '0.75rem 1.25rem 0',
      background: 'var(--color-forest-900)', color: '#fff', border: 'none',
      borderRadius: 14, padding: '12px 16px', cursor: 'pointer', textAlign: 'left', width: 'calc(100% - 2.5rem)',
    },
    deutschBtnLabel: { fontSize: '0.65rem', textTransform: 'uppercase', letterSpacing: '0.2em', color: 'rgba(255,255,255,0.65)', fontWeight: 600 },
    deutschBtnTitle: { fontWeight: 700, fontSize: '0.9rem', marginTop: 2 },
    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: '14px', cursor: 'pointer', boxShadow: '0 1px 3px rgba(28,35,32,0.06)' },
    cardHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 },
    company: { fontSize: '0.6rem', textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--text-muted)', fontWeight: 600 },
    cardTitle: { fontWeight: 700, fontSize: '0.88rem', lineHeight: 1.3, marginTop: 2, color: 'var(--text-default)' },
    badge: { fontSize: '0.6rem', fontWeight: 700, borderRadius: 999, padding: '3px 8px', background: '#f0fdf4', color: '#166534', whiteSpace: 'nowrap', flexShrink: 0 },
    meta: { fontSize: '0.7rem', color: 'var(--text-muted)', marginTop: 6, display: 'flex', flexWrap: 'wrap', gap: '4px 12px' },
    about: { fontSize: '0.78rem', lineHeight: 1.6, color: 'var(--text-muted)', marginTop: 8, display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden' },
    skills: { display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 8 },
    skill: { fontSize: '0.6rem', background: '#f8f7f2', border: '1px solid rgba(28,35,32,0.1)', borderRadius: 6, padding: '3px 7px', color: 'var(--text-muted)', fontWeight: 600 },
    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' },
    detailH1: { fontFamily: 'serif', fontSize: '1.3rem', fontWeight: 700, lineHeight: 1.2, color: 'var(--text-default)', marginTop: 6 },
    detailMeta: { fontSize: '0.72rem', color: 'var(--text-muted)', marginTop: 4, display: 'flex', flexWrap: 'wrap', gap: '4px 12px' },
    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 },
    tierCard: (free) => ({
      background: free ? 'var(--color-forest-900)' : '#fff',
      color: free ? '#fff' : 'var(--text-default)',
      borderRadius: 14, border: '1px solid rgba(28,35,32,0.08)', padding: '14px', marginBottom: 10,
    }),
    tierLabel: (free) => ({ fontSize: '0.65rem', textTransform: 'uppercase', letterSpacing: '0.18em', fontWeight: 700, color: free ? 'rgba(255,255,255,0.6)' : 'var(--text-muted)' }),
    tierPrice: { fontFamily: 'serif', fontSize: '1.4rem', fontWeight: 700, marginTop: 2, marginBottom: 10 },
    tierItem: (free) => ({ fontSize: '0.78rem', lineHeight: 1.6, color: free ? 'rgba(255,255,255,0.85)' : 'var(--text-muted)', display: 'flex', gap: 6 }),
    applyBtn: { display: 'block', width: '100%', background: 'var(--color-forest-900)', color: '#fff', border: 'none', borderRadius: 12, padding: '13px', fontSize: '0.88rem', fontWeight: 700, cursor: 'pointer', marginTop: 12 },
    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 OpportunityDetail({ opp, onBack, lk, tiers }) {
    return (
      <div style={s.detailPage}>
        <button style={s.back} onClick={onBack}>‹ {lk === 'de' ? 'Zurück' : 'Back'}</button>
        <div style={{ padding: '0 1.25rem' }}>
          <div style={s.company}>{opp.company}</div>
          <h1 style={s.detailH1}>{opp.title[lk]}</h1>
          <div style={s.detailMeta}>
            <span>📍 {opp.location}</span>
            <span>⏱ {opp.duration[lk]}</span>
            <span>🗓 {opp.startDate[lk]}</span>
            <span>💼 {opp.type[lk]}</span>
          </div>

          <p style={s.detailAbout}>{opp.about[lk]}</p>

          <div style={s.sectionLabel}>{lk === 'de' ? 'Skills' : 'Skills'}</div>
          <div style={s.skills}>
            {opp.skills.map(sk => <span key={sk} style={{ ...s.skill, fontSize: '0.72rem' }}>{sk}</span>)}
          </div>

          <div style={s.sectionLabel}>{lk === 'de' ? 'Programm-Preise' : 'Programme pricing'}</div>
          {tiers.map(t => (
            <div key={t.id} style={s.tierCard(t.isFree)}>
              <div style={s.tierLabel(t.isFree)}>{t.label}</div>
              <div style={s.tierPrice}>{t.price}</div>
              {t.items.map(item => (
                <div key={item} style={s.tierItem(t.isFree)}>
                  <span>{t.isFree ? '✓' : '·'}</span>
                  <span>{item}</span>
                </div>
              ))}
            </div>
          ))}

          <button style={s.applyBtn}>{lk === 'de' ? 'Jetzt bewerben →' : 'Apply now →'}</button>
        </div>
      </div>
    );
  }

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

    const tiers = TIERS[lk];
    const tracks = TRACKS[lk];

    if (detail) {
      return <OpportunityDetail opp={detail} onBack={() => setDetail(null)} lk={lk} tiers={tiers} />;
    }

    const visible = OPPORTUNITIES.filter(o => track === 'alle' || o.programme === track);
    const plabel = PROGRAMME_LABEL[lk];

    return (
      <div style={s.page}>
        <div style={s.header}>
          <h1 style={s.h1}>{lk === 'de' ? 'Praktika & Chancen' : 'Internships & Opportunities'}</h1>
          <p style={s.lead}>
            {lk === 'de'
              ? 'Als Teil unserer bezahlten Trainingsprogramme wählen Sie Ihr Wunsch-Praktikum bei einem unserer Partnerunternehmen.'
              : 'As part of our paid training programmes, choose your preferred internship at one of our partner companies.'}
          </p>
        </div>

        <button style={s.deutschBtn} onClick={() => nav('deutsch')}>
          <div style={s.deutschBtnLabel}>{lk === 'de' ? 'Sprachprogramm' : 'Language programme'}</div>
          <div style={s.deutschBtnTitle}>🇩🇪 {lk === 'de' ? 'Deutsch lernen — A1 bis B2 →' : 'Learn German — A1 to B2 →'}</div>
        </button>

        <div style={s.chips}>
          {tracks.map(t => (
            <button key={t.key} style={s.chip(track === t.key)} onClick={() => setTrack(t.key)}>
              {t.label}
            </button>
          ))}
        </div>

        <div style={s.list}>
          {visible.length === 0 ? (
            <div style={s.empty}>{lk === 'de' ? 'Keine Praktika gefunden.' : 'No internships found.'}</div>
          ) : visible.map(o => (
            <div key={o.id} style={s.card} onClick={() => setDetail(o)}>
              <div style={s.cardHeader}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={s.company}>{o.company}</div>
                  <div style={s.cardTitle}>{o.title[lk]}</div>
                </div>
                <span style={s.badge}>{plabel[o.programme]}</span>
              </div>
              <div style={s.meta}>
                <span>📍 {o.location}</span>
                <span>⏱ {o.duration[lk]}</span>
                <span>🗓 {o.startDate[lk]}</span>
              </div>
              <div style={s.about}>{o.about[lk]}</div>
              <div style={s.skills}>
                {o.skills.map(sk => <span key={sk} style={s.skill}>{sk}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  window.RAAIROBootcamps = BootcampsScreen;
})();
