// Market view + Courses view + Plan view — all secondary tabs

function MarketView({ persona, onNav }) {
  const { t, f } = useTheme();
  const m = MARKET[persona.branche];
  return (
    <div className="paper-grain proto-scroll" style={{ width: '100%', height: '100%', background: t.paper, overflow: 'auto', position: 'relative' }}>
      <div style={{ position: 'relative', zIndex: 2 }}>
        <NavBar active="market" onNav={onNav} persona={persona} />
        <div style={{ padding: '48px 48px 32px' }}>
          <Eyebrow>Arbeitsmarkt — {persona.branche} · {persona.region}</Eyebrow>
          <Display size={52} style={{ marginTop: 10 }}>
            {m.openJobs.toLocaleString('de-DE')} offene Stellen. <em style={{ fontStyle: 'italic', color: t.accent }}>{m.trend}</em> Quartal.
          </Display>
        </div>
        <Rule />

        <div style={{ padding: '32px 48px', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 56 }}>
          <div>
            <Eyebrow style={{ marginBottom: 14 }}>Nachfrage nach Rolle — sortiert nach Profil-Match</Eyebrow>
            <div style={{ display: 'grid', gridTemplateColumns: '2.2fr 1fr 1fr 1.2fr 0.6fr', gap: 12, padding: '8px 0', borderBottom: `1px solid ${t.rule}` }}>
              {['Rolle', 'Offen', 'Median', 'Match', ''].map(h => <Mono key={h} size={10}>{h}</Mono>)}
            </div>
            {m.top.map((j, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '2.2fr 1fr 1fr 1.2fr 0.6fr', gap: 12, padding: '18px 0', borderBottom: `1px solid ${t.rule}`, alignItems: 'center' }}>
                <div>
                  <div style={{ fontFamily: f.display, fontSize: 19, fontWeight: f.displayWeight, color: t.ink }}>{j.title}</div>
                  <Mono size={10}>{persona.region} · hybrid/remote möglich</Mono>
                </div>
                <div style={{ fontFamily: f.sans, fontSize: 14, color: t.ink }}>{fmtNum(j.n)}</div>
                <div style={{ fontFamily: f.sans, fontSize: 14, color: t.ink }}>{fmtEUR(j.medianSalary)}</div>
                <Bar value={j.match} />
                <div style={{ fontFamily: f.display, fontSize: 20, fontWeight: f.displayWeight, color: t.accent, textAlign: 'right' }}>{j.match}</div>
              </div>
            ))}
          </div>
          <div>
            <Eyebrow style={{ marginBottom: 14 }}>Entwicklung — letzte 12 Monate</Eyebrow>
            <div style={{ background: t.paper2, padding: 20, border: `1px solid ${t.rule}`, marginBottom: 24 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <Mono size={10}>Offene Stellen {persona.branche}</Mono>
                <Mono size={10}>{m.trend}</Mono>
              </div>
              <Spark
                data={m.trendDir === 'up' ? [38,39,41,42,44,43,45,46,47,47,48,48] : [18,17,17,16,16,15,15,14,14,14,14,14]}
                w={360} h={80} color={t.accent} style={{ marginTop: 10 }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
                <Mono size={9}>05/25</Mono>
                <Mono size={9}>04/26</Mono>
              </div>
            </div>
            <Eyebrow style={{ marginBottom: 10 }}>Gefragte Skills</Eyebrow>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {m.skills.map(s => <Pill key={s} tone="accent">{s}</Pill>)}
            </div>
            <div style={{ marginTop: 24, padding: 18, background: t.tint }}>
              <Mono size={10}>Einschätzung</Mono>
              <Body size={14} style={{ marginTop: 8, fontStyle: 'italic' }}>
                {m.trendDir === 'up'
                  ? `In Ihrer Branche entstehen derzeit netto Stellen. Mit Ihrem Profil realistisch: ein neuer Job binnen 4–6 Monaten.`
                  : `Der Markt ist enger geworden. Ein lateraler Wechsel oder eine gezielte Weiterbildung verbessert Ihre Chancen deutlich.`}
              </Body>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function CoursesView({ persona, onNav }) {
  const { t, f } = useTheme();
  const courses = COURSES[persona.branche] || [];
  return (
    <div className="paper-grain proto-scroll" style={{ width: '100%', height: '100%', background: t.paper, overflow: 'auto', position: 'relative' }}>
      <div style={{ position: 'relative', zIndex: 2 }}>
        <NavBar active="courses" onNav={onNav} persona={persona} />
        <div style={{ padding: '48px 48px 32px' }}>
          <Eyebrow>Umschulung — für Ihr Profil kuratiert</Eyebrow>
          <Display size={52} style={{ marginTop: 10 }}>
            {courses.length} Kurse. Alle <em style={{ fontStyle: 'italic', color: t.accent }}>förderfähig</em>.
          </Display>
          <Body size={16} style={{ maxWidth: 680, marginTop: 14 }}>
            Neutral sortiert nach Profil-Match. Wir bekommen eine Vermittlungsprovision, wenn Sie einen Platz annehmen — die Reihenfolge beeinflusst das nicht.
          </Body>
        </div>
        <Rule />
        <div style={{ padding: '32px 48px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {courses.map((c, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '80px 1fr 220px 140px',
              gap: 28, padding: '24px 24px', alignItems: 'center',
              background: i === 0 ? t.paper2 : 'transparent',
              border: `1px solid ${t.rule}`,
            }}>
              <div>
                <Mono size={10}>№{String(i+1).padStart(2,'0')}</Mono>
                <div style={{ fontFamily: f.display, fontSize: 48, fontWeight: f.displayWeight, color: t.accent, lineHeight: 1, marginTop: 6 }}>{c.match}</div>
                <Mono size={9}>Match</Mono>
              </div>
              <div>
                <div style={{ fontFamily: f.display, fontSize: 26, fontWeight: f.displayWeight, color: t.ink, lineHeight: 1.15 }}>{c.title}</div>
                <div style={{ display: 'flex', gap: 10, marginTop: 10, flexWrap: 'wrap', alignItems: 'center' }}>
                  <Mono size={11}>{c.provider}</Mono>
                  <span style={{ color: t.rule }}>|</span>
                  <Mono size={11}>{c.weeks} Wochen</Mono>
                  <span style={{ color: t.rule }}>|</span>
                  <Mono size={11}>{c.format}</Mono>
                  <span style={{ color: t.rule }}>|</span>
                  <Mono size={11}>Start {c.starts}</Mono>
                </div>
                <div style={{ marginTop: 12 }}>
                  {c.funded && <Pill tone="good">Bildungsgutschein möglich</Pill>}
                </div>
              </div>
              <div>
                <Mono size={10}>Kosten</Mono>
                <div style={{ fontFamily: f.display, fontSize: 22, fontWeight: f.displayWeight, color: t.ink, textDecoration: c.funded ? 'line-through' : 'none', textDecorationColor: t.muted, opacity: c.funded ? 0.5 : 1 }}>{fmtEUR(c.price)}</div>
                {c.funded && <Mono size={10} style={{ color: t.good }}>bei Bewilligung: € 0</Mono>}
              </div>
              <div style={{ textAlign: 'right' }}>
                <Btn variant="primary" size="sm">Details →</Btn>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function PlanView({ persona, onNav }) {
  const { t, f } = useTheme();
  const alg = computeAlg1(persona);
  const steps = [
    { n: '01', due: 'bis ' + new Date(Date.now() + 3*864e5).toLocaleDateString('de-DE'), t: 'Arbeitssuchend melden', s: 'Persönlich, online oder telefonisch bei der Agentur für Arbeit. Frist: 3 Tage nach Kenntnis der Kündigung.', done: true },
    { n: '02', due: persona.ended, t: 'Arbeitslos melden', s: 'Am ersten Tag ohne Beschäftigung. Sonst droht Anspruchsverlust. Geht online über arbeitsagentur.de.', done: false },
    { n: '03', due: 'Woche 1', t: 'ALG1-Antrag einreichen', s: 'Wir haben die Formularfelder auf Basis Ihrer Antworten vorausgefüllt. Sie müssen nur prüfen & einreichen.', done: false, cta: 'Vorausgefüllten Antrag öffnen' },
    { n: '04', due: 'Woche 2', t: 'Vermittlungsgespräch vorbereiten', s: 'Welche Rolle, welche Region, welcher Kurs — mit konkretem Wunsch kommen Sie mit Bildungsgutschein raus statt mit Vermittlungsvorschlägen rein.', done: false },
    { n: '05', due: 'Woche 3', t: 'Abfindung steuerlich planen', s: persona.hasAbfindung ? `Sie haben ${fmtEUR(persona.hasAbfindung)} bekommen. Prüfen Sie die Fünftelregelung mit Ihrem Steuerberater.` : 'Keine Abfindung — überspringen.', done: false, skip: !persona.hasAbfindung },
    { n: '06', due: 'Woche 4+', t: 'Bewerbung & Umschulung parallel', s: 'Die meisten unserer Nutzer*innen fahren zweigleisig: aktiv bewerben und gleichzeitig einen Kurs beantragen.', done: false },
  ];
  return (
    <div className="paper-grain proto-scroll" style={{ width: '100%', height: '100%', background: t.paper, overflow: 'auto', position: 'relative' }}>
      <div style={{ position: 'relative', zIndex: 2 }}>
        <NavBar active="plan" onNav={onNav} persona={persona} />
        <div style={{ padding: '48px 48px 24px' }}>
          <Eyebrow>Mein Plan — persönlich, datiert, abhakbar</Eyebrow>
          <Display size={52} style={{ marginTop: 10 }}>
            Sechs Schritte bis zum Bescheid.
          </Display>
          <Body size={16} style={{ maxWidth: 680, marginTop: 12 }}>
            Wir halten die Fristen für Sie im Auge. Jeder Schritt kommt mit vorausgefüllten Formularen,
            Mustertexten und Erinnerungen.
          </Body>
        </div>
        <Rule />
        <div style={{ padding: '32px 48px 64px', display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 56 }}>
          <div>
            {steps.filter(s => !s.skip).map((s, i) => (
              <div key={s.n} style={{
                display: 'grid', gridTemplateColumns: '80px 1fr auto', gap: 24,
                padding: '24px 0', borderTop: i === 0 ? 'none' : `1px solid ${t.rule}`,
                alignItems: 'start', opacity: s.done ? 0.55 : 1,
              }}>
                <div>
                  <div style={{
                    width: 44, height: 44, borderRadius: 22,
                    border: `1px solid ${s.done ? t.good : t.rule}`,
                    background: s.done ? t.good : 'transparent',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: f.mono, fontSize: 13, color: s.done ? t.paper : t.muted,
                  }}>{s.done ? '✓' : s.n}</div>
                </div>
                <div>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'baseline', flexWrap: 'wrap' }}>
                    <div style={{ fontFamily: f.display, fontSize: 24, fontWeight: f.displayWeight, color: t.ink, textDecoration: s.done ? 'line-through' : 'none' }}>{s.t}</div>
                    <Mono size={10}>{s.due}</Mono>
                  </div>
                  <Body size={14} style={{ marginTop: 8, maxWidth: 560 }}>{s.s}</Body>
                  {s.cta && <Btn variant="accent" size="sm" style={{ marginTop: 14 }}>{s.cta} →</Btn>}
                </div>
                <div style={{ textAlign: 'right' }}>
                  {!s.done && <Mono size={10}>offen</Mono>}
                </div>
              </div>
            ))}
          </div>
          <div>
            <div style={{ background: t.paper2, padding: 20, border: `1px solid ${t.rule}`, position: 'sticky', top: 20 }}>
              <Eyebrow>Zusammenfassung</Eyebrow>
              <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 14 }}>
                <Row k="ALG1 / Monat" v={fmtEUR(alg.algMonat)} accent />
                <Row k="Bezugsdauer" v={`${alg.months} Monate`} />
                <Row k="Sperrzeit" v={alg.sperr ? `${alg.sperr} Wochen` : 'keine'} />
                <Row k="Abfindung" v={persona.hasAbfindung ? fmtEUR(persona.hasAbfindung) : '—'} />
                <Row k="Bildungsgutschein" v="beantragbar" />
              </div>
              <Rule style={{ margin: '18px 0' }} />
              <Mono size={10}>Erinnerungen per E-Mail aktiv</Mono>
              <Btn variant="ghost" size="sm" style={{ marginTop: 10, width: '100%', justifyContent: 'center' }}>Plan als PDF speichern</Btn>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Row({ k, v, accent }) {
  const { t, f } = useTheme();
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
      <Mono size={10}>{k}</Mono>
      <span style={{
        fontFamily: f.display, fontSize: accent ? 22 : 15, fontWeight: f.displayWeight,
        color: accent ? t.accent : t.ink,
      }}>{v}</span>
    </div>
  );
}

Object.assign(window, { MarketView, CoursesView, PlanView });
