const { Button, Badge, Card, CardContent, Icon, Stepper } = window.BeyonddoDesignSystem_2c6c3a;

// Namespaced: these scripts are Babel-transpiled into one shared global scope,
// so a bare PATH_ICONS here silently overwrote HomeScreen's array of the same
// name and corrupted the homepage's path cards.
const KARRIERE_PATH_ICONS = ['compass', 'graduation-cap', 'briefcase', 'globe'];
const KARRIERE_PATH_ROUTES = ['karriere', 'weiterbildung', 'jobs', null]; // International has no screen

function KarriereScreen({ onNavigate, t }) {
  const k = t.karriere || {};
  const h = t.home;
  if (!t.karriere) return null;

  return (
    <main style={{ maxWidth: 'var(--container-site)', margin: '0 auto', padding: 'var(--space-12) clamp(1rem, 4vw, 5rem) var(--space-20)' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', marginBottom: 'var(--space-10)' }}>
        <Eyebrow>{k.eyebrow}</Eyebrow>
        <h1 style={{ fontSize: 'var(--text-display)', letterSpacing: 'var(--tracking-display)', fontWeight: 800, maxWidth: '20ch' }}>{k.title}</h1>
        <p style={{ fontSize: 'var(--text-body-lg)', color: 'var(--text-muted)', maxWidth: '64ch', lineHeight: 'var(--leading-relaxed)' }}>{k.sub}</p>
      </div>

      <section aria-labelledby="bd-journey" style={{ marginBottom: 'var(--space-16)' }}>
        <h2 id="bd-journey" style={{ fontSize: 'var(--text-h2)', marginBottom: 'var(--space-2)' }}>{k.journeyTitle}</h2>
        <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', marginBottom: 'var(--space-6)' }}>{h.journeyDesc}</p>
        <ol style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 'var(--space-3)' }}>
          {h.journey.map((step, i) => (
            <li key={step}>
              <Card style={{ height: '100%' }}>
                <CardContent style={{ padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
                  <span className="bd-numeric" style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  <span style={{ fontSize: 'var(--text-body)', fontWeight: 600, color: 'var(--text-heading)' }}>{step}</span>
                </CardContent>
              </Card>
            </li>
          ))}
        </ol>
      </section>

      <section aria-labelledby="bd-paths" style={{ marginBottom: 'var(--space-16)' }}>
        <h2 id="bd-paths" style={{ fontSize: 'var(--text-h2)', marginBottom: 'var(--space-6)' }}>{k.pathsTitle}</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 'var(--space-4)' }}>
          {h.paths.map((p, i) => (
            <Card key={p.title} interactive>
              <CardContent style={{ padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', height: '100%' }}>
                <span style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--surface-sunken)', display: 'grid', placeItems: 'center' }}>
                  <Icon name={KARRIERE_PATH_ICONS[i]} size={20} style={{ color: 'var(--ink-600)' }} />
                </span>
                <h3 style={{ fontSize: 'var(--text-h3)' }}>{p.title}</h3>
                <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', lineHeight: 'var(--leading-relaxed)', flex: 1 }}>{p.body}</p>
                <a href={KARRIERE_PATH_ROUTES[i] ? '#/' + KARRIERE_PATH_ROUTES[i] : '#'}
                   onClick={(e) => { e.preventDefault(); KARRIERE_PATH_ROUTES[i] ? onNavigate(KARRIERE_PATH_ROUTES[i]) : comingSoon(p.title); }}
                   style={{ fontSize: 'var(--text-sm)', fontWeight: 600, color: 'var(--primary)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6 }}>
                  {p.title} <Icon name="arrow-right" size={14} />
                </a>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      <Card>
        <CardContent style={{ padding: 'var(--space-10)', display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', alignItems: 'flex-start', background: 'var(--wash-rose)' }}>
          <Badge tone="brand">{k.ctaTitle}</Badge>
          <p style={{ fontSize: 'var(--text-body-lg)', color: 'var(--text-heading)', maxWidth: '52ch', lineHeight: 'var(--leading-relaxed)' }}>{k.ctaBody}</p>
          <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
            <Button onClick={() => onNavigate('register')}>{k.ctaPrimary}</Button>
            <Button variant="outline" onClick={() => onNavigate('chancen')}>{k.ctaSecondary}</Button>
          </div>
          <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{k.ctaNote}</span>
        </CardContent>
      </Card>
    </main>
  );
}

Object.assign(window, { KarriereScreen });
