import { DOMAIN_LABELS } from '../types'

export default function DokumentationTab() {
  return (
    <div className="space-y-6">
      {/* Quick Start Guide */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Quick Start Guide</h3>
        <div className="space-y-4">
          {[
            { num: 1, title: 'Datenbank initialisieren', desc: 'Klicken Sie auf "Datenbank initialisieren" im Dashboard, um die Seed-Daten zu laden.' },
            { num: 2, title: 'Controls reviewen', desc: 'Gehen Sie zum Control Catalogue und bewerten Sie den Status jedes Controls.' },
            { num: 3, title: 'Evidence hochladen', desc: 'Laden Sie Nachweise (Scan-Reports, Policies, Screenshots) fuer Ihre Controls hoch.' },
            { num: 4, title: 'Risiken bewerten', desc: 'Dokumentieren Sie identifizierte Risiken in der Risk Matrix.' },
            { num: 5, title: 'Audit Export', desc: 'Generieren Sie ein ZIP-Paket fuer externe Pruefer.' },
          ].map((step) => (
            <div key={step.num} className="flex gap-4">
              <div className="w-8 h-8 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center font-bold flex-shrink-0">{step.num}</div>
              <div>
                <p className="font-medium text-slate-900">{step.title}</p>
                <p className="text-sm text-slate-600">{step.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Regulatory Framework */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Abgedeckte Verordnungen</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h4 className="font-medium text-slate-900 mb-2">EU-Verordnungen & Richtlinien</h4>
            <ul className="text-sm text-slate-600 space-y-1">
              <li>- DSGVO (Datenschutz-Grundverordnung)</li>
              <li>- AI Act (KI-Verordnung)</li>
              <li>- CRA (Cyber Resilience Act)</li>
              <li>- NIS2 (Netzwerk- und Informationssicherheit)</li>
              <li>- DSA (Digital Services Act)</li>
              <li>- Data Act (Datenverordnung)</li>
              <li>- DGA (Data Governance Act)</li>
              <li>- ePrivacy-Richtlinie</li>
            </ul>
          </div>
          <div>
            <h4 className="font-medium text-slate-900 mb-2">Deutsche Standards</h4>
            <ul className="text-sm text-slate-600 space-y-1">
              <li>- BSI-TR-03161-1 (Mobile Anwendungen Teil 1)</li>
              <li>- BSI-TR-03161-2 (Mobile Anwendungen Teil 2)</li>
              <li>- BSI-TR-03161-3 (Mobile Anwendungen Teil 3)</li>
              <li>- TDDDG (Telekommunikation-Digitale-Dienste-Datenschutz)</li>
            </ul>
          </div>
        </div>
      </div>

      {/* Control Domains */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Control Domains</h3>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
          {Object.entries(DOMAIN_LABELS).map(([key, label]) => (
            <div key={key} className="border rounded-lg p-4">
              <span className="font-mono text-xs text-primary-600 bg-primary-50 px-2 py-0.5 rounded">{key}</span>
              <p className="font-medium text-slate-900 mt-2">{label}</p>
            </div>
          ))}
        </div>
      </div>

      {/* External Links */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Externe Ressourcen</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {[
            { href: 'https://eur-lex.europa.eu/eli/reg/2016/679/oj/eng', label: 'DSGVO - EUR-Lex' },
            { href: 'https://eur-lex.europa.eu/eli/reg/2024/1689/oj/eng', label: 'AI Act - EUR-Lex' },
            { href: 'https://eur-lex.europa.eu/eli/reg/2024/2847/oj/eng', label: 'CRA - EUR-Lex' },
            { href: 'https://www.bsi.bund.de/DE/Themen/Unternehmen-und-Organisationen/Standards-und-Zertifizierung/Technische-Richtlinien/TR-nach-Thema-sortiert/tr03161/tr-03161.html', label: 'BSI-TR-03161 - BSI' },
          ].map((link) => (
            <a
              key={link.href}
              href={link.href}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 p-3 border rounded-lg hover:bg-slate-50"
            >
              <svg className="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
              </svg>
              <span className="text-sm text-slate-700">{link.label}</span>
            </a>
          ))}
        </div>
      </div>
    </div>
  )
}