const { Button, Badge, Card, CardContent, CardHeader, CardTitle, CardDescription, Icon, Alert, SourceTag } = window.BeyonddoDesignSystem_2c6c3a;

const PATHWAYS = [
  { name: 'Bildungsgutschein', status: 'Möglicherweise relevant', tone: 'external', why: ['Berufliche Neuorientierung', 'Qualifikation erforderlich', 'Weiterbildungsziel identifiziert'], source: 'OFFICIAL_RESOURCE', org: 'Bundesagentur für Arbeit' },
  { name: 'Aufstiegs-BAföG', status: 'Lohnt sich zu besprechen', tone: 'external', why: ['Aufstiegsfortbildung im Zielberuf möglich'], source: 'OFFICIAL_RESOURCE', org: 'BMBF' },
  { name: 'Qualifizierungsgeld', status: 'Mit Beratung klären', tone: 'neutral', why: ['Beschäftigungsverhältnis besteht', 'Strukturwandel im Betrieb möglich'], source: 'OFFICIAL_RESOURCE', org: 'Bundesagentur für Arbeit' },
];

const DOC = ['Karriereziel', 'Aktuelle Situation', 'Vorhandene Kenntnisse', 'Ihre Lücke', 'Empfohlene Qualifikation', 'Mögliche Weiterbildung', 'Möglicher Förderweg', 'Fragen an die Beratung', 'Relevante Dokumente', 'Offizielle Quellen'];

function FundingScreen() {
  return (
    <AppPage>
      <Alert tone="warning" title="Beyonddo entscheidet nicht über Förderung">
        Die endgültige Entscheidung trifft die zuständige Stelle. Wir zeigen mögliche Wege und helfen Ihnen, das Gespräch vorzubereiten.
      </Alert>

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 'var(--space-6)', alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
          {PATHWAYS.map((p) => (
            <Card key={p.name}>
              <CardHeader>
                <span style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--space-3)' }}>
                  <CardTitle as="h2">{p.name}</CardTitle>
                  <Badge tone={p.tone}>{p.status}</Badge>
                </span>
                <CardDescription>Warum dieser Weg für Sie in Frage kommen könnte:</CardDescription>
              </CardHeader>
              <CardContent style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
                <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
                  {p.why.map((w) => (
                    <li key={w} style={{ display: 'flex', gap: 10, fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>
                      <span style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--primary)', marginTop: 8, flex: 'none' }} />{w}
                    </li>
                  ))}
                </ul>
                <SourceTag source={p.source} name={p.org} />
                <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
                  <Button size="sm" variant="outline">Mehr erfahren</Button>
                  <Button size="sm" variant="outline">Weiterbildung finden</Button>
                  <Button size="sm">Gespräch vorbereiten</Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        <Card tone="sunken">
          <CardHeader>
            <CardTitle as="h2">Gesprächsvorbereitung</CardTitle>
            <CardDescription>Ein strukturiertes Dokument für Ihre Beratung — als PDF, zum Drucken oder Speichern.</CardDescription>
          </CardHeader>
          <CardContent style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <ol style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column' }}>
              {DOC.map((d, i) => (
                <li key={d} style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', padding: '9px 0', borderBottom: i < DOC.length - 1 ? '1px solid var(--border-subtle)' : 'none', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>
                  <span className="bd-numeric" style={{ fontSize: 11, color: 'var(--text-muted)', width: 16 }}>{String(i + 1).padStart(2, '0')}</span>{d}
                </li>
              ))}
            </ol>
            <Button fullWidth iconLeft={<Icon name="file-text" size={16} />}>Gesprächsvorbereitung erstellen</Button>
            <div style={{ display: 'flex', gap: 'var(--space-2)' }}>
              <Button size="sm" variant="outline" fullWidth>PDF</Button>
              <Button size="sm" variant="outline" fullWidth>Drucken</Button>
              <Button size="sm" variant="outline" fullWidth>Speichern</Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </AppPage>
  );
}

Object.assign(window, { FundingScreen });