export function LegalCorpusTab() {
  return (
    <div className="space-y-6">
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="font-semibold text-slate-800 text-lg mb-4">Legal RAG Corpus</h3>
        <p className="text-slate-600 mb-4">
          Das System verwendet einen semantischen Suchindex mit 2.274 Chunks aus 19 EU-Regulierungen
          fuer rechtsgrundlagenbasierte Erklaerungen.
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
            <h4 className="font-medium text-blue-800 mb-2">Indexierte Regulierungen</h4>
            <ul className="text-sm text-blue-700 space-y-1">
              <li>DSGVO - Datenschutz-Grundverordnung</li>
              <li>AI Act - EU KI-Verordnung</li>
              <li>NIS2 - Cybersicherheits-Richtlinie</li>
              <li>CRA - Cyber Resilience Act</li>
              <li>Data Act - Datengesetz</li>
              <li>DSA/DMA - Digital Services/Markets Act</li>
              <li>DPF - EU-US Data Privacy Framework</li>
              <li>BSI-TR-03161 - Digitale Identitaeten</li>
            </ul>
          </div>
          <div className="p-4 bg-green-50 rounded-lg border border-green-200">
            <h4 className="font-medium text-green-800 mb-2">RAG-Funktionalitaet</h4>
            <ul className="text-sm text-green-700 space-y-1">
              <li>Hybride Suche (Dense + BM25)</li>
              <li>Semantisches Chunking</li>
              <li>Cross-Encoder Reranking</li>
              <li>Artikel-Referenz-Extraktion</li>
              <li>Mehrsprachig (DE/EN)</li>
            </ul>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="font-semibold text-slate-800 mb-4">Verwendung im System</h3>
        <div className="space-y-3">
          {[
            {
              step: 1,
              title: 'Benutzer fordert Erklaerung an',
              text: 'Nach der Bewertung kann eine LLM-basierte Erklaerung generiert werden.',
            },
            {
              step: 2,
              title: 'Legal RAG Client sucht relevante Artikel',
              text: 'Basierend auf den ausgeloesten Regeln werden passende Gesetzestexte gefunden.',
            },
            {
              step: 3,
              title: 'LLM generiert Erklaerung mit Rechtsgrundlage',
              text: 'Die Erklaerung referenziert konkrete Artikel aus DSGVO, AI Act etc.',
            },
          ].map(({ step, title, text }) => (
            <div key={step} className="flex items-start gap-3">
              <div className="w-8 h-8 bg-purple-100 text-purple-700 rounded-full flex items-center justify-center flex-shrink-0">
                {step}
              </div>
              <div>
                <div className="font-medium text-slate-800">{title}</div>
                <div className="text-sm text-slate-600">{text}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
