export default function ArchitekturTab() {
  return (
    <div className="space-y-6">
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h2 className="text-xl font-semibold text-slate-900 mb-4">Systemarchitektur</h2>
        <p className="text-slate-600 mb-6">
          Das Compliance & Audit Framework ist modular aufgebaut und integriert sich nahtlos in die bestehende Breakpilot-Infrastruktur.
        </p>

        {/* Architecture Diagram */}
        <div className="bg-slate-50 rounded-lg p-6 mb-6">
          <pre className="text-sm text-slate-700 font-mono whitespace-pre overflow-x-auto">{`
┌─────────────────────────────────────────────────────────────────────────┐
│                        COMPLIANCE FRAMEWORK                              │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   ┌─────────────┐    ┌─────────────┐    ┌─────────────┐                │
│   │   Next.js   │    │   FastAPI   │    │  PostgreSQL │                │
│   │  Frontend   │───▶│   Backend   │───▶│   Database  │                │
│   │  (Port 3000)│    │  (Port 8000)│    │  (Port 5432)│                │
│   └─────────────┘    └─────────────┘    └─────────────┘                │
│         │                  │                   │                        │
│         │                  │                   │                        │
│   ┌─────▼─────┐      ┌─────▼─────┐      ┌─────▼─────┐                  │
│   │  Admin UI │      │ Compliance │      │  7 Tables │                  │
│   │  /admin/  │      │   Module   │      │ compliance_│                  │
│   │compliance/│      │ /backend/  │      │ regulations│                  │
│   └───────────┘      │compliance/ │      │ _controls  │                  │
│                      └───────────┘      │ _evidence  │                  │
│                                         │ _risks     │                  │
│                                         │ ...        │                  │
│                                         └───────────┘                  │
└─────────────────────────────────────────────────────────────────────────┘
          `}</pre>
        </div>

        {/* Component Details */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="border rounded-lg p-4">
            <h3 className="font-semibold text-slate-900 mb-2">Frontend (Next.js)</h3>
            <ul className="text-sm text-slate-600 space-y-1">
              <li>- Dashboard mit Compliance Score</li>
              <li>- Control Catalogue mit Filtern</li>
              <li>- Evidence Upload & Management</li>
              <li>- Risk Matrix Visualisierung</li>
              <li>- Audit Export Wizard</li>
            </ul>
          </div>

          <div className="border rounded-lg p-4">
            <h3 className="font-semibold text-slate-900 mb-2">Backend (FastAPI)</h3>
            <ul className="text-sm text-slate-600 space-y-1">
              <li>- REST API Endpoints</li>
              <li>- Repository Pattern</li>
              <li>- Pydantic Schemas</li>
              <li>- Seeder Service</li>
              <li>- Export Generator</li>
            </ul>
          </div>

          <div className="border rounded-lg p-4">
            <h3 className="font-semibold text-slate-900 mb-2">Datenbank (PostgreSQL)</h3>
            <ul className="text-sm text-slate-600 space-y-1">
              <li>- compliance_regulations</li>
              <li>- compliance_requirements</li>
              <li>- compliance_controls</li>
              <li>- compliance_control_mappings</li>
              <li>- compliance_evidence</li>
              <li>- compliance_risks</li>
              <li>- compliance_audit_exports</li>
            </ul>
          </div>
        </div>
      </div>

      {/* Data Flow */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Datenfluss</h3>
        <div className="space-y-4">
          {[
            { num: 1, bg: 'bg-blue-50', numBg: 'bg-blue-500', title: 'Regulations & Requirements', desc: 'EU-Verordnungen, BSI-Standards werden als Seed-Daten geladen' },
            { num: 2, bg: 'bg-green-50', numBg: 'bg-green-500', title: 'Controls & Mappings', desc: 'Technische Controls werden Requirements zugeordnet' },
            { num: 3, bg: 'bg-purple-50', numBg: 'bg-purple-500', title: 'Evidence Collection', desc: 'Nachweise werden manuell oder automatisiert erfasst' },
            { num: 4, bg: 'bg-orange-50', numBg: 'bg-orange-500', title: 'Audit Export', desc: 'ZIP-Pakete fuer externe Pruefer generieren' },
          ].map((step) => (
            <div key={step.num} className={`flex items-center gap-4 p-4 ${step.bg} rounded-lg`}>
              <div className={`w-8 h-8 ${step.numBg} text-white rounded-full flex items-center justify-center font-bold`}>{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>
    </div>
  )
}